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 version that other web design techniques use. Adaptive web design encompasses a range of other strategies that can be combined with responsive web design.
Video Adaptive web design
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 site 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.
Maps Adaptive web design
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", unobtrusive JavaScript, and progressive enhancement of RWD.
"Mobile separate", unobtrusive JavaScript, and progressive enhancement
"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 RWD.
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 unobtrusive JavaScript and progressive enhancement for smart phones, rather than rely on graceful degradation to make a complex, image-heavy site work.
Technology advances
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 now that 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 AWD as a valuable concept. These recent changes are making AWD a commonly used practice on the web, with an estimated 70,000 new sites created every day.
Fluid-motion drag-and-drop editors
Fluid-motion editors are not HTML 5 native drag-and-drop editors and cannot be used in fluid-design pages. They allow for fluid movement and objects to be placed anywhere on a web page and are based on absolute positioning of objects in accordance to the XYZ coordinates Cartesian coordinate system. Currently, there are two editors that use this type of system and layout, WIX and Flux Live.
Editor and layout benefits
This type of editor and layout has many benefits and is the standard layout of most high-end graphic design programs.
- Fluid motion - Allowing for faster design layout
- 3D layout - Layout based on the XYZ coordinates Cartesian coordinate system.
- Multi-page layout - This type of editor can have layouts for popular sizes of mobile devices.
- Mobile separate - Separate custom layouts for mobile devices
- Print - Absolute-positioned editors are perfect for online print.
- Flux - Fluctuates the size from a mid-sized layout, allowing for better scaling of the page.
- Maintain design layout - Unless the page is in fluid layout, resizing does not affect design.
- Zoom - The page is sometimes better served in a zoomed or scaled layout.
Layouts
There are four modern types of layouts used in the adaptive model: standard, responsive, scaled, and flux and zoom.
Standard
AWD works to detect the screen size and load the appropriate layouts. With adaptive standard layout, "generally you would design an adaptive site for six common screen widths: 320, 480, 760, 960, 1200, and 1600". This type of layout can also use viewport responsive scaling of the page. In recent years, many adaptive design layouts have become popular with as little as two designs, a mobile layout and desktop layout. The two-page layout allows for a custom-built mobile page and a desktop version to enhance the user experience. It has the advantage of multiple layouts for a single page, allowing for customization of the design as far as the designer wishes to take it.
Responsive
Adaptive responsive layout uses fewer page layouts than standard adaptive. This approach is considered less future-proof than responsive design because the screen sizes of common devices are constantly changing. Responsive Design is built on a fluid grid vs. adaptive design's fixed grid. Pages are formatted in responsive web design layout, when the nearest appropriate layout is served, then the page responds to the user's device.
Scaled
Scaled uses a fluid design layout and scales the width of the viewport. This type of layout can use absolute pixels or points.
Flux & zoom
Flux & zoom maintains perspective of a web page's design by scaling height and width when using absolute position of objects. Then, it targets the break points of popular device screen widths by adjusting the scale of the top block-level object.
Flux & zoom is the mirror of the fluid grid responsive web design layout that calls for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points.
Model
Flux & zoom requires the absolute units of pixels or points and cannot use relative units of percentages. Typically, two-page layouts are used: a desktop version and a mobile version. Fluctuating zoom design uses CSS3 media queries, breakpoints to scale both height and width of the page to fit the user's device, this allows the closest page layout to be zoomed in or out, allowing for scaling of a page outside the linear grid, fluid model, the page remains 3D in the XYZ coordinates Cartesian coordinate system. Zoom can be used with responsive layouts, allowing a section that is zoomed to maintain its design layout when sized.
Layers (digital image editing)-based photo editors use this type of model for layout and design, with XYZ Cartesian coordinate system coordinates for positioning and zoom for displaying the design in perspective.
Layout
Flux & Zoom uses two or more mid-sized layouts and fluctuates -+150 pixels larger or smaller in size. Web design software already exists that provides adaptive page serving and adaptive visual editors to assist in layout and design. It generally takes less time building two designs in adaptive flux than a responsive page, because you are not bound to the rules of the grid Responsive web design.
Benefits
Adaptive flux and adaptive zoom solves most issues found in other web design layouts while remaining responsive and is the only web design layout that can support Layers (digital image editing)-based design across all platforms.
Popularity
With newly released adaptive HTML editors and page builders emerging on the market, adaptive design is becoming a popular alternative to responsive. The difficulty of creating multiple page layouts and serving proper pages is handled by the software.
See also
- User interfaces
References
Source of article : Wikipedia
0 Comments