Adaptive web design

Short description: Display a web page to fit a certain device and screen size

"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 site), 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 (although responsive web design usually allows for all the control of Adaptive Web Design, without the need to edit multiple pages on updates). The adaptive design will serve different versions of the site (or page) 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. The term was first coined by Aaron Gustafson in his book Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement in May 2011.

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 in 2018 when 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 dynamic graphical web design. Note that, although dynamic web practices been around for more than two decades, dynamic design in reference to graphical layout, particularly for mobile device viewing, is a much more recent concept. It is also important, when defining the difference between RWD (responsive web design) and AWD (adaptive web design), that new technologies (such as CSS3 Media Queries, AJAX, HTML5, near universal JS integration, etc.) have centered around RWD- not AWD, which is typically more efficient and effective than AWD. AWD only exists in new design to supplement RWD where RWD technologies cannot be properly interpreted by the browser (in the case of "non-smart" mobile device browsers and outdated smartphones). These recent changes (the transition from desktop to mobile) make fluid mobile design one of the most important concepts in graphical web development and have led to a strong transition to RWD and away from AWD.

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, like the BlackBerrys of the mid- to late 2000s, screen dimensions were highly varied, and in addition, mobile browsers on these devices lacked the advanced functionality and plugins used to create rich environments in desktop browsers. Additionally, data was a high-priced commodity and very slow so it was necessary to design special "stripped-down" mobile pages, with fewer images (or lower quality ones) and sharp text-wrapping for easy readability, ads needed to be scaled considerably as well. HTML at the time only allowed for fixed coordinates and no scaling (which is the reason websites were almost always bound to the top left, or top right in certain regions—responsive web design allowed for centering and relative coordinates, which led to the change to centered content pages). So in order to achieve pages which would load on mobile, developers had to design completely new pages for mobile viewing, more often than not needing to start from scratch; since these browsers were often difficult to navigate, creating large, easily seen links was also necessary. The next major change to adaptive standard web design came in more recent years, particularly with the rise of the iPhone and two years later widespread 3G availability dramatically increasing connection speeds and available bandwidth, a two design dynamic system became the most utilized, a mobile layout (usually with the subdomain prefix "m") optimized for iPhone and a desktop layout. The mobile versions were still usually "scaled-down" with lower quality images and sometimes content such as videos removed to decrease loading time. This was also the first time web developers had to design with a touch screen in mind, using larger clickable links and buttons to facilitate the use of fingers as pointers. As Google's Android OS rose to popularity and introduced more variation in the market share of smartphones, along with the widespread implementation of 4G LTE's ultra fast mobile broadband, it was no longer necessary to downgrade mobile media quality or trim content to deal with slow connection speeds, and, with so much variation in devices, the multi-page paradigm of Standard Dynamic web design widely lost favor with developers. While some still use the concept to completely separate touch-screen content design from desktop design, responsive web design has nearly all the tools necessary to perform nearly any manipulation in response to a large variety of factors, allowing for one page to serve all purposes. 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 3 templates. There are variations on this concept that blur the lines between AWD and RWD, like Django's "views."

Responsive web design vs. adaptive web design

While there isn't a consensus on naming, as both adaptive and responsive could be used to represent the same behavior, what is commonly called responsive design uses fewer page layouts than standard adaptive design, typically (in nearly all cases) only one. Adaptive design is considered less future-proof and a far less efficient design model than responsive design because the screen sizes of common devices are constantly changing and highly variable. In the very early days of mass smartphone adoption, the simple 2-site model worked well (a media rich, widescreen page for desktop viewing; a smaller size (in terms of the quality/file size of loaded assets- to save data) page formatted for small screen viewing, with less clutter, larger fonts and tighter text-wrapping constraints for mobile viewing). Additionally, in the first few years of the smart-phone boom, only a few models made up the majority of the market share, so mobile pages were designed for best viewing on those devices- ignoring the minor glitches when the pages were loaded on less popular devices. With the rise of the iPhone, many developers began tailoring their mobile sites specifically to the iPhone and touch screens. Responsive Design is built on a fluid grid vs. adaptive design’s fixed grid. The hybrid Adaptive/Responsive design model involves multiple pages formatted in responsive web design layout, when the nearest appropriate layout is served, then the page responds to the user's device.

Standard Adaptive layout (screen-dependent multi-page) can also use viewport responsive scaling of the page in conjunction (as in responsive web design), but new responsive web design strategies and technology have all but made the need for separate multi-screen pages obsolete except where the site wishes to target users of non-smart internet-capable mobile devices and obsolete smartphones which do not respond to new responsive design scripts. As previously stated, things like Django's "views" concept and some aspects of AJAX blur the lines, as they serve different versions of pages, for many reasons, but some can be for fluidity on different devices, however, pages are generated dynamically, not statically (though one could argue that the "views" are static templates to be filled with content. In the end, it is all up to the developer how he or she feels is the most appropriate way to target the devices their content will be viewed on in the most fluid, clean and integrated way. There is certainly more than one way to skin the cat of dynamic web development.

See also

• AJAX
• Backwards compatibility
• Content negotiation – Serving multiple documents at the same URI
• CSS – Style sheet language
• Media Queries
• Mobile first
• Polyfill (programming) – Code to implement features in web browsers that do not support them
• Responsive Web Design
• User interfaces
• Viewport – Polygon viewing region in computer graphics