Understanding responsive web design (Simple)

Responsive web design requires a very different way of thinking about layout that is both challenging and exciting. First we must base our layout in fluid grids, that is we should use percentages instead of pixels.

This way we can have greater control over the width of the elements positioned on the screen. This is one of the basic principles of responsive layout. There are two other important aspects that help us deal with this development technique but both are outside the scope of our book. You can find more information by visiting the following link:

http://en.wikipedia.org/wiki/Responsive_web_design

Getting ready

With this information it would be very simple to think that we can set the width of our table in percentages and that our problems are solved, right? Wrong or not exactly right, let's go back to our table in the last recipe and add more columns to make a simple verification.

How to do it...

Let's open the example code, Chapter02_Codes.

1. Now we add four <th> tags to the <thead> tag.

2. Then add more four <td> to each <tr> on the table body.

3. Finally, add a border to the container div on our CSS.

4. Here's our HTML code with four more columns:

   <div class="container">
     <table>
       <caption>CLASSIC ALBUMS OF THE EIGHTIES</caption>
       <thead>
       <tr>
       <th scope="col">BAND</th>
       <th scope="col">ALBUM</th>
       <th scope="col">CLASSIC</th>
       <th scope="col">YEAR</th>
       <th scope="col">SALES 1981</th>
       <th scope="col">SALES 1982</th>
       <th scope="col">SALES 1983</th>
       <th scope="col">SALES 1984</th>
       </tr>
       </thead>
       <tfoot>
       <tr>
       <td colspan="8">* This table is only for example purposes and don't express the really.</td>
       </tr>
       </tfoot>
       <tbody>
       <tr>
       <th scope="row">AC/DC</th>
       <td>Back in Black</td>
       <td>Back in Black</td>
       <td>1980</td>
       <td>120.000</td>
       <td>60.000</td>
       <td>10.000</td>
       <td>130.000</td>
       </tr>
       <tr>
       <th scope="row">Van Hallen</th>
       <td>1984</td>
       <td>Jump</td>
       <td>1984</td>
       <td>0</td>
       <td>0</td>
       <td>0</td>
       <td>120.000</td>
       </tr>
       <tr>
       <th scope="row">Bruce Springsteen</th>
       <td>Nebraska</td>
       <td>Hungry Heart</td>
       <td>1982</td>
       <td>0</td>
       <td>60.000</td>
       <td>70.000</td>
       <td>120.000</td>
       </tr>
       <tbody>
   </table>
   </div>

   We can use more than eight columns but this is enough for our example.

   Tip

   Downloading the example code

   You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

5. Add a border to the div container, as we see here:

   .container {
       width:980px;
       overflow: hidden;
       border:1px solid #000;
   }

How it works...

When our div container is 600px, our table is good but when we change the container width to 980px (Table 03), our table is still safe but does not occupy the entire space of the container, as shown in the following screenshot (note the blank space on right side):

Table 03

Now let's see what happens when we add 100 percent of width on our table:

Table 04: Table with 100 percent width

A little better than the previous one, in this case it is not really a problem, but imagine if our div decreased instead of increasing?

For this, from now to the end of the book we'll use some Media Queries techniques to help us with small screen devices.

There's more...

This matter being outside the scope of this book, we recommend reading the w3c article at http://www.w3.org/TR/css3-mediaqueries/ for better understanding of how this method of development works.

Media queries, which are part of the CSS3 draft spec, don't work in Internet Explorer 6, 7, or 8, Firefox 3, and Opera 9. Hardly surprising, but certainly annoying. So, we need a JavaScript solution for older browsers.

Here's a link to a useful resource to check browsers' support:

http://www.caniause.com

The following screenshot shows the media queries' browser compatibility:

Some lines about Polyfills

For the next recipes we introduce a small library called Respond.js also known as Polyfill to help us with media queries in outdated browsers.

This script simply scans the CSS files for the queries, and then implements them as normal CSS when the page is resized. It's a simple enough idea but the code itself is reasonably complex; it actually loads the external CSS files using AJAX, and herein lies the rub.

You can read more about this at http://en.wikipedia.org/wiki/Polyfill.