How to create a truly responsive website

Responsive web design is crucial for user experience, engagement and meeting Google recommendations. But what exactly is it and how can brands ensure they’re creating a truly responsive website? We hear from TBB’s web developer John Bell and UI designer Charlotte Allen about why responsive design is so important and how it goes so much further than simply creating a site that scales to fit a smaller or bigger screen.

Responsive web design is the method of constructing a website to ‘respond’ to different screen sizes. When you load a website, the browser will calculate your screen size. Using instructions given to the browser, we can tell it to display the layout, styles and content of a website differently depending on that calculated size.

“Responsive website design is the jewel in the crown of the modern digital world,” explains designer Charlotte. “It’s the embodiment of everything user experience (UX) – from effortless navigation, simplistic design, flexible orientation and resolution to pretty pronto loading speeds.

“With the stratospheric hike in the use of mobile devices and the ever-expanding viewership from mobile users, websites need to run smoothly and seamlessly across different devices. Any brand not designing for this spike in popularity is itself doing a huge disservice if it’s not responding and adjusting to smaller-sized screens.”

And meeting user need has come a long way, as developer John adds: “Web developers actually used to build separate websites for different screen sizes. As you can imagine, this would quickly become a mammoth job to maintain given how many different devices are released every year with a different screen size. Responsive design tackles this issue by displaying the same website, but differently for each screen size.”

Google’s ‘mobile first’ approach

In 2015, Google took the decision to start ranking websites based on how easy they are to use on a smaller screen. This takes into consideration button and link size, any content wider than the viewport and whether users need to zoom in to read text.

John explains: “Did you know that any text less than 12px in height is deemed too small by Google? Because of the search engine’s change of heart, website design very quickly shifted focus on to mobile-first website design – that is, designing a website for mobile first and then expanding from there for other screen sizes. Website owners realised that not having a responsive website would have a catastrophic effect on SEO and in turn, bringing traffic to their websites.”

But there’s a lot to consider and implement when attempting to create a truly responsive website – and it’s about more than simply creating a site that can scale to different sizes.

“From a developer’s perspective, the most important priority in building a responsive website is to choose a CSS framework you can utilise to build the scaffolding of the site,” says John. “CSS frameworks are freely available online and give you a library of CSS classes to declare in your HTML code for screen size breakpoints. Most of these frameworks use a grid system. You can set what size the columns in the grid will be for each screen size and whether content is going to wrap on to the next line for a smaller screen size, or show side-by-side on larger sizes.”

Meanwhile, Charlotte explains that hierarchy is extremely significant – especially on mobile. “Users will sift through a website and being clear with key messaging and actions will anchor much more time the user spends on a website,” she says. “A good way to think about it is that even books with a cracking front cover can be shunned mid-way through. This applies directly to digital design – there’s a need to create a flawlessly designed website, yes, but it must be well-structured too. Working closely with developers helps to grasp what the possibilities and limitations are in regards to a responsive website design.”

She adds: “Websites have the power to morph and adapt to best suit any device – much like how water takes to the shape of the container it’s in – so when a user decides to shift from the desktop computer and pick a website back up on another device, it’s imperative to focus on the bottom-line elements of usability, brand values and navigation. These should always be respected first and foremost or we risk creating something that’ll be user-repellent.”

Getting it right – and getting it wrong

While many brands are getting it very right when it comes to responsive web design, some continue to miss opportunities and fail to recognise that the desktop-only days are long gone. And it doesn’t always pay off to confuse the two, as Charlotte explains. “There’s been an upswing of accessing websites through mobile devices and the hamburger menu has managed to creep into the desktop version. They’re recognisable, unobtrusive, help to reduce clutter and aid in places where visual real estate is vital – all this can bring incredible value. But utilising the hamburger needs to be thought about. If it’s used for the right reasons and best practices are followed by a good chef (designer), it can result in great user experience and increased conversions.”

John agrees that it’s about balance – some brands are simply trying to do too much on a smaller screen. He explains: “When it comes to responsive development, it’s very much a case of less is more, and I think that is now carrying across into development for desktop too. This really starts in the planning phase of your content and setting out your sitemap. Once you have a clear plan in place, you can create layouts that lead your audience to meaningful content while having a fluid and professional design across your site.”

A responsive website isn’t simply a ‘nice to have’ – it’s a necessity. Designing for every and any device will ensure you’re giving your customers what they need in as effective and seamless a way as possible. Whichever device users are on, they should have a similar experience of your brand and site.

Want to know more about responsive web design? Get in touch to speak to the crew.