A responsive website explained

For the last year or so, I've been trying to convince a lot of our customers to part with some of their hard-earned cash and update their website. This isn't because I'm a greedy, money-grabbing parasite, it's because the internet moves very quickly and websites go out of fashion quicker than boybands.

The reason I've been pushing people to get their sites redesigned is because of the introduction of mobile-friendly, or "responsive" websites. But what is a responsive website? It's a concept I try very hard to explain to people but, for some reason, very few actually seem to understand it.

In the old days (a couple of years ago) when people started using their mobile phones more regularly to surf the internet, they found most websites were hard to view on such a small screen and they needed to zoom in and out, scroll left, right, up and down to navigate around it. Then some bright spark decided it would be a good idea to create a "mobile" version. This was a trimmed down version of the site that fit better on a mobile phone.

This was great except it meant that people effectively needed to get two websites designed: One for viewing on a regular computer and another for viewing on a mobile device. This meant more cost for the customer. It was made worse when smartphones boomed and suddenly there were hundreds of different mobile phones and tablets on the market, all different shapes, sizes and using different browsers that rendered web pages slightly differently. This meant that a mobile site that looked good on an iPhone 3 wouldn't necessarily look good on a Samsung Galaxy (or an iPhone, 4, 5, 6, Galaxy s3, s4, s5, Google Nexus, iPad, Kindle... you get the idea).

Then some brighter spark decided the code behind the website should be able to control this. I won't go into any technical detail but what happens is there is just the one website and it is coded and designed in such a way that it will automatically adjust and realign elements on the page depending on the size and shape of the browser it is being viewed on.

That's all there is to it. However, despite spending hours explaining this concept to people, the number of times I've then gone on to build a site and the customer has come back saying "But it looks completely different on my phone compared to my computer" makes me want to quit my job and become a hermit. That is exactly the point. The website will look different. It will shrink and readjust to best fit the screen.

They say pictures speak louder than words so here goes. Below are visual examples with an explanation. For this example, I have used our very own Datapartners website, which is a shining example of a responsive design.

On a desktop computer

So you can see there it looks like a "normal" website. There is a main navigation on the top left, a site search on the top right, an eye-catching cover photo that spans the entire width and a bit of blurb that explains in brief detail who we are, what we do and how we can help you. Underneath that is a list of our apps and services in three columns. It uses a very familiar and fashionable layout that is used by a lot of companies.

For the purposes of this example, I have included another screenshot of the home page when scrolled. This is just to emphasize the use of the three columns for the apps and services we offer (you should check them out by the way; they are awesome!)

On a tablet

So now someone is viewing it on a tablet. Generally this  type of screen is roughly between one half and one third the size of an average desktop monitor. In this instance, the cover photo fills most of the page. This is basically because having a photo of this proportion that is as wide as the screen but only half the depth would look crap. However, the main navigation has become larger and the intro text stretches across the page. The rest of the page looks the same as the desktop version, only everything has slightly less spacing because the screen is half the size.

However, if the person then flips their tablet round so it is now displaying in portrait rather than landscape you will see where the responsive site really starts to work. In the example on the right, the website automatically aligns the intro blurb and call to action to the middle. The cover photo is cropped to fit the new sized browser and the apps and services which were previously in three columns are now tiled one above the other. This is done to allow the text to be bigger and more accessible. If we still had three columns the text would have to be so small so as to fit on the screen it would be very difficult to read.

The other change when viewed on this device is the search box has disappeared. This is done simply to save space.

So, just to clarify, all of this stuff happens automatically as soon as the device is turned around. It is still exactly the same website, using exactly the same code. It isn't a separate site. The user doesn't have to do anything. The site automatically knows it needs to readjust to fit better on a smaller screen. Clear?

On a mobile phone

So, following on from the tablet, we come to the mobile phone. Teenagers often look at websites while walking down the street not looking where they are going and end up walking into me. None have yet been pushed in front of a bus. Yet.

Anyway, you can see similarities between this and the tablet viewed in portrait. Because a mobile screen is generally narrower than a tablet in portrait, we can see the intro text has wrapped slightly more. That's about the only difference. When the phone is viewed horizontally (in landscape) it looks just like the tablet version in landscape. In this example, we have made the main navigation slightly bigger so it spans the whole width. Again, this is done simply to make the text bigger.

As with the tablet, the search box has been hidden on the mobile phone as a way of saving space. However, there is an alternative way of building the navigation on the smaller browser so we can get the search box in as well. This is explained in the examples below:

So, can you spot the difference? No? Well in this example, we have hidden the main nav and replaced it with what's called a "hamburger menu". You don't need to be a genius to figure out why it's called that. Because this menu only takes up a tiny space on the left, there is now plenty of room for the search on the right.

So where has the main nav gone? Well, click on the hamburger menu and the main nav is revealed.

To see this in use, visit www.eddiehall.com

So that's it. I will stress one last time: This all happens automatically. The website can tell what size browser it is being viewed on and will automatically change to best fit the screen. The site WILL look different when viewed on a mobile phone. It WILL look different when viewed on a desktop computer. It WILL look different on tablets. But that is the idea! It is all about making the site more accessible and easier to navigate for your visitors. If people can't navigate around your site well enough they will leave and go and visit your main competitors. Simple.

So, are you interested? yes? Good. We can help you so contact us and we can design you a modern, mobile-friendly, fashionable, accessible, search-engine friendly and generally awesome website.

I think I've run out of superlatives.