What screen sizes to design for?

[madsih]

We had a conversation at our office that ended nowhere.

What screen sizes do you people design for when creating a website mockup that spans mobile, tablet and desktop?

Mobile width: 320px, 360px, 414px?

Tablet: 768px?

Desktop: 1366px, 1920px?

Is it too much, or are there more?

[1ManWolfpack27]

1920, 1024, 768, and 414. Now that last one will largely depend on your sites analytics. There is a large base of people still using devices at that 320 mark. But as we reviewed our sites analytics we made the decision to go with 414.

[madsih]

I checked our analytics again, the number of our users who used 320 has dipped to 2% since last I checked 😉 thanks for reminding me

[Spas K. · Accepted solution]

The answer depends on what the website is. Sometimes you can get away with less, sometimes you can't.

In most cases, I do 1920 for desktops, 720 for tablets, 360 for phones.

If I know what device(s) the client will look at it on, I use their resolution, so they get the most realistic idea of what it will look like. 1366 laptops are still common, so make sure it looks good on that as well.

For the mobile devices do the lowest possible. If it looks good on the smaller screen, it will look good on the bigger one too. 720 for tablets is fine, and maybe 360 for phones. iPhone SE used to be the most common small screen device, but it has now been replaced, so that resolution (320) will become irrelevant. You should still try to amount for it though. 

If your website is super responsive and needs a lot of reconfigurations between breakpoints, you can add 1 more per device.

The design shouldn't change drastically every 50 pixels anyways.