I’m trying to tie together some websites into a single one I can use as a portfolio to send potential employers.
The old sites positioned everything to fixed sizes and I’m converting it over to percentages or em measurements. At the same time, I set a minimum width of like 600px, and it’s responsive at sizes above that but if you shrink the browser down to an inch or two it’ll shrink to a minimum of 600px.
So I’m wondering how many pixels wide is the smallest android/iOS smartphone? Would 600px still go beyond it’s screen size? Should I make it 400px or something else minimum?
.Also I’m using a mobile doctype for the site rather than xhtml transitional, both validate so I dunno what the difference is between the two…
There is a lot of browser extensions to simulate a mobile browser screen size and to switch between them, very useful for testing responsive websites.
Here is a list of some smartphone screen size :
High-end new android smartphones (Galaxy S3, Galaxy Note 2, etc.) : HD (1280x720)
iPhone 5 : 1136x640
iPhone 4 : 960x640
Most android smartphone and almost all Windows Phone : WVGA (Wide VGA : 800x480)
Low-end or old smartphones (including iPhone 3GS) : HVGA (VGA/2 : 480x320)
Old low-end smartphones : QVGA (VGA/4 : 320x240)
So the usual (high-end ?) smartphone width is 800px and I don’t know of any smartphone with a resolution lower than QVGA, so basically the minimum browser width in landscape would be ~320px, which is very small and not suitable for browsing without zooming.
There’s not a lot of smartphone using resolutions between WVGA and HVGA, so i think the strategy is either you support a width >800px or >480px (width a safety margin).
If you manage to get everything to fit in something like 450px in the smallest responsive mode, you’ll be more than fine.
And for the DOCTYPE, note that the XHTML Mobile Profile has been superseded by XHTML Basic 1.1, but personally i would go with an HTML5 DOCTYPE, even without using HTML5 features.
Yes but media queries are not magical wands, you still have to make a number of judicious breakpoints in order to smoothly handle computer screens, tablets, high-end smartphone and low-end smartphones. The natural breakpoints of the website design may not be in keeping with the technical devices breakpoints. And even with the best mobile-first responsive approach, it may not be as trivial to handle a 320px screen-width as well as a desktop screen-width. I guess it depends on the content.
I think you are missing the point a little here. If, for example, you reduce the width of your desktop browser, you’ll see things shift and rearrange, and at a certain point, the layout will break a bit, and that’s where you add in some different styles. If you account for these breakpoints, down to 320px or whatever, then your design should work nicely on the various devices it will encounter. If a set of styles work for your layout from, say, 600px down to 400px, then those styles will work nicely on a device that is, say, 500px wide.
I agree completely with that, I was just trying to make two points :
You can focus your media queries only on the natural breakpoints of the website layout without taking into account the average screen sizes of the device you’re trying to target. It will always work nicely as you say, that’s the beauty of responsive design, but if you know what device you are targeting while writing each set of style, you’ll have a better idea of what layout the user will be expecting, and for that, you’ll have to know what resolutions the mobile devices is running on.
Even with a responsive website, there’ll always be a screen size limit at which your website is not readable anymore. If you take some brand new responsive websites such as microsoft.com or capgemini.com (sorry for the ad, that’s just the first examples that cross my mind), they can take as low as 240px-width before breaking up but they are mostly showcase websites without complex content. In a usual website, even in a 1 column grid, there’ll always be an element that just needs some minimum space. The original question was to determine the minimum resolution a responsive web application should support and i think you can answer that question by looking at the devices you are trying to target and their respective screen sizes.
Edit: And to clarify, I perfectly understand that you can always add some styles set to handle smaller and smaller resolutions (even if that’s not the best approach for responsive design), but the real question is not “can you do it ?” but “do you have to do it ?” and “do you really need it ?”
Indeed, and it’s a site-by-site question. I certainly don’t envy those with complex sites, but I guess this issue makes us face the question over how important that content really is. Anyhow, if someone chooses a really small device, they’ve got to expect to have to scroll sideways now and then. Who knows, Apple might come out with a web-compatible wristwatch or something. If they did, I don’t think I’d even bother designing for that.
How do you scale text? I can get the divs and images to scale fine but the text overhangs the divs, I could try overflow hidden but it would cut words off…
