Adaptive web design

"M2 Mobile Web", the original mobile web front end of Twitter, later served as fallback legacy version to clients without JavaScript support and/or incompatible browsers, such as game consoles with limited web browsing capability. It was shut down in December 2020.

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.

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.

Technical 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 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.

Terminology of 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" 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.

Technology advances leading to necessity

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. 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.

History, adaptation and evolution

Adaptive web design works to detect the screen size during the HTTP GET request, prior to the page being served and load the appropriately designed page specific to the user-agent. With adaptive standard layout, "generally you would design an adaptive site for six common screen widths: 320, 480, 760, 960, 1200, and 1600". 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.

In the very early days of smartphones, screen dimensions varied greatly and mobile web browsers lacked the advanced functionality and plugins used to create rich environments in desktop browsers. Additionally, mobile internet use was expensive and very slow, so it was necessary to design "stripped-down" mobile pages, with fewer or lower quality images and sharp text-wrapping for easy readability. The next major change to adaptive standard web design came with the rise of the iPhone and widespread 3G availability, with 3G dramatically increasing connection speeds and available bandwidth. It became common for sites to have two versions: a mobile layout optimized for iPhone (usually with the subdomain prefix "m") and a desktop layout. The mobile versions were still usually "scaled-down" with lower quality images and sometimes lacked content such as videos in order to decrease loading time. Designs were also influenced by the spread of touchscreen devices, with websites using larger links and buttons that make navigating using a finger as a pointer easier. Later, the widespread implementation of 4G LTE's fast mobile broadband meant it was no longer necessary to downgrade mobile media quality or trim content to deal with slow connection speeds. 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 layout and color schemes, some developers find it simpler to create three page templates (Android, iPhone/iOS, desktop), changing the icons and colors between each, while using media queries to determine layout. The practice results in much simpler page design and code, but updating requires editing all three templates.

Responsive web design vs. adaptive web design

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.

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.

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.

See also

• AJAX – Group of interrelated Web development techniquesPages displaying short descriptions of redirect targets
• Backwards compatibility – Technological ability to interact with older technologiesPages displaying short descriptions of redirect targets
• Content negotiation – Serving multiple documents at the same URI
• CSS – Style sheet language
• Media Queries – CSS3 module allowing content rendering to adapt to conditions such as screen resolutionPages displaying wikidata descriptions as a fallback
• Mobile first – Approach to web design for making web pages render well on a variety of devicesPages displaying short descriptions of redirect targets
• Polyfill (programming) – Code to implement features in web browsers that do not support them
• Responsive Web Design – Approach to web design for making web pages render well on a variety of devicesPages displaying short descriptions of redirect targets
• User interfaces – Means by which a user interacts with and controls a machinePages displaying short descriptions of redirect targets
• Viewport – Polygon viewing region in computer graphics