92

I'm looking to make my website responsive, however this is my first foray into responsive design, and I'm pretty clueless at the moment.

I have no idea what the current state of play is with regard to screen sizes for phones, hand-held gaming machines et al, so I'd appreciate some advice on what the smallest devices are that you currently design for (in pixels). I know that there are more variables to it than this but it would be a start.

Improve this question
6
  • 3
    Answers in pixels aren't going to be good enough. A design which resizes gracefully between a 320 px@100 dpi phone and 720 px@100 dpi tablet (both in portrait orientation) is going to work badly on a 720 px@250 dpi phone (which is physically narrower than the first phone mentioned).
    – Rumi P.
    Mar 13, 2014 at 13:25
  • Ok fair point. I also presume that we're going to have to throw orientation into the pot too.
    – John
    Mar 13, 2014 at 13:32
  • 7
    @RumiP. said phones should be translating the virtual pixels into device pixels. (true on iPhone and, I believe, on newer androids. BlackBerry didn't do this in the past, though) -- In other words, pixel dimensions should be valid with the note that we're talking virtual pixels--not device pixels.
    – DA01
    Mar 13, 2014 at 16:06
  • 1
    I have designed for 1x1 pixels. It was a led indicator for internet connectivity...
    – Jørn E. Angeltveit
    Jun 2, 2017 at 9:49
  • 1
    I'm voting to close this question as off-topic because it's just a survey. And a very old one.
    – Devin
    Jun 3, 2017 at 0:01

6 Answers 6

Reset to default
49

What is the smallest screen size you design for

320px

But, as others have answered it, for best results you actually need to measure your audience and consider how much resources you want to pour into making your site/app work for that <0.1% of users below your determined screen-width threshold.

That said however, unless you are running an obscure site/app for embedded 60px monochrome displays, essentially every single one of your users will have a device screen-width support at least 320px in width. We've been using this number as our threshold and there hadn't been any negative feedback about it.

(source)

Improve this answer
8
  • 1
    I understand that the original question is subjective, but all things considered your answer is very true. You really have to struggle to find a device under 320px, although many phones do have exactly a 320px resolution.
    – Ryan Taylor
    Aug 14, 2017 at 16:52
  • 1
    Got the same 320px info on a google/udemy course classroom.udacity.com/courses/ud893/lessons/3494350031/concepts/…
    – Artur Carvalho
    Mar 29, 2018 at 9:35
  • The source doesn't say anything about 320px though.
    – Muz
    Apr 26, 2019 at 3:50
  • 3
    @Muz it's been likely updated since then, but in my experience, 320px still holds the ground as a good minimum threshold for low-end phones.
    – John Weisz
    Apr 26, 2019 at 13:13
  • 1
    @SethKitchen And screen length on mobile matters since when? Width is the dominating factor because everything else is scrollable anyway
    – Big_Chair
    Jul 20, 2021 at 15:57
30

First of all, since it's your site, don't guess; know!

It's very simple. If you haven't already, add Google Analytics to your site (it's FREE).

From there, you can actually see what Mobile Device, Browser, OS, Screen Resolution, etc. that your visitors use.

Lastly, after you have what you consider enough data, make your decision on what resolutions you want to translate into CSS media queries for your new responsive site.

Improve this answer
14
  • 24
    Though do be careful in analyzing the stats. For example, a company without a responsive site may not have many mobile visitors...not because they don't want to visit, but because they don't because your site doesn't work for them.
    – DA01
    Mar 13, 2014 at 18:11
  • 1
    Your media queries should not be based on screen resolutions.
    – hal
    Dec 10, 2014 at 20:15
  • 2
    @CodeMaverick One of the principles of responsive design is that your design needs to be blind to device size. You should be designing for all viewport widths. Start small then increase the browser width until something breaks, then you put in a media query for that design element. Then repeat. This gives you the benefit of "future proofing" against shifts in popular device sizes. Creating media queries based on what device sizes your site is currently viewed on the most is a flawed method.
    – hal
    Dec 12, 2014 at 22:15
  • 1
    That being said, if you're unsure how small to start your design, existing metrics are a good starting point for figuring this out. I generally just start at 300px and call it good unless there is some edge case which requires me to go smaller.
    – hal
    Dec 12, 2014 at 22:22
  • 2
    I'd want general figures, equivalent to general browser share figures. What devices exist below 320px, and how common they are. That's what I came to this page looking for, actually, and I was surprised to find nothing.
    – user56reinstatemonica8
    Mar 12, 2015 at 15:52
12

There are practical limits on either end of the spectrum IRT max and min screen dimensions.

What those are may vary from project to project. However, on the low end, 320px is pretty much common these days (mainly due to iPhone and Android devices in portrait mode).

There are always exceptions, however, and if your audience fits into one of those exceptions, then that is what you need to take into consideration more than anything.

Improve this answer
5

On this website it gives some info about screen resolutions http://www.websitedimensions.com/

According to that stats the smallest mobile resolution is 320px - however as mentioned in the third table, the actual width(excluding browser's interface) in that case can be 310px

in case of the link expires in the future, here is web archive link: http://web.archive.org/web/20160330034016/http://www.websitedimensions.com/

Improve this answer
3

I'm with @DA01: User data is an important point, but sometimes the decision of going responsive is about the visitors that you want to get, not necessarily about the ones you currently have. I know the web is open to everyone, but you might want to target an specific audience that might not be accessing your site because it is not mobile-friendly yet.

But to answer your question, as a rule of thumb I would target a screen widths of 320px and up.

Improve this answer
1

Rumi's comment above pretty much sums up the reality of the challenge very well.

However, acknowledging that you can't make an ideal experience for every single device, just like you can't make an ideal experience for every single person from every single background with every single need, you'll want to prioritize what to make the experience ideal for. Then, make the experience acceptable and as good as possible for everyone else.

Look at the purpose of your website and the possible uses. Why would someone want to view your site on a mobile device? What would they be hoping to do? How might that be different than what they'd do/expect from the desktop experience? There are several camps as to if and how you should give a degraded experience for mobile, and I won't get into those here.

Also, look at your website analytics. Are people actually trying to view your website on small devices? What pages are they going to? How small? What percentage of traffic is from tiny devices?

In my case, I'm working on a set of applications that integrate together. Mobile is a very important part of this, so even though only about 4% of traffic to the web-app component is from 320px (100dpi) devices, we make it work well for them. However, my longer-term plan is to optimize for down to 480px-ish devices while making things still work (with zooming) on the tiny resolutions. I know some people will disagree with this, but I feel it's better to give a great experience for the largest number of people instead of making sacrifices that affect everyone.

That probably doesn't give you the answer you're looking for, but hopefully it's enough to get you pointed in the direction that's right for your situation.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.