Web design for a new generation

Thinking Responsively

The year is 1999. The Nokia 3210 is the must have mobile phone. This is due mainly to the 'ahead-of-its-time' feature list it boasted. There is no external antenna, you can send picture messages, and you can even play games on it. All of this witchcraft is wrapped in a small and affordable package that appealed to teenagers and adults alike.

Now, fast forward 15 years. Phones now contain a wide range of services that people back in the 20th Century couldn't have even dreamed of. They've exploded in popularity to such a degree, that almost everyone and their dog seems to have some kind of mobile device or tablet.

Web usage is one of the areas that has been impacted massively by this boom. The number of devices that can access the internet has increased astronomically over time, with everyone's phone, games console or kitchen appliance being able to access the internet.

The vast amount of devices that can now view web pages is an issue that web professionals are trying to prepare for and consider. If Google are going to release glasses that can view web pages, this means the way web pages are conceived and built needs to change.

The Problem

Back in the olden days when considering a website, there were very few eventualities that needed to be considered. True, there were many different screen sizes and browser types that needed to be accounted for, but you could assume that the dimensions of the screens themselves would fall within a handful or ranges. That is no longer the case, however. It seems like every couple of months there is a new type of device that has its own built-in web browser that website developers and owners need to consider.

In order to be fully prepared for the gizmos and gadgets of the future, websites need to be built with this future in mind. There are a couple of ways of going about this. As highlighted by one of our earlier blog posts, Why does my business need a mobile website?. That being a mobile-exclusive version that is tailor-made for viewing on smaller screens. Another way of solving this issue is by dabbling in something called "Responsive Web design".

A Responsive Solution

Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience across a wide range of devices. Wikipedia

An Analogy

You're about to embark on a two week holiday abroad. You pack enough clothes to cover you for that time and include spares, just in case of unforeseen circumstances. You grab your favourite suitcase and everything fits in comfortably. Jobs a good'n.

Now, imagine you are going on the same holiday with the same amount of luggage, but your favourite suitcase unfortunately has a broken handle. After grieving sufficiently, you dig around in the loft and find another suitcase, albeit a one that is considerably smaller. You now have a big decision on your hands. You now have more stuff than can fit in the new case. What are you to do?

Your first idea may be to take less with you. That is fair enough, but what happens if you get caught short while you are away? Then you're in trouble. Do you try and squeeze everything in and force the case shut and hope it doesn't explode sending polyester and cotton flying into the sky?

This is, essentially, the main idea behind Responsive Web design. How do you adapt your site to work on a smaller device, without negatively affecting the user experience on the other end?

What it does...

Responsive Web design is the theory that a web product should be able to adapt to its surroundings in order to provide the best user experience no matter the circumstances. This takes the logic behind building a mobile-only site and applying it to literally create a one-size-fits-all solution.

While it may seem like it, this is not really a new line of thinking. For years, developers have tried to take users with disabilities into account when developing where possible. This thinking is exactly the same, only device capabilities are now being considered alongside the capabilities of the user themselves.

...and how it does it

Responsive design is built upon three main pillars:

• A flexible grid
• Flexible images
• Media queries

A flexible grid is a design structure that changes to suit different browser shapes and sizes. Flexible images are ones that change dimensions in the same fashion or, in some cases, load differently to accommodate less powerful devices.

The third aspect of Responsive Web Design's are media queries. In a nutshell, a media query is a piece of CSS code (Learn about CSS) that executes if a certain criteria relating to the size of the browser is met. This means you can have blocks of styling information that only applies if the browser's size falls within a certain range.

The ins and outs of how to tackle responsive design from the developer's point of view isn't massively important for this particular post, but knowing generally what happens under the bonnet is certainly helpful when thinking about whether your site should be responsive or not.

Why you should begin thinking about thinking responsively

I know what you're thinking. Why should I, as a web site owner, put more time into my website when the user can just scroll around our full site?

Well, apart from saving your users from repetitive strain injury, there are many signs that point towards thinking more about the mobile or tablet user experience.

The main reason for having a website for yourself or for your business is to get more eyes on what you are trying to share or promote. More people have access to a web browser than ever before, on more devices than ever before. To take advantage of this, the flexibility of any potential web presence must become a top priority.

Here's some numbers to get you thinking:

In Q1 of 2012, 11.38% of all website traffic came from tablets or smartphones. In Q1 of 2013, that number almost doubled to 21.02%. In three years time, it is predicted that the amount of mobile internet users will be larger than the amount of desktop users. Smart Insights [LINK]

How can a website built purely for desktop users be effective if people are mainly using tablets and mobile phones to access it?

As stated before, there are many different ways of addressing this, building responsively is but one of those ways.

In conclusion

While industry leaders are hailing responsive design as the best thing since sliced cheese, it is the reasoning behind it that is important. Whether you decide to take the responsive route, go down the mobile-tailored path or even rock on to adaptive avenue, considerations must be made along the way to determine how you will reach the next generation of web users.

The numbers don't lie and if this current rate of expansion for mobile technology continues into the future like many believe it will, maybe now is the time to make plans for a future that may be here sooner than you realise.