March 25, 2014 | Dave Dechant
In this post I’ll go over the benefits of responsive web design, or RWD for short. RWD has gone from trend to something almost every website should be incorporating. Below I’ll go over the basics of what RWD is, and some of the great benefits it provides your overall web health.
What Exactly is Responsive Web Design?
Technically, responsive web design is using CSS media queries that target specific screen resolutions. On a more basic level, it allows your website to perform and function based on screen resolution and device capabilities.
That is, the website adapts based on the device (screen size/alignment) on which it’s being viewed.
Website Performance
Let’s take a closer look at performance. Performance can mean different things in the context of a website. Speed and conversion rates are two examples that we’ll go over here.
Website speed & performance matter.
Obviously, you want your website to move from page to page as quickly as possible. We all know web surfers are an impatient bunch.
With RWD, the ultimate goal is to have a website that runs smoothly on any device. That means if a developer is building a website using RWD, they’re likely thinking about small file size as a priority. By default, this likely means you will have a faster website.
I go into more detail about improving website speed in a previous post.
Then there is conversion. Generally, a major goal for websites is to convert at some level. That could be leads, a product purchase, or any sort of end goal.
With responsive design, conversion performance can be increased simply because it provides a visitor the best possible experience based on the device (desktop/laptop, tablet, smartphone) they’re using.
Because Papa Google Says So
Generally, when Google recommends something for the web, it’s a good thing. RWD is one of those cases. Google’s main point with regard to RWD is that it uses one set of URLs (your website’s sitemap) that serves the same HTML to all devices.
Obviously, not all websites use responsive web design. In some cases, a website will have a desktop and a mobile version (m.website.com). This means the website must be updated twice.
It also means if I visit a page on your website from my desktop at work, then try to visit the same page on my phone at home, I may have issues. Maybe the content hasn’t been updated to match the desktop version. Maybe the page on the mobile version doesn’t even exist!
It also means your website may look fine on either a desktop or smartphone, but it’s simply not optimized for all the devices in between.
Most importantly for Google, RWD allows your website to remain consistent with regard to content…
…which, as we all know, is king.
Show Everyone Your Best You
We all want to be in good health, and for everyone to see us that way. The same goes for your website. You want your website to look its absolute best no matter what device the visitor is using. That’s where RWD is at its visible best.
Let’s go through a couple of examples that speak to layout and functionality.
Example 1 is a website on an average desktop:
Desktop screenshot of Rico Law Office
You have a lot of screen real estate which means you can show multiple columns of information, large imagery, etc. It also means on this device visitors are likely using a mouse and physical keyboard to peruse the website.
Your responsive design should take advantage of this.
Next up is the same website on a smartphone:
Our screen real estate has just been downsized dramatically. Now we need to use RWD to take advantage of the strengths of this device.
This likely means a single column of content the user can easily scroll through. It also means the user should be able to make use of the touch screen and other specific functionality. Sections such as sliders (for photos, content, etc.) should be able to be swiped rather than just having clickable buttons.
What responsive web design boils down to is providing visitors with the best experience possible based on their device. Is your website flexible enough to reach all the different devices out there?
Web Workout is a blog series concentrating on all the ways you could and should be keeping your web presence in shape. We all know that a consistent workout is necessary to keep in good heath, and a website is no different.
Don’t neglect the health of your web presence; follow along with our Web Workouts!