The term responsive web design was originally coined by Web Designer, Ethan Marcotte in 2010 to describe the practice of creating websites that would look good to the user, regardless of what device they used to view the site.
Back in the olden days when phones were for making telephone calls, cameras were needed to take photographs and Facebook didn’t exist, for most people the only way to visit a website was to sit in front of a desktop computer, that was tethered to the wall by a telephone cable. Home computers typically featured a monitor and most users would also be using the same web browsing software. All this consistency meant that, although there would be differences, web designers could accurately predict how their work would be seen by their website visitors.
The idea of every design element being uniformly displayed is now a thing of the past. The rise of the smart phone and tablet computing means that since 2014 internet usage on mobile devices has been higher than that on desktop computers. Even when people access the internet at home or at their desk at work they are often using tablets and mobile phones to do so, which takes us back to the original question of why you should care about responsive websites.
Although there has been considerable debate about the methods and terminology in the years since Ethan Marcotte first introduced the term responsive web design, if you don’t build websites, the only thing you really need to know is that your potential customers could visit your website from a large screen, desktop computer with a top of the range broadband connection, the tiniest, cheapest mobile phone on a train with no wifi and an expensive intermittent 3G signal or any and every possible device in between and your website needs to look good on all of them.
It is entirely possible to create a beautiful well crafted website, designed for a large screen desktop computer and serve it to all your visitors including the ones using smart phones with tiny screens, but it’s a really bad idea. The reason it is a bad idea is because it won’t look the way you intended and more importantly it will be difficult for many of your website visitors to use.
Finding customers is the hardest part of any business, so please don’t waste all the hard work you put into attracting them to your site, by making it too much effort for them to engage with once you get them there.
So having told you what not to do, now it’s time to tell you what you should do.
Not Everything Has To Be The Same.
Firstly move away from the idea that your website should look identical on all devices. A website that looks professional and allows your users to achieve their online goals is far more important than a site that looks the same on an assortment of different screens, especially if doing so subjects people to frustration caused by accidental clicking, miniscule text and difficult scrolling. Having a website that looks amazing on a laptop but looks a mess on every single mobile phone is definitely not the way forward.
The website for WordCamp Manchester 2015 is an example of a responsive website. WordCamp is a tech event for people using WordPress for websites and blogs and the site built for the recent Manchester event uses one of its default themes. When the site is viewed on a desktop pc or laptop it uses a two column design featuring a full length sidebar. The sidebar displays the logos, the navigation menu and an assortment of other web content including their twitter feed, the sponsor logos and the sign up form for their newsletter. When viewed on a smaller device such as an iPad (held vertically) or a smartphone, the sidebar disappears and is replaced with a hamburger menu icon. (the 3 horizontal bar symbol, referred to as a hamburger because the top and bottom lines are said to represent the bun and the middle line the burger) None of the content is removed, it is still available to the user. If they press the menu icon it gives them access to the sidebar content.
As with all elements of web design there is debate about whether hamburger menus are the best option for websites being viewed on mobile devices, but if you have ever tried manoeuvring your way around a website designed for a desktop machine, you’ll probably agree that it is the lesser of two evils. I once tried to buy conference tickets on a mobile phone, whilst sat in a carpark and it was one of the most painful online experiences of my life. Fortunately for them I was really determined to get that early bird ticket and I can honestly say that there are very few other purchases that would have persuaded me to persist with the transaction.
Certain Things Have To Be The Same
Now that we’ve established that it’s acceptable to display your website differently, we move onto the second key point which is to make sure that your branding is consistent. This helps your customers identify who they are dealing with and also helps to cement your image in their mind. Even without the brown fizzy beverages, you always recognise Coca Cola. Logos, colour schemes and other identifiers such as custom fonts should always be used on your website so that your customers recognise you.
Start As You Mean To Go On
If you are considering a new website, make sure that your site will look good when viewed on mobile devices. Whilst it can be difficult to accommodate every single device and every choice of web browser, at the very least make sure that the design accommodates mobile devices because if you manage to attract people to your website it is almost certain that some of them will be using a hand held device.
I was so happy when I saw the design of my first ever website that I was totally oblivious to the fact that a third of my screen was taken up with my logo and very little else, it was also very difficult to view the site on a phone, so please don’t make the same mistake. There will always be at least one web browser or mobile device that doesn’t display quite as as nicely as the others and that can be a challenge but by including a variety of screen sizes as part of the build process you’ll be most of the way there.
Test your site on different devices
Remember the main purpose of your website and make sure that your customers will be able to perform whatever tasks and / or achieve whatever goals you need them to. Do not make it difficult for people to buy from your business.
If you already have a website and only ever view it on your laptop or desktop, visit it on a phone and tablet to see how it looks. If you are already in the process of getting a new website, talk to the developer and ask them how your site will look on mobile devices.