If you're doing anything web-related these days, the term "responsive" come up a lot. Even though responsive design is now a standard practice, most people still don't know what it means.
The best analogy I've ever heard for this involves water. Yes, cool, clear, water...(insert Johnny Cash singing here). Imagine you have 3 drinking glasses of various shapes and sizes, long with a pitcher full of water.
Now imagine pouring water into each glass. What does the water do? The water will conform to whatever shape or size the glass is.
Responsive websites do exactly the same thing. The content of your website is the water, and your screen (be it on a desktop, tablet, or smartphone) is the glass. The content will automatically adjust to fit the size of the screen.
So, why does this matter? Well, responsive websites (when designed well) are much easier to use. A user doesn't need to zoom in or out to fill in a contact form or press a button. If you ever tried using a website with a fixed-width on your smartphone...you know how frustrating it can be.
When I first started learning about designing for the web (back around 2009-2010), responsive design was encouraged, but not standard practice like it is today. Most websites had a separate mobile site (attached to a subdomain), which would only kick in if someone was using a smartphone. The mobile site would also have completely different HTML, truncating all the main website's content (removing media like images or video). Many website builder platforms still do this today, but it is no longer a recommended practice. Having 2 different domains with different content means that a search engine like Google can't find all your content on a mobile device.
For example, say that your website isn't responsive, but has a mobile-friendly version that displays on smartphones. One day, you write a really awesome blog post about Bernese Mountain Dogs. You think your post will get a lot of attention, since you optimized it with meta tags, and it's packed with great info and adorable images. A few days later, someone searches Google for Bernese Mountain Dogs on their phone, but your blog post is nowhere to be found. How could this be?
Not only did Google rank your blog post much lower than responsive websites with the same keywords, but Google didn't even find your post because your mobile site doesn't include images or your blog posts. If your website was responsive, Google would be searching through the same markup on a smartphone as it would be on a desktop.
Does that make sense?
If you wish to learn more about responsive design, check out this site by John Polacek. It's really cool and really visual. Enjoy!
Posted on January 28, 2016
by Sara Law filed under