When it comes to responsive design, what is the smallest screen size that I should be required to support?
If my site works down to 320px is that sufficient?
What size are most modern smart phones anyways?
I think 320px is about the smallest you would get in a phone, so yeah it’s not a bad assumption, unless you want to support smart watches 
Remember good responsive design has to be fluid so as to fit any size, and you should not really be designing to a specific screen size. However when things get as small as a smart watch a new design will be required, potentially stripping out all the non-essential stuff.
Hi @Andres_Vaquero,
But that is why I am asking… When you get smaller than say 320px, you have to radically re-design things because our eyes can only process things at a certain minimum size, right?
I agree that a responsive web page would adapt as you go from a desktop to a laptop to say a norm smart phone. In that case, the text and images would just shift around.
But my thinking is that once you go below 320 pixels, then you might have images that combined with text are too small to see and so you might have to start cutting out lots of content. (Can you imagine implementing Amazon.com on an iWatch?!) 
And in fact, I am asking for an e-commerce site I am building…
The first version of my website will not be responsive, but I figure I should start considering these things so for v2.0 I don’t have to make major changes.
So it sounds like - at least to you - 320px might be a good lower limit, huh?
1 Like
Yeah I’d say 320px is a good lower limit to count on.
1 Like
Okay, so if I understand the basics of responsive design, I can start designing pages to work at 320px wide, and then as the display gets wider just make sure things till look good. (Or conversely, I can design things to look good on my (laptop) monitor, and then as I reduce the screen size, things should not break as I go down to 320px, right?)
Of course if you are viewing my website on your watch then you are on your own! 
Yeah either way, I think people like to do a mobile first approach and you can do a bit of research on the topic to see why.
Interesting to note that the latest design trend is to design wide screen elements as you would do in mobile. This is because you will keep UX consistency and a familiar experience in both versions, and also you will save yourself time and headaches restyling elements for one and the other.
Traditional desktop designs do not normally bear in mind hit areas. Remember the hit area with a mouse cursor is much much smaller than with a finger. So you can start mobile first so that you don’t fall for making buttons that are too small to touch with a finger. There’s an established accessible minimum hit area for mobile devices, which if my memory doesn’t fail, is around 35-40px.
If I can get my website done this year, in January I would like to buy a bunch of web design books and learn responsive design for sure!!
What do you mean by “wide screen elements”? 
And how do you design for widescreens if you only have a laptop?
Okay, thanks.
By wide screen I mean not mobile… A laptop would be a wide screen.
Oh, okay, I thought you meant a super-wide, high resolution monitor like a designer might have.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.