User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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.

share|improve this question
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 '14 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 '14 at 13:32
@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 '14 at 16:06

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.

share|improve this answer
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 '14 at 18:11
@DA01 - I would say thorough would be a better word to use in that case. You can figure out your scenario by analyzing the mobile device, browser, os, screen resolution, etc. against return visits and pages that they bounce on. – Code Maverick Mar 13 '14 at 19:04
Your media queries should not be based on screen resolutions. – moss Dec 10 '14 at 20:15
@moss - I really meant browser widths, but I think you can easily figure that out from the screen resolutions in Google Analytics. – Code Maverick Dec 10 '14 at 21:38
@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. – moss Dec 12 '14 at 22:15

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.

share|improve this answer

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.

share|improve this answer

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.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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