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 Static may refer to: Places *Static Nunatak, a nunatak in Antarctica United States * Static, Kentucky and Tennessee *Static Peak, a mountain in Wyoming **Static Peak Divide, a mountain pass near the peak Science and technology Physics *Static el ...

page which loads (and looks) the same on all devices or a single page which reorders and resizes

content Content or contents may refer to: Media * Content (media), information or experience provided to audience or end-users by publishers or media producers ** Content industry, an umbrella term that encompasses companies owning and providing mas ...

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 Site most often refers to: * Archaeological site * Campsite, a place used for overnight stay in an outdoor area * Construction site * Location, a point or an area on the Earth's surface or elsewhere * Website, a set of related web pages, typical ...

), either of which is retrieved based on the

user-agent In computing, a user agent is any software, acting on behalf of a user, which "retrieves, renders and facilitates end-user interaction with Web content". A user agent is therefore a special kind of software agent. Some prominent examples of us ...

defined in the

HTTP GET The Hypertext Transfer Protocol (HTTP) is an application layer protocol in the Internet protocol suite model for distributed, collaborative, hypermedia information systems. HTTP is the foundation of data communication for the World Wide Web, w ...

request, which is known as '' dynamic serving''. Adaptive web design was one of the first strategies for

optimizing Mathematical optimization (alternatively spelled ''optimisation'') or mathematical programming is the selection of a best element, with regard to some criterion, from some set of available alternatives. It is generally divided into two subfi ...

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 Server-side scripting is a technique used in web development which involves employing scripts on a web server which produces a response customized for each user's (client's) request to the website. The alternative is for the web server itself ...

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 In logic and probability theory, two events (or propositions) are mutually exclusive or disjoint if they cannot both occur at the same time. A clear example is the set of outcomes of a single coin toss, which can result in either heads or tails ...

, and

best practices A best practice is a method or technique that has been generally accepted as superior to other known alternatives because it often produces results that are superior to those achieved by other means or because it has become a standard way of doing ...

for the most universally readable designed content employ a combination of the two techniques to support a complete spectrum of hardware and

software Software is a set of computer programs and associated software documentation, documentation and data (computing), data. This is in contrast to Computer hardware, hardware, from which the system is built and which actually performs the work. ...

.Gustafson, Aaron. ''Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement''. Easy Readers, LLC; 1st edition, 2011. 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 viewpoint rather than the responsive web design (RWD) one-size-fits-all approach to layout. The term was first coined by Aaron Gustafson in his book ''Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement'' in May 2011.

Terminology of techniques

Adaptive web design uses multiple page layouts for a single web page and sometimes

progressive enhancement Progressive enhancement is a strategy in web design that puts emphasis on web content first, allowing everyone to access the basic content and functionality of a web page, whilst users with additional browser features or faster Internet access ...

(PE). The adaptive model is a "mobile separate" layout, in contrast to "mobile first"

JavaScript JavaScript (), often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98% of websites use JavaScript on the client side for webpage behavior, of ...

, and

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 Browse, browser or browsing may refer to: Programs * Web browser, a program used to access the World Wide Web *Code browser, a program for navigating source code * File browser or file manager, a program used to manage files and related objects * ...

of basic mobile phones do not understand JavaScript or media queries, so a recommended practice is to create a basic mobile layout and use

for smart phones, rather than rely on

graceful degradation Fault tolerance is the property that enables a system to continue operating properly in the event of the failure of one or more faults within some of its components. If its operating quality decreases at all, the decrease is proportional to the ...

to make a complex, image-heavy site work.

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. 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

request, prior to the page being served and load the appropriately designed page specific to the

. With adaptive standard layout, "generally you would design an adaptive site for six common screen widths: 320, 480, 760, 960, 1200, and 1600”. 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. In the very early days of smartphones, like the

BlackBerry The blackberry is an edible fruit produced by many species in the genus ''Rubus'' in the family Rosaceae, hybrids among these species within the subgenus ''Rubus'', and hybrids between the subgenera ''Rubus'' and ''Idaeobatus''. The taxonomy ...

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. 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. 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 In telecommunications, long-term evolution (LTE) is a standard for wireless broadband communication for mobile devices and data terminals, based on the GSM/EDGE and UMTS/HSPA standards. It improves on those standards' capacity and speed by us ...

'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 Standar
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 Material Design (codenamed Quantum Paper) is a design language developed by Google in 2014. Expanding on the "cards" that debuted in Google Now, Material Design uses more grid-based layouts, responsive animations and transitions, padding, and d ...

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."

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. 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. Standard Adaptive layout (screen-dependent multi-page) can also use

viewport A viewport is a polygon viewing region in computer graphics. In computer graphics theory, there are two region-like notions of relevance when rendering some objects to an image. In textbook terminology, the '' world coordinate window'' is the area ...

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. As previously stated, things like Django's "views" concept and some aspects of

AJAX Ajax may refer to: Greek mythology and tragedy * Ajax the Great, a Greek mythological hero, son of King Telamon and Periboea * Ajax the Lesser, a Greek mythological hero, son of Oileus, the king of Locris * ''Ajax'' (play), by the ancient Gree ...

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.

References