Skip to main content
M
madsih
Inspiring
September 15, 2020
Answered

What screen sizes to design for?

  • September 15, 2020
  • 2 replies
  • 6246 views

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?

    This topic has been closed for replies.
    Correct answer Spas K.

    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.

    2 replies

    Spas K.
    Community Expert
    Spas K.Community ExpertCorrect answer
    Community Expert
    September 15, 2020

    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.

      1
      1ManWolfpack27
      Participant
      September 15, 2020

      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.

        M
        madsihAuthor
        Inspiring
        September 15, 2020

        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

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices