What screen sizes to design for?

Question

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?

Spas K. · Accepted Answer

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.

1ManWolfpack27 · Answer

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.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.