What is Responsive Design, and Does My Business Need It?

EAG, December 18, 2013

a board game shows how responsive design mattersIs My Website Already Responsive?

Chances are, if your business website wasn’t built or re-designed in the past year or so, it isn’t employing a responsive design. There’s been a lot written in the past 6-months-to-a-year about why your business needs Responsive Design, but understanding exactly what that means can be confusing.  It stands to reason that if your website “responds” when viewed on a tablet or phone that it should qualify, right? Not necessarily.

Is it really worth worrying about? Most likely. Your website is usually a new prospect’s first exposure to your brand, and you have about 15 seconds to make your first impression! And if that 15 seconds is spent viewing your site on a mobile phone or tablet, and you haven’t thought about how that looks… well, that presents a problem.

Mobile Friendly Websites are the Norm

Long story short, a mobile friendly site typically means a site was designed for desktop users, but will work (with little or no regard to user experience) on mobile devices, often times serving a smaller version of the desktop site.

Yes, your mobile friendly website will work on a mobile device, as well as a tablet. It actually might not look that bad on a tablet either. The user will be able to view it, interact with it, and get the return of information that they would from a desktop. As noted above, most frequently this is simply a scaled-down version of the desktop site that requires users to “pinch and grab” the content they want to expand it and make it easier to view. Most would agree this isn’t the preferred user experience (especially if your site has an e-commerce component or needs to display product). Functional, but not fantastic.

Employing Device Detection

Long story short, this serves a unique user experience depending on the device being used to view the site. If it’s a phone, an interface specifically for a standard mobile screen is served. If it’s a tablet, an interface just for tablets is served.

Device detection is a process of identifying the type of “machine” trying to view your website. This commonly uses the HTTP headers transmitted by the user’s browser as a User Agent, though it can also be performed from other headers if present, such as IMEI or UAProf links. Mobile device detection systems typically combine detection with the creation or retrieval of a capability profile of the device. These vary greatly in complexity, ranging from one data point to many hundreds. Feel a little lost reading that? Consider this… a device detection process answers the twin questions of “what is it?” and “what can it do?”

There’s a potential problem here, more so a future problem than anything else. The clear lines between phones and tablets are blurring rapidly.  Phones are getting bigger. Tablets are getting thinner. It may not matter in the end, but there’s potential for confusion. Oh by the way, keeping this up may feel like maintaining three separate websites. Just something else to consider.

The Beauty of Responsive Design

Long story short, a responsive design will automatically optimize itself to fit perfectly on a user’s screen. So if the user has a small screen, the elements will rearrange to show your most important content first, and big enough that the user doesn’t need to hunt-and-peck for it.

You’ll have bigger buttons, more blank space between elements to avoid accidental activation, and see your content “stack” in order for a user to scroll down the page and consume it all in one fluid motion if they see fit. A Responsive layout is a combination of fluid grids and images with media queries to change the layout based on the size of a device viewport. With responsive web design one code-base, deployment, and URL provides you with access to many devices including future ones you haven’t encountered yet. You update your website once, and it’s optimized for all devices (by way of their screen size) automatically.  Pretty slick right? Even better, this is a increasingly important component of effective SEO!

Don’t think that layering in responsive design requires you to scrap your site and start from scratch or undergo a lengthy site redesign. Especially if you’re site is built on a user-friendly platform like WordPress, it might not be the daunting task it seems like after reading this. Interested in learning more? Fill out the simple form on the Contact Us page, and let’s start a conversation!


Tell Us What You Think