The Herd

The official blog of Four Ewes Design

About the Blog

We love sharing ideas, and finding new ways to help our clients. Here you'll find info about marketing, e-commerce, design, and other things we think are cool.

If you know of something we should share, please contact us!

Back
Post Featured Image

What Does Responsive Mean?

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.

water glasses and pitcher

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.

Having a responsive website also helps improve your Google rankings. As of last year, Google penalizes websites that are not at least mobile-friendly (i.e. includes a separate website that only displays on small screens). This means that fixed-width sites would display further down the list of search results on Google, which can be detrimental to helping people find you online. Furthermore, the HTML (markup) of responsive websites are exactly the same regardless of the screen size. The only thing that changes is the CSS styling (and perhaps a bit of JavaScript if you're nasty).

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!

comments powered by Disqus

Like what you just read?

Subscribe to our newsletter for exclusive offers and the latest updates.