Responsive design - Most common resolution steps

Question

I am developing a web app that needs to be available on desktop, tablet and mobile.

I know already about responsive design, media queries and all that stuff, but my question here is more about resolutions.

So, this has probably being asked several times already, but i'd like to have some up to date details about it.

If I have to design a responsive app, what steps do you think I should use for media queries?

I found this website that provides quite a lot of details about screen resolution in Europe (I am only interested in Europe):

But the resolutions displayed here are quite a lot.

Do you think that using the default 768px for tablets it's still correct?

And what do you think should be the smallest supported resolution? 320px or more?

Thanks for any feedback

Answer 1

Rather than thinking about screen widths, think about the content. New devices are released all the time so the best strategy is one that's based on your content rather than targeting specific devices.

Assuming you're approaching this mobile first, start at the smallest width and widen the viewport until your content dictates that a breakpoint is necessary to keep line lengths for text readable, to give the best navigation experience, comfortable whitespace etc. Keep expanding and adding breakpoints as needed.

This approach works even better with element queries to target specific components rather than the entire screen.

Further reading:

• Google
• Responsive Design Is

Answer 2

First, understand what tasks each user engages in with each device

It really does depend a lot on that. The way they use your website should determine your design. If you solely base your assumptions on the display, making it your main criterium, you might provide the wrong content. Here is an example:

• User is browsing your app on a full width screen: a wild guess might be 1366×768
• He is about to do task X, but this requires him to check out data from another window
• So he opens a new window and sets up the two side by side; now your resolution has nothing to do with what statistics can give you
• Later on, he gets his tablet and does task Y. The screen size is roughly the same with his setup for task X, yet the needed contents are different.

This is really what responsive design is about. You might prefer to base your assumptions on "device and task" more than on screen size and resolution. However, some common breakpoints still exist.

---

Common breakpoints

The Opera/Chrome browsers have settled some breakpoints, you can check them with Ctrl-Alt-I, Ctrl+Alt+M. They have associated screen size with generic device types. It goes like this:

• Mobile S: 320px
• Mobile M:375px
• Mobile L: 425px
• Tablet: 768px
• Laptop: 1024px
• Laptop L: 1440px
• 4K: 2560px

You may also want to check the breakpoints set by some wellknown CSS frameworks:

• Bootstrap
• Foundation
• Semantic-ui

I hope that helped.

Answer 3

Taken from the material design css file the breaking resolutions are as follows:

• 480px width
• 760px width
• 1024px width

I think you should support resolutions with 360px width and below because they constitute approximately 21% of all currently used resolutions (according to statcounter). 320px resolutions constitute approximately 7-8% of all resolutions.

For the tablet resolution the 1024px width breakpoint is most suitable because the majority of tablet resolutions begin with 1024x600. However, depending on your interface you should try to support at least 95% of the resolutions. This means support for 320px width.

Answer 4

I second Matt's response. It's fine to reference guidelines like Material Design specs, but don't take them as hard rules. Ultimately if you adjust your breakpoints to fit your content, your site will look good on any device.