Responsive design is the hottest thing to happen to websites since having a website. No exaggeration, a fully responsive site is just about the most important thing you can do for your business online, after having a web address that's easy to remember. But what does it even mean? How can a website not be "responsive," and why should you even care?
In the beginning, there was the internet. We viewed text-only websites on our bulky CRT monitors at our desks, over a slow dial-up connection. Dinosaurs and sabre-toothed cats roamed the tundra outside. Mobile phones had gone from the size of a house brick to being the size of a box of matches. But, over time, mobile phones started to do something else: access the internet.
WAP allowed us to be free from the shackles of our desktop computers (those of us who didn't have laptops) and to view some poorly-designed websites on the move. And so began the growth of the mobile web.
As mobile phones grew in size and power, the internet became more mobile. Websites could be viewed from anywhere, and frequently were. Good website designers and forward-thinking companies appreciated the importance of a mobile-friendly website – so, often, two sites were made. A desktop site and a mobile site. The website would detect if you were a mobile visitor, and redirect you to the alternate site.
This was all very well, but as a solution it hasn't been ideal. Laptops were getting smaller, mobile phones were getting bigger and more powerful, tablets have become more popular, and smart watches are now gaining on Swiss watches for popularity. It's not enough to just have an alternate "mobile" site any more.
In short, responsive design is web design done right. Responsive design is how the internet should be viewed. No longer should there be two sites, or desktop and mobile, designed: one site is all you need, if it is truly responsive. But what does responsive really mean?
The term "Responsive" design was originally coined by Ethan Marcotte in the article Responsive Web Design.
Responsive means that your website responds to the visitor. We're not talking a redirect to an alternate site, or a small number of alternate screen sizes, but instead really taking the time to have a website that will respond and adapt to any screen size, to change orientation when a device is rotated. Marcotte said:
This is our way forward. Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them.
CSS is part pf the key to being responsive, with careful attention given to fluid grids and images. There are lots of great tutorials and how-to guides, with Marcotte sharing a lot of good information in his article. Another good place to start is with 70+ essential resources for creating liquid and elastic layouts.
You get it. Websites that are fluid and responsive for visitors. But why should you care? Do your customers really care if your site is fancy, so long as they can get the information they need? Let's quickly look at the top reasons to give a damn.
A recent report from MarketingCharts.com found that the top mobile shopping problems reported by customers were all related to responsive design, with the top problems including "having to enlarge [the page]" "having to use the 'full site' version" and "Text is too small." Your poor design is driving away customers and visitors.
They may not be personally interested in your business, but what Google does care about is indexing your site. From April 2015, Google actively started ranking more highly sites that were mobile friendly, and the search giant has long held a dim view of duplicated content: meaning that if you have different versions of your site with the same content, you could be penalised in Google's results for it. Take the test here to see if your site is mobile friendly.
On the balance of probability, devices aren't likely to become any less varied. Desktops gave us laptops, laptops gave us tablets, tablets have opened the door to wearables – and who knows where we go from here. The fact is, the technology is here to stay, and multiple devices with various screen sizes are only going to proliferate further. As Marcotta says, making a whole design for every different device, input mode, and browser is "a zero sum game".
Isn't it annoying if you don't know the address of the website you want to visit? You can't remember if they have a separate mobile site, if you need to prefix the address with m. first, or if it will be enough to visit the main site, which may or may not redirect you? Responsive design means your visitors only ever need to know your one address, and will be confident that only is it the right one, but that it will work.
Why waste valuable time making different websites for every device or screen size under the sun, when your valuable assets can make one website and do it right? Responsive design is an investment in your business, but it saves you both time and money in the long run, and keeps visitors when they cone to your site.
Except that the major industry players are shaking up the internet in a big way. With Facebook and Apple now publishing news directly on their platforms, Google has stepped into the ring to defend the internet from the "walled garden" of content locked on platforms. Google's Accelerated Mobile Pages aims to provide "web pages that are optimised to load instantly on users’ mobile devices."
AMP is, essentially, a stripped down version of HTML using a restricted set of tags, and boasting load times "as much as 10 times faster than the standard mobile web," publishers including the Guardian and New York Times have already signed up. The only trouble is, some argue, is the it is creating "a two-tiered system separating the Web from the mobile Web," making the open Web less of a level playing field.
Will Google AMP signal a return to separate mobile sites? Will responsive design win out? Only time will tell.
Start building your own great looking and responsive website today with Crazy Domains: it's so quick and crazy easy with our Website Builder.