What You Need to Know About Responsive Web Design

Posted April 21, 2015 by   in Infographic, Marketing Strategy, Responsive Web Design, User Experience, Web Design, Web Design Strategy, Web Development


infographic-teaserAlthough the term “responsive” has been around for a few years, Google’s announcement of their Mobile Algorithm update has gotten people talking about Responsive Web Design.

If you’re not in the web agency community, you might not know what that means, exactly. So, here’s a brief explanation to help you gain a better understanding of what it is, how it works, and better yet, why it’s important!

What is Responsive Web Design?

When a website is “responsive”, it means that the website adapts to the device it is being viewed on by scaling down to the screen size. A website that is not responsive stays at the same pixel width no matter the device width, requiring a lot of pinching, zooming, scrolling and squinting.

Flexible images (images with a percentage-based width) and fluid type (type that isn’t restricted by pixels) are incorporated into a flexible grid (a grid that is based on percentages instead of pixels).

How Does It Work?

Device widths, or breakpoints, are targeted by special media queries in a website’s CSS (stylesheet) to modify the way it appears on each screen. The modified elements might be reduced in size, made invisible (only if the content isn’t relevant), or rearranged. This allows for a single website to be displayed on any screen size without compromising functionality.

This is different than having a separate mobile website because that’s what a mobile website is; it’s separate. That means that the desktop version is one size and the mobile website is another. This could result in misinformation, inconsistencies in content and more time & money spent to update both websites.

Why Do I Need a Responsive Website?

The number of mobile-only users increases every single year, which is why Google updated their mobile algorithms to check for the mobile-friendliness of a website. They are implementing it on April 21st and if a website is not responsive, it will be demoted.

So not only does a responsive website keeps Google happy, creates better user experience and saves time & money, but nowadays, its just expected by users.