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.
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.
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:
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:
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.