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 theGlobe'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 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:
- Think of content as a service
- Create highly reusable content
- Structure content diligently
- Separate content and form
- Invest in good metadata
- 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:
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:
- 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.
- 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.
Let's examine how adjustive Web design may work on wearables:
- 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.
- 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.
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.