Categories
Websites

Adaptive Web Design

What is Adaptive Web Design?

Adaptive web design refers to the creation of different pages for different types of devices. In order to accomplish this, web designers create multiple graphical user interfaces (GUI) capable of contextual adjustment based on screen size. When a visitor arrives to the website, the most appropriate size is selected and displayed, offering the best user experience (UX). Adaptive web design is different from responsive web design, as responsive web pages adapt to different screen resolutions by changing the size of the page while adaptive web pages use fixed design layouts. Adaptive web design layouts are targeted at the following resolutions: 320, 480, 760, 960, 1200, and 1600.

Advantages of adaptive web design include:

  • Compatibility with complicated sites
  • Can be implemented at a lower price
  • Time-efficient coding
  • Easier testing and more accurate operation
  • Targeted for each user
  • Faster loading
  • Reuse existing websites written with older technology
  • Improved advertising spaces

Examples of adaptive web designs include:

Amazon. Amazon adopted adaptive web design to speed up loading times, to deliver a consistent UX, and to make it easier for users to switch between their application view and the full-site view, no matter which devices they are using.

CNN & USA Today. These news websites have adopted adaptive designs in order to detect users’ specific equipment and to use the information about their operating systems and screen sizes to provide tailor-made experiences.

The Home Depot. This retail site uses adaptive design to streamline the online shopping experience through the use of templates that match specific device categories.

Adaptive web design may be right for your organization if the following apply to you:

  • Your organization’s website requires device-specific design and experiences that are interactive and secure.
  • Analytics reveal that your users accessing your website through a variety of devices, which could indicate that your users may have better UXs with tailor-made layouts developed through adaptive web design.
  • You are capable of designing different experiences for different devices.
  • You have the resources to maintain the templates.

Web designers make basic adaptive web designs which cover the following aspects: prototype design with fast prototyper; UI/UX design; front-end development: HTML, CSS, JS; back-end development: Java, PHP, Ruby.1 The adaptive web design then follows these steps:

  1. Meta tags. Many mobile browsers will put the HTML page in a larger viewport width by using a viewport meta tag that tells the browser that the viewport width is equal to the device screen width and does not initialize.
  2. HTML structure. A page layout may include header, content, sidebar, footer.
  3. Media queries. CSS3 media query tells the browser to render the page according to the different viewport width.

1 Dai, 2017, “What is AWD? 5 Great Adaptive Web Design Examples for Inspiration”