Adaptive web design

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

This article needs to be updated. Please update this article to reflect recent events or newly available information. (September 2018)

|

"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.[1]

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 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 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 largely being 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 employs a combination of the two techniques to support a complete spectrum of hardware and software.[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.

## Contents

* 1 Technical definition
* 2 Terminology of techniques
* 3 Technology advances leading to necessity
* 3.1 History, adaptation and evolution
* 3.1.1 Responsive web design vs. adaptive web design
* 4 See also
* 5 References

## 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.[2]

## Terminology of techniques

Adaptive web design uses multiple page layouts for a single website and sometimes employs progressive enhancement 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.[3][4]

## 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 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.[6][7]

### History, adaptation and evolution

Adaptive web design detects screen size during the HTTP GET request and serves a page tailored to the user-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 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.[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 the iPhone and the spread of 3G 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 of 4G LTE reduced the need to compromise media quality or content. 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 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.

#### 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.[8][11]

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.[8]

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.[9][12][2]

## See also

* AJAX
* Backwards compatibility
* Content negotiation - Serving multiple documents at the same:;URI
* CSS
* Media Queries
* Mobile first
* Polyfill (programming) - Code to implement features in web browsers that do not support them
* Responsive Web Design
* User interfaces
* Viewport

## References

1. ↑ "Legacy Twitter Shutdown Means You Can't Tweet From The 3DS Anymore". 2020-11-28. https://screenrant.com/twitter-legacy-nintendo-3ds-shut-down-date-december-2020/.
2. ↑ 2.0 2.1 2.2 Gustafson, Aaron. Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement. Easy Readers, LLC; 1st edition, 2011. ISBN 978-0-9835895-0-1
3. ↑ "Graceful degradation versus progressive enhancement". February 3, 2009. http://docs.webplatform.org/wiki/tutorials/graceful_degradation_versus_progressive_enhancement.
4. ↑ Parker, Todd; Wachs, Maggie Costello; Jehl, Scott (February 2010). Designing with Progressive Enhancement. pp. 456. ISBN 978-0-321-65888-3. http://filamentgroup.com/dwpe/. Retrieved March 1, 2010.
5. ↑ "Desktop vs Mobile Market Share Worldwide" (in en). https://gs.statcounter.com/platform-market-share/desktop-mobile/worldwide/#monthly-202012-202112.
6. ↑ "The exodus from desktop to mobile: Why it matters and what to do about it" (in en-US). 2018-12-07. https://www.smartinsights.com/mobile-marketing/mobile-marketing-strategy/from-desktop-mobile-why-matters/.
7. ↑ "Desktop to mobile transition- Website Design in The USA" (in en-US). https://www.affordablewebsite.us/.
8. ↑ 8.0 8.1 8.2 8.3 Adiseshiah, Emily Grace (Mar 1, 2016). "Choosing a web design: Responsive Vs Adaptive". https://www.justinmind.com/blog/choosing-a-web-design-responsive-vs-adaptive/.
9. ↑ 9.0 9.1 "Designing for 10000 screens 4 layout tips for responsive web design". http://blog.venturepact.com/designing-for-10000-screens-4-layout-tips-for-responsive-web-design/.
10. ↑ Teodorescu, A. (2023-07-14). "The Rise of the Mobile Internet: Tracing the Evolution of Portable Devices". Proceedings of the International Conference on Business Excellence 17 (1): 1645. doi:10.2478/picbe-2023-0147.
11. ↑ "Responsive web design". 2025-07-01. https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design.
12. ↑ Firtman, Maximiliano (July 30, 2010). Programming the Mobile Web. pp. 512. ISBN 978-0-596-80778-8. https://archive.org/details/programmingmobil0000firt/page/512.

* v
* t
* e

Design

* Outline
* Designer

Disciplines

| Communication
design|

* Advertising
* Book design
* Corporate design
* Exhibit design
* Film title design
* Graphic design
* Motion
* Postage stamp design
* Print design
* Illustration
* Information design
* Instructional design
* News design
* Photography
* Retail design
* Signage / Traffic sign design
* Typography / Type design
* Video design
* Visual merchandising

|

Environmental
design|

* Architecture
* Architectural lighting design
* Building design
* Passive solar
* Ecological design
* Environmental impact design
* Garden design
* Computer-aided
* Healthy community design
* Hotel design
* Interior architecture
* Interior design
* EID
* Keyline design
* Landscape architecture
* Sustainable
* Landscape design
* Spatial design
* Urban design

Industrial
design|

* Automotive design
* Automotive suspension design
* CMF design
* Corrugated box design
* Electric guitar design
* Furniture design
* Sustainable
* Hardware interface design
* Motorcycle design
* Packaging and labeling
* Photographic lens design
* Product design
* Production design
* Sensory design
* Service design

Interaction
design|

* Experience design
* EED
* Game design
* Level design
* Video game design
* Hardware interface design
* Icon design
* Immersive design
* Information design
* Sonic interaction design
* User experience design
* User interface design
* Web design

Other
applied arts|

* Public art design
* Ceramic / glass design
* Fashion design
* Costume design
* Jewelry design
* Floral design
* Game art design
* Property design
* Scenic design
* Sound design
* Stage/set lighting design
* Textile design

Other
design
& engineering|

* Algorithm design
* Behavioural design
* Boiler design
* Database design
* Drug design
* Electrical system design
* Experimental design
* Filter design
* Geometric design
* Job design
* Integrated circuit design
* Circuit design
* Physical design
* Power network design
* Mechanism design
* Nuclear weapon design
* Nucleic acid design
* Organization design
* Process design
* Processor design
* Protein design
* Research design
* Social design
* Software design
* Spacecraft design
* Strategic design
* Systems design

Approaches

* Activity-centered
* Adaptive web
* Affective
* Brainstorming
* By committee
* By contract
* C-K theory
* Closure
* Co-design
* Concept-oriented
* Configuration
* Contextual
* Continuous
* Cradle-to-cradle
* Creative problem-solving
* Creativity techniques
* Critical
* Design fiction
* Defensive
* Design–bid–build
* Design–build
* architect-led
* Domain-driven
* Ecodesign
* Energy neutral
* Engineering design process
* Probabilistic design
* Error-tolerant
* Fault-tolerant
* Framework-oriented
* For assembly
* For behaviour change
* For manufacturability
* For Six Sigma
* For testing
* For X
* Functional
* Generative
* Geodesign
* HCD
* High-level
* Inclusive
* Integrated
* Integrated topside
* Intelligence-based
* Iterative
* KISS principle
* Low-level
* Metadesign
* Mind mapping
* Modular
* New Wave
* Object-oriented
* Open
* Parametric
* Participatory
* Platform-based
* Policy-based
* Process-centered
* Public interest
* Rational
* Regenerative
* Reliability engineering
* Research-based
* Responsibility-driven
* RWD
* Safe-life
* Sustainable
* Systemic
* SOD
* Tableless web
* Theory of constraints
* Top-down and bottom-up
* Transformation
* Transgenerational
* TRIZ
* Universal
* Design for All
* Usage-centered
* Use-centered
* User-centered
* Empathic
* User innovation
* Value-driven
* Value sensitive
* Privacy by

* Design choice
* computing
* controls
* flow
* leadership
* management
* marker
* methods
* pattern
* research
* science
* sprint
* strategy
* theory
* thinking

* Tools
* Intellectual property
* Organizations
* Awards

| Tools|

* AAD
* Architectural model
* Blueprint
* Comprehensive layout
* CAD
* CAID
* Virtual home design software
* CAutoD
* Design quality indicator
* Electronic design automation
* Flowchart
* Mockup
* Product design specification
* Prototype
* Sketch
* Storyboard
* Technical drawing
* Web design program
* Website wireframe

|

Intellectual
property|

* Community design
* Design around
* Design patent
* Fashion design copyright
* Geschmacksmuster
* Industrial design rights
* European Union

Organizations|

* AIGA
* Chartered Society of Designers
* Design and Industries Association
* Design Council
* International Forum Design
* The Design Society
* Design Research Society

Awards|

* European Design Award
* German Design Award
* Good Design Award (Museum of Modern Art)
* Good Design Award (Chicago Athenaeum)
* Good Design Award (Japan)
* Graphex
* IF product design award
* James Dyson Award
* Prince Philip Designers Prize
* Prix Versailles

Related topics

* Aesthetics
* Agile
* Concept art
* Conceptual design
* Creative industries
* Cultural icon
* .design
* Enterprise architecture
* Futures studies
* Indie design
* Innovation Management
* Intelligent design
* Lean Startup
* New product development
* OODA Loop
* Philosophy of design
* Process simulation
* Slow design
* STEAM fields
* Unintelligent design
* Visualization
* Wicked problem

* Design brief
* change
* classic
* competition
* architectural
* student
* director
* education
* elements and principles
* engineer
* firm
* history
* knowledge
* language
* life
* load
* museum
* paradigm
* rationale
* review
* specification
* studio
* technology

* Commons
* Wikibooks
* Wikinews
* Wikiquote
* Wikisource
* Wiktionary

0.00

(0 votes)

Original source: https://en.wikipedia.org/wiki/Adaptive web design. Read more

|

Retrieved from "https://handwiki.org/wiki/index.php?title=Adaptive_web_design&oldid=4345100"
*[v]: View this template
*[t]: Discuss this template
*[e]: Edit this template