27

Should I still be designing at 960px for desktop?

1 year ago from , Product Design at Aaptiv

I've been primarily designing for native mobile, but I'm about to start work on a web project for the first time in a while. I'll be making the design responsive, of course, but I'm trying to decide the best width to at which to design for desktop.

Googling this wasn't very helpful, so I'm turning to all of you: Should I still be designing at 960px for desktop or is there a new standard I should abide by?

Thank you!

39 comments

  • Jan ZhengJan Zheng, 1 year ago

    I usually just have a set of breakpoints that I end up adjusting to fit whatever I'm trying to build. It's completely device-independent, as it only cares about how big the width of the screen. The comments hint at roughly "mobile" or "tablet" but you can't make those assumptions, but they're helpful to think about. Here are my defaults in SCSS:

    // "mobile"

    $width-xs-min: 0px !default; $width-xs-max: 767px !default;

    // "tablet"

    $width-sm-min: 768px !default; $width-sm-max: 991px !default;

    // "desktop"

    $width-md-min: 992px !default; $width-md-max: 1199px !default;

    // "wide"

    $width-lg-min: 1200px !default; $width-lg-max: 2100px !default;

    // Helper Widths

    $width-site-min: 360px !default; // absolute minimum site width

    // sometimes sites have a 'magical' breakpoint based on content structure

    $width-magic: 640px !default;

    $width-content-max: $width-sm-max !default; // max content block width $width-content-max-narrow: $width-magic !default; // max content block width

    $width-content-paragraph: 77ch !default; $width-content-paragraph-narrow: 55ch !default; // adheres to the 75 ch per paragraph rule; ch uses the '0' symbol as char width

    15 points
  • Arix KingArix King, 1 year ago

    I recommend using a 1200px grid now-a-days. Most people have monitors large enough for that.

    10 points
  • Chris LüdersChris Lüders, 1 year ago

    I always start in 320px (mobile 1st ftw) and then go up to 768, 1024 and 1440px. If youre designing in sketch with all the responsive features, you can just scale up your 320px designs and save a LOT of time.

    And YES, 320px is still needed, since there are still some people with 4" devices out there (i just bought an iPhone SE, because i hate this huge smart phones). Scaling UP is always easy, but to fit info in a small screen, is the art of good UI ;)

    5 points
    • , 1 year ago

      Great point, Chris. I'm going to be adopting features from our mobile app to web, so fortunately we already have the mobile designs to scale up :)

      0 points
    • Joe Roberto, 1 year ago

      This is the approach I always will take. Always start with 320, then scale that to 375, and then proceed to tablet (768,1024) and desktop (1366-1440)

      0 points
    • Perttu Talasniemi, 1 year ago

      Always doing mobile 1st sounds very technical approach. Your target audience might be using mainly desktop, so why would you then focus on the mobile? Mobile and desktop platforms are so different that if you primary focus on mobile, then your desktop won't be nearly as perfect as focusing on it.

      2 points
  • R. KamushkenR. Kamushken, 1 year ago

    The same question for 320 px

    3 points
  • Alex Hazel, 1 year ago

    What is a "web project?" A specialized web app? A product website? A business website? Enterprise? Local business? The user dictates the answer.

    Overall, the best approach is to make sure that the website is responsive and looks good at all resolutions. If you are worried about mobile/tablet then start with the iPad size since it is the industry leader/standard. 1024x768

    Everything up from there should be evaluated and designed with responsive break points. 1280 x 768 is a good place to start. (Both my monitors are 1680 x 1050)

    2 points
    • , 1 year ago

      It's a specialized web app.

      We'll definitely be making the website responsive, but, because of limited design bandwidth, we want to focus on a single width first.

      1 point
  • James LaneJames Lane, 1 year ago

    For this web project do you have any data on what screen sizes your users use? I'd go off that. If not I'd then start looking at what screen sizes are used most globally. You can then use that as your base but starting off at your smallest screen size (usually 320px but like Kamushken has said, that could be different now).

    I'd look at: https://ux.stackexchange.com/questions/74798/are-there-devices-narrower-than-320px-and-data-on-their-usage-for-web-browsing

    and: http://viewportsizes.com/

    2 points
  • Paul ArmstrongPaul Armstrong, 1 year ago

    Yes, and everything above and below.

    2 points
  • Jan ZhengJan Zheng, 1 year ago

    Just make sure you TEST it on all possible sizes, and the amount of content both makes sense and sits comfortably.

    2 points
  • Thomas Michael SemmlerThomas Michael Semmler, 1 year ago

    When designing, you might consider changing your mindset about this. Think of it more as a potential maximum container-width. I tend to never go beyond 1400, but like to work with a maximum container width of 1140px.

    That being said, I highly recommend you do not start with the maximum width when designing responsively. Start with the smallest.

    2 points
    • Matt CoadyMatt Coady, 1 year ago

      (developer perspective)

      I completely agree with this.There's such a variety of screen sizes these days it seems counter-intuitive to target anything.

      I usually build my pages at 1400-1500px, build everything with fluid units and constantly resize as I go. If anything looks out of place I just use media queries tailored to that issue.

      3 points
    • Mike StevensonMike Stevenson, 1 year ago

      I'm 100% on board with mobile first, but I find that it's easier to remove elements than add them in. So I like to design the larger screens and just be cognizant of how it will work responsively, then take away anything unnecessary as the screens get smaller.

      Code: definitely mobile 1st all the way.

      0 points
      • Dean HaydenDean Hayden, 1 year ago

        If you have to take away anything you have to question why it’s there in the first place.

        1 point
      • Thomas Michael SemmlerThomas Michael Semmler, 1 year ago

        I find it easier to design for mobile first, because I don't want to find myself removing stuff as it gets smaller, just because I didn't account for that.

        0 points
        • Mike StevensonMike Stevenson, 1 year ago

          I probably should have said re-arrange instead of remove. If your content is dialed then arranging for mobile is a piece of cake. Especially since we have flexbox and grid nowadays.

          0 points
  • Russ BrownRuss Brown, 1 year ago

    Check your users if you can!

    1 point
  • Stefano TirloniStefano Tirloni, 1 year ago

    Depends...

    1 point
  • Louis CoyleLouis Coyle, 1 year ago

    You should try to make it fluid, if the content needs to have a maximum with then just set that. Problem solved!

    1 point
  • Dario Codipietro, 1 year ago

    the last grid I did was:

    • 0-599 phones and phablets
    • 600-899 tablets
    • 900-1199 mostly tablets in landscape mode, also netbooks
    • 1200-1799 most desktops
    • over 1800 anything above

    to get the breakpoints I went through the data available here https://mydevice.io/devices/ and made sensible breakpoints accordingly

    hope this helps

    1 point
  • Dan SimDan Sim, 1 year ago

    Websites, I tend to design for tablet portrait, then go out and in from there. It's kind of a defensive approach as many elements at that ~768 size will scale both directions.

    0 points
  • Perttu Talasniemi, 1 year ago

    I use 960 based grid with 60px columns and 20px gutters. Using a grid just makes the aligning and sizing so much easier and faster. You can easily set the grid up to 1900px width or even more. No one is stopping. :) Lower than 400px resolutions I usually drop the grid and resize the elements to use the whole screen width (minus gutters).

    0 points
  • Nathan GathrightNathan Gathright, 1 year ago

    It was my understanding that designing at 960px wide was all about Nathan Smith's https://960.gs/ so if you're going to be using a framework like Bootstrap, design for their breakpoints since that'll make development easier.

    If not, I like to look at the analytics for screen resolution, set my canvas width to the most popular option, and then compose a new grid that looks good based on the content.

    0 points
  • Truong NguyenTruong Nguyen, 1 year ago

    Should aim to do responsive design. This is more feasible with Sketch and other tools now.

    http://bradfrost.com/demo/ish/

    0 points