If you’ve dismissed adaptive design, think again. Designers and developers explain why it’s crucial for crafting a usable, accessible and future-proof web experience

Before deciding whether to embrace adaptive web design, it’s necessary to define what it means. Some consider it a ‘rival’ to responsive design, preferring specific layouts for set viewports over a fluid approach. But Easy Designs founder Aaron Gustafson argues this merely describes some adaptive layouts; adaptive web design as a whole is about “designing websites and apps without taking anything for granted, embracing the inherent variability of how people access and consume content”.

In other words, it is about context. Layout can form a part of adaptive design, sites automatically transforming accordingly within a viewport or a range of screen sizes; but equally it can be about adjusting elements of a website in order to more appropriately address use cases, technical constraints and device types, including (but not limited to): desktop vs. touchscreen; variable connection speeds; and displays of differing resolutions. This means a single site can be made suitable for old PCs, cutting-edge laptops, tablets, smartphones and internet-connected watches alike.

Old hands will recognise this as ‘progressive enhancement’, a key component of considered, quality web design.

“It’s incredibly important to provide as good an experience as possible to everyone,” enthuses designer Laura Kalbag (left). “Using adaptive design ensures optimisations for particular viewports or devices are layered on top of a less specialised foundation, still giving those without the capabilities access to a positive — if more basic — experience.”

Web designer Brad Frost adds that sites being able to “adapt to the capabilities of the device, browser and user” is now “increasingly important as our web creations are sent to smartphones, tablets, ereaders, netbooks, watches, TVs, phablets, notebooks, game consoles, and a whole lot more.”

Layers of code

Adaptive and responsive aren’t rivals — responsive is part of the adaptive toolkit.

According to Aaron, crafting experiences that differ between people and devices requires thinking of experience as a continuum, and considering code in layers. When working with cutting-edge elements or techniques, provide fall-backs for older devices and browsers; for example, when using Ajax to submit a form, ensure it’ll still work without JavaScript.

As Brad notes, the thinking behind adaptive layouts moves beyond layout and basic interaction: “Loads of variables factor into crafting a great multi-device web experience. What happens if the user is on a slow connection? What happens when they’re using touch and not a pointer and keyboard? How do we adapt interface patterns such as large data-tables and lightboxes for small screens?”

The answer, thinks Aaron, is to regularly “examine the interface and look for ways to improve the experience based on a device’s features and capabilities”.

Web developer Aaron Grogg says taking an experience from a “universally acceptable baseline” can happen in many ways, including “simply sending different CSS files to phones, tablets and desktops” through to more advanced decisions like sending a ‘call us’ link only if a device can make telephone calls. But even layout basics demand careful consideration, as Aaron Gustafson explains: “That tabbed interface might work great on a large desktop monitor, but on a small tablet? Not so much. On a small screen, perhaps it’d be better displayed as an accordion or plain old text.”

Positive experiences

Aaron Gustafson (left) also asserts that it’s key to realise people can have different experiences on a site, as long as they’re all positive. He recommends initially mapping out potential adaptive design experiences as a flowchart, identifying ways users can experience an interface; this codifies ideas before people start designing and ensures everyone’s on the same page.

Next, concentrate on the reading experience on a narrow screen, remove cruft and distraction, and enable users to focus on the task at hand.

Then look at how to improve the experience to take advantage of more screen real estate and better device capabilities. “Throughout, consider the trade-offs of decisions you make. With images, how big will they be, and how much page weight will they add? Is the benefit to the design worth the cost to the user in download time and bandwidth? Could another option be more efficient and accomplish the design goal?”

Brad advocates adhering to five key principles: ubiquity, flexibility, performance, enhancement, and being future-friendly. He says the web’s ubiquity is its “biggest superpower”, and flexibility means creating interfaces that look and function great on any screen size, “avoiding the pitfall of focussing on any one viewport and embracing the fact the web’s inherently fluid”.

Performance, he believes, is essential, yet sites continue to balloon, creating frustration for users: “We need to treat performance as an essential design feature, not just technical best practice”.

Enhancement means utilising sound progressive enhancement techniques, such as photos being viewed as a stacked list, then rolled up into a slideshow if JavaScript’s available, which could add swipe-based interaction when touch events are supported. “That’s an experience accessible to all, but enhanced for users with advanced features.”

Future-proof design

The last of the five principles is especially important as web-enabled devices diversify. “Adaptive techniques can ensure your design remains flexible enough to cater for unknown future devices,” says Laura. And, as Brad (left) recommends, “In order to save our sanity, we need to create one experience that adapts to these devices, rather than a dedicated experience for every new rectangle Samsung spits out.”

