Highlighted

What screen sizes to design for?

Community Beginner ,
Sep 15, 2020

Copy link to clipboard

Copied

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?

Adobe Community Professional
Correct answer by Spas K. | Adobe Community Professional

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.

Views

54

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

What screen sizes to design for?

Community Beginner ,
Sep 15, 2020

Copy link to clipboard

Copied

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?

Adobe Community Professional
Correct answer by Spas K. | Adobe Community Professional

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.

Views

55

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Sep 15, 2020 0
Community Beginner ,
Sep 15, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 15, 2020 1
Community Beginner ,
Sep 15, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 15, 2020 0
Adobe Community Professional ,
Sep 15, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 15, 2020 1