What Is Responsive Design?
Like any technology space, eCommerce is full of industry-specific terminology. The more cynical call them buzzwords. However, the informed know that there is heft and meaning to many of these concepts. They have real and significant impacts on how your sites are created by you and used by your customers.
Why do you need a different design at all?
The arrival of the smartphone and later the tablet represented a tectonic shift in how web developers in every field approached design. Suddenly, screens went from a few standard predictable sizes to dozens of unpredictable and varying sizes and orientations. In the 2015 Black Friday to Cyber Monday time period, nearly 7 in 10 shoppers used a mobile device for at least part of their buying experience, whether that is research, inventory checking or the actual purchase. Optimizing your site’s content for these devices is a key piece of increasing your sales volume.
Mobile sites have unique challenges beyond just aspect ratio. The interaction methods are different as well. Shoppers won’t have the pinpoint accuracy of a mouse; they’ll be using their finger to navigate your site. There are also extra benefits of the mobile platform. Functionality like GPS and built-in cameras can enhance the usability of your site for those users.
To the point of optimizing your content for mobile, there are several different schools of thought. Each one takes a slightly different approach to making your content best fit on a mobile or tablet device. Let’s talk about responsive design and some of the different methodologies to get there.
What is responsive design?
Responsive design changes the layout of a site based on a flexible grid design to fit the dimensions of any device it may encounter. A common analogy for responsive design, first put forth by Josh Clark in 2011, is that content is like water: it should change to fit whatever container it’s in.
On a responsive site, the size of the container is determined using CSS. From there, the code reinterprets the site on-the-fly based on the device characteristics. Many site design articles would have you believe that responsive design is just about implementing some CSS queries on your site. It isn’t. There’s more to do if you want to truly enable your customers to have the best experience on every device every time.
In responsive designs, the content layout changes depending on the device. This graphic shows how the same page elements, marked by letter, may be rendered across phone, tablet and desktop experiences.
How do I implement it?
The first thing to do when approaching a site from a responsive perspective is to create a workflow and experience that makes sense on mobile, tablet and desktop devices. You design a UX architecture that describes areas of functionality that aren't specific to desktop or mobile devices particularly, that is, functionality that is present across all devices. In doing this, you create a visual language that scales to many sizes and dimensions. You write code that works on as many devices as possible and test on them all.
Bottom up or top down?
Responsive design is more than just visual design. As previously noted, difference devices have different capabilities, whether that is NFC or GPS or a faster processor. There are two different ways to implement a responsive site when you consider these elements.
The first model is a top down approach. You design a site that performs beautifully with the top-end machine that you can imagine. Then, as you move down the line to less-capable machines, the site’s functionality is reduced to match the capability of the machine it’s being rendered on. This is a technique called graceful degradation, and it is not unique to web design. Many types of software projects employ graceful degradation to ensure usable software despite the machine or hardware at hand.
The second model is the bottom up approach. You establish a base level of functionality required on your site that all devices, browsers and hardware will be capable of. Then, as you move up the scale to more-capable machines, the site’s functionality is enhanced for devices that can use those functions. This technique is called progressive enhancement.
Both models can be considered at the coding level and the visual design level. On the code side, we might consider the browser’s ability to play Flash video or load an embedded call to the Google Maps API. On the visual side, we need to re-consider the use of tools like mega-menus or facets in each different step to navigate the site.
Regardless of how you implement a responsive design, it’s always best to have a good idea of the customer device profile. If you know that a large percentage of your customers access your site via an iPad in portrait mode, you would want to make sure that there is a good experience for that device in that orientation.
There are many tools available to test site performance on different devices and at different dimensions. Popular browser tools and Chrome’s own Inspect Element tools are key in this regard. However, for many of the more complicated features that you might want to implement in your site, there is often no replacement for a real device in your hands.
What about adaptive design?
Adaptive design uses a set of predetermined layouts to achieve multi-device capabilities. Instead of using flexible grids and math to determine column and element widths, adaptive designs have a few sets widths that have been pre-designed in the code. Most sites will have at least three, one for each device size from mobile to tablet to desktop. Many have five or six, adding both vertical and horizontal orientations for the mobile and tablet devices. At implementation, you can use a combination of feature detection and user-agent detective to deliver optimized experiences to each class of device.
When creating an adaptive site, you pre-select certain devices and dimensions you want to target and create unique experiences for each of them. Those unique benefits might include usage of onboard hardware like GPS or NFC. If you don’t have a unique benefit to your mobile experience when you compare it to your desktop experience, it may not be worth it to create an entirely different codebase just for that device.
One of the dangers in developing an adaptive site is the proliferation of devices that is currently happening in the marketplace. Between Android, Apple, Windows and others, new devices are released every week. It can be costly to ensure that your site has an adaptive template for each of those devices to ensure it looks beautiful at every resolution.
Mozu lets you choose what works best for you
Every Mozu site starts with responsive design at its core. From the first drop of a widget, your sites will look perfect on desktop, tablet and mobile. Whether you decide to design via graceful degradation or progressive enhancement of a responsive site or even go for an adaptive site, Mozu can support your needs and help you create the best possible site experience for your customers on every device.