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.