Responsive Design: What it is and How You Should Use it

Responsive design is the idea of approaching a site’s design from the standpoint that the site’s design flexibly ‘responds’ to the user based on a number of factors, including device type, screen size, screen orientation, and browser. Implementation is done by using a combination of flexible layouts and creative CSS rules. Is responsive design the right choice for your company? That depends.

If you’re like many companies, you have noticed that the percentage of visitors to your site via mobile phones and tablets has steadily increased with no signs of slowing down. You may have a team devoted to the ecommerce site, but perhaps you view it from a holistic level and not as a different set of user experiences based on user device. And you see that conversion and revenue varies widely from Android phone users to iPad users to desktop users. Some factors to consider when deciding whether to move forward with responsive design:

  • Know who your customers are. Use analytic data to determine your largest and most important customer demographics. Which devices (and their corresponding screen sizes) your visitors are using will direct where your responsive design efforts should be pointed. Track key metrics as changes are made to monitor the effectiveness of each tactic.
  • Know what your customers want. Usability tests and actively soliciting customer feedback through interviews and surveys are both good ways of learning your customers’ needs. Use this to design with your users in mind.
  • Don’t forget the basics. While good responsive design can be a great way to gain exposure for your site, it can also have the unintended consequence of drawing attention to the shortcomings of your ecommerce business. Make sure you address any fundamental flaws in your product content management processes prior to executing any mobile strategy.
  • Design for functionality, not just space. Remember, in addition to smaller screen sizes, mobile devices often have additional functionality built-in, such as GPS location, cameras, and ability to make phone calls. Providing in-site functionality for click-to-call and maps can be a huge boost to usability.
  • Stay fluid. Design using a flexible and modular approach; this way you will not only be able to accomodate the existing multitude of devices and screen sizes, but you’ll also be ready for any of the nearly limitless and unpredictable new devices that are sure to come in the future.


Responsive vs. Adaptive Design

You may have heard these terms used interchangably, but they do in fact have different meanings.

At the simplest level, adaptive design refers to the existence of multiple versions of the site, one of which is served from the server-side based on which device attributes are detected by the server.

Responsive design refers to the existence of only one version of the site, the display of which is adjusted on the client-side by the browser, based on the display and relation to other page elements.

Choosing between adaptive and responsive design often comes down to the pros and cons of each. While adaptive design can be more finely tuned to specific devices and screen sizes, it also takes more time and resources to deploy effectively. Responsive design is often a quicker and easier solution, especially when starting from an existing site, but some of the finer-tuning can get lost in the shuffle.
An effective responsive design deployment can help you increase conversion and revenue across multiple user experiences. FitForCommerce has the expertise and people to help your company develop an intelligent responsive design strategy. Let us know if we can help!

3 HOT TIPS:

  • Start small and work your way up: When executing your responsive design plan, start by designing for the smallest (mobile browsers) and scale up for tablets and desktop browsers by using CSS rules to display additional content.
  • Use icon fonts: Replace commonly used icon images with icon fonts when possible as they provide a scalable and editable alternative for commonly used images, resulting in a much lighter footprint and quicker page load times.
  • Don’t leave out the important stuff: Visitors come to your site for a reason. Regardless of what your site looks like, make sure that you always provide your site’s most essential information and services no matter what device your visitor uses.