Digital MarketingDisplay AdvertisingBeyond Responsive and Adaptive: Introducing “Adjustive” Web Design

Beyond Responsive and Adaptive: Introducing "Adjustive" Web Design

As technology continues to advance, we need to keep up by optimizing the way we display content. A new concept to help you do just that is "adjustive" Web design.

The speed at which technology evolves means every mobile device has a different form factor – some are getting smaller, while others are following the “bigger is better” trend. There’s no question that size affects the way we consume content on mobile devices. So considering that no user experience (UX) is the same, I predict the next phase of interface design will give control back to users in the form of adjustive Web design.

Before I outline my ideas for adjustive Web design, it’s essential to explore two foundational concepts of user experience – responsive Web design and adaptive content.

Responsive Web Design (RWD)

Ethan Marcotte coined the term “responsive Web design” in his book of the same title. In recent years, it has become an industry buzzword.

Core elements of RWD include:

  • Abandoning fixed grids and embracing flexible-grid layout
  • Displaying media as scalable assets
  • Using standard CSS3 media queries to respond to any screen size

Many global companies have redeveloped their Web presence with RWD in response to increasing mobile traffic. The Boston Globe was among the first major media websites to adopt this approach, enabling the Globe‘s content to be automatically refitted to any screen size available. In 2013, Rotary International launched their responsive websites in eight languages. This year, Virgin America and American Express adopted the same approach.

A critical early factor that fueled the movement toward RWD was separating content and presentation in Web applications. In the early days, the Web design industry used terminology borrowed from graphic design and publishing. The trend to separate content and the rules by which it got displayed was a critical first step towards expanding beyond traditional graphic design approaches.

Adaptive Content

Adaptive content is another essential element of UX, introduced by Karen McGrane in her book Content Strategy for Mobile. McGrane defines adaptive content as “getting your content into a format so you can share and distribute it to any platform you want.” She explains that “you can get your content onto platforms you control – and platforms you don’t.”

Her book outlines the following critical steps for adaptive content:

  1. Think of content as a service
  2. Create highly reusable content
  3. Structure content diligently
  4. Separate content and form
  5. Invest in good metadata
  6. Select a usable content management system

When we consider the accelerated launch of new devices, two trends emerge – bigger is better for smartphones and tablets, and smaller is simpler for wearables. Adaptive content performs well on these devices, but will an RWD approach be sufficient for this next era of UX?

Let’s examine this simplified diagram to see how a typical RWD approach gets implemented:

responsive-design-1

Adjustive Web Design

In response to the continually changing device landscape, I propose a new concept – adjustive Web design.

Core elements of adjustive Web design include:

  • Adaptive content is the foundation of everything
  • The display of content will responsively adjust to screen sizes
  • User interface elements can be adjusted by the user to a desired position

Here is how adjustive Web design will build upon and enhance its responsive predecessor:

  1. Problem: As smartphones and tablets use increasingly larger displays, it can be cumbersome for hands. Responsive adjusted user interface controls – such as a site header with a “hamburger-style” menu – won’t overcome this challenge, as their general positioning remains fixed.
  2. Solution: Go beyond responsively adjusting user interface elements for varying screen sizes and enable users to place critical user-interface elements in a place they can easily reach. For years, Apple has allowed users running its desktop OS to select three positions for their Dock – left, bottom, and right.

adjustive-design

Let’s examine how adjustive Web design may work on wearables:

  1. Problem: The stylish, sleek jewelry-like design of wearables has resulted in smaller screen sizes or absent displays. A responsively adjusted element, such as a site header with a “hamburger-style” menu, won’t address a lack of screen real estate.
  2. Solution: Hide user-interface components when they are not needed and maximize screen real estate for adaptive content. The device OS or hardware should allow a user to reveal the user interface through a simple gesture when needed. In the case of an absent display, alternative navigation can be enabled through navigation sounds.

adjustive-design-wearable

Conclusion

Continual incremental improvements are essential in the UX industry. In a crowded marketplace, online content is a critical factor in building brand awareness. Simple, intuitive, adjustive Web design is essential to navigate a wider array of screens and devices. As technology advances, we should keep pace by optimizing the approaches and frameworks we use to display content. This will usher in an era for users to enjoy “their UX, their way.”

Please share your thoughts or examples below on other areas where you expect to see UX advances.

Related Articles

Chase CMO Kristin Lemkau and the evolution of the ad unit

Display Advertising Chase CMO Kristin Lemkau and the evolution of the ad unit

7m Mike O'Brien
Ad blocker use continues to grow rapidly

Ad Industry Metrics Ad blocker use continues to grow rapidly

2y Al Roberts
Mobile ad viewability: what is it and does it matter?

Display Advertising Mobile ad viewability: what is it and does it matter?

2y Andy Favell
Mobile advertising accounts for nearly half of digital spend, but it comes at a price: ad fraud

Display Advertising Mobile advertising accounts for nearly half of digital spend, but it comes at a price: ad fraud

2y Andy Favell
Stats of the Week: Mobile ad revenue, mobile ad blocking

Display Advertising Stats of the Week: Mobile ad revenue, mobile ad blocking

2y Mike O'Brien
Stats of the week: consumers say no to online advertising

Ad Industry Metrics Stats of the week: consumers say no to online advertising

2y Sophie Loras
Our guide to the best and worst mobile ad formats

Display Advertising Our guide to the best and worst mobile ad formats

3y Mike O'Brien
Google blocked 780m 'bad ads' in 2015. Woah

Display Advertising Google blocked 780m 'bad ads' in 2015. Woah

3y Mike O'Brien