Ecommerce Tips From A Magento Expert: Planning the Responsive Ecommerce Website

ecommerce-responsive-design-planningBefore choosing between adaptive and true responsive website options, it's important to think about the end user of the website. There is not a single design option or mobile device design philosophy that works for every corporate site. Consider asking and answering the following questions:

Do website statistics show that visitors interact with the site in a significantly different way when they are mobile compared to when they are using a desktop? When analytics data is analyzed, what does it reveal about mobile users? Businesses might find that their mobile users are looking for one or two specific types of information. When that's the case, creating two very different website layouts, one that emphasizes the content mobile users want and one that emphasizes content for desktop users, makes sense. In other words, pursuing an adaptive design might be preferable to pursuing a responsive design in this situation.

What is the primary age range of average customer? Adaptive sites are faster and sometimes more user-friendly. When dealing with an older customer base, providing the simpler, faster design of the alternative mobile site might be the best responsive solution.

What is the average customer's income level? Upper middle-class and upper class customers are different from working class customers in two important ways when it comes to mobile website design: First, upper middle-class customers are generally more likely to have better, faster smartphones. Second, as the data referenced above mentions, low-income adults are more likely to access the Internet via their mobile devices than are their wealthier peers. Both of these facts suggest that a true responsive design might be the better choice for the customer base that is primarily upper middle-class, whereas an adaptive design might be the better choice for the working class customer base. The latest-generation smartphone, tablet and desktop computers of the upper middle class will mitigate the disadvantage of the slower speed of the true responsive design while also taking advantage of responsive design's ability to deliver a website that looks and feels like the regular desktop version that those visitors are used to.

Are a vast majority of mobile users clustered on two or three devices? When website analytics show that a high percentage of mobile users tend to use one of just a few devices, then making an adaptive website that caters to those devices is not a bad idea. On the other hand, the opposite is true if visitors are using wide variety of mobile devices. This situation indicates that a responsive design would be a better choice.

Is website content designed for sharing? Blogs, some news sites and even some eCommerce sites have content that is designed for customers to share with friends. This type of content favors true responsive design because the content is always prepared to handle an influx of users who break the mold of the typical website visitor. If the website project otherwise seems to indicate that an adaptive site would be preferable, a separate domain name might be advisable for a blog site.

Is the website design budget a big issue? Time is money, and it takes considerably less of each to design a truly responsive website. Creating the multiple layouts of the adaptive site, by comparison, require much more time and therefore much more money.

The New "Mobile-First Design" Principle

Only a few short years ago, website designers created designs for desktop browsers first. After they had a solid site for regular desktop browsers, and if there was still money left in the design budget, they then turned their attention to the mobile site design. These days, the new phrase "mobile-first design" is starting to crop up in the web design industry. In a nutshell, the phrase means that websites should be designed first for mobile devices and only then for desktop browsers.

The reason behind this new design philosophy is reflected in the statistics cited above. As time goes on, there is a good possibility that many website users across many demographics will only be interacting with the site from a mobile device.

From a design point of view, the first "mobile sites" were designed as bare bones versions of the "regular" site. The user could usually still find the information that he or she wanted, but the full experience of the site was negated. As the server detected smaller and smaller screen sizes, the mobile design cut out more and more of the site. This approach to mobile website design was called "graceful degradation."

By comparison, the paradigm of "mobile first" aims to give users the very best experience possible given the smallest screen size available. As the screen size gets bigger, other elements are added to take advantage of the bigger screen. Called "progressive enhancement," it sounds almost the same as graceful degradation, but there is an important difference: The process of graceful degradation leads to a mobile website that is often watered-down, increasingly boring and increasingly bland. Designing for mobile first ensures that the small-scale version of the site puts the company's best foot forward on a very small screen and ensures an excellent mobile user experience. The progressive enhancements then make the site "even better." By comparison, designing for the desktop first sometimes means having to make hard decisions about what content to cut from the mobile version of the site. For websites whose users are more and more mobile, mobile-first design is the right website development strategy.

When "Desktop-First Design" is Still the Right Choice

As with the decision between adaptive sites and true responsive sites, there is no "right answer" for the debate between designing for the mobile device first or for the desktop computer first. Once again, the final decision should be based upon the company's understanding of its customer base of today and its best predictions about the customer base of the future. When website traffic stats reveal that 85 percent of new visitors are using desktop computers, it's not time to move to a mobile-first philosophy.

An example of a company that does need to embrace mobile-first design would be an eCommerce clothing retailer whose primary customer base consists of 18 to 29 year-old African Americans on the lower end of the socioeconomic scale. As statistics above point out, young people, certain minority groups and low-income adults are all more likely than other Americans to access websites through mobile devices.

Companies should also be aware that many designers, especially veterans who have been in the industry since the dawn of the Web, are reluctant to make the switch to mobile-first design. They've built their careers around designing for screens that kept getting bigger and bigger; the sudden switch in emphasis from big, flatscreen monitors to three-inch monitors is a switch that many of them have still not adjusted to. When speaking to potential website designers, companies should feel out the designers' various approaches to mobile website design, especially if the company's marketing executives suspect that a mobile-first approach is in order.

master inbound marketing hubspot academy class

subscribe to inbound ecommerce articles

(This is part two of a three part series by our Magento expert on mobile optimization for ecommerce websites. You can find part one here.)

Don't forget to share this post!