Kate Hazeldine, director of digital design agency Yellow Circle Web Solutions, explores the importance of responsive design.
Consider how you access the internet. You probably have a PC or laptop in the office, but it’s likely that you also connect on your smartphone or tablet. Despite this fundamental change in how we go online, how often do you visit a website and find it’s not compatible with your mobile device?
If your website has only been designed to look good and function properly on a PC, it can be frustrating trying to access it on a phone or tablet. It can sometimes appear the same but the writing is really tiny, or you have to scroll down until you lose all sense of what’s on the page.
If this is the case, most people will just give up. The concern is how many potential customers you might lose because of their frustrating first encounter with your website.
When mobile internet started to become increasingly popular, forward-thinking companies began to create mobile versions of their sites for people on the move. Effectively, they were very basic versions of the main website remade as a secondary website.
This seemed like a good idea at the time, probably because we couldn’t imagine just how quickly the industry would develop. It wasn’t conceivable that something like responsive design would become a realistic option so soon.
Responsive web design is a way of coding a website to make sure that regardless of the device used, it looks good and works properly. Arguably, it’s the single most effective way of making sure that any potential customer has a good experience on your website.
In April this year, Google expanded its use of mobile-friendliness as a ranking signal. The change affects mobile searches in all languages worldwide and has had a significant impact on Google’s search results. Consequently, users are now finding it easier to get relevant, high quality search results that are optimized for their devices.
Having a responsive website means that a mobile device will show the elements in a suitable, readable layout for your screen size, and if you have drop down menus they will be the right size.
It can even make it easier for your prospective customer to get in touch. If you’ve got a phone number on a page, they can just hit the phone icon and make the call instantly.
The other advantage to a responsive design, rather than a separate mobile design, is that you only have one website to maintain. So, if you need to add or delete a product, or change a price, you only need to do it once, making it a more cost effective option.
The important thing to remember is that a website that is inaccessible to mobile traffic is only doing half its job.
3 top tips to help you achieve responsive design:
- Only use what’s essential – if you simply reproduce your desktop site on a mobile device it can create long scrolling pages that are frustrating to the user. Instead remove any non-essential content.
- Be touch-friendly – allow users to interact with your website through touch screen devices by making sure components such as slide shows and forms are touch-friendly.
- Testing, testing, one, two, three – don’t just rely on device simulators; test the website on as many different devices as possible. And remember mobiles and tablets work in both portrait and landscape modes, so build for both.