All Biased

A blog mostly about Mac, iPhone & iPad use

Make a responsive website the easy way with Foundation

What is responsive website design?

A responsive website adapts to the screen sizes of web browsers. That means that no matter if you use a desktop computer or an iPhone you will see the pages scaled to proportions that make them easy to read and navigate. Up until a couple of years ago you made completely different websites for smartphones and computers.

"With a little help from my friends ..."

In this guide I will show you how easy it can be to build a responsive website. Fortunately we don't have to start from nothing. There are frameworks that you can use which make it a lot easier than doing it all by yourself. We are going to use a framework called Foundation by Zurb.

What you need to have and know

I assume that you know at least some HTML and CSS. Otherwise you probably wouldn't start your journey through website design by making a responsive one. You need a computer with a code or text editor and a web browser to see how the work progresses. I think that's about it.

Let's get to work.

1: Get Foundation

Go to the Foundation download page and download the Default CSS package. When you are a little more familiar with Foundation you may want to try the Custom CSS package where you can customize a lot of settings in the framework before you download.

2: Unpack and install

Unzip Foundation anywhere you like. That's all the installation needed.

3: Familiarize yourself with the contents

In the foundation folder you just unzipped you should have the following files and folders:

Folders:
- images
- javascripts
- stylesheets

Files:
- humans.txt
- index.html
- robots.txt

The folders contain the Foundation framework files. You don't really need to know what's in them at this point.

Humans.txt gives credit to those behind the Foundation framework. Index.html is a sample html file demonstrating Foundation. Robots.txt is a greeting to search engines.

Open the index.html file in your web browser and see what it looks like. It is a web page with a header, two columns in the middle and a footer with some demo elements. Click on them to see what happens. That's a small part of what Foundation can do.

Grab one of the sides of your browser window and drag to make it much narrower. You'll notice that the contents adapt nicely to the window size. That's responsive web design.

4: Decide on a scope of the project

We are going to make a website with a header on top, sidebars and body in the middle and a footer. The body will be wide and the left and right sidebars narrow. The sidebars can be used for menus and ads and the body for the main content.

3 column responsive website
3 column responsive website

The red lines marks the header, footer, sidebars and body.

Introduction to the Foundation responsive framework

We will not go into any details on how Foundation does its magic. Let's just pretend it's a black box that takes care of the heavy work for us. All we need to do is tell it what we want.

How do we tell Foundation that we want a header, a left and right sidebar, body and a footer?

Well, fortunately Foundation understand rows and columns. Take another look at our sketch. This time I have added more information:

3 column responsive website
3 column responsive website

The heading is one row, the sidebars and body is another row and the footer is the last row.

Now you may wonder why I have written 12 columns at the top of the sketch. That is because we need to tell Foundation that we want two narrow and one wide column. The Foundation framework is built on a twelve column system. If we only told Foundation that we want three columns it wouldn't know how wide they should be. Based on the twelve column system we can say that the left sidebar should be three columns wide, the body six columns wide and the right sidebar another three columns wide. That totals twelve columns and would fill the width of the page.

If we wanted the right sidebar to be a bit narrower than the other we could split them 3 - 7 - 2 or 4 - 6 - 2. The important thing is that a row is twelve columns wide.

5: Begin coding the HTML

We are going to start by defining the outline of the site and then add all the usual HTML to it. Open your text or code editor. Let's start with the header. Basically it is one row containing one twelve column wide panel. Start by telling Foundation that we want a row:

<div class="row">

The row class is defined in the Foundation package. Next we add another div, that is twelve columns wide, and close both of them:

<div class="row">
    <div class="twelve columns">
    </div>
</div>

Add some text in the header:

<div class="row">
    <div class="twelve columns">
        This is our header.
    </div>
</div>

Then we add the second row. The one with our sidebars and body. Remember that we want two three column sidebars and a six column body:

<div class="row">
    <div class="twelve columns">
        This is our header.
    </div>
</div>

<div class="row">
    <div class="three columns">
    </div>
    <div class="six columns">
    </div>
    <div class="three columns">
    </div>
</div>

And some text in each:

<div class="row">
    <div class="twelve columns">
        This is our header.
    </div>
</div>

<div class="row">
    <div class="three columns">
        Left sidebar
    </div>
    <div class="six columns">
        Lorem ipsum dolor sit amet, consectetur adipiscing
        elit. Etiam ullamcorper tincidunt tristique. Etiam 
        tempus ultricies imperdiet. Aliquam consectetur 
        volutpat molestie. Mauris vestibulum euismod 
        tortor non ornare. Etiam eget ligula leo, eget 
        tempus odio. Quisque interdum, turpis ut euismod 
        varius, nibh risus imperdiet mauris, quis aliquet 
        justo turpis vitae ante. Suspendisse non enim dui, 
        at ultricies mauris. 
    </div>
    <div class="three columns">
        Right sidebar
    </div>
</div>

We're almost done now. There's just the footer which consist of one row with a twelve column wide panel. Like the header, so copy the header code and paste it at the bottom if you're lazy:

<div class="row">
    <div class="twelve columns">
        This is our header.
    </div>
</div>

<div class="row">
    <div class="three columns">
        Left sidebar
    </div>
    <div class="six columns">
        Lorem ipsum dolor sit amet, consectetur adipiscing
        elit. Etiam ullamcorper tincidunt tristique. Etiam 
        tempus ultricies imperdiet. Aliquam consectetur 
        volutpat molestie. Mauris vestibulum euismod 
        tortor non ornare. Etiam eget ligula leo, eget 
        tempus odio. Quisque interdum, turpis ut euismod 
        varius, nibh risus imperdiet mauris, quis aliquet 
        justo turpis vitae ante. Suspendisse non enim dui, 
        at ultricies mauris. 
    </div>
    <div class="three columns">
        Right sidebar
    </div>
