One of the most important things you can do when building a new website is to commit to making it responsive. In 2018, people view websites on all sorts of screens and platforms – equipping your site with the ability to flex to any requirement on any device is crucial if it is going to be used – and enjoyed – by as many people as possible.
This is what we mean when we talk about responsive web design: deploying the tools and even tricks now available to web designers which can allow a website to query a given user’s device and software, understand the requirements thereof, and alter its own display properties to find a best-fit particular to that user.
For example, a mobile phone screen is far smaller than a desktop computer’s; your website cannot render identically on those two platforms, so how can it change its appearance to fit those two radically different environments? What should it look like on a tablet versus a laptop?
Does one of its features work great in Chrome but poorly in Firefox? These things matter if your bounce rate – the measure of how many users leave your site within seconds – isn’t to go sky high. Make your site as responsive to an individual customer’s needs as your other elements of customer service.
For example, think about navigation. The adoption of responsive web design has had a huge impact on site navigation. Since you’re designing for smaller screens, your design needs to work within these limitations.
Long, collapsible menus might be fine on a big screen, but on a mobile, they’ll swallow up all your space; you might get away with devoting a lot of permanent screen space to a navbar on a 14” screen … but what about a 7” one? Consider the famous hamburger icon – hide the menu unless that is tapped or clicked. Give space to your content, not your waymarking.
On which note … really concentrate on the usability of buttons. Your call to action buttons should pop out from the page, both in colour and style. The size and shape of your buttons are just as important as their colour, especially for those with disabilities.
What do I mean by this? Simple: your buttons are where the action of your site is. The Pay button, the Contact button … these are the points of interaction that really matter, that convert eyeballs into customers. Don’t let the, float off a mobile screen; don’t allow them to be lost in a sea of stuff on a desktop. Consider them the stars around which your whole site orbits – the central points around which your responsive website shuffles the rest of its content. The technical term here is the visual priority, and your buttons should have it.
Beyond this need to orient your site around your key buttons, content remains king – so use responsive imagery. One of the problems people run into with responsive design is that while images visually scale on smaller devices, they may still be large in file size and take a while to load. If your user is connected via a mobile data connection poorer than 4G, that can be a pain. Responsive images offer a powerful and effective workaround but can take a long time to hand code.
It’s a good thing you know a team of experts, then. Give us a call to discuss all these issues: there’s a lot more for us to discuss beyond these tips for a great responsive web design!
If you need web design or development, then speak to our friendly experts. Our web developers are based in Coventry, Warwickshire and are always ready to help. Please feel free to contact us and speak to one of our website design specialists.
Because this is an online blog, we write a lot here about designing for the web – what interfaces to use, how to handle menus, what responsive design means. But... More
In the famous scene from American Psycho, Patrick Bateman places all his faith in a business card’s capacity to impress. Sitting opposite his great rival, Van Patten, the 1980s money... More