HTML5 Now: Responsive Web Design

The web has changed: it’s no longer just about making your website fit only on a desktop screen

HTML5 Now: Responsive Web Design

Frédéric Harper

The problem

How often have you visited a website on your smartphone, only to get a really bad experience? You have to scroll up, down, right, left, zoom in, zoom out, struggle to click on the links... It's clear that the site just isn't designed with your mobile device in mind (for example, the site in Figure 1).

Figure 1: A website designed for desktop that doesn’t provide a good experience on a smartphone device.

Maybe you received an email from a friend linking to an article you have to read – but the site was formatted for a mobile device (probably a http://m.site.com url), and you open it on your 24 inch desktop monitor (Figure 2). Again, a really bad experience for the user.  

Figure 2: A mobile version of a website viewed on a desktop browser.

In both cases, it’s the developer's job to make it better, and to provide a good experience for users on all devices.

Responsive Web Design

Just over three years ago, a guy name Ethan Marcotte [1] wrote a blog post about the concept of Responsive Web Design on A List Apart [2]. The philosophy was simple: let’s design our sites to respond and adapt it any screen size. It was not a new idea, but – as far as I know – was the first time that the concept was presented as a whole, and how it was also easier than ever for developers to achieve using new technologies.

Figure 3: A website viewed with a large desktop monitor.

Figure 4: Top of the figure 3 responsive website viewed with a smartphone.

Figure 5: Middle of the figure 3 responsive website viewed with a smartphone.

Figure 6: Bottom of the figure 3 responsive website viewed with a smartphone.

This new philosophy is all about thinking of user’s needs instead of our own. If we adapt our sites to the capabilities of different devices, rather than their configurations, it will help future-proof our sites. By creating responsive sites, we can have one version providing a great experience to each user, whether they are on a smartphone, a desktop monitor or even on their gaming console.

 To make it a reality, you’ll need three important elements:

  1. A flexible, grid-based layout,

  2. Flexible images and media,

  3. CSS3 Media queries.

The first thing you need to do to make your site responsive is to change your fixed-width layout to a flexible one. Instead of using pixels, you need to convert those to em units or percentages using this little formula:

TARGET / CONTEXT = RESULT

What does that mean? That you take the size in pixels of the element (or the size you would like it to be displayed on your actual screen), and divide by the size in pixels of its container (or the size you would like it to be displayed on your actual screen also): that will give you the equivalent size in percentage for your element. Let’s see a more concrete example with this actual CSS code:

#page {
        width: 800px; 
}

#page .news {
        width: 166px;
}

 If we want to change the .news element inside of the #page one, we’ll take the target of 166 pixels, divide it by the context, the div containing the .news elements, of 800px, and we’ll get our result of 0.2075. To get the percentage, of course, we’ll multiply 0.2075 by 100 to get 20.75%.

This is just a preview - to read the rest of the article, download your free copy of Web & PHP Magazine.

 

Comments

Add new comment