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.

Get bigger results by staying small

One of the things that annoys me about people in general is their inability to listen. Most women are a case in point; they never listen to what you tell them. They hears words, rearrange them in their head and twist them into what they want to hear. Politicians are another example. They never listen to what the public actually want. They pretend to listen in order to gain votes but then just do what they want to do, rather than doing what the majority of voters want.

 I’m guilty of not listening myself from time to time. If, for example, somebody talks at me for more than thirty seconds without actually involving me in the conversation, I switch off. I can’t help it - it’s a defence mechanism. I also tend to stop listening to people when they start talking complete bollocks. So it was I found myself doing this the other day when I was at a social gathering. I got talking to some chap who apparently did the same sort of job I do. The only difference was he works for a big London agency and I actually work for a living. He spent ages telling me how he’s been working on some big project for the last eighteen months involving lots of acronym-type things that I’ve never heard of and how the change control and project management and schemas and methodologies and blah blah blah something with involving a flux capacitor have been causing him something or other.

 I found myself thinking about the difference between what he does and what I do and the only difference I could find was his job involves a colossal amount of bullshit. To put it into perspective, over the last few weeks I’ve launched two new websites. In other words, two people have asked me to build them websites, I’ve designed them, coded them, had them approved by the customer and launched them onto the world wide web. Most of the time was spent going backwards and forwards with the customers to make sure I was building exactly what they wanted and waiting for them to respond. The build process itself took a few days.

 So why do big companies take so long to do anything? It’s because they make things so complicated and, the more complicated something seems, the more they can charge for it. That means the chap I was talking to the other day probably earns three times what I do and no doubt drives an expensive car to make up for having a small penis. The other reason is big companies have a lot of people working for them. I, for example, take a phone call directly from a customer, do the work myself and liaise directly with the person who wants the job done. Developers who work for big companies have to go through their manager who probably has to go through their manager who needs to go through an account manager who then liaises with the client’s account manager who goes through their manager who goes through their manager who was probably told by a third party consultant to get the work done so, consequently, doesn’t have a clue. The time spent simply exchanging messages is immense and it’s really a pointless waste of time and the number of people doing jobs that aren’t really needed just strikes me as being pointless.

Here at Datapartners we like to keep things simple. We are also very honest. We may not be able to talk convincingly in Bullshitese or confuse people with jargon in order to convince them to spend more money than necessary for a website. We actually pride ourselves on this. If you come to us for a website, we will do our best to find out what you want, give you an honest quote that is probably ten times less than a big London Agency would charge, get it built in a tenth of the time and then strive to build a long-term relationship with you and continue forward in partnership. This is the Datapartners way!