At this point, if your website isn’t mobile responsive, you’re behind the times. But what exactly is it?
In a sense, it has been around for a long time:
How We Got Here
While some argue the first responsive website was Audi’s 2001 redesign, the first time the idea really got any attention was in 2004 Cameron Adams put together a demonstration site, which remains online to this day. It got some attention, but the technology was still out of the grasp of most web designers and it remained an interesting idea, but not one that got a lot of traction.
caption: Audi’s website from 2001, pulled up from the archives. Its responsive functionality doesn’t seem to have survived the trip.
Then smartphones happened. A lot changed between 2005 and 2012, but the most important factor for us right now is the 2007 launch of the iPhone, followed by a surge of competitors. We’re over a decade into the age of the smartphone, and the tiny devices have totally changed our lives.
It was really Ethan Marcotte’s 2010 article in A List Apart (and the subsequent writeup in Smashing Magazine) that took things mainstream. Smartphones hadn’t quite taken over the world but they were getting there, and canny designers were starting to realise that a new era of flexible design was dawning. If your site didn’t look good on mobile, you had a serious problem, but making sites look good on mobile was hard: you’re dealing with smaller screens with wildly different resolutions, that can change from portrait to landscape at a flick of the wrist.
It wasn’t enough to have a “desktop site” and a “mobile site”—various smartphones had totally different screen resolutions and making a single site for all mobiles created more issues than it solved. You needed a flexible layout that would adjust itself based on the device. You needed responsive design.
Google started pushing mobile-first indexing in 2013 and ramped it up over the next few years, and in 2014, smartphones became the primary device that users worldwide used to access the internet, and in 2017, eCommerce sales from smartphones overtook desktop as well. The gap between phone and desktop internet use increases with every year that passes: it’s about 60/40 in 2019 but that’s just going to keep going up.
Particularly in the developing world and in countries like China that were not notably wealthy in the 20th century but have a burgeoning middle class, mobile is huge—it’s much more accessible for the average user than getting fibre installed, especially in markets like Indonesia, which is an interesting case: in a lot of cases they skipped straight from little/no internet to High Speed WiFi, because it’s much easier to integrate wireless hubs with existing communications infrastructure.
It’s 2019, and mobile is here. If your site can’t handle it, then your company isn’t going to survive. Desktop is becoming less dominant but it’s unlikely to go away entirely: mobile still isn’t great for doing actual work on and that doesn’t seem like something technology is going to change for a long time.
Okay So, What Is it?
Responsive design changes its layout based on the size of the viewport. It is “content like water”: it adjusts to fit the container.
It does this a few different ways:
- Fluid grids that are based on relative units (like %) rather than on strict units like pixels
- Images follow the same rules: measure in relative units
- CSS3 Media Queries can instruct the browser to display content differently based on the size of the viewport
- Frameworks like Bootstrap come with pre-built codeblocks to take a lot of the busywork out of things
You may have noticed that’s almost entirely CSS, and that’s no coincidence: responsive design can sometimes use a bit of JavaScript if you’re trying to do something clever but it’s primarily done using CSS. It is the domain of creative designers and other markup specialists. It’s a specialised (and often underappreciated) skillset and if you want to get it done, you really need to bring in a professional. Personally, I recommend CodeClouds—they’re a global development company with offices on three continents. With a 4.9 average on Clutch.co, they’re a great choice for your responsive design needs.
I had to do a bit of digging through old sites while researching this article, and it turned out harder than expected. If you end up in my position, you might want to read up on how to view a cached version of a website.
