Adaptive web design

This section needs additional citations for verification. Please help improve this article by adding citations to reliable sources in this section. Unsourced material may be challenged and removed. Find sources: "Adaptive web design" – news · newspapers · books · scholar · JSTOR (February 2024) (Learn how and when to remove this message)

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]

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.

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]