This means binning what Aaron Grogg ironically refers to as “magic numbers” you still see targeting iPhones and the like, and “letting go of the idea pages must look identical in all browsers”.

Aaron Gustafson notes this can bring financial benefits, too: “The adaptive approach allows us to reach more customers for less money. Based on our research, adding a new browser or two to the support matrix for a product that does not follow progressive enhancement could cost up to 40 per cent more. But with a progressively-enhanced project initially built for three devices, we recently added support for 1,400 new devices for 15 per cent of the original budget.”

Using adaptive techniques also potentially makes it simpler to rapidly iterate on designs, and to fix problems as they occur. However, Brad says because it’s now “next to impossible to articulate every environment, screen size and variable in static design tools,” you must get into the browser as quickly as possible. “By getting into the final environment faster, you can build up a design’s fidelity over time to ultimately arrive at the final experience.”

Laura suggests twinning this with plenty of testing across many devices, “not necessarily to cater for any specific device, but to find edge cases where your design is likely to break down and provide a poor experience”.

The net result should be a site that works for everyone, concludes Laura: “If we only catered for the most popular or lowest-common-denominator browser, we’d never have reason to do anything interesting that pushes the boundaries of the technology available to us. If we didn’t care about people whose devices and browsers had different capabilities from ours, we’d be seriously limiting our reach. Adaptive design techniques are the best way to get the best of both worlds.”

Adaptive Design case study: Nichols College

Easy Designs co-owner Kelly McCarthy explains how adaptive techniques improved a college website redesign.

Small, dynamic business school Nichols College approached us to redesign www.nichols.edu as part of a brand refresh for its bicentennial. The business requirements were to get prospective students to inquire, visit campus, and apply.

Our strategy was simple: design for smaller, lower-spec devices first, then adapt the interface to take advantage of changes in screen size and device capabilities.

The existing website’s content was vast and poorly organised. We revamped the architecture, removing ‘mystery meat’ navigation and bringing calls to action to the forefront. We cut 3,000 unnecessary and/or outdated pages, and devised a content strategy that included a strong focus on rich, curated imagery accompanied by ‘just enough’ text.

Recognising the potential pitfalls of an image-laden website for mobile users, we lazy-loaded ‘nice to have’ images, used the new ‘picture’ element to serve appropriately-sized images for essential ones, and used SVG graphics wherever possible (falling back to PNGs in older browsers). We created a performance budget for each major page type and enforced those limits in the CMS.

We used JavaScript sparingly and lazy-loaded polyfills as needed. We also employed the responsive table technique we developed (which is now used by the BBC and NPR) to squeeze the campus directory onto small screens.

Adaptive Design case study: Indie Tech Summit

Designer Laura Kalbag reveals how typography can be improved through adaptive design.

For ind.ie/summit/, we wanted a site with impact that didn’t resemble standard conference fare. We aimed for a style reminiscent of historical bills of rights, but brought up to date and in keeping with our ind.ie brand. With ind.ie being a progressive company, it was important the site was accessible on as many platforms, connection types and viewport sizes as possible.

For decorative elements, we used Modernizr to switch SVGs for PNGs depending on browser support, but the most noticeable adaptive technique concerns web fonts. Before the fonts load, I used the most similar web-safe font (Georgia) in similar weights, cases and sizes, so it’s as close as possible to the Abril Text and Display web fonts. This means there’s a less jarring effect when the web fonts load and text is transformed. It also means if the fonts don’t load — if JavaScript isn’t available — the visitor still has a similar experience.

Combining web fonts with responsive design requires lots of tweaking font sizes at different breakpoints! We used media queries to optimise the content to be more digestible on narrow viewports. This included changing font sizes so line lengths were easier to read, stacking images and arranging them in columns, and moving the schedule into a single column layout.

5 adaptive web design tools

BrowserStack
Testing on real devices is a must, but BrowserStack provides quick previews on real browsers and mobile emulators, for early testing.

FitVids
Videos can cause all sorts of problems in layouts that resize. FitVids is a lightweight jQuery plug-in for fluid-width video embeds.

Mobitest
Surprisingly few sites cater for mobile in anything other than layout. Mobitest returns performance stats for sites sent to it.

Modernizr
Popular feature-detection library and considered one of the best. Mostly used in the browser for writing conditional JavaScript and CSS.

Pattern Lab
A tool that encourages establishing a sound interface system so that a design looks and functions beautifully in any environment.