View source for Adaptive web design

{{Short description|Display a web page to fit a certain device and screen size}}
[[File:Twitter M2 mobile website.png|thumb|"M2 Mobile Web", the original [[Mobile web|mobile web]] front end of Twitter, later served as fallback legacy version to [[Client (computing)|clients]] without [[JavaScript|JavaScript]] support and/or incompatible browsers, such as game consoles with limited web browsing capability. It was shut down in December 2020.<ref>{{cite web |title=Legacy Twitter Shutdown Means You Can't Tweet From The 3DS Anymore |url=https://screenrant.com/twitter-legacy-nintendo-3ds-shut-down-date-december-2020/ |website=ScreenRant |date=2020-11-28}}</ref>]]

'''Adaptive web design''' ('''AWD''') promotes the [[Web development|creation]] of multiple versions of a [[Web page|web page]] to better fit the user's device, ''as opposed to'' a single [[Static web page|static]] page which loads (and looks) the same on all devices or a single page which reorders and resizes [[Web content|content]] [[Responsive web design|responsively]] based on the device/screen size/[[Software:Web browser|browser]] of the user. 

This most often describes the use of a ''mobile'' and a [[Engineering:Personal computer|''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 [[HTTP server|served]] on a [[Subdomain|subdomain]] (often the third level subdomain, denoted ''"m"''; e.g. http://'''m'''.website.com/; and/or URL parameters like <code>&app=m&persist_app=1</code> 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 [[Dynamic web page|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 [[Universality (dynamical systems)|universally]] readable designed content employ a combination of the two techniques to support a complete spectrum of [[Computer hardware|hardware]] and [[Software|software]].<ref name="Gustafson">Gustafson, Aaron. ''Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement''. Easy Readers, LLC; 1st edition, 2011.</ref>

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 [[Philosophy:Point of view|viewpoint]] rather than the [[Responsive web design|responsive web design]] (RWD) one-size-fits-all approach to layout.<ref name="auto">{{Cite news|url=http://icowebsolutions.com/understanding-and-comparing-responsive-adaptive-and-fluid-design/|title=Understanding and Comparing Responsive, Adaptive and Fluid Design {{!}} ICO Web Solutions|date=16 January 2014|work=ICO Web Solutions|access-date=17 April 2017|language=en-US}}</ref>
The term was first coined by Aaron Gustafson in his book ''Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement'' in May 2011.<ref name="Gustafson"/>

==Terminology of techniques==
Adaptive web design uses multiple page layouts for a single web page and sometimes [[Progressive enhancement|progressive enhancement]] (PE). The adaptive model is a "mobile separate" layout, in contrast to "mobile first" [[JavaScript]], and [[Progressive enhancement|progressive enhancement]] of responsive web design.<ref name="auto" /> "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.

[[Software:Web browser|Browsers]] of basic mobile phones do not understand JavaScript or [[Media queries|media queries]], so a recommended practice is to create a basic mobile layout and use [[Progressive enhancement|progressive enhancement]] for smart phones, rather than rely on graceful degradation to make a complex, image-heavy site work.<ref>{{cite web|title=Graceful degradation versus progressive enhancement|date=February 3, 2009|url=http://docs.webplatform.org/wiki/tutorials/graceful_degradation_versus_progressive_enhancement|access-date=2016-12-21|archive-url=https://web.archive.org/web/20141113064723/https://docs.webplatform.org/wiki/tutorials/graceful_degradation_versus_progressive_enhancement|archive-date=2014-11-13|url-status=dead}}</ref><ref>{{cite book |date=February 2010 |pages=456 |url= http://filamentgroup.com/dwpe/ |title= Designing with Progressive Enhancement |access-date= March 1, 2010 |isbn= 978-0-321-65888-3|last1=Parker |first1=Todd |last2=Wachs |first2=Maggie Costello |last3=Jehl |first3=Scott }}</ref>

==Technology advances leading to necessity==
Adaptive design is a broad approach to web design that focuses on suitability for a variety of [[Interface (computing)|interfaces]] rather than restricting itself to the format intended for a desktop display. This is especially significant in 2018 when smartphone [[Search engine|search]] volumes have overtaken desktop search volumes in 10 countries, even with [[Engineering:Tablet computer|tablet]] searches counted in the desktop category.<ref>{{cite web|last1=Sterling|first1=Greg|date=5 May 2015|title=It's Official: Google Says More Searches Now On Mobile Than On Desktop|url=http://searchengineland.com/its-official-google-says-more-searches-now-on-mobile-than-on-desktop-220369|website=SearchEngineLand.com|access-date=27 January 2017}}</ref> 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|responsive web design]]) and AWD (adaptive web design), that new technologies (such as [[Media queries|CSS3 Media Queries]], AJAX, HTML5, near universal [[JavaScript|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”.<ref name="EmilyGrace">{{cite web|last=Adiseshiah|first=Emily Grace|title=Choosing a web design: Responsive Vs Adaptive|date=Mar 1, 2016|url=https://www.justinmind.com/blog/choosing-a-web-design-responsive-vs-adaptive/}}</ref><ref name="VenturePact">{{cite web|last=VenturePact|first=VenturePact|title=Designing for 10000 screens 4 layout tips for responsive web design|url=http://blog.venturepact.com/designing-for-10000-screens-4-layout-tips-for-responsive-web-design/}}</ref> This was not only common practice for mobile optimization, but the transition period between 4:3 low [[Physics:Optical resolution|resolution]] [[Engineering:Cathode ray tube|CRT]] monitors and high resolution [[Engineering:16:9|16:9]] LCD monitors. Standard adaptive web design was necessary to create fluid layouts for the various monitors available.<ref name="EmilyGrace"/>

In the very early days of smartphones, like the [[Engineering:BlackBerry|BlackBerry]]s 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.<ref name="auto"/> The next major change to adaptive standard web design came in more recent years, particularly with the rise of the [[Engineering:IPhone|iPhone]] and two years later widespread [[3G|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.<ref name="auto"/> 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 [https://icowebsolutions.com/dynamic-website-designing/ 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 [[Software:Django (web framework)|Django]]'s "views."<ref name="auto"/><ref name="VenturePact" /><ref name="Firtman">{{cite book|last=Firtman|first=Maximiliano|pages=[https://archive.org/details/programmingmobil0000firt/page/512 512]|url=https://archive.org/details/programmingmobil0000firt/page/512|title=Programming the Mobile Web|date=July 30, 2010|isbn=978-0-596-80778-8}}</ref><ref name="Gustafson" />

====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 [[Engineering:IPhone|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'''.'''<ref name="auto"/> The hybrid Adaptive/Responsive design model involves multiple pages formatted in [[Responsive web design|responsive web design]] layout, when the nearest appropriate layout is served, then the page responds to the user's device.<ref name="EmilyGrace"/>

Standard Adaptive layout (screen-dependent multi-page) can also use [[Viewport|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.<ref name="EmilyGrace"/> 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.<ref name="auto"/><ref name="VenturePact" /><ref name="Firtman" /><ref name="Gustafson" />

==See also==
<!-- alphabetical order please WP:SEEALSO -->
<!-- please add a short description WP:SEEALSO, via {{subst:AnnotatedListOfLinks}} or {{Annotated link}} -->
{{div col|colwidth=20em|small=yes}}
* {{Annotated link |AJAX}}
* {{Annotated link |Backwards compatibility}}
* {{Annotated link |Content negotiation}}
* {{Annotated link |CSS}}
* {{Annotated link |Media Queries}}
* {{Annotated link |Mobile-first design|Mobile first}}
* {{Annotated link |Polyfill (programming)}}
* {{Annotated link |Responsive Web Design}}
* {{Annotated link |User interfaces}}
* {{Annotated link |Viewport}}
{{div col end}}
<!-- alphabetical order please WP:SEEALSO -->

==References==
{{Reflist}}

{{Design}}

[[Category:Adaptive web design]]
[[Category:Web design]]

{{Sourceattribution|Adaptive web design|1}}