A question I get a lot from my clients is explaining what it means for a website to be responsive. They see articles saying that your website has to be responsive for good Google rankings or the best user experience, but why?
A short explanation is that being responsive means making your website appear well on mobile devices, but responsive web design itself goes a lot further than just being “mobile friendly,” too. So what exactly is it?
A Little History
Responsive web design has actually been around a long time, at least a long time in the digital space. Coined by Ethan Marcotte in May 2010, he introduced his rather revolutionary idea in popular online publication A List Apart.
The basic idea? That “[website] design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.” In short – a website should resize to fit and work on the size of the device someone is viewing it on.
At the time, most of us were at most building mobile experiences in a second version of the website, built for the first runs of the iPhones and internet-powered phones. But that was an expensive concept and not everyone could afford to have basically two versions of their websites created.
Do you remember the good ‘ol days of having to pinch and zoom your way around a website on your phone?
Responsive Design is Flexibility
In and of itself, the bedrock idea of responsive design is that the websites we professionals create should be flexible and respond to work within whatever environment someone might be using them.
That goes beyond the idea of just creating a legible mobile version without the pinch and zoom, but creating a website that truly works beautifully on a mobile device where our browsers are searching with their fingers and thumbs but also works the same way on a laptop or desktop where we have a keyboard and mouse available to us AND also working the same way on say an internet-enabled TV or game console.
When a web designer or web developer tells you that they are building your website to be responsive, they mean that they’re building it to work well across most devices – whether that’s a phone, tablet, laptop, or desktop computer, or something else all together. Your website will literally respond to the screen size and orientation of the device you’re using and adjust accordingly.
Want to see it in action? If you’re on a laptop or desktop, drag the browser window and make it smaller. You’ll literally see my website change and respond to the screen size.
Responsive Should be Mobile First
Here’s the kicker and what’s changed since 2010 – instead of focusing on the desktop version of the website, we instead now focus on the mobile version first. Any time I start a new website design, I always design out the mobile version first.
The main flexibility mindset with responsive design means that we want the website to work just as well on a phone as it does on a large desktop screen. There was a time where we used to hide blocks of text or even other functionality on a phone because it “didn’t work well,” but that’s long been considered a bad practice.
Instead, we want the browsers to have roughly the same experience on a small device as they do when they find your website on their largest desktop screen. No missing text, pages, or things they can’t do on a mobile device.
Starting with mobile first means that we ensure that we get everything we need into the website and can choose to add any flourishes later in the desktop website.
(Yes, I usually recommend against some features on a mobile device – like video backgrounds and animations – that get added into the desktop, but those are decorative only, not functional.)
Why Google Loves Responsive
I mentioned at the beginning that Google prefers when a website is responsive. But why is that?
Remember how I said in the dark ages of mobile web development, we built a second copy of the website specifically for a mobile device? That meant that you had 2 versions of your website on the internet and 2 versions of your website for Google to crawl. Not only did that mean you had duplicate content, it also usually meant that the content varied a little (because honestly, we sometimes forgot to make changes on the mobile versions, too), and it meant that your link building strategy might be split down the middle because you were trying to drive traffic to two different websites.
Google loves responsive web design because that means building only one version of your website that instead responds accordingly to the device’s size. That means no duplicate content, one website to link to instead of two, and your content is the same across mobile and desktop versions. Because it’s all the same.
Google of course also wants you to provide a good mobile experience of your website, and with responsive being mobile first, it does just that.
Responsive Isn’t an Option
Anymore, having a responsive website isn’t much of an option. Your users expect to be able to use your website no matter what device they’re on, and not having a responsive website will cost you rankings with Google and other search engines.
Before you agree to a new website, make sure to ask your web developer if the site is responsive (it’s almost a given these days, but not quite) and ask if they design mobile first. Both are incredibly important to future-proof that new website of yours and making it a marketing machine.
