A Responsive Web

Posted on by KrooKedUK

Responsive Web Design - Ethan Marcotte

Responsive Web Design – Ethan Marcotte

So what are the key elements in creating a responsive website? Well fortunately there are many great resources out there that cover the subject, from blog posts to books, but I want to concentrate on what Ethan Marcotte writes in his book; Responsive Web Design.

The three main areas Ethan identifies are:

  1. A flexible, grid-based layout,
  2. Flexible images and media, and
  3. Media queries, a module from the CSS3 specification.

I will take a brief look at these areas.

A Flexible Grid

The basics of the Flexible Grid boils down to using percentages instead of fixed units like pixels. This enables the content to be resized as the viewport resizes.

This is how we would normally style a container element of our web page using pixels.

#page {
    margin: 0.8em 48px;
    width: 960px;
}

Looks familiar, right? So how do we make this fluid. Well it’s easier than you think, have a look at the CSS below.

#page {
    margin: 0.8em 5.33333333%;
    width: 90%;
}

Now if we resize the broswer window any content inside our #page element will scale down to be 90% of whatever size the window is.

Ethan introduces us to a nice formula in his book, target ÷ context = result. This may sound confusing but it is actually very simple. If we have a container which is 900px wide and want to create a column inside which is 600px wide but express that as a percentage, we will need to find our new percentage in relation to its container. So we find our target width by dividing by its context (containing element).

600 ÷ 900 = .66666667 (66.666667%)

Ethan emphasizes the importance of adding these percentages to our CSS as they are and not to round them down. They may look ugly but they are completely accurate and browsers have no problem working with these figures.

Flexible Images

Well this section couldn’t be simpler. If we want flexible images instead of adding a set width to images, we just add the following.

img {
    max-width: 100%;
}

So how does this work, well basically the image will always scale to fill the space of it’s containing element. This will work for other types of content too.

img,
embed,
object,
video {
        max-width: 100%;
}

You’ll be surprised to know IE6 doesn’t play ball with max-width, who would’ve thought it? Well Ethan covers a little workaround which mostly fixes this issue, but he does warn us that if we are using images with a smaller width than the element they are contained within we could run into problems.

img,
embed,
object,
video {
    width: 100%;
}

Media Queries

Right so we now move onto the magic of media queries. Media queries allow us to test for many different device features like width, height, aspect-ratio and a fair few others, but we will concentrate on width.

@media screen and (max-width: 768px) {

    #main{
        width: 50%
    }
}

Media queries are basically a container for styles that will be applied when a certain feature is detected, in this case anything with a width of 768px or less will get these styles. You could also use min-width to serve styles if a browsers width is over say 1200px.

@media screen and (min-width: 1200px) {

    #main{
        width: 80%
    }
}

So this would then change the width of #main to 80%, if the browser width is over 1200px.

I have looked at the basics of Reponsive design and Ethan covers everything in much more detail in his book, which is best resource to learn this stuff. If you haven’t got a copy, I would urge you to buy it now, as it is worthwhile getting to grips with responsive design today, it’s the future of the web!

Other Resources

There are many blog articles on responsive design, most of which are easy to find via Google. I did find one particular article – Responsive layouts using CSS Media Queries by Kyle Schaeffer which is easy to understand and provides a nice intro to Responsive design without getting too advanced.

Screenfly by Quirktools is a handy tool for testing responsive designs, saving you from having to constantly resize your browser window!

Some great sites using media queries

Let’s have a look at some responsive websites and how they adapt for use at smaller screen resolutions.

Simplebits - Dan Cederholm

Simplebits

Dan is a master with CSS and handcrafting websites, so it is no surprise that his site is sporting a nice responsive layout. I will take a look at Dan’s About page and how the content scales for smaller resolutions. Ok, so Dan’s site layout consists of two columns, one for the main content like blog articles, information about himself, samples of his work and the second column for supplemental information.

When I resize the window to below 800px most of the site switches to a one column layout, with the exception of the footer which switches from three columns to two. This is a good approach for the main body of text and the footer content is re-arranged in a neat logical way too. I love how Dan has used a generous line height for the spacing between the links in the footer as it means they are perfectly usable on any touch device.

Five Simple Steps

Five Simple Steps

Headed by Mark Boulton it’s no surprise that the site adheres to a well defined grid and features stunning typography, which makes viewing the content on the site a pleasure. Oh yeah I’m supposed to be looking at responsive design.

This is another simple layout which switches to a one column layout when the resolution is below 768px and maintains most of this layout when responding to lower resolution devices like the iPhone. One cool feature that I have not seen before is the transformation of the navigation links into a dropdown box, for the one column layouts. This is a very clever approach to provide navigation to smaller devices and a decent alternative to stacking links on top of each other like other responsive designs (nothing wrong with that)!

Ryan O'Rourke - Homepage

Ryan O’Rourke

Ryan O’Rourke’s site is a very good example of a slightly more complex layout which has a fantastic fluid grid. The widescreen layout consists of three columns of content, a mix of text and images. The site maintains a 3 column layout right down to 600px, personally I like this implementation with the text and images reducing in size. Once we go below 600px we then get a one column layout where everything is very readable and tappable.

My views on responsive design

To say Responsive Design is without its problems would be a lie, like any new technology in its infancy, there will always be hurdles to overcome. There have been many articles stating that it’s better to create a standalone mobile site etc, but I believe if Responsive Design is used appropriately, with proper planning for all devices, then it will be suitable in most cases.

Responsive Design isn’t rocket science, so there is no excuse for not experimenting and playing around with it.

This entry was posted in Design. Bookmark the permalink.