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.[citation needed]
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".[6][7] 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.[6]
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.[6]
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.[6]
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.[7][8][2]