Responsive design for mobile and tablet displays

If you go back to 2005 and ask any web developer or designer this question – "How important is mobile design for your clients’ business?" you’d get a range of answers. They would vary from a simple "Not very", through "somewhat important, but who looks at the web on their phone?" all the way up to "I try and implement a solution for mobile, but it’s a nightmare!"

Nowadays, accessing the internet on mobile platforms isn’t just something to be aware of, it’s something that should form an integral and core part of your project strategy. In fact, the notion of "mobile development" itself has become a lot more fluid. It’s not just smaller mobile devices you might need to cater for, but people viewing websites on larger screens such as TVs.

There’s also far more variety in the heights and widths and dimensions of devices. It used to be that you could (more-or-less) assume a given rough viewport size for mobile visitors, but that’s no longer the case.

It’s now estimated that more than half of the visitors to an average website will be viewing it on a mobile device.

The current state of the responsive web

A lot of websites aren’t currently well optimised for devices. You can tell if a site has a good responsive strategy or not by visiting the same URL as you would on your desktop computer from your phone. If the content is readable without pinching/zooming, and looks like it’s been well thought out from a visual presentation point of view, then chances are, some work has gone into making sure it’s responsive.

When considering mobile development, a clean approach is to work from a top-down approach. Don’t think about the precise layout of a given page initially – instead, think about the content that matters to a specific type of visitor.

• A visitor on a tablet or mobile phone may want to see information quickly or simply find your phone number – prioritise this information on the page, and provide clear, simple navigation.
• A visitor on a desktop-size screen may want to spend longer looking over content – navigation can be more detailed.
• A visitor on a much larger screen may want to browse more informaiton, but with a significantly simpler interface. Also consider if this is even the type of visitor you may expect to recieve.

However, there’s a catch here in that some people might be using small monitors – some people might be using large tablets.

To accomodate this, you can also layer on some additional functionality using javascript – Don’t worry about the terminology there, all you need to know is that javascript is a way of enhancing what a specific website can do over-and-above a basic functionality and layout. It’s like the icing on the cake, so to speak.

Progressive enhancement

There’s a mode of thought online which is referred to as "Progressive enhancement". This can be summarised very basically, as follows

Content first

The basic content of the site, i.e. the information that is important to your users should be available to everyone, regardless of whether they’re using a modern cutting-edge browser on a fast computer or on a 5-year old smartphone.

Keep the structure simple

The HTML structure of the site should be simple. There should be no additional complexity added to the markup to introduce extra styling. For example, take the following HTML

<header>
  <div class="heading-decoration"></div>
  <div class="style-heading"><h1>This is the Heading</h1></div>
</header>

Whether you understand HTML/CSS or not – this HTML is structurally more complex than it needs to be. The following HTML will do just as well

<header>
  <h1>This is the Heading</h1>
</header>

And we can then replace the functionality of those missing div elements with some clever styling rules. The key here is that all the additional fancy styling that was being applied in the first example by the extra HTML structure can instead be applied by the use of enhanced external CSS

Progressive functional enhancement

As well as the style of the site, make sure that the functionality degrades well for older browsers. For example, when building in functionality with Javascript, make sure that a site will function just as well with Javascript disabled.

For a few years, it appeared as if the trend in ever-increasing computer power and the growth of the internet meant that everyone would eventually be able to run more and more complex websites. But if anything, the opposite has become true. With the "Internet Of Things" meaning that everything from your computer to your wristwatch is capable of accessing the internet, the range of processing power available for displaying ever-more complex websites is actually more diverse than it was 10 years ago. You may have one visitor to your site viewing it on a 5 year old phone, another on a 40" television screen connected to a modern PC.

You now not only have to consider the size of a visitor’s viewport, but the processing capabilities of their device or machine.

Building a project without progressive enhancement in mind is just throwing away an easy win. Something so relatively simple has a massive impact on your audience size.

Also with emerging developing nations such as Africa, China, India etc. getting their citizens online more and more rapidly with the use of cheap handheld devices, the audience for low-requirement websites is growing rapidly.

Complex functionality needs to go hand-in-hand with elegant fallback mechanisms so that all users can view your content. Regardless of whether or not you think your site has a high profile message, or you think your viewers will all have devices capable of reading your content.

It’s something that you just can’t afford to ignore in these modern times.