</div>

<div class="row">
    <div class="twelve columns">
        This is our footer.
    </div>
</div>

Don't forget to change the footer text.

These rows are all we need to define our very simple website. We will finish it off by adding the necessary HTML and some code to invoke the Foundation framework at the top.

<!DOCTYPE html>
<!-- 
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
-->
<!--[if lt IE 7]> 
<html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en">
<![endif]-->
<!--[if IE 7]>    
<html class="no-js lt-ie9 lt-ie8" lang="en"> 
<![endif]-->
<!--[if IE 8]>    
<html class="no-js lt-ie9" lang="en"> 
<![endif]-->
<!--[if gt IE 8]><!--> 
<html class="no-js" lang="en"> <!--<![endif]-->

<head>

    <meta charset="utf-8" />
    <!-- Set the viewport width to device width for mobile -->
    <meta name="viewport" content="width=device-width" />

    <title>My responsive website</title>

    <!-- Included CSS Files (Uncompressed) -->
    <!--
    <link rel="stylesheet" href="stylesheets/foundation.css">
    -->
    <!-- Included CSS Files (Compressed) -->
    <link rel="stylesheet" href="stylesheets/foundation.min.css">
    <link rel="stylesheet" href="stylesheets/app.css">

    <script src="javascripts/modernizr.foundation.js">
    </script>

    <!-- IE Fix for HTML5 Tags -->
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
    </script>
    <![endif]-->

</head>
<body>

<div class="row">
    <div class="twelve columns">
        This is our header.
    </div>
</div>

<div class="row">
    <div class="three columns">
        Left sidebar
    </div>
    <div class="six columns">
        Lorem ipsum dolor sit amet, consectetur adipiscing
        elit. Etiam ullamcorper tincidunt tristique. Etiam 
        tempus ultricies imperdiet. Aliquam consectetur 
        volutpat molestie. Mauris vestibulum euismod 
        tortor non ornare. Etiam eget ligula leo, eget 
        tempus odio. Quisque interdum, turpis ut euismod 
        varius, nibh risus imperdiet mauris, quis aliquet 
        justo turpis vitae ante. Suspendisse non enim dui, 
        at ultricies mauris. 
    </div>
    <div class="three columns">
        Right sidebar
    </div>
</div>

<div class="row">
    <div class="twelve columns">
        This is our footer.
    </div>
</div>

</body>
</html>

To save time we will not go into any detail on these lines. What they do is set up Foundation style sheets and JavaScript in addition to take care of older versions of Internet Explorer.

Lets look at it in a web browser. But first, let me warn you, it won't be pretty. :-) Save the HTML file in the foundation folder from step 2 and open it in you browser. It should look something like this:

Very rough first version of a responsive website
Very rough first version of a responsive website

Resize the browser window to see it adapt to the width.

Before we end this session we are going to put grey panels behind the header, footer, sidebars and body. It will make it easier to see that what we have achieved is what we set out to do in step 4.

Notice the <div class="panel"> tags below and don't forget to close them:

<!DOCTYPE html>
<!-- 
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
-->
<!--[if lt IE 7]> 
<html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en">
<![endif]-->
<!--[if IE 7]>    
<html class="no-js lt-ie9 lt-ie8" lang="en"> 
<![endif]-->
<!--[if IE 8]>    
<html class="no-js lt-ie9" lang="en"> 
<![endif]-->
<!--[if gt IE 8]><!--> 
<html class="no-js" lang="en"> <!--<![endif]-->

<head>

    <meta charset="utf-8" />
    <!-- Set the viewport width to device width for mobile -->
    <meta name="viewport" content="width=device-width" />

    <title>My responsive website</title>

    <!-- Included CSS Files (Uncompressed) -->
    <!--
    <link rel="stylesheet" href="stylesheets/foundation.css">
    -->
    <!-- Included CSS Files (Compressed) -->
    <link rel="stylesheet" href="stylesheets/foundation.min.css">
    <link rel="stylesheet" href="stylesheets/app.css">

    <script src="javascripts/modernizr.foundation.js">
    </script>

    <!-- IE Fix for HTML5 Tags -->
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
    </script>
    <![endif]-->

</head>
<body>

<div class="row">
    <div class="twelve columns">
        <div class="panel">
            This is our header.
        </div>
    </div>
</div>

<div class="row">
    <div class="three columns">
        <div class="panel">
            Left sidebar
        </div>
    </div>
    <div class="six columns">
        <div class="panel">
        Lorem ipsum dolor sit amet, consectetur adipiscing
        elit. Etiam ullamcorper tincidunt tristique. Etiam 
        tempus ultricies imperdiet. Aliquam consectetur 
        volutpat molestie. Mauris vestibulum euismod 
        tortor non ornare. Etiam eget ligula leo, eget 
        tempus odio. Quisque interdum, turpis ut euismod 
        varius, nibh risus imperdiet mauris, quis aliquet 
        justo turpis vitae ante. Suspendisse non enim dui, 
        at ultricies mauris.
        </div>
    </div>
    <div class="three columns">
        <div class="panel">
            Right sidebar
        </div>
    </div>
</div>

<div class="row">
    <div class="twelve columns">
        <div class="panel">
            This is our footer.
        </div>
    </div>
</div>

</body>
</html>

That's it. Refresh your browser to see the result.

A responsive website in a desktop browser
A responsive website in a desktop browser

Still not pretty but a working responsive website in almost no time at all. And it works in a mobile browser too:

Good luck making your own responsive website! Make it prettier. ;-)

Published 3 jan 2013 by Niklas Johansson
comments powered by Disqus