Responsive web design has been a buzzword in the web design industry ever since Ethan Marcotte first coined the term.  As designers and developers we can no longer assume that the person visiting our website is using a laptop or desktop. More likely they are using their smart phone to read the news or transferring money while they're on the bus. Just recently Apple brought their smart watch onto the market, which could very well bring them into the mainstream. This means we need to build websites that look good on all types of devices, rather than tailoring them to specific devices.  

There are lots of things that are important when building responsive websites but I'll only talk about three here. 

em's

The first is the em. Responsive web design means we never use pixel values in our code. Everything is percentage or em based. An em is a relative typographical unit of measurement. Unlike pixels, which are absolute, ems are relative to their parent's font size. For example, if the font size of a tag is set to 16px then a tag within that with a font size of 1em is equal to 16px. If the font size of the tag changes to 20px, then the 1em value on the tag is equal to 20px.

To calculate the Em value for a unit the formula is target / context = result. So if you want your font size to be 24px it would look like this  (assuming the base font size is 16px): 

We use ems for absolutely everything here but it can get pretty confusing to work with them if you've been working with pixels for so long. Thankfully, due to the power of Sass we can write functions similar to the formula above that will calculate the em value of a pixel value. It's as easy as writing em(70px). This cool function allows us to continue thinking with pixels but our websites end up using em values. 

One neat thing about using ems for everything is that the design is bound to typography. Since typography makes up a lot of a website this make sense. When a user zooms in, which increases the font size, everything scales smoothly with it. 

See this article for more info on ems: http://webdesign.tutsplus.com/articles/taking-the-erm-out-of-ems--webdesign-12321

Media Queries

Another aspect of the responsive web is the media query. Without getting into the details of it too much, it basically allows us to define layouts depending on the width of the browser. Here we always start writing our HTML and CSS  for mobiles first, loading only the bare necessities to keep things loading fast. However, as browser widths get wider we can use media queries to specify new styles and layouts that occur at those breakpoint widths. 

Susy

We use something called Susy here to help with layouts and Breakpoint to help with media queries. In our variables file we define values for multiple container widths and corresponding breakpoint widths e.g.

The code above makes the background colour darken when viewed at a larger browser width.  One of the big kinks that needs to be worked out in responsive web design are images and especially their performance affect on mobiles devices. 

Making them responsive is easy enough. Just set the max-width to 100% and height to auto. The problem is that images can be very large files and you don't want to be downloading a 2MB image on your 500MB monthly phone plan. The truth is that currently there is no perfect solution to this problem. You can improve performance by optimising your images in Photoshop before uploading but this is tedious to do.

Thankfully, HTML5 introduced the <picture> element, which allows you to conditionally load different sized images depending on browser width. Drupal 8 will include support for the picture element, as well as fallbacks for older browsers like IE8. This should greatly improve loading times on mobile devices. 

Responsive web design ensures people get the best experience no matter what device they are on. Thanks to the open source nature of the internet, there are new tools being developed all the time to make building responsive websites easier, which means things are only going to get better.