What is AWD? 5 Great Adaptive Web Design Examples for Inspiration

Replacing the PC devices, the mobile is becoming the most popular devices to access the Internet. So web designers encountered a problem that how to present the same web page on different sized devices? Don’t worry, the emerging of adaptive web design fixed this problem perfectly. This article will introduce some basic knowledge and great adaptive web design examples.

1. Principle: What is the Adaptive Web Design?

In 2011, a web designer, Aaron Gustafson, gave a definition of Adaptive Web Design (AWD) in his book, Adaptive Web Design: Crafting Rich Experiences With Progressive Enhancement. It is also known as progressive enhancement of a website.
Adaptive design means to create a different page for different types of devices, the current AWD web pages are targeted at these resolutions (320, 480, 760, 960, 1200, 1600).
Unlike responsive web pages (RWD), adaptive design is based on breakpoints using static layouts. RWD Is Not AWD, once the page loaded, it can no longer be automatically adapted, and the auto-detect will automatically detect the size of the screen to load the appropriate layout. Therefore, when you visit the website on your computer browser, the site will automatically detect and select the best layout of the desktop screen.

2. How to make adaptive web design?

The basic web design covers several important aspects:
Prototype design with fast prototyping tool like Axure, Mockplus,
UI/UX design
Front-End development: HTML, CSS, JS.
Back-End development: Java, PHP, Ruby, etc.
While the great adaptive web design needs to follow the following steps:

Step 1: Meta tags

In order to adapt to the screen, many mobile browsers will put the HTML page in a larger viewport width (usually greater than the screen width), you can set the viewport meta tag. The following viewport meta tag tells the browser that the viewport width is equal to the device screen width and does not initialize:
<Meta name = "viewport" content = "width = device-width, initial-scale = 1.0">

Step 2. HTML Structure

In this example, the page layout includes Header, Content, Sidebar, and Footer. Fixed height is 180px, the content width is 600px, and the sidebar width is 300px.
HTML structure

Step 3. Media Queries

CSS3 media query is the key to adaptive web design, just like the conditional statement in a high-level language, telling the browser to render the page according to the different viewport width.

3. Adaptive Web Design Examples

Some people said the responsive design is failing mobile UX. While currently, lots of websites have configured themselves to be mobile-optimized websites as they adopted adaptive web design on PC and mobile devices. For example, Amazon, USA Today, Apple, and About.com. But the layout of the adaptive design of the mobile devices may be different from the desktop version. So, when doing adaptive web design, web designers have much more work to do to meet the at least six different layout requirements.
Here are 5 excellent examples of adaptive web design for reference.

1. Amazon

Similar to other sites using adaptive web design (such as CNN), Amazon encourages users to download their branded applications. It is reported that, adopted the adaptive design, Amazon access speed on the mobile devices than the previous reactive web design increased by 40%. In addition, Amazon's adaptive website provides mobile users with the opportunity to use "Amazon.com full site" on mobile devices, while the responsive design will not be available.
Amazon

2. Apple

Apple's design has always been known for simplicity, whether it's its website, store, or product design is all reflected its clean theme. Not using responsive web design, which makes Apple suffer criticism for a long time. After all, a series of smart products is one of the reasons for the existence of responsive design. However, today, Apple uses an adaptive web design, which also means that Apple.com will make changes with the device type and function.
apple


3. Avenue 32

Online luxury shopping site Avenue 32 is a model with adaptive web design. This brand features a designer working with Usablenet to create a seamless, intuitive, and highly visually appealing mobile and tablet experience. According to Usablenet, the desktop version of the site is full of content-rich web pages, including product images, designer details, curator appearance, etc., The brand must create a visual and functional experience with this desktop multi-channel network product.
"The use of adaptive web design enables Avenue 32 to highlight the discovery and business functions, which enabling customers to browse and shop anywhere," said Carin van Cuuren, the chief marketing officer at Usablenet. "And the order on smartphone and tablets have grown 40%, mobile traffic doubled, and the average mobile transaction increased by 27%. "
avenue 32

4. USA Today

The adaptive web design allows USA Today to choose an adaptive method, because the technology allows the brand to detect specific equipment by considering the operating system and screen size, in order to provide tailored experience. Therefore, providing a rich experience on news type is more popular than the responsive design.
usa today

5. About.com

All kinds of news sites, like CNN, USA Today, have adopted adaptive web design because it can quickly load web pages and meet readers of all the different devices to visit the site.
about
The above 5 great adaptive web design examples interpreted why the adaptive web design become popular, from the different perspective, whether the web access speed, brand impact, and user experience.

Comments

Post a Comment

Popular posts from this blog

9 Best Wireframe Tools for Mac UI/UX Designers Have to Know

Image
Production: Every morning, you can see people are rushing to their offices by different communications. Some people take a taxi for time-saving, some others take buses for cost-saving, and also some people chose to walk to office for exercising. This scene reminds me of the designers choose wireframe tools for Mac. In fact, this is the same reason for the designer to choose wireframe tools. Before making achoose, designers always consider the cost, effectiveness, and speed. What is wireframe? It is an indispensable part of job for  UI/UX designers . Thus, you should have a careful comparison of these wireframe tools. I learned that most of the designers prefer to design on mac. Here we've selected 9 of the best wireframe tools for Mac to get you started. Enjoy! 1.  Axure When we talk about prototyping tools, we should mention Axure in the first place. Everyone knows that it’s a powerful tool with a variety of functions. Such as wireframe, flow chart, and interacti...
Read more

Top 20 UX Design Blogs and Resource Websites of 2017

Image
The world of user experience and user interface has never stopped evolving and taken front stage where everyone seems to know about the buzzwords. It’s of utmost importance to stay up-to-date on the latest ideas and conversations happening in the industry, but the abundance of resources somehow makes it hard to find the truly helpful materials. That’s where blogs come in handy. The following list collects some of the best UX design blogs of 2017, providing a quick and easy way to remain current. Some of the picks are specially authored by only one blogger, while others pool the knowledge of industry experts and leaders. With no further ado and in no particular order, let’s get inspired in below. 1. UX Design These resource websites discuss the topic of UX design for both services and products, ranging from industry trends in UX field to reviews on tools and software for new practitioner and seasoned veteran. Awwwards ,  a site that awards the best of the best in mobile a...
Read more

20 of the Best Website Homepage Design Examples

Image
You never get a second chance to make a first impression - that's why the first screen of your homepage undoubtedly plays an important role in your website.  Flat design  is one of the most popular design trends today. In many ways, it is design stripped down to the basics and focused purely on the raw functionality. It gets rid of unnecessary graphical and animated elements, which requires you being good at the interplay of icons, typography, and color. Below, we have put together a list of 20 amazing website homepage design examples for designing an impressive homepage that will hopefully inspire your next project. Bigdropinc The typography on this website is very practical and frequently-used. It is simple, yet powerful. The bold typography is the best suited homepage style for simple and clean layout. Oribe LE28 LILLE Truedigital Text centered and filled the screen. Aaa The font design is elegant. What's particularly great about Aaa is that it will...
Read more