Stop designing for screen width, design for content

320, 768 and 1024. Do these numbers mean anything to you?

No, it’s not the Da Vinci code, they are the widths in pixels that many designers associate with mobile, tablet and desktop screen widths.

The problem I have with this is that my mobile isn’t 320 pixels wide, my tablet isn’t 768 pixels wide and my desktop screen certainly isn’t 1024 pixels wide. There are hundreds of different screen sizes out there on a variety of different devices and yet we still think of responsive web design as 320, 768 and 1024.

 

What happens to all those screen sizes in between?

I have seen many sites that use these three breakpoints for their designs and simply create 3 static layouts that centre within the nearest width.

This is better than having an old fashioned, static, desktop only site as they are at least serving a one column, simplified version for mobile and a touch friendly version for tablet but then why would you alienate all other screen sizes by not taking them into consideration?

Sure the design will still work on the other sizes but what happens when you have a tablet that is smaller than 768? They will get the mobile experience on a tablet! And when viewing it on a laptop screen smaller than 1024? We’ll just send them the tablet layout and laugh at them for not having one of the 3 screen sizes that we have deemed worthy.

 

It’s about percentages not pixels

When you create your responsive layouts, you should always aim to set as many of your dimensions as possible in percentages. This helps to ensure that your content will grow and shrink evenly through different screen sizes and will do so in proportion to the device it’s being viewed on. This approach will also ensure that your content is always filling 90% (or as much as you determine) of the screen instead of possibly 50% of the screen as the content is centred on a screen size that is a few pixels smaller than the next available breakpoint.

 

Content is king

When choosing your breakpoints, you should always be making your decisions based on where the content breaks and not to device screen widths. Instead of creating a design and then modifying it to fit the iPad screen comfortably, you should find out at what width your content starts to struggle.

I tend to start with a 1400 wide design and slowly make the browser smaller until a piece of content breaks the layout or gets close to doing so. That then determines my next breakpoint. It doesn’t matter whether it is at 1200, 800 or 673, if the content still works then why change the layout?

You will find that you will end up with strange breakpoints such as 477 or 982 and that you may have 2, 6 or 10 different breakpoints. The point is that the content will decide rather than the intended screen sizes that you wish it to be viewed on.

With the array of different devices and screen sizes being released every month, it is impossible to determine a set of definite breakpoints for our responsive projects. The truth is that whilst we are using a variable such as screen width to determine our responsive layouts, we will struggle to serve a perfect layout to every different size but by following a few of the tips above, we can at least ensure that the content is always displayed as best as possible.

What breakpoints do you typically use? Do you avoid breakpoints altogether? Let us know in the comments.

Featured image/thumbnail, wide load image via Shutterstock.

0 shares
  • Romario

    Really great article!

  • Asaf

    I use 320, 480, 640 , 720 and 1024 but design from 320 and up.

    I mainly use percentages in padding, margin and widths to create a nice fluid layout that conforms but those breakpoints help me make sure that it looks good on popular devices and that is important to me. I couldn’t care less if it looks good on a phone that 1000 people have but it MUST look good on an iPhone regardless of wether I like the iPhone or not.

  • http://taketheleap.ca Kevin Gamble

    I try and avoid breakpoints altogether, and instead use percentages for the main layout. Sometimes, breakpoints are necessary (e.g. at 768px, hide the right rail), but the rest remain percentages.

    I think designed for specific breakpoints is kind of cheating and hoping that in 3 years, all the new devices people will use to consume your content will remain the same (which they won’t). Synopsis: I hate “hybrid design”.

  • shivabeach

    Makes perfect sense. The content is king, not the norm

  • jaystrab

    The problem is resolution. The problem is that Android does not have any fixed resolution, so you can’t design anything good for that platform. I have yet to see something look better or even as good on Android as on iOS. This goes for both apps and websites.

  • KyleLapaglia17

    I agree, I get annoyed when people don’t design around their content and the design doesn’t fit it at all!

  • http://www.techflashed.com/ Tech Flashed

    Designing must be done in %age wherever possible. It will match the screen accordingly.

  • subliminable

    My hope is that designing and developing responsive sites “desktop down” eventually goes the way of fixed-width 960 sites.

    You should be working mobile first, introducing breakpoints where the content can breathe more, and at every step, try to get the damn navigation and sidebars out of the way! What those breakpoints are depends on the content, not some arbitrarily chosen device width.

    If you’re working mobile first, content is always your focus at every breakpoint, and you end up with way less code to maintain. Instead of canceling out a bunch of floats, widths, margins, and padding as the viewport gets smaller, you introduce them as the viewport gets bigger, which leads to smaller files and faster download times.

    If it’s not all percentage-based (which is easy enough to calculate with SCSS/LESS functions), you’re doing it wrong. And if you have to support Old IE, just build your CSS files like this:

    http://nicolasgallagher.com/mobile-first-css-sass-and-ie/

  • http://bestwordpressbusinessthemes.com/10-best-wordpress-themes-2012-june/ George Michael

    Responsive design will be not important in the near future! Everyone can make a responsive layout with ease! The difference is how it raise your content. Good catch for this article!

  • http://www.yepi2.info/ yepi2

    I like anything that can bring us closer as the images are only for illustration.thank you

  • http://www.blackbookoperations.com/ Black Book Operations

    Design for the audience and their devices, whether that’s a fluid design, a fixed with design, all doesn’t matter, as long as it looks good for the intended audience and the content doesn’t get crammed into some tiny hole that is left over when one would view it on a small device… That said, opinions are like a##es, everybody has one… Design your own a##… and stick to it. ;)

  • Steve Bonin

    Thanks Javier,
    I mainly use percentages for width and pixels for height and size the content accordingly. You bring up a valid point though – content first and the breakpoints will take care of themselves.

  • bgbs

    Responsive design is only half the problem, the second problem is serving images for different screen sizes.

  • http://tobiasbleckert.se/ Tobias Bleckert

    I use percentage on widths and margins in pixels. If you’re using a grid it will be impossible to create nested grids with fluid margins.

    When it comes to break points I usually get a desktop version of the design and a mobile version. My job then as a front-end developer is to make my way down there (the lowest width I code for is 240px). And I know that most people like the think “mobile first” when coding, which I think is way wrong. I like the concept but you shouldn’t code mobile first.

    The reason is that first of all, IE7, 8 and 9 will get, in my case a design coded for 240px of screen width. Is that ok? And another thing is that when you code for mobile you want to use cool techniques like flex-box, columns and so on. You can’t do that if you’re going down up.

    So what I do is to first code a solid 960 or 1140px design and with media queries go both up and down. Normal browsers will be super happy and IE can be as happy as IE can be.

  • Ron Gaulden

    Good point made in the article. But really we need to design for physical screen size. Because font size and line length and finger sizes matter when clicking and reading. I’d love to be able to get actual physical dimensions based on ppi. Then I could have a site that response correctly. All these high resolution phones have more pixels than my 27″ desktop. This really is a problem tough to nail down.