You've probably heard responsive or adaptive mobile web design amid water cooler banter, but what exactly does it mean, how does it work, and why is it important? Here, we offer a primer on what the two terms mean and why it makes good marketing sense to use them to reach rapidly expanding audiences.
Why Does It Matter?
User expectations have changed as more and more tasks are accomplished exclusively on mobile devices. Seeing a desktop-width website load as a tiny, unreadable page is a real turn off for the millions of mobile users, and you don’t want them to tune out.
A Quick Definition
Responsive and adaptive web design are two methods for building websites that allow a single design and code base to be used across any number of desktop and mobile devices. Both methods use style sheets and grid systems to adjust fonts, image size and layout to fit the device’s size. The overall idea is "build once, see it everywhere".
The key difference between the two methods is that adaptive design uses a set of 3-5 fixed sized layouts. This allows for consistency of layout regardless of where the website is being viewed, as the site will detect what kind of device is being used, and will present the best designed layout to match. Responsive design relies more on a constantly changing layout that adjusts content based more on percentages, which allows to cover all size bases without detecting the device, with less control over exactly what the user sees at each size.
In practice, both methods are often employed together. Adaptive layouts provide a consistency of design at different key device sizes and responsive layout scaling allows for ideal support of all devices between those key sizes.
What are the advantages?
- Single design and code base: Probably the biggest advantage to responsive/adaptive design is the ability to leverage a single layout, set of graphics, copy and imagery.
- Support for older devices: Because it’s HTML, pages will still display on older browsers.
- Support for future devices and sizes: It’s a good feeling to know that even with future devices, users will likely see an optimized version of your content.
- Updates need only be made once: In general, text content is easier to update.
- Single design across all devices: Multiple style sheets ensure integrity of design.
- Support for both mobile web and apps: Responsive/adaptive web design uses a standard HTML5 web stack so front-end pages can be leveraged and compiled into apps.
See it in action!
There is an easy way to see adaptive and responsive web design in action for yourself. If you're on a desktop using a recent popular web browser, such as Google Chrome, simply scroll the width of our website back and forth and watch as the screen changes sizes.
HTML 5 has come a long way in just a few short years. Mobile development has gone mainstream and industry standard techniques such as adaptive/responsive design have made it possible and cost effective to support not just desktop and mobile web, but also apps, kiosks, web TV and variety of newer internet technologies like wearables. Going responsive/adaptive positions your content to be future ready and there will be less concern about missing out on surging mobile audiences.
