Your Quick Guide to Responsive Web Design

If you’ve looked into creating or updating a website recently, you’ve probably heard the term “responsive web design,” but what IS a responsive website?

Simply put, a responsive web design is a way of designing your web pages so the page layout automatically resizes and adjusts to the screen width of the device it is being viewed on.

Your website “responds” to the user’s device, making your site much easier to read and link between pages. Not only is a responsive design more user-friendly for all but it also means there is more consistency in how your site displays on various devices.

Responsive web design removes the need to have both a standard website and a mobile site, making your website management and web marketing much easier.

How Does a Responsive Design Benefit Your Business?

Plain and simple, your website must be accessible however and wherever your clients view it — on a large monitor at the office, on the road with their phone, or sitting on the couch with a tablet. A responsive web design is now a crucial part of your web presence and a key component for engaging with your website visitors.

Benefits to your website visitors of a responsive design

• Ease of Use: A website that adjusts its content, menu and text size to suit a visitor’s viewing screen is easier to read, navigate and share. Responsive websites are also often easier for people with visual, motor, or other impairments, allowing you to capture a wider, more inclusive audience.
• Consistency: Responsive websites deliver a consistent, predictable experience no matter what device your visitor uses. With browsing history increasingly synced to the cloud, people frequently switch between devices. A search started on their smartphone on their lunch hour may be resumed on their desktop when they get home that night. A responsive website insures that the site they viewed on their phone looks just as good on their desktop.
• Simplification: Since you no longer have to worry about having a website AND a mobile site, your site is easier for your visitors to find, share, and link to as there is no confusion over the web address. If a user sends a link to a colleague from their smartphone, the responsive design allows the link to be viewed equally well no matter what device the colleague opens it on. Conversely, with a mobile page the link will show only a limited ‘mobile-friendly’ view even when viewed on a desktop or notebook computer.
  

  Duplicate search index results – desktop and mobile

• Reliability: Responsive sites are generally faster to load and more reliable than trying to redirect mobile users to a standalone mobile site. Translation: your visitor will be able to load your site more quickly, without any disruption due to redirecting URLs, resulting in a happier user!

How a responsive website benefits you… and your web developer

• Fewer Headaches: With a responsive design, you only have a single URL to maintain as the website address is the same for both desktop and mobile devices. This means you only have to update content on one website whereas with separate mobile and desktop sites, you need to make any changes to both sites and you run the risk of getting out of sync with frequent content updates.
• Less Expensive: Since there is only one site to develop and maintain, the cost for your website maintenance are lower. You don’t have to host multiple domains, create and update multiple versions of your website, and spend time tracking and ensuring accuracy between sites. While maintaining a current website is a valuable piece of your overall marketing mix, you also don’t want to incur unnecessary costs by duplicating the work load for the same project.
• Google Will Love You: Google recommends using a responsive web design over having a separate mobile site. When you serve the same HTML pages on one URL you help Google correctly index your content as their Googlebot only needs to “crawl” your pages once. This prevents any complicated redirects and eliminates possible duplicate content penalties. And considering that one half of all LOCAL searches are performed on mobile devices, why would you not want to do everything possible to earn a spot at the top of Google’s local search index?
• Single SEO Campaigns: All of the backlinks (or inbound) links point to a single site so you can focus your efforts on one domain. Your social sharing links are also easier to maintain when you can link back to a single URL, instead of splitting links between mobile and desktop sites.
• Future-Focused: Mobile devices are not going anywhere. In fact, there are currently over 1 billion — 1 BILLION — smartphones in use worldwide. Mobile internet use is expected to actually EXCEED desktop internet usage by the end of 2014. By creating a responsive website, you are not just designing an “iPhone” version. Rather, you are designing for all smartphones of specific screen widths, making your website more flexible and responsive on any device released in the future.
• Leadership: As responsive design becomes the standard and more companies incorporate responsive layouts into their websites, you don’t want to lag behind your competitors. Having a responsive website keeps you at the forefront of your industry and can set you apart from your competitors.

Is Responsive Design Worth the Investment?

This all sounds fine and dandy, but at the end of the day, website decisions often boil down to cost. It’s true that a responsive web design does cost more than doing nothing — which effectively ignores your mobile users — but is less expensive, both in time and money, than building a dedicated mobile-specific site.

Considerations for cost-effective responsive web design

• Plan a responsive layout  as part of your initial design process. To set up a responsive layout on an existing website will cost you more time and money than implementing one in the original site development, as it impacts the entire site’s content structure, images, page layouts, calls-to-action, graphic embellishments, and so on.
• Responsive web design is mostly a one-time expense. Adding new features or page designs down the road might require updates to the responsive layout, this incorporation should be a relatively minor expense as part of the overall update.
• Conversely, with a separate mobile site, you are essentially duplicating all your initial AND ongoing costs, particularly when updating content and menu changes, and updating the device detection database as new devices are released to the market.

Implementing a Responsive Design

Stop for a moment and ask whether a responsive website should be a priority for your business. Consider your target audience and where and how they visit your site.

When deciding whether it’s worth the investment to make your current site responsive, review your website traffic stats to see how many mobile visitors you have. Do many of those mobile visitors stay on your site or do they bounce away quickly?

Also consider your overall consumer demographics. For instance, women aged 34 – 54 are the most active group using mobile sites. Does your target audience include this group? If so, then you need to be meeting them where they’re looking.

While the ideal time to make your website responsive is during the initial design stage, most standards-compliant websites can be updated to a responsive web layout at any time. As with all things, the more complex your layout, the more time (and money) is required to update to a responsive layout, but many sites can be made responsive for as little as $500*.

Update: Check out our new video for a live demo of the key elements affected by a responsive web design and what to consider when implementing a responsive layout on your website.

Before deciding anything — whether you are doing a redesign / facelift or creating an entirely new site — the only way to know the true to speak with a responsive design pro. Please feel free to reach out and connect with me. I am always happy to provide guidance and consult on your project.

*Note that this price depends on the size and complexity of your site, and the individual developer implementing the responsive design.