Adaptive web design

This article needs to be updated. Please help update this article to reflect recent events or newly available information. (September 2018)

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 static page which loads (and looks) the same on all devices or a single page which reorders and resizes content responsively based on the device/screen size/browser of the user.

This most often describes the use of a mobile and a desktop version of a page (or in most cases, the entire website), either of which is retrieved based on the user-agent defined in the HTTP GET request, which is known as dynamic serving. Adaptive web design was one of the first strategies for optimizing a site for mobile readability, the most common practice involved using a completely separate website for mobile and desktop, with mobile devices often redirected to the mobile version of the site served on a subdomain (often the third level subdomain, denoted "m"; e.g. http://m.website.com/; and/or URL parameters like &app=m&persist_app=1 used on YouTube). Today the use of two separate static sites for mobile and desktop viewing is being largely phased out, with Server-side scripting instead utilized to serve dynamically generated pages or to dynamically decide which version of a static page to serve, although the use of independent sites for mobile and desktop can still be frequently observed. While many websites employ either responsive or adaptive web design techniques, the two are not mutually exclusive, and best practices for the most universally readable designed content employ a combination of the two techniques to support a complete spectrum of hardware and software.^[2]

The existence of separate front ends allows clients who experience technical issues with either to fall back to another, with the chance that the issue does not occur.

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 page to different devices based on common screen sizes and resolutions. The term was first coined by Aaron Gustafson in his 2011 book Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement.^[2]

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" JavaScript, and progressive enhancement of responsive web design. "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 responsive web design.

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 progressive enhancement for smart phones, rather than rely on graceful degradation to make a complex, image-heavy site work.^[3][4]

This section needs additional citations for verification. Please help improve this article by adding citations to reliable sources in this section. Unsourced material may be challenged and removed. Find sources: "Adaptive web design" – news · newspapers · books · scholar · JSTOR (February 2024) (Learn how and when to remove this message)

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 as mobile devices now have a larger market share than desktops.^[5] Although dynamic web practices have been around for more than two decades, dynamic design in reference to graphical layout, particularly for mobile device viewing, is a more recent concept. New technologies such as CSS3 Media Queries, AJAX, HTML5, and JavaScript have centered around responsive design, which is typically more efficient and effective than adaptive design. The transition from desktop to mobile has led to a move away from adaptive web design and towards responsive web design.^[6][7]

Adaptive web design detects screen size during the HTTP GET request and serves a page tailored to the user-agent. Typically, adaptive sites are designed for six screen widths: 320, 480, 760, 960, 1200, and 1600.^[8][9] This was not only common practice for mobile optimization, but the transition period between 4:3 low resolution CRT monitors and high resolution 16:9 LCD monitors. Standard adaptive web design was necessary to create fluid layouts for the various monitors available.^[8]

In the early days of smartphones, screen dimensions varied widely, and mobile browsers lacked the advanced functionality and plugins available in desktop browsers. Mobile internet was also expensive and slow, making it necessary to design "stripped-down" mobile pages with fewer or lower-quality images and simplified text formatting for readability.^[10] A major change occurred with the introduction of the iPhone and the spread of 3G networks, which significantly increased connection speeds and bandwidth. It became common for websites to have two versions: a mobile layout (often using an "m" subdomain) and a desktop layout. Mobile versions were still often scaled-down, with reduced image quality and limited content like video to improve load times. The spread of touchscreens also influenced design, leading to larger buttons and links to accommodate finger navigation. Later, widespread adoption of 4G LTE reduced the need to compromise media quality or content. As Google's Android OS rose to popularity and introduced more variation in the smartphone market, the multi-page paradigm of standard dynamic web design became less common, though it still sees some use to completely separate touchscreen content design from desktop design. When integrating with material design or device-specific layouts and color schemes, some developers create three-page templates (Android, iOS, desktop), adjusting icons and colors for each and using media queries for layout. This simplifies design and code, though updates must be made to all three templates.

There is no consensus on naming, and both adaptive and responsive are used to refer to the same behavior, but what is commonly called responsive design uses fewer page layouts than standard adaptive design, typically only one. Adaptive design is considered less future-proof and less efficient than responsive design because the screen sizes of common devices are constantly changing and highly variable. A hybrid adaptive/responsive design model involves multiple versions of pages with responsive layouts.^[8][11]

Standard adaptive layouts can also use viewport responsive scaling of the page (as in responsive web design), but the approach of creating different layouts for different devices or resolutions is now rare and typically seen where the site wishes to target users of non-smart internet-capable mobile devices and obsolete smartphones which can't use the technologies new responsive designs require.^[8]

There are variations on these concepts that blur the lines between adaptive and responsive web design, like Django's "views" and some aspected of AJAX, which serve different versions of pages, including for the purpose of fluidity on different devices, however pages are generated dynamically, not statically.^[9][12][2]