Responsive Re-Design: Key Design and Conversion Considerations

If your customers are still pinching and squeezing their way around your website when viewing on a mobile device or tablet, you may want to consider switching over to a responsive design. What's that you say? You've spent how many hours going back and forth with your designer to achieve the perfect website, chock full of great content and a layout that truly reflects your brand? When all is said and done, if your website has not shifted its focus to adapting to the multi-screen landscape we live in, chances are your customers aren't benefiting from that great information. Without a responsive design, your current site may be suffering from "abandoned shopping cart" syndrome where the viewing experience is frustrating enough to dissuade your customers from continuing to browse, causing them to leave your site altogether.

Let's face it. If you walked into a store and couldn't readily find what you needed, chances are, you would probably leave. The idea of searching too hard to find what you came in for is definitely unappealing and time consuming. The same applies to your website, usually the first point of contact that the outside world has with your business. Your customers are on the go, and in an effort not to let anything slow them down, phones and tablets have overtaken the traditional computer as a means of searching for goods online, browsing and shopping. Pew Research Center cites that over 88% of adults in the U.S.A. alone own a cell phone, as of 2012. 17% of those users prefer using their phones to go online.

What does this mean for your business? Giving your viewers a great browsing experience across all devices is a sure way to encourage longer browsing times, ultimately leading to optimal conversion rates.

What is a Responsive Design?

screens Responsive design refers to a website that has been designed to be viewed across multiple devices and adapts to each size screen for ease of viewing and navigation. Without compromising the features of the site, a responsive design decreases the need for in-depth scrolling or clicking since the information adapts readily to the size of the screen through flexible, proportion based grids and images. Responsive design is dynamic versus traditional website design that is more static in nature. It is important to differentiate between Responsive design and a Mobile website. A responsive design uses 1 URL, whereas a Mobile website has a completely different URL than its desktop partner. Essentially a Responsive design is an extension of your typical website whereas a mobile website is a completely separate entity.

Building a case for Responsive Design

If you are still not convinced that switching over to a responsive design is necessary, consider these statistics based on studies conducted by Nielsen and commissioned by Google:

  • Consumers spend more than 15 hours a week on mobile research.
  • 55% of consumers using their phone to research a product or service will want to make a purchase within 1 hour.
  • 60% of consumers in the buying cycle will visit a company's website using their phone.
  • 74% of consumers using mobile devices looked for items using a search engine.
  • Significantly lower bounce rates than a site that has not been adapted to fit the screen of the user.

Not surprisingly at all, according to research from ComScore, smartphone users check their phone over 150 times per day. 150 times!

Key considerations: Design

If you are ready to take on a responsive re-design, here are some key design elements that need to be taken into consideration:

  1. What do I want my site to do? ? Your business objectives and needs are top priority when re-designing your site to a responsive layout. Faced with limited real estate, you no longer have full width sliders and large scale images working in your favor. Determining your key message is critical in helping to prioritize layout and functionality.
  2. TouchscreensClicking versus Tapping? Now that your site can be stretched and contracted, depending on the device it's being viewed on, keeping in mind user experience is essential. Before, your website may have given users the option to hover over images, or click very specific areas on the page. With a responsive site, your user is tapping to access information, which requires a more intuitive experience.
  3. Layout: Single file everyone! ? Utilizing a single column layout is ideal for mobile devices as the information fits well on the smaller screen. With options to view portrait or landscape style, a single column layout with a collapsible navigation is also great for sites containing a lot of information.
  4. Breakpoint Considerations? Since responsive design is based on adapting to the varying widths of devices, designing your responsive layout effectively involves determining proper breakpoints that will enable the site to be rendered nicely on each screen. A breakpoint is simple a responsive code that will tell the website to change at any given time, based on the screen width.

Key considerations: Optimizing for conversion

When taking on a responsive website re-design, optimizing your site for a stronger, unified online presence is essential to retaining and converting potential customers into actual customers. Some key considerations:

  1. Since your users are relying on wi-fi or data, removing any information that is not necessary is helpful as it allows your user to find what they are looking for quickly.
  2. Simplying your site has a great effect on SEO as load times will be faster which Google takes into consideration when ranking.
  3. A conversion focused responsive design incorporates intuitive prompts for your user, such as combining form fields so users can enter information more easily, as well as increased font size and larger tap areas.

A Website's best friend: Google

According to the report, Google's Mobile Path to Purchase, 48% of mobile device users deem search engines as the most common starting point when searching for specific information. This means that most of your customers are using search engines (namely Google) to begin to research your products and services. Considered an industry best practice, Google recommends having a responsive design for a few reasons:

  1. Since a responsive website uses the same URL and HTML as it's desktop friendly version, Google is better able to index and crawl through the code. From a business standpoint, this is a more efficient use of time as your company does not have to manage more than 1 website as in the case of a mobile site which is a completely separate website with a different URL.
  2. When it comes to interacting and sharing content, Google also prefers a responsive design as the information on the website is more easily shared and distributed.

Implications for Mobile SEO

Transitioning to a responsive design has many key benefits when it comes to S.E.O. (Search Engine Optimization):

  1. Since you are using the same URL across shared screens, a responsive site will allow you to keep all your backlinks allowing them to be rerouted to just one domain.
  2. Optimizing S.E.O. on a responsive site is an easier task for Google as it makes it more accessible to crawl your site and reduce on-page SEO errors.
  3. Google prefers a responsive design as the information presented is more user friendly, making it easier to target mobile users.
  4. From a company standpoint, having to manage 1 website versus 2 is a distinct advantage when planning your SEO campaigns.

With more and more people using their mobile devices for online activities, incorporating a responsive design into your marketing strategy is key to increasing online visibility. In a competitive environment, a poor online experience could mean the difference between a potential customer leaving your website to go to another that offers a more user friendly way of finding what they need. Consumer behavior is evolving and the best way to respond to this change is through your responsive design.