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

Before deciding whether to embrace adaptive web design, it’snecessary to define what it means. Some consider it a ‘rival’ toresponsive design, preferring specific layouts for set viewportsover a fluid approach. But Easy Designs founder AaronGustafson argues this merely describes some adaptive layouts;adaptive web design as a whole is about “designing websites andapps without taking anything for granted, embracing the inherentvariability of how people access and consume content”.

In other words, it is about context. Layout can form a part ofadaptive design, sites automatically transforming accordinglywithin a viewport or a range of screen sizes; but equally it can beabout adjusting elements of a website in order to moreappropriately address use cases, technical constraints anddevice types, including (but not limited to): desktop vs.touchscreen; variable connection speeds; and displays ofdiffering resolutions. This means a single site can be madesuitable for old PCs, cutting-edge laptops, tablets, smartphonesand internet-connected watches alike.

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

“It’s incredibly important to provide as good anexperience as possible to everyone,” enthusesdesigner Laura Kalbag (left). “Using adaptivedesign ensures optimisations for particularviewports or devices are layered on top of a less

specialised foundation, still giving those without the capabilitiesaccess to a positive — if more basic — experience.”

Web designer Brad Frost adds that sites being able to “adapt tothe capabilities of the device, browser and user” is now“increasingly important as our web creations are sent tosmartphones, 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 adaptivetoolkit.

According to Aaron, crafting experiences that differ betweenpeople and devices requires thinking of experience as acontinuum, and considering code in layers. When working withcutting-edge elements or techniques, provide fall-backs for olderdevices and browsers; for example, when using Ajax to submit aform, ensure it’ll still work without JavaScript.

As Brad notes, the thinking behind adaptive layouts movesbeyond layout and basic interaction: “Loads of variables factorinto crafting a great multi-device web experience. What happensif the user is on a slow connection? What happens when they’reusing touch and not a pointer and keyboard? How do we adaptinterface patterns such as large data-tables and lightboxes forsmall screens?”

The answer, thinks Aaron, is to regularly “examine the interfaceand look for ways to improve the experience based on a device’sfeatures 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, tabletsand desktops” through to more advanced decisions like sending a‘call us’ link only if a device can make telephone calls. But evenlayout basics demand careful consideration, as Aaron Gustafsonexplains: “That tabbed interface might work great on a largedesktop monitor, but on a small tablet? Not so much. On a smallscreen, perhaps it’d be better displayed as an accordion or plainold text.”

Positive experiencesAaron Gustafson (left) also asserts that it’s key torealise people can have different experiences on asite, as long as they’re all positive. Herecommends initially mapping out potentialadaptive design experiences as a flowchart,

identifying ways users can experience an interface; this codifiesideas before people start designing and ensures everyone’s onthe same page.

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

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

Brad advocates adhering to five key principles: ubiquity, flexibility,performance, enhancement, and being future-friendly. He saysthe web’s ubiquity is its “biggest superpower”, and flexibility

means creating interfaces that look and function great on anyscreen size, “avoiding the pitfall of focussing on any one viewportand embracing the fact the web’s inherently fluid”.

Performance, he believes, is essential, yet sites continue toballoon, creating frustration for users: “We need to treatperformance as an essential design feature, not just technicalbest practice”.

Enhancement means utilising sound progressive enhancementtechniques, such as photos being viewed as a stacked list, thenrolled up into a slideshow if JavaScript’s available, which couldadd swipe-based interaction when touch events are supported.“That’s an experience accessible to all, but enhanced for userswith advanced features.”

Future-proof designThe last of the five principles is especiallyimportant as web-enabled devices diversify.“Adaptive techniques can ensure your designremains flexible enough to cater for unknownfuture devices,” says Laura. And, as Brad (left)

recommends, “In order to save our sanity, we need to create oneexperience that adapts to these devices, rather than a dedicatedexperience 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: “Theadaptive approach allows us to reach more customers for lessmoney. Based on our research, adding a new browser or two tothe support matrix for a product that does not follow progressiveenhancement could cost up to 40 per cent more. But with aprogressively-enhanced project initially built for three devices, werecently added support for 1,400 new devices for 15 per cent ofthe 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 toarticulate every environment, screen size and variable in staticdesign tools,” you must get into the browser as quickly aspossible. “By getting into the final environment faster, you canbuild up a design’s fidelity over time to ultimately arrive at the finalexperience.”

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

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

Adaptive Design case study: Nichols CollegeEasy Designs co-owner Kelly McCarthy explains how adaptivetechniques improved a college website redesign.

Small, dynamic business school Nichols College approached usto redesign www.nichols.edu as part of a brand refresh for itsbicentennial. The business requirements were to getprospective students to inquire, visit campus, and apply.

Our strategy was simple: design for smaller, lower-spec devicesfirst, then adapt the interface to take advantage of changes inscreen 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 cut3,000 unnecessary and/or outdated pages, and devised a contentstrategy that included a strong focus on rich, curated imageryaccompanied 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 essentialones, and used SVG graphics wherever possible (falling back toPNGs in older browsers). We created a performance budget foreach major page type and enforced those limits in the CMS.

We used JavaScript sparingly and lazy-loaded polyfills asneeded. We also employed the responsive table technique wedeveloped (which is now used by the BBC and NPR) to squeezethe campus directory onto small screens.

Adaptive Design case study: Indie Tech SummitDesigner Laura Kalbag reveals how typography can be improvedthrough adaptive design.

For ind.ie/summit/, we wanted a site with impact that didn’t

resemble standard conference fare. We aimed for a stylereminiscent of historical bills of rights, but brought up to date andin keeping with our ind.ie brand. With ind.ie being a progressivecompany, it was important the site was accessible on as manyplatforms, connection types and viewport sizes as possible.

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

Combining web fonts with responsive design requires lots oftweaking font sizes at different breakpoints! We used mediaqueries to optimise the content to be more digestible on narrowviewports. This included changing font sizes so line lengths wereeasier to read, stacking images and arranging them in columns,and moving the schedule into a single column layout.

5 adaptive web design tools

BrowserStackTesting on real devices is a must, but BrowserStack providesquick previews on real browsers and mobile emulators, for earlytesting.

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

MobitestSurprisingly few sites cater for mobile in anything other thanlayout. Mobitest returns performance stats for sites sent to it.

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

CSS.

Pattern LabA tool that encourages establishing a sound interface system sothat a design looks and functions beautifully in any environment.