Support: 1-800-961-4454
1-800-961-2888

Moving Toward Responsive Design

Many companies still focus most of their attention on the desktop experience versus the smartphone experience, despite continually-climbing smartphone adoption rates and research that shows that 67 percent of mobile users are more likely to buy from a mobile-friendly site.

The smaller mobile form factor is either an afterthought and often considered at the end of the design rollout, if it is considered at all. This either results in a shoddy mobile experience or the full desktop site being displayed, almost illegibly, on a tiny display.

Responsive web design—where the same HTML is styled according to the end user’s device—is one way to improve engagement on mobile screens, which is especially necessary for ecommerce shops that risk losing a sale if their mobile site isn’t up to snuff.

Here are some benefits of responsive design that ecommerce merchants should consider for their online storefronts.

Unified Online Presence

When businesses have a separate mobile site (e.g., m.yoursite.com) in conjunction with the desktop site (yoursite.com), they have to maintain two distinct properties. This results in more work coordinating development, administration, content and traffic analytics because both sites run independently of each other. This separation also contributes to mobile sites often looking disconnected from a brand’s well-defined desktop experience.

Responsive design changes the game by enabling the same information and content to populate different sized screens. This unified website approach means that developers and system administrators can focus on one codebase and architecture, while the business no longer has to worry about synching content across multiple properties. In addition, each form factor of the site is presented in a manner consistent with the brand.

On his ConversionXL blog, Peep Laja points out two additional benefits: responsive design allows a business to unify its site analytics—you don’t have to pull separate reports for multiple URLs—and it improves consumer social media interaction. Since we all access our social feeds through an array of devices, Laja says that a responsive site “makes sharing content through social media foolproof, as it’s guaranteed that the recipients will also be able to browse the content in the most optimal view.”

Simpler SEO

There was once a debate as to whether responsive web design actually hurt SEO rankings. At the time, some experts believed longer load times on a mobile device would hurt search rankings and advised merchants to have a separate, sparse mobile site. But in November 2013, Matt Cutts posted a video to Google’s Webmaster channel saying that businesses don’t need to worry about SEO drawbacks of responsive design. Cutts emphasized that “everything is handled from one URL, so the page rank doesn’t get divided.”

This is an implicit benefit for businesses adopting responsive design instead of a separate mobile site. With the latter, webmasters must remember to include the rel=“canonical” tags for each page. An accidental omission of that tag could divide the page rank between separate mobile and desktop sites, thereby diluting your brand’s ranking in the SEO world. This has contributed to Google’s recommendation of responsive design for handling smartphone traffic.

Responsive Design Tools

There are many tools to help you get started with responsive design. One of the most powerful is Twitter Bootstrap, a front-end framework used by many popular, modern websites. Bootstrap is built on a grid system and is inherently responsive. Marketplaces such as Wrap Bootstrap sell an array of themes that can be purchased to achieve responsive design out-of-the-box. There are also similar themes available for many of the popular content management systems (CMSs) such as WordPress, Drupal and Joomla. Before installing the theme, ensure it is tagged as being responsive.

Whether you develop a responsive design site from the ground up or purchase a theme, it is important to test it thoroughly to make sure your users see the correct output. Piotr Walczyszyn developed the Responsive Inspector Chrome plugin, which is incredibly helpful. Responsive Inspector assists with visualizing a website at different widths so you can see how it would look on a variety of form factors. The plugin also enables you to stitch together a full-length photo of the site at different sizes to help pinpoint items to discuss with your design team.

Time to Put Mobile First

If your ecommerce solution doesn’t offer a strong smartphone experience, it is time to think mobile first. Research shows that 61 percent of online users move on to mobile-friendly sites and half of the people who like your business will visit you less often if your site isn’t optimized for mobile devices.

Responsive design is one way to ensure that your brand and products deliver a delightful small screen experience and keep your customers happy. And happy customers make for healthy sales.

For more on mobile and ecommerce, check out Rackspace Digital, a new practice built on our years of expertise in commerce, content and mobile applications.

About the Author

This is a post written and contributed by Garrett Heath.

Garrett Heath is a Racker who works in Rackspace Marketing and has had experience as a technical project manager in the Cloud. He enjoys writing about how the cloud is spurring innovation for startups, small businesses and enterprises. You can read his personal blog for where he likes to eat in San Antonio.


More
Racker Powered
©2014 Rackspace, US Inc.