Adaptive web design

Definition

Adaptive web design is a process of server-side detection that chooses a design layout and size to display. All types of web design layouts can be used including responsive layout. The only difference is the way the design is looked at from a “business card / letter / brochure” or “phone / tablet / desktop” viewpoint rather than responsive web design (RWD) one-size-fits-all approach to layout. The term was first coined by Aaron Gustafson in his 2011 book, "Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement" in May 2011.

Techniques

Adaptive web design uses multiple page layouts for a single web page and sometimes Progressive enhancement (PE). The Adaptive model is a "Mobile Separate" layout, in contrast to "Mobile First", unobtrusive JavaScript, and progressive enhancement of RWD.

"Mobile Separate", unobtrusive JavaScript, and progressive enhancement

"Mobile Separate" is the same concept as "Mobile First" except the design layout of AWD is to have a separate base mobile layout versus the single design layout of RWD.

Browsers of basic mobile phones do not understand JavaScript or media queries, so a recommended practice is to create a basic mobile layout and use unobtrusive JavaScript, and progressive enhancement for smart phones, rather than rely on graceful degradation to make a complex, image-heavy site work.

Technology advances

Adaptive design is a broad approach to web design that focuses on suitability for a variety of interfaces rather than restricting itself to the format intended for a desktop display. This is especially significant now that smartphone search volumes have overtaken desktop search volumes in 10 countries, even with tablet searches counted in the desktop category. New technologies have emerged, bringing change to the face of web design as a whole, and breathing new life into Adaptive Web Design as a valuable concept. These recent changes are making AWD a commonly used practice on the web, with an estimated 70,000 new sites a day created.

Fluid motion drag & drop editors

Fluid motion editors are not HTML 5 native drag and drop editors, and cannot be used in fluid design pages. They allow for fluid movement and objects to be placed anywhere on a web page and are based on absolute positioning of objects in accordance to the XYZ coords Cartesian coordinate system. Currently there are two editors that use this type of system and layout, WIX and Flux Live.

Editor and layout benefits

This type of editor and layout has many benefits, and is the standard layout of most high end graphic design programs.

Layouts

There are 4 modern types of layouts used in the Adaptive Model: standard, responsive, scaled, flux & zoom.

Standard

AWD works to detect the screen size and load the appropriate layouts. With adaptive standard layout, "generally you would design an adaptive site for six common screen widths: 320, 480, 760, 960, 1200, and 1600”. This type of layout can also use viewport responsive scaling of the page. In recent years many adaptive design layouts have become popular with as little as two designs, a mobile layout and desktop layout. The two page layout allows for a custom built mobile page, and a desktop version to enhance the User experience. It has the advantage of multiple layouts for a single page, allowing for customization of the design as far as the designer wishes to take it.

Responsive

Adaptive responsive layout uses fewer page layouts than standard adaptive. Pages are formatted in Responsive web design layout, when the nearest appropriate layout is served, then the page responds to the users device.

Scaled

Scaled uses a fluid design layout and scales the width of the viewport. This type of layout can use absolute pixels or points.

Flux & zoom

Flux & zoom maintains perspective of a web pages design by scaling height and width when using absolute position of objects. Then it targets the break points of popular device screen widths by adjusting the scale of the top block level object.

Flux & Zoom is the mirror of the fluid grid responsive web design layout that calls for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points.

Model

Flux & Zoom requires the absolute units of pixels or points and cannot use relative units of percentages. Typically two page layouts are used a desktop version, and a mobile version. Fluctuating zoom design uses CSS3 media queries, breakpoints to scale both height and width of the page to fit the users device, this allows the closest page layout to be zoomed in or out, allowing for scaling of a page outside the linear grid, fluid model, the page remains 3D in the XYZ chords Cartesian coordinate system. Zoom can be used with responsive layouts, allowing a section that is zoomed to maintain its design layout when sized.

Layers (digital image editing) based photo editors use this type of model for layout and design, with XYZ Cartesian coordinate system chords for positioning, and zoom for displaying the design in perspective.

Layout

Flux & Zoom uses two or more mid sized layouts and fluctuates -+150 pixels larger or smaller in size. Web design software already exists that provide adaptive page serving and Adaptive Visual Editors to assist in layout and design. It generally takes less time building two designs in Adaptive Flux then a Responsive page, because you are not bound to the rules of the grid Responsive web design.

Benefits

Adaptive Flux & Adaptive Zoom solves most issues found in other web design layouts while remaining Responsive and is the only web design layout that can support Layers (digital image editing) based design across all platforms.

Popularity

With newly released adaptive HTML editors, and page builders emerging on the market, adaptive design is becoming a popular alternative to responsive. The difficulty of creating multiple page layouts and serving proper pages is handled by the software.