Understanding responsive and mobile website design

There are always new software updates

Whether you're gone for a holiday or a weekend, it seems like you always have to update some piece of software on some device.

The browsers you use across your devices are not immune to these constant tweaks to their functionality and code, and it's the fact that there are these perpetual changes that makes responsive website design important to you.

Take a step back in time

When I first started dabbling in the world of website building about a decade ago, the standard was to code a static HTML brochure site.

Around that time you also started seeing the mainstream use of PHP in non-system websites, with its concept of including files and folders and separating the elements of a website into components and modules that are linked to and loaded from a database.

And even though that seems like a whole bunch of technical mumbo jumbo that you don't really need to know as a layman, it is the concept you need to understand in order to know why responsive websites work like they do.

With an old-fashioned static website, the framework and elements you see on the page are exactly what the designer put there - the whole picture exists. You can see this when you open an old site like that on a mobile device and the site looks exactly the same, but in miniature.

The modern web

Modern websites, and especially content managed (CMS) websites like Joomla, arrange the elements on the page according to how they are called from a database and directory structure.

Dejan Bozic via 123RF

This means that the page that you are looking at on the website doesn't actually exist... all the little individual elements do exist, however, and the browser you are using gathers them all together to create (or render) the page that you are viewing.

This also means that if your one website is built properly, it will adapt itself to the device that it is being viewed on - whether that screen is 2500 or 400 pixels wide, saving you the cost of having to develop a separate mobile website.

Is your website responsive?

So what are the elements that you are looking for when testing to see if your 'responsive' design really is responsive?

Font sizes

In a responsive design, the width of the screen will not affect the font size and the text will rearrange itself so that it flows down instead of across. The text will be easy to scan or read on a mobile device and you won't have to scroll left or right to read it.

Layout and stacking

When a responsive design renders on a mobile device, there will only be one block of information per view, with everything that is to the right stacking underneath.

So if your design has two columns in one row, each column will be one full-width view with the second column stacked underneath it. The same will apply to a row of five elements: each will stack under the other, with each block view spanning the width of the mobile device screen.

If you have five elements in a row and they're squashing to fit onto one strip view on your mobile, your design's responsiveness has not been set up properly.

An easy way to see this in action is to open a browser window and hover on the left hand side of the frame until you get the arrow that allows you to scale the window. Drag the window in, keeping it the same height but making it thinner.

If the design is fully responsive, you'll actually see the elements rearranging themselves as the window gets thinner. If the design is not responsive, you'll be looking at a miniature version of the site, squashed and scaled into a too-small-too-read view.

Why is responsive design important?

The first reason is future- or forwards-compatibility.

By working with all the aspects of the website as individual elements, it becomes easier to update the functionality or look and feel of a website without impacting the content, and without having to completely rebuild it.

This means that it is easier to keep your website functioning across all the millions of browsers and devices that it can be viewed on, and it will continue working even as browser standards adapt and change over the next few years.

A great example of the impact of this currently is the notifications you receive from banks and other system-based websites you use, telling you, for example, that you can no longer use Internet Explorer 7 or 8 with their website.

The second reason that responsive design matters is the variety of screen sizes on the market today.

From 27-inch iMacs with a 2650 pixel width to tiny little mobile screens of only 320 pixels width, you have no control whatsoever over the device that people use to access your site. So you have to cater for everyone.

A great responsive design is engineered to adapt itself to the width of the screen being utilised, ensuring that your website looks professional and is effective regardless of how it is accessed.