Adaptive web design

From Wikipedia, the free encyclopedia
Jump to: navigation, search

Adaptive web design (AWD) promotes the creation of multiple versions of a web page to better fit the user's device, as opposed to the one size fits all approach of other web design techniques. Adaptive Web Design also encompasses a range of other strategies which can be combined with responsive web design.[1]

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 (AWD) Techniques[edit]

Adaptive 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 Responsive web design (RWD).

"Mobile Separate", unobtrusive JavaScript, and progressive enhancement[edit]

"Mobile Separate" is the same concept of "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 on mobile phones.[2][3][4][5]

Adaptive design technology advances[edit]

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 mobile devices account for most search queries, with Google announcing that smartphone search volumes had overtaken desktop search volumes in 10 countries, and this is with Google counting tablet search volumes in the desktop category.[6] 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[edit]

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, they are based on absolute positioning of objects in accordance to the XYZ chords Cartesian coordinate system.[7] Currently there are two editors that use this type of system and layout, WIX and Flux Live.

Editor & Layout Benefits[edit]

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

  • Fluid Motion Allowing for faster design layout.
  • 3D Layout Layout based on the XYZ chords Cartesian coordinate system.[7]
  • 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 effect design.
  • Zoom The page is sometimes better served in a zoomed or scaled layout.

Adaptive Web Design Layouts[edit]

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

Adaptive[edit]

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”.[8][9] This type of layout can also use viewport responsive scaling of the page. In recent years many adaptive designs 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 desktop version to enhance the User experience.

Adaptive Responsive[edit]

Uses fewer page layouts, then standard adaptive, pages are formatted in Responsive web design layout, when the nearest appropriate layout is served, the page then responds to the users device.

Adaptive Scaled[edit]

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 Web Design[edit]

Zoom & Flux maintains perspective of a web pages design by scaling height and width when using absolute position of objects. targeting the break points of popular device screen widths by adjusting the scale of the top block level object.[10][11]

Flux & Zoom[10][11] 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.[12]

Flux & Zoom Model[edit]

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,[13][14][15] 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.[7] Zoom can be used with responsive layouts, allowing a section that is zoomed to maintain its design layout when sized.

This type of model is also used by Layers (digital image editing) based photo editors for layout and design, they use the XYZ Cartesian coordinate system chords for positioning, and zoom for display the design in perspective.

Flux & Zoom Layout[edit]

Adaptive Flux uses two or more mid sized layouts and fluctuates -+150 pixels larger or smaller in size.[10][11] 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.

Flux & Zoom Benefits[edit]

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.

Adaptive Design VS. Responsive Design[edit]

Adaptive web design has confused many on what it actually is because it's not a design layout but 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, pad, desktop) viewpoint rather than RWD one size fits all approach to layout.

Adaptive Benefits[edit]

Adaptive design has the benefit of multiple layouts for a single page, allowing for customization of the design as far as the designer wishes to take it.

Adaptive Becoming Popular[edit]

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

See also[edit]

References[edit]

  1. ^ a b Gustafson, Aaron. Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement. Easy Readers, LLC; 1st edition, 2011.
  2. ^ Wroblewski, Luke (November 3, 2009). "Mobile First". 
  3. ^ Firtman, Maximiliano (July 30, 2010). Programming the Mobile Web. p. 512. ISBN 978-0-596-80778-8. 
  4. ^ "Graceful degradation versus progressive enhancement". February 3, 2009. 
  5. ^ Designing with Progressive Enhancement. February 2010. p. 456. ISBN 978-0-321-65888-3. Retrieved March 1, 2010. 
  6. ^ Sterling, Greg. "It's Official: Google Says More Searches Now On Mobile Than On Desktop". http://searchengineland.com. Retrieved 27 January 2017.  External link in |website= (help)
  7. ^ a b c "HTML 5 Flux Editor.". PlugNedit Flux. Retrieved 2016-12-21. 
  8. ^ Adiseshiah, Emily Grace (Mar 1, 2016). "Choosing a web design: Responsive Vs Adaptive". 
  9. ^ VenturePact, VenturePact. "Designing for 10000 screens 4 layout tips for responsive web design". 
  10. ^ a b c Brown, John (Nov 22, 2016). "Flux & Zoom Design". 
  11. ^ a b c "Flux Adaptive Editor". Nov 2016. 
  12. ^ Marcotte, Ethan (March 3, 2009). "Fluid Grids". A List Apart. 
  13. ^ Gillenwater, Zoe Mickley (December 15, 2010). "Examples of flexible layouts with CSS3 media queries". Stunning CSS3. p. 320. ISBN 978-0-321-722133. 
  14. ^ Gillenwater, Zoe Mickley (October 21, 2011). "Crafting quality media queries". 
  15. ^ "Responsive design—harnessing the power of media queries". Google Webmaster Central. April 30, 2012. 

User interfaces

Retrieved from "https://en.wikipedia.org/w/index.php?title=Adaptive_web_design&oldid=762341199"