Everything You Need to Know About Responsive Design

Any online merchant knows for sure that the technology literacy is a necessary prerequisite for a success in eCommerce. Of course, a businessman should ideally focus on business, and leave the technical implementation to a developer – but to be able to effectively communicate ideas and requirements to technical personnel, one should be at least familiar with the correspondent terms and concepts.

One of such concepts you’ve probably heard lots about recently is “RWD”. What does it mean and why is it important? Let us save you a little time (and perhaps, couple dozen pages of technical documentation) by giving you a brief explanation.

“RWD” stands for “Responsive Web Design” (also known as “Adaptive Web Design”), defined in Wikipedia as “an approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).”

Put simple, this awkward definition means that a responsive website will identify the screen size of an end-user’s device, and render webpage elements in the way that fits in the screen best. The images and blocks will be dynamically re-sized and rearranged, to the point where lower-importance elements may be moved to the page bottom or even hidden completely.

Why is this feature considered of such a great importance? It’s not just a fancy trend; in fact, there are two closely related reasons that make responsive design a must for any webstore these days.

First, the responsive design solves site usability issues inherent for a traditional static web design.

In “pre-RWD” era, a web designer had to find an “optimal” size for the site content area, the size that would work well on the majority of end-user devices. In practice, though, any device that didn’t fall into that “majority”, was just ignored.

If a static-design web page is larger than an actual screen, an end-user will have to constantly scroll both vertically and horizontally, zoom in and out to explore the page – which can hardly contribute to positive interaction experience. A customer who has to struggle with the website is likely to not make it to the checkout and leave somewhere in between. Think high churn and low conversions.

And vice versa, if the actual screen is much larger than the pre-defined web-page size, a huge portion of valuable screen space is effectively left out-of-use. Think lost opportunity to showcase more products and offer more useful options within 1 screen; think lower spends per session.

With its intended flexibility, RWD addresses all the possible user situations, effectively enhances the site usability and positively affects user experience – which, in turn, results in longer shopping sessions, higher conversions and better customer retention.

The second – but not anywhere less important – reason to adopt RWD as soon as possible is Google search ranking.

Since April, 21st, 2015, Google gives higher ranks to mobile-optimized websites. The criteria used for identifying “mobile-friendly” sites are, basically, page load time and page usability. So yes, using a responsive theme, that can handle smartphone-size screens and represent your content in a usable way on mobile devices, means your site will avoid any search engine penalties.

The good news is, Magento recognizes the advantages of the RWD technology. So, since 1.9 version, the platform comes equipped with a default RWD theme. And as one would expect, in the Magento’s prolific ecosystem, 3rd-party responsive themes (both free and paid) are available in numbers. If you are unsure which one to pick, or are in need for help with your theme – do not hesitate to contact us. Peexl design experts will be glad to give you a hand.