Adaptive web design

Adaptive web design (AWD) promotes the creation of multiple versions of a web page to better fit the user's device, as opposed to a single version that other web design techniques use. Adaptive web design encompasses a range of other strategies that can be combined with responsive web design.[1]


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 adaptive design will serve different versions of the site to different devices based on common screen sizes and resolutions. The only difference is the way the design is looked at from a collateral or device viewpoint rather than the responsive web design (RWD) one-size-fits-all approach to layout.[2] The term was first coined by Aaron Gustafson in his book Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement in May 2011.[1]


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.[3][4][5][6]

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.[7] New technologies have emerged, bringing change to the face of web design as a whole and breathing new life into AWD as a valuable concept. These recent changes are making AWD a commonly used practice on the web, with an estimated 70,000 new sites created every day.

Fluid-motion drag-and-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 coordinates Cartesian coordinate system.[8] Currently, there are two editors that use this type of system and layout, WIX[9] and Flux Live.[10]

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.

  • Fluid motion – Allowing for faster design layout
  • 3D layout – Layout based on the XYZ coordinates Cartesian coordinate system.[8]
  • Multi-page layout – This type of editor can have layouts for popular sizes of mobile devices.
  • Mobile separate – Separate custom layouts for mobile devices
  • Print – Absolute-positioned editors are perfect for online print.
  • Flux – Fluctuates the size from a mid-sized layout, allowing for better scaling of the page.
  • Maintain design layout – Unless the page is in fluid layout, resizing does not affect design.
  • Zoom – The page is sometimes better served in a zoomed or scaled layout.


There are four modern types of layouts used in the adaptive model: standard, responsive, scaled, and flux and zoom.


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”.[11][12] 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.


Adaptive responsive layout uses fewer page layouts than standard adaptive. This approach is considered less future-proof than responsive design because the screen sizes of common devices are constantly changing. Responsive Design is built on a fluid grid vs. adaptive design’s fixed grid.[2] Pages are formatted in responsive web design layout, when the nearest appropriate layout is served, then the page responds to the user's device.


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 page's 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.[13][14]

Flux & zoom[13][14] 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.[15]


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,[16][17][18] breakpoints to scale both height and width of the page to fit the user's 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 coordinates Cartesian coordinate system.[8] 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 coordinates for positioning and zoom for displaying the design in perspective.


Flux & Zoom uses two or more mid-sized layouts and fluctuates -+150 pixels larger or smaller in size.[13][14] Web design software already exists that provides adaptive page serving and adaptive visual editors to assist in layout and design. It generally takes less time building two designs in adaptive flux than a responsive page, because you are not bound to the rules of the grid Responsive web design.


Adaptive flux and 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.


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.

See also


  1. 1 2 Gustafson, Aaron. Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement. Easy Readers, LLC; 1st edition, 2011.
  2. 1 2 "Understanding and Comparing Responsive, Adaptive and Fluid Design | ICO Web Solutions". ICO Web Solutions. 16 January 2014. Retrieved 17 April 2017.
  3. Wroblewski, Luke (November 3, 2009). "Mobile First".
  4. Firtman, Maximiliano (July 30, 2010). Programming the Mobile Web. p. 512. ISBN 978-0-596-80778-8.
  5. "Graceful degradation versus progressive enhancement". February 3, 2009.
  6. Designing with Progressive Enhancement. February 2010. p. 456. ISBN 978-0-321-65888-3. Retrieved March 1, 2010.
  7. Sterling, Greg (5 May 2015). "It's Official: Google Says More Searches Now On Mobile Than On Desktop". Retrieved 27 January 2017.
  8. 1 2 3 "HTML 5 Flux Editor". PlugNedit Flux. Retrieved 2016-12-21.
  9. "Free Website Builder - Create a Free Website -". Retrieved 27 April 2017.
  10. "Flux Live Editor! Adaptive Zoom & Flux Web Design". Retrieved 27 April 2017.
  11. Adiseshiah, Emily Grace (Mar 1, 2016). "Choosing a web design: Responsive Vs Adaptive".
  12. VenturePact, VenturePact. "Designing for 10000 screens 4 layout tips for responsive web design".
  13. 1 2 3 Brown, John (Nov 22, 2016). "Flux & Zoom Design".
  14. 1 2 3 "Flux Adaptive Editor". Nov 2016.
  15. Marcotte, Ethan (March 3, 2009). "Fluid Grids". A List Apart.
  16. Gillenwater, Zoe Mickley (December 15, 2010). "Examples of flexible layouts with CSS3 media queries". Stunning CSS3. p. 320. ISBN 978-0-321-722133.
  17. Gillenwater, Zoe Mickley (October 21, 2011). "Crafting quality media queries".
  18. "Responsive design—harnessing the power of media queries". Google Webmaster Central. April 30, 2012.
This article is issued from Wikipedia. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.