What’s the first and last thing you interact with each and every day? If you’re anything like me, it’s probably your smartphone – the all-encompassing gadget that’s come to replace your alarm clock, newspaper and calendar – just about everything except your cup of coffee (unless that, too, is synced to your mobile). It goes to show just how deeply intertwined all aspects of our lives are with our mobile devices and that is no less true for one of America’s favorite pastimes – online shopping. Hence, the importance of responsive design, especially for its impact on mobile devices. In the first of a two-part series on responsive design, I sat down with Amy Osborne, Blueport Commerce Senior UX Designer and Developer, to help break down the basics: what it is, how it works, and why it matters.
What Is Responsive Design?
Responsive design is an approach to web design aimed to deliver an optimal viewing experience across a wide range of devices, no matter the screen size. It allows for your website to be device agnostic – meaning your content is visible whether you are viewing it on the smallest or largest of screens. How your site will render on any screen size has been accounted for so that the user doesn’t have to use left-to-right or up and down scroll bars, pinch to zoom in or out – you get the picture.
Responsive design is not the same as mobile or even adaptive design. Mobile design entails creating an entirely new website or web app with content specifically created for the mobile experience. Responsive design, on the other hand, means the same domain, the same content, and the same code base. (If you’re a visual learner, check out these 9 GIFS that show the difference between responsive design and adaptive design.)
Although it’s certainly a buzzword these days, responsive design isn’t necessarily “new.” It pulls together a set of techniques and technologies that have been around in the design and development world for quite some time to create this “newer” approach aimed at delivering a consistent viewing and interactive experience for your site users.
How Does It Work?
Without getting too technical, a responsive website adapts the layout to the viewing environment by using flexible grid layouts, flexible images and media, and CSS3 media queries. Here’s a little bit more on these three components:
- Fluid layout – a page that is able to flex, expand, contract (imagine dragging the corner of a window to expand or contract). It’s the opposite of a fixed layout.
- Media queries – a CSS code that allows you to set “breakpoints” (that’s the technical term for exact device widths). Basically, it allows developers to trigger changes in the layout and look and feel of the site based on the width of the “viewport” (the viewable area of your browser).
- Responsive imagery – a responsive image means that the image is not a fixed size. You want the image to be flexible to grow or contract to fit the viewing device. The image needs to scale with the rest of the page. This particular component of responsive design is still a challenge for many retailers where imagery is so important to the selling process.
Why Does It Matter?
The use of mobile is becoming more and more commonplace in the omnichannel path to purchase. Here are just a few stats on recent mobile shopping trends:
- Over 50% of traffic to furniture websites on Blueport’s platform in 2014 came from mobile phones or tablets. Yes, people are even shopping for furniture on their mobile.
- 45% of all online traffic to retail websites this past holiday shopping season came from smartphones or tablets – up nearly 26% to the previous year
- 23% of all 2014 online holiday sales occurred on mobile devices
- Forrester predicts that 55% of smartphone owners and 61% of tablet owners will purchase from those devices by 2018, with total mobile commerce sales expected to exceed $290 billion
Responsive design creates a more optimal viewing and interactive experience, especially for smaller devices. The more accessible and easier a website is to shop, the more likely your shoppers will return and convert.
