 | This article needs to beupdated. Please help update this article to reflect recent events or newly available information.(September 2018) |
Adaptive web design (AWD) promotes thecreation of multiple versions of aweb page to better fit the user's device,as opposed to a singlestatic page which loads (and looks) the same on all devices or a single page which reorders andresizescontentresponsively based on the device/screen size/browser of the user.
This most often describes the use of amobile and adesktop version of a page (or in most cases, the entirewebsite), either of which is retrieved based on theuser-agent defined in theHTTP GET request, which is known as dynamic serving. Adaptive web design was one of the first strategies foroptimizing a site for mobilereadability, the most common practice involved using a completely separate website for mobile and desktop, withmobile devices oftenredirected to the mobile version of the siteserved on asubdomain (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 largely being phased out, withServer-side scripting instead utilized to servedynamically 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 responsiveor adaptive web design techniques, the twoare notmutually exclusive, andbest practices for the mostuniversally readable designed content employs a combination of the two techniques to support a complete spectrum ofhardware andsoftware.[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 bookAdaptive Web Design: Crafting Rich Experiences with Progressive Enhancement.[2]
Adaptive web design uses multiple page layouts for a single website and sometimes employs progressive enhancementprogressive enhancement (PE). The adaptive model is a "mobile separate" layout, in contrast to "mobile first"JavaScript, andprogressive 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 ormedia queries, so a recommended practice is to create a basic mobile layout and useprogressive enhancement for smart phones, rather than rely ongraceful degradation to make a complex, image-heavy site work.[3][4]
 | This sectionneeds additional citations forverification. Please helpimprove this article byadding 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 ofinterfaces 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 asCSS3 Media Queries, AJAX, HTML5, andJavaScript 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 theHTTP GET request and serves a page tailored to theuser-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 between4:3 lowresolutionCRT monitors and high resolution16:9LCD 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 theiPhone and the spread of3G 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 of4G LTE reduced the need to compromise media quality or content. As Google'sAndroid 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 withmaterial 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 useviewport 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, likeDjango's "views" and some aspected ofAJAX, 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]
