Adaptive web design

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

"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 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 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 being largely 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 employ 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 (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 viewpoint rather than the responsive web design (RWD) one-size-fits-all approach to layout.[3] The term was first coined by Aaron Gustafson in his book Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement in May 2011.[2]

## 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 "mobile first" JavaScript, and progressive enhancement of responsive web design.[3] "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.[4][5]

## 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 in 2018 when smartphone search volumes have overtaken desktop search volumes in 10 countries, even with tablet searches counted in the desktop category.[6] 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) and AWD (adaptive web design), that new technologies (such as CSS3 Media Queries, AJAX, HTML5, near universal 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”.[7][8] 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.[7]

In the very early days of smartphones, like the BlackBerrys 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.[3] The next major change to adaptive standard web design came in more recent years, particularly with the rise of the iPhone and two years later widespread 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.[3] 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 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 Django's "views."[3][8][9][2]

#### 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 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.[3] The hybrid Adaptive/Responsive design model involves multiple pages formatted in responsive web design layout, when the nearest appropriate layout is served, then the page responds to the user's device.[7]

Standard Adaptive layout (screen-dependent multi-page) can also use 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.[7] 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.[3][8][9][2]

## See also

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

## 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 2.3 Gustafson, Aaron. Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement. Easy Readers, LLC; 1st edition, 2011.
3. ↑ 3.0 3.1 3.2 3.3 3.4 3.5 3.6 "Understanding and Comparing Responsive, Adaptive and Fluid Design | ICO Web Solutions" (in en-US). ICO Web Solutions. 16 January 2014. http://icowebsolutions.com/understanding-and-comparing-responsive-adaptive-and-fluid-design/.
4. ↑ "Graceful degradation versus progressive enhancement". February 3, 2009. http://docs.webplatform.org/wiki/tutorials/graceful_degradation_versus_progressive_enhancement.
5. ↑ 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.
6. ↑ Sterling, Greg (5 May 2015). "It's Official: Google Says More Searches Now On Mobile Than On Desktop". http://searchengineland.com/its-official-google-says-more-searches-now-on-mobile-than-on-desktop-220369.
7. ↑ 7.0 7.1 7.2 7.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/.
8. ↑ 8.0 8.1 8.2 VenturePact, VenturePact. "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/.
9. ↑ 9.0 9.1 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)

|

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