Introduction to Responsive Web Design

You might have heard or read about responsive or ‘adaptive’ web design – but what exactly is it?

In a nutshell, responsive web designs change and adapt to fit different browser sizes. They are a good way of making sites look good on mobile devices or tablets without having to create a separate mobile site.

The below image is a good example of a responsive design. The site is available at thinkvitamin.com - Take a quick visit and play around with the browser size to see it in action.

responsive web design example

The purpose of responsive design is to present the website and its content in the best possible way for the device the user is viewing it on –  Desktop users get one view, mobile users get another view, etc. This is done using media queries, which sit in CSS files and look something like this:

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
/* Styles */ 
}

@media only screen is telling the browser that these styles only apply to screens, whilst min-device-width and max-device-width are stating the size of the screen that the styles apply to. You would generally use a few of these media queries to identify several different screen sizes that you would then write different CSS rules for.

Also, any width measurements are changed to percentages, rather than pixels, to enable the design to stretch and contract with the browser window. Fonts are also given fluid measurements, usually ems rather than pixels. Images are an entire topic of their own, but in short they are given special CSS properties to ensure they resize correctly for different screen sizes.

Designers often write media queries for particular screen sizes, so they know their designs will look good on specific devices with those screen dimensions. For example, the following media query relates to the iPhone, and many other smartphones:

(min-device-width : 320px) and (max-device-width : 480px)

Whereas the following relates to the screen dimensions of the iPad:

(min-device-width : 768px) and (max-device-width : 1024px)  

However, it is not ideal to have to keep updating your site with new media queries when new phones and tablets are released with different screen dimensions. Therefore, designers now often use another approach whereby they start with a ‘mobile first’ design and then work upwards. For example, a designer will begin the process with a design for smaller screens and then they will expand the browser window until the design breaks or starts to look weird or unusable. This helps them find the ‘breaking points’ of the design, and this is where the media queries are added.

This approach essentially future-proofs a website, ensuring it will work on any device of any size.

You can view more responsive designs here: mediaqueri.es and don’t forget to check out our list of responsive design testing tools to help you write media queries and create your own responsive designs.

ethan marcotte book

Finally, for a much more in-depth look at responsive web design, we suggest reading Responsive Web Design by Ethan Marcotte. This book is probably the key text to understanding the topic of responsive design and it details, step by step, how to turn your static websites into fully responsive ones that look great and work well on all kinds of devices and screen sizes.

Top image from here.

6 Comments

  1. Maria Brookes /

    Very helpful post. I’ve bookmarked it so I can go back and reference the basics when I need a refresher!

  2. Carl /

    Really great post – I think it’s important to grasp the basics of responsive design before trying to completely change your website.

  3. Linda /

    Very informative, thanks!

  4. Shiva /

    Thank you for posting this, I have been wanting to try out responsive design for a while and this is really helpful for a beginner.

  5. Mike /

    Bookmarked – Excellent intro to responsive design, thanks!

  6. Thank you for this post. I am new in the field of web design and it’s great to see I can find a book that I can study with.

Leave a Comment

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>