• Jim SilvermanJim Silverman, over 7 years ago


    48 points
  • Mac PankiewiczMac Pankiewicz, over 7 years ago

    My breakpoints are on 1440px, 1280px, 1024px, 768px, 320px.

    17 points
  • leo duqueleo duque, over 7 years ago (edited over 7 years ago )

    Different elements call for different breakpoints. Having a set of fixed breakpoints means at any given time SOME element does not look great. Like somebody else said, design for ALL widths. I personally do this by inserting media queries into my elements where they need them instead of inserting my elements into media queries.

    11 points
  • Gadzhi KharkharovGadzhi Kharkharov, over 7 years ago

    Start with the small screen first, then expand until it looks like shit. Time for a breakpoint! — Stephen Hay

    9 points
  • Paul @StammyPaul @Stammy, over 7 years ago

    Don't pick set breakpoints before you know what the content will be. Let the content dictate it, breakwhere it seems natural for the content, don't try to cram it into some breakpoint.

    I wrote about this in a series of posts:


    6 points
  • Diego LafuenteDiego Lafuente, over 7 years ago

    Fluid all the way. Become water, my friend.

    5 points
  • Ryan Hicks, over 7 years ago (edited over 7 years ago )

    Are you asking for breakpoints?


    Canvas width on wireframes? Which I'm typically at 1400 with a 1000 container (for desktop).

    3 points
  • Mike ProMike Pro, over 7 years ago

    1440 for the base styles and the rest is handled with media queries.

    3 points
  • Lewis FludeLewis Flude, over 7 years ago

    a piece of string

    2 points
  • Sallar KaboliSallar Kaboli, over 7 years ago

    I let the content decide.

    2 points
  • Seán MongeySeán Mongey, over 7 years ago

    3000px obvs

    1 point
  • Lawrence SmithLawrence Smith, over 7 years ago (edited over 7 years ago )

    When designing larger scale re-design projects, analytics also give a good indicator of what screen sizes the audience are using and what devices / browsers. This also informs decisions eg. there's no point in designing something for 1200-1400 widths when analytics show that 70% of the audience has 1024 screens.

    Your layout and content should always determine how you break. A website like medium.com can break much later than a 4-col dashboard because it's container width is much narrower and there are no sidebars etc.

    Always design for the minimum width of each grid. Your website may have a max-width of say, 1200px. But don't design it at 1200, design it at the minimum size. That way, if your content fits at this size, it will easily fit at 1200.

    My last project I used: small, medium - min-width 700px, large - min-width 1000px, x-large - min-width 1200px

    1 point
  • Elliott PayneElliott Payne, over 7 years ago

    Helpful reference:


    1 point
  • Geoff YuenGeoff Yuen, over 7 years ago

    I'm curious as to what maximum width people are designing up to. Are people designing layouts that actually use up that extra space on a 27"+ display?

    1 point
    • Brian A.Brian A., over 7 years ago (edited over 7 years ago )

      Bootstrap's default container width, 1136px, is what I use for my max. It feels pretty good on a variety of screens.

      1 point
  • Aaron SagrayAaron Sagray, over 7 years ago

    We are designing a web-based design app, with sidebars, a canvas and all of that jazz. The min-width is a 13" laptop screen (1350x768). This forces us to keep our palettes compact (less is more), which also helps us keep our features light.

    1 point
  • Ben WarmuthBen Warmuth, over 7 years ago

    Generally I'm somewhere around 1000px for the desktop version, but it kind of depends on the content and who the page is for.

    Several of the internal tools that I designed and helped build were designed to fill most of the browser width up to around 1300px wide or something because I had to display tables with a lot of information in them (luckily, these pages aren't really going to be used on phones or tablets - that would've been a nightmare).

    1 point
  • Todd Padwick, over 7 years ago

    The width of every element should be a percentage. I add breakpoints on the fly where ever required. But as few as possible.

    0 points
  • Namanyay GoelNamanyay Goel, over 7 years ago

    Based on content, but I start with desktops first. Haven't got used to the mobile-first philosophy, nor do I like it.

    0 points
    • Ryan Hicks, over 7 years ago

      Mobile first is a trend. Device first is the way to go.

      0 points
      • Namanyay GoelNamanyay Goel, over 7 years ago

        Ryan, I googled and googled but found nothing relevant. Would you have links to articles describing device first? Always ready to learn something new :D

        0 points
        • Ryan Hicks, over 7 years ago

          There are a few around. I'll see if I can pull them up. I thought I had one bookmarked, but I can't seem to locate it right now.

          1 point
  • Aaron WhiteAaron White, over 7 years ago (edited over 7 years ago )

    1280 x 1024 #HelloEnterprise

    We still have a lot of users on 1024x768...

    0 points
  • James Young, over 7 years ago

    Another question related: What heights (if any) do you design for?

    I notice on a lot of sites that they're clearly designed for a large screen but don't take into account widescreen displays and so I see very little content on my Air for example.

    0 points
  • James Young, over 7 years ago

    I tend to have a single max-width around 12-1400px as a generic wrapper but it's not set in stone. I then typically add in a range of media queries in my sass setup file which I then use on elements in my design as needed.

    0 points
  • Lucian MarinLucian Marin, over 7 years ago

    320px and I'm testing the websites using Monochrome.

    0 points
  • Chetan Raj, over 7 years ago

    768px, 1300px

    0 points
  • Arun KP, over 7 years ago

    I do my sites for 960px and media queries there after. 480px, 768px, 960px, 1200px, 1400px, 1900px.

    0 points
  • Darth BaneDarth Bane, over 7 years ago

    My primary web width is around 1140px, as I assume a lot of people are on 13" screens (which, in Apple's case, means 1280x800). That's what I design for. When the design is "done" for that width, I then resize and inject break points per element. But usually I only have three break points, one of which is mobile.

    0 points
  • Willie MorrisWillie Morris, over 7 years ago

    I don't design websites for widths, I design them for people. Oh snap.

    In actuality, for me it depends on the project, content, use cases...If I'm just prototyping and testing something out, I'll start out at 960 and then see how it scales and add breakpoints as needed.

    0 points
  • Marco Canteiro, over 7 years ago

    Thank you all so much! It helped me a lot. I am building a CMS. Will consider all your replies.

    0 points
  • Will BakerWill Baker, over 7 years ago (edited over 7 years ago )

    I usually start desktop page comps around 1360 with a conservative estimated fold at 680. Break points usually float around iOS standard 768 and 320, but I'm trying to move beyond thinking that narrowly. In redesigning my company's e-commerce site for cross-platform shopping, I'm finding that a lot of views break around 768 and then almost immediately after at about 700, so I'm kinda looking into eliminating the tablet breakpoint in favor of a more attractively-expandable mobile view that can hold its own from 320 up to where desktop breaks.

    0 points
  • Patrick MorrisPatrick Morris, over 7 years ago

    Usually 3 depending on the layout. 0-400 800 1200(1400) or so.

    Sometimes do an xs to target just iphones, since I really enjoy the extra room on popular android phones.

    0 points
  • Scott HurffScott Hurff, over 7 years ago

    I have 3 primary breakpoints; 400, 800, 1200.

    I'll pay special attention to how things fold down from 400 to 320, and also for what happens around the 720 mark.

    1200+ to me is a luxury; it just can't look like crap.

    0 points