29

Twitter Bootstrap uses these break points for responsive design:

Large Display: 1200px
Default: 980px
Tablet: 768px
Mobile: 480px

A client said they are using 1280px for their Large Display breakpoint.

Is there an industry standard for these or are they just made up as we go right now?

3

7 Answers 7

13

The current trend is to design breakpoints with content in mind. At some width the content will appear either too squished (or stretched out) and that's when a breakpoint should be used to rearrange things, even if it doesn't correspond to a common device width. The content should look well laid out at any device width (within reason, no need to fill 3000px wide). Some designs will be best served by a breakpoint at 611px, and some better with a breakpoint at 795px.

It's simply too hard to keep up with all the screen sizes of the new devices coming out. Make it work at any reasonable width and you'll sleep better.

That said, test on as many devices as you can to make sure what theoretically looks good at any width really does look good and function well on actual devices in real use cases.

11

As far as I am aware there aren't any industry standards. From experience they seem to differ slightly depending on who you talk to. Smashing Magazine recently did a good article about logical breakpoints for responsive design.

Understand what resolutions the potential users of the system will be using. This should help inform your break points.

My point of view:

It's unlikely you can cover all scenarios, so design for those that offer a usable solution for each segment of your users.

Remember to consider the future. if the site is going to be around in the future consider how device resolutions will change and either take those into account while designing , or provide a system that is adaptable.

Using a responsive grid system, like that of Foundation 4 (as mentioned by Courtney), along with break points can be a nice solution but it really depends on your specific requirements. Regarding responsive frameworks, personally I've used Foundation and Bootstrap. I found them both useful, but it really does depend on exactly what you are trying to achieve, as to whether this is the correct approach for your project.

4

To extend on what some others have said about choosing suitable breakpoints depending on your design, take a look at the Goldilocks Approach. This approach doesn't think in pixels for column widths, instead it thinks in em's, to provide an "optimum" reading experience by not making each line of text too long. This has the benefit that it optimizes content for the user to read, rather than optimizing by "standard" devices (imagine if iPads have a different resolution in the future, heck, even today non-Apple tablets don't have a 1024px or 768px-wide viewport - I have a HTC 8X phone and Microsoft Surface tablet, and I hate it when websites "optimize" to target iPhones and iPads only)

If you are going to define your own breakpoints, there are two approaches to this. You can either start from mobile-first (smallest breakpoint first), or largest-first. Mobile-first has the benefit of also letting you plan and decide the most important parts of your webpage that need to be shown to users. However, doing it the other way round lets you add breakpoints when you notice the design gets squashed too much as your window/screen gets narrower. The risk of doing so is forgetting to optimize your page for mobile (i.e. serving >1000px wide images intended for desktops and using CSS to resize for small screens).

3

Check your analytics and see what your users are actually using and where the trend is then design around that. Not devices but look at resolution and screen widths

The idea of designing around content is a great one, but honestly who gets that level of detail upfront? Most of the time the client still hasn't worked out their content strategy and it's developing it with the website...

1

The breakpoints for your site/web app should really be based on what your projects content needs are. Many developers and designers start with know popular device (iphone/ipad/etc...) breakpoints as they begin to develop their site/app. But over time add more breakpoints in whenever you need to tweak the overall look and feel of the layout or to correct a particular component.

1

Foundation 4's breakpoints could be used as an industry standard. With it's increasing customer base (pixar and national geographic to name a few), I would recommend following their conventions.

1

There's no industry standard in place because the design principle is evolving very quickly.

Frameworks might be great for getting your project off of the ground with a responsive "template," but the core concept of responsive design is to fit any screen at any resolution, both current and future. Most of the time, designing for breakpoints violates that concept because you're designing for the breakpoint, which is an arbitrary width.

Thinking responsively also shouldn't start with the framework and its breakpoints; it should start with the content and design from there and using media queries appropriately.

Not the answer you're looking for? Browse other questions tagged or ask your own question.