A few tips on getting responsive design right.

Disclosure: this is by no means a complete guide on responsive design and reading this article won’t teach you everything you need to know to build a responsive website but it will give you some do’s and don’ts that a lot of people who are starting responsive web design need to know.

Responsive design has come a long way and getting to where we are has not been linear at all. Back in the day, we could build a website at a fixed width (960 pixels) with the expectation that most users would have similar screens, and therefore have a pretty a consistent experience across all platforms. This is not a good way to create a responsive website today.  The increase in devices on the market and the lack of consistency when it comes to screen sizes makes this method obsolete. Today, we have all sorts of screens, ranging from smart watches, phones, tablets and all the way to huge wide-screen monitors that productivity freaks love. Just to give you an idea of where we’re at with the web, here is a list of all the device media queries that we use to test:
media queries list

What you see above is the web. The web is not one screen but an ever growing number of screens. So the question now is how do you make a website that will yield a constant user experience across all of these screens? People have attempted several solutions to solve this gap and if you are one of them, then you will find this guide helpful. One attempt is to build several websites for each device and making a m.example.com version (a mobile version) of the website targeting mobile users and another one is building websites for several fixed widths and trying to estimate all the screen sizes on the market. The first solution is not good enough, because like we’ve covered earlier, the web is not one or two devices, it’s an ever growing number of screens and while you might cover most mobile devices with a mobile website, it gets complicated if you have to build a separate website for every screen. The second solution doesn’t work very well because it is very tedious to design for that many fixed widths and most of the time you won’t get a good user experience across all devices due to the fact that by doing so, you are essentially trying to “wing it” on several devices. 

So how do we build a responsive website ? 

The main keyword here is “fluid”. We must start thinking about our layout as a fluid layout (I will touch on this later on if you don’t understand what I mean right now). A fluid layout allows you to think about things differently from the start, hence minimizing the amount of media queries and fixes you’ll have to do from device to device. Most of the time the website breaks not because of the screen, but rather because you did not build a fluid layout. The truth is HTML on its own is 90% responsive. Please read and resize this page to see what I mean, I’ll wait for you.

http://motherfuckingwebsite.com/

Now that you understand what we are trying to achieve, here is how you should tackle your layout:

Content and mobile first

So the first step to getting responsive design right is to think content first and mobile first. The idea here is that we want to retain as many features as possible of our design across all the screens instead of hiding them as we go. There are huge benefits to starting with a mobile layout and going up (let’s refer to this from now on as progressive enhancement) and having all your content laid out without any styling as opposed to going from a desktop monitor layout to a mobile layout (from now on will be referred to as graceful degradation). One of the most common mistakes I used to make as a front-end developer is designing a website with no content and then hoping that the content fits well with my design. A good way to make sure you are on the right track is to make sure that you lay out all the content first, like we saw on http://motherfuckingwebsite.com/.

Typography

Once you have your content laid out, start getting into the habit of using relational measurements instead of absolute measures. For typography, we should use rems not pixels. The benefits of using rems allows you to have a modular and scalable typography. Let’s say that you have a page with a lot of paragraphs and you have over 10 font declarations. If your intention is to make everything twice as big because you realized that the text is not legible, and if you were using pixels, you would find trying to change the sizes line by line. Whereas with rems, all you have to do is change the rem base. If you are worried about IE8 and older browsers that don’t support rems, check out this amazing SASS mixin that allows you to use rems with a pixel fallback for older browsers. For further reading, here is a good resource that explains why you should use rems over px or ems. 

P.S.: Here is a simple pen I made for you to play around with rems. Try changing the base rem value and see what happens to the typography.

Images, fluid images

Images are a big part of the web. In fact, images are so important that html5 is proposing a new <picture> element that makes responsive images easy to implement without the need of any javascript or third party plugin.

But one of the biggest mistake you can do when adding an image to your web page is specifying a fixed width like so:

img {width: 300px;}

Instead you should tell it to have a maximum width in percentages and let it adapt depending on your content and screen size:

img {max-width : 80%;}

This will make your life much easier when it comes to scaling images. A general rule of thumb when working in CSS is to let the browser do as much as possible for you. Wherever it is appropriate to use auto, and max or min you should. Giving an image a fixed width and height is a big mistake. The best way to learn is to try it for yourself. Take an image and give it a max-width of 100% or max-width of 80%; and try resizing your website, I’ll wait for you. See? the image is always a good size and scales fluidly no matter what viewport you’re on.

Here is a pen for you to test out the difference between absolute values and percentages. Try resizing your browser and see how both images react.

Obviously, there is much more to web design than these few tips, however it is good to always keep these points as rules of thumb. Always let the browser do as much of the work as possible, remember that things should be fluid and not fixed. Think about that when you apply padding to typography, is it better to use padding to position your typography ? Try using max-width and centering your block of typography with margin: 0 auto; instead. See the difference!

In the above example, the first div has fluid typography (check the css) and the second one has padded type (big mistake developers often make). Resize the browser and see how both adapt. In the second example, you would find yourself adding tons of media queries to fix the padding for each device.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s