Responsive Webdesign

Responsive Web design simply means that the layout of your website is changed based on the size of a device viewport.

The early beginnings of the world wide web in 1993 were responsive, even there were not so many different viewports on different devices available.

You don't believe it? Have a look at Figure 1 and try the <h1> <p> and <table> tag by yourself.

cocoate.com/node/10703Responsive Web Design 1993

Figure 1: Website 1993

This is the HTML code

<h1>Headline</h1>
<p>Lorem ips... Aliquam ante nullam.</p>
<table border="1">
        <tr>
            <th>Aliquam ante nullam .... Aliquam ante nullam.</th>
            <th>Aliquam ante nullam .... Aliquam ante nullam.</th>
        </tr>
        <tr>
            <td>Aliquam ante nullam ... Aliquam ante nullam.</td>
            <td>Aliquam ante nullam ... Aliquam ante nullam.</td>
        </tr>
</table>

Listing 1: Website 1993 HTML

The problem in this time was, that all information about the layout, colors and font were included in one big HTML file.

In 1996, the first release of Cascading Style Sheets (CSS) appeared! It was designed to enable the separation of document content from document presentation, including elements such as the layout, colors, and fonts. It was possible to create a seperate file with CSS statements and you could apply the styles for every HTML document by including this file.

<link rel="stylesheet" href="http://example.com/style.css" type="text/css" />

A simple CSS file looked like this

h1{
  color:red;
}
p{
  font-size:12pt;
}
table{
  border: 1px none;
}

Listing 2: Website 1996 CSS file

The output was the nearly same compared to figure 1 (Just the headline is now colored red) and it was still "responsive" as long as the designers didn't use the Absolute CSS Positioning.

Absolute CSS positioning tells the browser that whatever is going to be positioned should be removed from the "normal flow" of the document and will be placed in an exact location on the page.

One one hand this was a dream for people that came from print because they could build a website exactly like the printed brochure, and on the other hand it was a nightmare for the "normal flow" of a website.

Display standards

Computer displays standards are described as a combination of aspect ratio (specified as width-to-height ratio), display resolution (specified as the width and height in pixels). Several display used to have an aspect ratio of 4:3 in the past. In recent years the 16:9 aspect ratios become more and more popular. To get an impression of the amount of common resolutions, have a look at the wikipedia List of common resolutions. Concerning mobile devices, let's have a look at a few examples:

  • Apple
    iPad 1024 x 768 - Ratio 4:3
    iPad3 2048 x 1536 - Ratio 4:3
    iPhone 320 x 480 - Ratio 3:4
    iPhone 4 640 x 960 - Ratio 2:3
    iPhone 4S 640 x 960 - Ratio 2:3
    iPod Touch 320 x 480 - Ratio 2:3
  • HTC
    3100 240 x 320 - Ratio 2:3
    8282 480 x 800 - Ratio 3:5
    Athena 640 x 480 - Ratio 4:3
    Mozart 480 x 800 - Ratio 3:5
    Oxygen 176 x 220 - Ratio 4:5
    ...

I stop here and I guess you can imagine the "absolute position" will lead to problems. Not only because the different aspect ratios and display resolutions. If you look for example at the iPad3, the display resolution of 2048 x 1536 pixel is higher than on most personal computer screens.

This lead us to the question of "how to display" images in a "responsive" way.

Images 

If you just want to display text, everything is easy. But when it comes to images, things can become complicate. Joomla for example has no inbuild image resizing feature in core. There are several extensions to solve that problem, but it's necessary to install something additional.

Imagine you want to write an article and include an image in that article. The width of the image is 800px and your website visitors are using iPhones (640x960px) and the last iPads (2048 x 1536px)! On one device the image is too small, on the other device it is too big!

The best solution would be to have flexible images or a resizing mechanism that fits in each device perfectly!

The Mobile Joomla extension for example resizes the images physically, depending on the device.

The Twitter Bootstrap Framework e.g. uses responsive image handling (see chapter Using the Twitter Bootstrap Framework to build a responsive Joomla! Template from Scratch)

Ask the device! (Media Queries)

The W3C created media queries as part of the CSS3 specification. A media query offers the possibility to inspect the physical characteristics of the device rendering the page. The solution to the problem above is simple: "Ask the device!"

<link rel="stylesheet" type="text/css"
  media="screen and (max-device-width: 480px)"
  href="fitou.css" />

The query contains a media type (screen), and the actual query (max-device-width) to inspect, followed by the target value (480px). We’re asking the device if its horizontal resolution (max-device-width) is equal to or less than 480px. If the test passes, then the device will load fitou.css.

You can combine multiple media queries. The following code will apply if the viewing area is between 600px and 900px.

@media screen and (min-width: 600px) and (max-width: 900px) {
  .class {
    background: #333;
  }
}

Test your website

Have a look at different websites and how they are dealing with different device sizes.

cocoate.com/node/10703Website test

Figure 2: joomla.org has a responsive template