Blog Entry

INFOGRAPHIC: Developing A Responsive Website

The latest trend is to develop websites that accommodate every kind of device – from desktop browsers to mobile devices. The alternative is to develop different versions of the same website to accommodate different devices – from desktop browsers, to smartphones, to tablets. Regardless of method, according to WhoIsHostingThis? 90% of American adults use their phone to go online. Therefore it is imperative to develop your website that is able to provide a great user experience in a mobile environment.

Responsive web design and web development is one of the best ways of ensuring that your audience’s online experience is equally viable across mobile and desktop environments, particularly if yours is an e-commerce site. This method ensures that the user’s experience is consistent across all devices. Developing a responsive web site requires planning. This infographic illustrates five critical elements, especially if you’re selling products or services online: a masthead, an image gallery, product descriptions, auxiliary information, and a footer.

For more details about those five elements, take a look at the following infographic:

INFOGRAPHIC: Web Development and Web Design Guide on Responsive Web Design

A transcript of the infographic is as follows: 

 

Responsive Design: Getting It Right

 

In today’s innovative environment, the number of devices used for browsing the web continues to grow with no sign of slowing down. Responsive design creates an optimal user experience across devices from a desktop to a smartphone, making it easier for consumers to make quick and educated purchase decisions.

 

What is responsive design so important?

  • There are 2.1 billion mobile-broadband subscriptions
  • 87% of American adults have a cell phone.
  • 45% of American adults have a smartphone, 90% user their phone to go online.

Using smartphones online

  • 55% use their cell phones to go online, 31% of which go online mostly using their phone than a computer or other device.
  • American consumers spend an average of 1.4 hours per day surfing the web on a mobile device.
  • 37% of cell phone owners and 64% of smartphone owners user their phone to get news online.
  • 74% of mobile visitors will abandon a site if it takes more than 5 seconds to download.

The Anatomy of a Responsive Site

In the development stage, there are 3 technical ingredients of responsive website design:

  1. Fluid Grids.  A percentage based design that adapts to the screen size accordingly
  2. Flexible Images. Images sized in relative units to prevent them from displaying outside their containing element.
  3. Media Queries. A way to apply CSS rules to the page based on the size of the displaying browser.

 

5 key design elements of a responsive e-commerce website design ensure the best user experience possible.

1. The Masthead

  1. Header. Should be small and simple in order to keep the focus on the core content, but easy to see. Try using a linear CSS gradient instead of a background image to give greater design flexibility and reduce HTTP requests.
  2. The Logo. Should be larger and scaled down to the final dimensions.
  3. Primary Navigation. Or main menu can be tricky when working in responsive design due to the limited space provided by small phone screens. There are many options to overcome this depending on number of menu options preferred, including:
    1. A simple menu anchor in the header that toggles the main navigation on small screens.
    2. A header anchor that jumps user to the navigation which is placed in the footer
    3. A left slide nav (like Facebook’s) accessed by a menu icon, revealing a tray that slides in from the left and moves the main content over to the right.
    4. A navigation that overlays the main content of the page.
  4. Searchbox. A search box allows visitors to jump directly to what they are looking for.

2. The Image Gallery

  1. Image navigation. Rather than text-based image navigation, show a preview of the different product views. Images should link to their larger counterparts.
  2. Product Image. Make your product image the focal point of the page. Create a touch-friendly image carousel, allowing users to swipe between product photos in a touch-friendly way.

3. Product Description

  1. Product Overview. Should appear above the image (in the markup before the image container), providing the visitor with the product name, price, and popularity or rating. This way, they can determine if the product they’re looking for without having to wait for the rest of the page to load.
  2. Rating Stars. Include if appropriate.
  3. Review Count. The review count jumps to the reviews below the product details. This small detail can be valuable to the 79% of smartphone consumers who use their phone to help with shopping, and maybe even make or break a sale.
  4. Share Button. Sharing content and products on social networks can be a great way to increase exposure. Just keep it simple with one button.
  5. Handy Additions. Quantity fields, Size Dropdowns, and Add to Cart buttons.

4. The Auxiliary Information

  1. Related Products
  2. Product Reviews

5. The Footer

  1. Footer navigation. Providing access to the main site navigation is a good way for the user to jump off to another section and avoids leaving them at a dead end.
  2. Customer Service Number and Email. Remember, phones make calls! The visitor may have a question about the product and having the ability to quickly contact a customer service rep could be just what they need to make a purchase decision.
  3. Back To Top Link. Again, it’s all about user experience and convenience!