View source for Adaptive web design

{{Short description|Display a web page to fit a certain device and screen size}}
{{update|date=September 2018}}
[[File:Twitter M2 mobile website.png|thumb|"M2 Mobile Web", the original [[mobile web]] front end of [[Twitter]], later served as fallback legacy version to [[client (computing)|clients]] without [[JavaScript]] support and/or incompatible browsers, such as [[game console]]s 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]] 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 [[resize]]s [[web content|content]] [[responsive web design|responsively]] based on the device/[[screen size]]/[[web browser|browser]] of the user. 

This most often describes the use of a [[smart phone|''mobile'']] and a [[personal computer|''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 [[HTTP redirect|redirected]] to the mobile version of the site [[HTTP server|served]] on a [[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 practice]]s 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]].<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. 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''.<ref name="Gustafson"/>

==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 "[[Responsive web design|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.

[[Web browser|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 [[Fault tolerance|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==
{{More citations needed|section|date=February 2024}}
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 as mobile devices now have a larger market share than desktops.<ref>{{cite web |title=Desktop vs Mobile Market Share Worldwide |url=https://gs.statcounter.com/platform-market-share/desktop-mobile/worldwide/#monthly-202012-202112 |website=StatCounter Global Stats |access-date=19 February 2024 |language=en}}</ref> 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 [[media queries|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.<ref>{{Cite web |last=commentator |first=Expert |date=2018-12-07 |title=The exodus from desktop to mobile: Why it matters and what to do about it |url=https://www.smartinsights.com/mobile-marketing/mobile-marketing-strategy/from-desktop-mobile-why-matters/ |access-date=2024-12-12 |website=Smart Insights |language=en-US}}</ref><ref>{{Cite web |title=Desktop to mobile transition- Website Design in The USA |url=https://www.affordablewebsite.us/ |access-date=2024-12-12 |website=A. Website |language=en-US}}</ref>

===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 [[Optical resolution|resolution]] [[Cathode ray tube|CRT]] monitors and high resolution [[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, 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 [[Google Android|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.<ref name="EmilyGrace"/>

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.<ref name="EmilyGrace"/> 

There are variations on these concepts that blur the lines between adaptive and responsive web design, like [[Django (web framework)|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.<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" />

==See also==
{{Portal|Internet}}
<!-- 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]]