The world of web design has changed.
As users turned to mobile devices for internet access, Web design adapted to meet the needs of a multi-device audience. Designers who once lamented the difficulties of developing pixel-perfect sites for different browsers now also have to contend with display on pads, desktops, and mobile phones. Fluid layouts are now the benchmark of the good web designer. Multi-device performance has replaced pixel-perfection.
To keep current, developers have two choices, if they hope to remain current and create sites for multiple devices: adaptive or responsive design.
Adaptive vs. Responsive Design
Adaptive design uses media queries, codes that funnel the site’s HTML rendering through CSS documents that make the layout adapt to different device display sizes or viewports, based on their specific measurements. These measurements define the “breakpoints” at which the page’s rendering adapts to a different layout. Adaptive designs typically utilize more than one HTML document and.or CSS file to achieve different layouts.
Responsive design often use a single grid-based layout that scales up or down based on media queries to display the site’s content relative the device. Responsive designs typically employ one HTML document that flexes, depending on the size of the viewport or device on which they’re viewed. Pages shrink, grow or rearrange their layouts to fit the device.
Both adaptive and responsive designs are partly or wholly fluid, in that they utilize percentage units to scale typography and layout elements relative to the dimensions of the display on which they’re viewed.
Which is best?
It all depends on the site. Both are viable options.
Responsive sites are harder to build and take longer to execute. It’s easier to make a few layouts geared toward specific devices than it is to limit the site’s design to one layout that works equally well on all devices, and develop that single layout.
For a small site that won’t be upgraded frequently, an adaptive design might be a better option – especially if the long-term plan is to replace it at some point with a larger, responsive site.
A deficit of adaptive design is that future devices might not support the layouts you’ve created. Device displays that fall outside the pixel dimensions you’ve targeted with your media queries might not be a good fit for your layouts. You might need to create additional layouts to support new devices. For this reason, you should expect an adaptive design to require more maintenance than a responsive one. For a larger site, a responsive layout might be a better option, from a maintenance perspective.
A responsive design on the other hand will always scale to fit any device. You’ll never have to worry about how it’ll look on a smaller mobile screen or a larger monitor. And because a responsive design uses a single layout, your small site will load slightly faster than an adaptive site that has the overhead of multiple layouts to download.
Case in Point
I recently designed and developed a small 3-page website, www.eternal-massage.com , using strategies of both adaptive and responsive design. I created 3 layouts: desktop, pad/tablet, and mobile. While the site doesn’t use a grid-system, I did build fluidity into layouts, to allow the columns to flex, for devices that were slightly outside the pixel dimensions I’d targeted for each of my 3 devices. Columns of text flow atop one other on smaller devices, and sit side-by-side on desktop monitors.
The layout is almost identical for both pad/tablet and mobile devices, while the homepage differs on desktop to take advantage of the screen real estate. I decided on this approach as the content for the site was minimal, and the massage therapist was targeting the luxury-item demographic of potential customers, so I wanted to be able to concentrate on the aesthetics of the site, rather than limit myself to a design that would scale to the device.
The client plans to build out the site as the business grows, and at that time I’ll be converting the site’s adaptive design to one that’s truly responsive. Right now, his goal is to build his business by attracting a customer base geared toward luxury-item income.
When his business grows, and his reputation among his desired customers grows, the aesthetics of the site, while still important, can alter to support a less-fixed responsive layout.