Responsive Web Design is So Much More than Just a Few Breakpoints

  • 19th November, 2012
  • Tom Kenny
  • Articles

In the past few months, I’ve worked with two contract front-end developers creating responsive CSS. We contracted the work out as our only in-house front-end developer is snowed under with work and I’m employed as a designer so I don’t have the time to do it myself, as much as I would like to.

They both seemed not to have quite grasped the idea of responsive web design and how to effectively write the CSS. Both included breakpoints which is definitely part of responsive design but neither fully embraced it beyond that. Layouts became completely broken at widths that weren’t defined breakpoints. In a world where devices are changing at a rapid pace, we need to make sure that our designs don’t break at any widths. If you have a look any of the current best developed responsive sites, none of them appear broken at any width. Here are just a few great examples:

When using breakpoints, we should be responding to content, not devices. Who knows what the most popular device width will be in a couple of years. This approach won’t catch everything and we can still optimise for the most popular devices on a site by site basis, just like we do for desktop browsers. Mobile visitors are getting close to 50% on the site I’m working on, which is a similar story across the web as a whole, so we can’t afford to not fully embrace responsive web design. We need to give this the attention it deserves.

Read Responsive Web Design

If you write responsive CSS, you have to read Responsive Web Design by Ethan Marcotte. I’m surprised that I’m coming across developers/designers who haven’t read this book as it gives you the solid foundations required for responsive CSS. Perhaps the amount of free learning content out there now is enough for people to not buy a book, but pay up people. Give Ethan (and the fine folks at A Book Apart) the money he deserves and learn how to create responsive CSS the right way.

See my latest WordPress theme for a good example of responsive web design.

by @tkenny

You should follow me on Twitter here

Subscribe to Inspect Element by email to get updates on new articles, tutorials and WordPress themes: