A few notes on Responsive Design

I’ve been working on a few responsive design projects recently and an old friend of mine asked what I had leaned on my journey, below is my response (pardon the pun):

Basically, it’s seen as bad practice to target specific devices, instead you should just target the breakpoints that make sense i.e. scale the browser down until something looks wrong, then add a media query to fix it, rinse and repeat. That way you’re future proofing yourself as it will look good at any width, even on that device that hasn’t come out yet.

Ideally you should do ‘mobile first’ design whereby you start with the mobile version (duh!) and work your way up, this ensures that you focus on the content and that you don’t get into a situation where something won’t fit the mobile version. The problem with this approach is that old versions of IE will display the mobile version, as they don’t understand media queries without including something like respond.js.

I have not been following the ‘mobile first’ approach on the projects I’ve been involved in due to the IE factor. I have instead been starting with the full width version (keeping in mind how it will respond for narrow screens) and adding media queries where required to adjust the layout for a given breakpoint:


/* All */
.main .module   { float: left; width: 33.333%; }

/* 600 and down */
@media screen and (max-width:600px) {
  .main .module { float: none; width: auto; }
}

The design process becomes an interesting one, do you show the client a full width mockup, mobile, or both? Or should this be done at the wire-framing stage? I went with showing the client a full width mockup and just keeping in the back my mind how it would respond.

I am keen to try the ‘mobile first’ approach, however I will attempt this first on a personal project so that I can nail the workflow before unleashing it on a client project.

As an aside, the css and media queries for ‘mobile first’ would look something like this:


/* Mobile */
.main .module     { }

/* 600 and up */
@media screen and (min-width:600px) {
  .main .module   { float: left; width: 33.333%; }
}

So there we have it, my notes from the trenches of responsive design.

2 thoughts on “A few notes on Responsive Design”

  1. Hey Jamie, it’s true that IE 8 and lower will not understand your media queries unless you use a polyfill for them like respond.js.

    However, you can take you styles from your mobile first stylesheet that you were using for desktop displays and port those over to separate IE stylesheet that you load in IE 8 and lower using IE conditional comments.

    Using a CSS pre-processor like Sass or Less can make this pretty easy. IE 8 and lower will get a non-responsive version of you website with this technique, but that’s what users in IE 8 and lower are already use to.

  2. Hi Brett, I’ve seen a few approaches like the one you mention but I’m still not completely sold on Sass or Less. This is probably in part to do with my OCD tendencies and that I can’t control the formatting of my CSS output. Also, it’s easy to end up with unneeded repeated rules when using mixins.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>