search

elben / mc-map

Austin Stone MC Map
1 stars 0 forks source link

Responsive breakpoints for tablets #28

Closed jossim closed 11 years ago

jossim commented 11 years ago

I'm looking at the app on a tablet (Kindle Fire HD) and the side bar obscures too much of the map when viewing it vertically. I think a good breakpoint would be around 2.5 times the size of the side bar (825px).

jasontbradshaw commented 11 years ago

The only problem with this is that then it looks odd on things like an iPad. It gets way too wide to be particularly useful.

ios simulator screen shot aug 28 2013 10 22 02 pm

jasontbradshaw commented 11 years ago

I'm open to other options, though, I just don't have time to add/test a new breakpoint at this time. Maybe post-launch?

mrdthompson commented 11 years ago

iPad is most important right now because a few campuses use those in their foyer. Whatever works best for them.

jossim commented 11 years ago

In addition to iPads I believe there are netbooks in foyers, which have low resolution, or iPad minis. Also there are phones with various resolutions.

Having a breakpoint at 400px allows for situations in which the sidebar takes up over 80% of the screen. The breakpoint doesn't necessarily need to be at 825px, but I think it's odd for the sidebar to take up 80% of the screen; at that point perhaps the map should be completely obscured since it's so tiny it'll be frustrating or the break should happen before that happens.

jasontbradshaw commented 11 years ago

There are no non-mobile screens that I know of with a width smaller than 800px, not even tiny netbooks. To me, this says that it doesn't matter if theoretically the sidebar can take up most of the screen - in practice, it won't happen.

The mobile phones that I know about don't present device screen widths of more than 400 pixels, which is why I chose that as the break point. If anything has a width smaller than 400px, it's almost invariably a smartphone, and the design breaks to a top/bottom design.

If this is happening to you, can you help me replicate the experience? On the Kindle Fire HD? The narrowest one (https://developer.amazon.com/sdk/fire/specifications.html) has a width of 600px, and even though that's not an optimal experience, you can rotate it to landscape and it would work fine.

jasontbradshaw commented 11 years ago

I'm closing this, as the statics show that almost everyone used either an iDevice (iPhone, iPad) or a standard desktop browser.