About Responsive Web Design

Many people who use the internet on a daily basis may have never heard of ‘responsive’ web design, or have never heard about a particular site’s ‘responsiveness’, but what is a responsive website, and how do we make one? If you’re web-savvy, you’ll probably already know, but if not, then read on and we’ll try and shed a little light on the mystery.

Traditional Web Design

In those olden days, websites were often either static websites built with HTML, or database-driven sites created with non-responsive Content Management Systems. This way of building gave the site a fixed (or static) width, meaning that if the site was built to a width of 800 pixels, it would always be 800 pixels, irrespective of the size of screen that it was being viewed on.

As mobile technology began to take hold, this obviously led to problems as websites were bigger than the screens they were being viewed upon, so users had to zoom-in to read text because it was too small, zoom-out to view the whole page, or scroll inconveniently in all directions to search for what they were looking for, which of course rapidly became tiresome and irritating, leading to a loss of views and users.

Alternate Mobile Versions

The fix for this back in the day was to have an alternative version of your website, formatted to the width of the typical mobile device. A user would browse to a website, and a script on the entrance page would detect whether the viewer was using a desktop computer, a mobile phone, or a tablet. The script would then redirect the user onto the appropriate version of the website.

This seems simple enough, but it had issues. Some website elements would not work on the mobile versions of the website because of their static nature, mobile devices had limited support for some website technologies, and of course, you had multiple versions of your website, so whenever you made a change to your main site, you had to make sure that you changed all of the others too, so it could rapidly become a management nightmare.

Responsive Web Design

This is where responsive design comes in. Responsive design came into being as a solution for the alternate mobile version management nightmare. With responsive design, page widths, columns, rows, images, and graphics are set with a percentage width, rather than a pixel width, So if a page width is set to be 95%, then it will always be 95% of the width of the screen that its being viewed upon. Similarly, if that same page has two columns, one set to 33% and the other to 67%, then the left column will always be one third of the page width, and the right will always be two-thirds. And if an image in the right column is set to be a 50% width, then it will always display as 50% of the width of that column. Simple!

Additional controls also make life easier for viewers of responsive sites. If a site has 3 columns when viewed on a desktop computer, it’ll probably have one column when viewed on a smart phone, with the content logically layered below each other; very nice!

Text is a little different. Text was normally set to have its height measured in points, which is traditional in typography, but using points, text could look too small when viewed on a smaller screen. Instead, we use a pixel measurement, which proportions to the size of the screen much better than points or picas!

For those who are interested, here’s an example of some of the code that makes a modern website responsive:

• Xvw measurement: (vw = viewport width – viewport is the browser window width), which is a percentage scale, so 8vw is a text height that is 8% of the browser window width, so it will always stay to scale.
• Cascading Style Sheet media queries: you can use cascading style sheets to detect the screen size and then apply the appropriate CSS styling to the text for that screen size. Here’s an example:
  • /* If screen size is 728 px wide or more, set font-size of <p> to 18px */
    @media screen and (min-width: 728px) {
    p.example {
    font-size: 18px;
    }
    }
    /* If screen size is 727px wide or less, set font-size of <p> to 12px */
    @media screen and (max-width: 727px) {
    p.example {
    font-size: 12px;
      }
    }

That’s a simplistic overview of what responsive design is and how it works. Obviously, there’s a lot more to it, and if you search online you’ll find a vast range of responsive web design resources, and we’ll cover some other aspects of web design in future posts.

For more info on creating a responsive design, contact Gleneden Ridge Design.