Understanding responsive & mobile website design

2015-01-12 09:20

So welcome to the world of business in 2015. I hope you had a fantastic holiday and are geared up and ready to take on the world after your break ?

That is of course, after you finish waiting for the 300-million software updates your machine needs to install before it can boot up…

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 make 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.

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 read on a mobile device and you won’t have to scroll left or right to read it.

Layout & 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.

Join the conversation!

24.com encourages commentary submitted via MyNews24. Contributions of 200 words or more will be considered for publication.

We reserve editorial discretion to decide what will be published.
Read our comments policy for guidelines on contributions.
NEXT ON NEWS24X

AB praises selfless skipper

2010-11-21 18:15

Inside News24

 
/News
 

And the Paws24 and Hill's winners are ...

Find out who the winners of our Paws24 pet pics and Q&a competitions are...

 

Paws

Keep your family and pets safe from rabies
5 scientific benefits of owning a cat
Why we love cats
8 great natural remedies for your pet
Traffic Alerts
Traffic
There are new stories on the homepage. Click here to see them.
 
English
Afrikaans
isiZulu

Hello 

Create Profile

Creating your profile will enable you to submit photos and stories to get published on News24.


Please provide a username for your profile page:

This username must be unique, cannot be edited and will be used in the URL to your profile page across the entire 24.com network.

Settings

Location Settings

News24 allows you to edit the display of certain components based on a location. If you wish to personalise the page based on your preferences, please select a location for each component and click "Submit" in order for the changes to take affect.




Facebook Sign-In

Hi News addict,

Join the News24 Community to be involved in breaking the news.

Log in with Facebook to comment and personalise news, weather and listings.