Responsive web design example

Responsive web design example

In this article we will look at a crude demo of how responsive website design works...

In our previous article Do you have a responsive web design? I introduced what responsive website design is and why Google and now Bing have said it is their preferred method for sharing websites on a mobile platform. In this article we will look at a crude demo of how responsive website design works including a fully working demo.

The wireframe

Creating a responsive website does not need to be complicated. A well planned website using a standard grid layout, can with a bit of tweaking and a handy framework be created very quickly. For our demo I have created a very crude wireframe which uses a standard 12 grid layout.

The advantages of a grid are firstly, the developer can quickly set the correct width using predefined CSS which represents a total number of grids. For example, using Twitter Bootstrap the CSS class “Span1″ can be used to set the width of a HTML element to one grid size, similarly if we were to set the width of the Banner in the wireframe below we would use “Span8″ as it takes up 8 columns of the grid. This makes creating the layout very fast.

The second advantage of the grid is that you can add the portal viewing sizes to easily see what elements will fit. Using this information you can either crudely tweak the content at different stages (as I did for this quick demo) or alternatively create additional designs for each media size using the same grid as the base.

If you are a little confused there is an excellent article at Six Revisions called “The 960 Grid System Made Easy”.

960-grid

960 Grid Systems

Everyone knows the famous saying ‘Why rebuild the wheel”. And yet time and again due to their pursuit of some kind of coding perfectionism developers like to create things from scratch including CSS Grids. I must admit that AFX have been victim to this, however, as we continued to add new features to our originally simple grid CSS style template using the less CSS framework it became apparent that we were merely taking a long time to reach the basic standard of available templating systems. So I suggest that if you are like us then suck in your pride and take a good look at the frameworks that are on offer because they really do save a lot of time. Here are a couple that we have used:

The demo

As promised you can see a working demo of a responsive website at http://www.afxdesign.com/demos/responsive/. If you have a few mobile/tablet devices handy I would recommend taking a look at the website on them. You should notice that as the portal size decreases some content is hidden and the navigation is changed from inline to vertical on the iphone with a nice Show and Hide navigation option.

The HTML

Most responsive websites make use of Elements and CSS which are only supported by the HTML5 doc type. Including Google’s famous HTML5 shim will also ensure that the elements are supported in IE6-8.

<!DOCTYPE html>
<html lang="en">
<head>

    <!-- Include to ensure responsive pages are displayed correctly -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap and custom CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/styles.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Mootools -->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>

    <!-- Fav & iOS icons location -->
    <link rel="shortcut icon" href="ico/favicon.png>
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png>
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png">
  </head>

Each element is marked up with a css class whilst the width is set using its grid size. In the following example there are two types of banner which will display based on the device. Whilst I wouldn’t recommend having two duplicate elements I wanted to demo the built visible and hidden styles within Bootstrap. In the example the first banner will only be displayed on a desktop and will span 8 columns leaving 4 columns which the Call to Action will occupy. However, on a tablet and below the Call to Action is removed and so the wider (12 columns) Banner is used.

<!-- Main -->
<div class='row'>
    <div class='banner visible-desktop span8 bordered'>Banner</div>
    <div class='banner visible-tablet visibile-phone span12 bordered'>Banner</div>
    <div class='home_action span4 bordered'>Call to Action</div>     
</div>

The CSS

Styling the elements is pretty standard using CSS styles within an external stylesheet. However, some of the elements will need to change based on the width of the viewing portal. This is where a great CSS property @media comes in. Using the @media selector you can specify CSS to be applied only if the viewing media conforms with the @media properties. In this case the min-width and max-width property is used. By having CSS based on different viewing widths you can tweak the styles as appropriate adding/removing and transforming elements as you see fit.

/* Landscape phones and down */
@media (max-width: 480px) { 
    .nav_collapse { display: block }
    nav { display: none; }
    nav li  { float: none; }

    .home_action { display: none; }
    .contact_address { display: none; }
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { 
    ...
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { 
    ...
}

/* Large desktop */
@media (min-width: 1200px) { 
    ...
}

Navigation

Using the techniques I have described we have created over 90% of the features necessary to make a website responsive. The final aspect of our responsive example that I would like to cover is the navigation. There are a few recommended approaches to responsive navigation, Brad Frost Web has created a good article which looks at them. The method that I favour is the toggle method which is infact built into Bootstrap. The concept is so simple that I decided to implement it using a bit of CSS and mootools.

The problem

The aim of the toogle navigation is to provide a better user experience for users on smaller devices where the navigation designed for a desktop is often too big in width and height, only displaying the full navigation when the user would like to view it. In the demo I have made a few changes to the navigation when the portal size is 480px and below, these are:

  1. The navigation is changed from inline to vertical, each link occupying its own line
  2. The navigation is hidden by default
  3. A view navigation link is made visible which when activated toggles the navigation

The CSS that I used can be seen in the previous code sample. If you understand CSS you should see it is relatively straightforward. However, as there are no CSS click attributes these have had to be implemented in Javascript because the iPad does not have a hover event.

The Javascript

The javascript code contains two actions; firstly a click event is added to each anchor with class “collapseNav”. Upon clicking, the navigation will be toggled on/off depended on its current state. Secondly, a sceen resize event is added to ensure that the navigation is displayed again if the screen is resized to a width larger than 480px.

window.addEvent('domready',function() {
    $$('a.collapseNav').addEvent('click',  function(e) {
        e.preventDefault();
        if($('nav').getStyle('display') == 'none') {
            $('nav').setStyle('display','block');                 
        } else $('nav').setStyle('display','none');

    });
    window.addEvent('resize', function(){
      if(window.getSize().x > 480 ) {
            $('nav').setStyle('display','block');             
      } else {
            $('nav').setStyle('display','none');   
      }
    });
});

In Conclusion

If you have followed along with this article you should have a pretty good idea of how responsive web design works. The demo is admittedly quite crud and perhaps not as smooth as I would like, however, it demos in practice how you can create a responsive website. This is made incredibly easy due to the handy frameworks such as Twitters Bootstrap.

If you do have any questions regarding this article or any other subjects related to website development please feel free to get in contact or leave a comment below.

Please recommend us if you found this article helpful:
Anthony Luxton
Author
Anthony Luxton
Director

Published:
13th July, 2012

Infographics

5 reasons why you need a website
Android usage – Medina Valley Centre
Website success benchmark
View all

Interviews

Interview with Mr Tom Fallick
Interview with Samuel Claxon
Interview with Anthony Luxton
View all

iPad Web Design

Responsive web design example
iPad Javascript hover
Introduction to iPad development
View all

Marketing

Why you should run an e-mail campaign
View all

Print

The intricacies of preparing for print
View all

Search Engine Optimisation

Getting started in guest blogging
Website recommendations for 2013
The importance of site structure for SEO
View all

Web Development Tips & Tricks

Youtube iframe API player undefined Firefox
Show and hide input password field
Pixel-perfect webpages with just CSS
View all

You and Your Website

LinkedIn For Business
How much content is enough?
How often should I update my blog?
View all

Useful Links

The 960 Grid System Made Easy
960 Grid System
How to create a responsive wordpress theme
Responsive navigation patterns
Twitter Bootstrap
Mootols