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 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

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:

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.

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.

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.

(via)

Your Customers Are Mobile, But Are You?

By now most of you have probably heard the buzz about Responsive web design. If not, it’s basically a method of coding a website so that it automatically scales to display in the right dimensions on a full size browser, tablet, or smartphone. The site actually reconfigures itself to the appropriate screen size. Pretty cool, eh?

Two or three years ago, Responsive was a nice to have feature and it was generally offered as an extra add on when you built a site. In today’s market, Responsive is a must and here is why:

1)      As of the first part of 2014, 60% of Internet Access is Mobile. For our own clients, we’ve seen a steady rise in mobile viewership over the past two years, and it’s approaching 50% for a few clients.

2)      Email opens in mobile devices surpassed computer opens in 2013 – this means if you are emailing potential customers links to view on your website, there is a greater chance they are doing this from their mobile device.

3)      70% of mobile searches lead to action on websites within 1 hour. Wow!

4)      60% of social is now spent on smartphones or tablets – If your social posts are leading to actions on your site, these visitors are expecting a seamless viewing experience.

The bottom line is that more people are looking at your business from their phones and tablets than ever before, and mobile viewership continues to grow. If you want to be competitive in your market, then you need a site that can display well no matter what device it is being viewed in.

Responsive helps you market to your customers in the following ways:

1)      Content Marketing – When people are browsing from their device and see a post from your blog or link to your website and click on it, the Responsive site will “right-size” for their screen.

2)      Email Marketing – When you email your subscribers using a Responsive email template, they will be able to read it regardless of the device they are on. If they click on a link from that email to your Responsive site, they will have no issues loading and browsing your website.

3)      Search Marketing – When people are browsing the search engines from their phones and click your site in the results, it will load properly in their device.

4)      Social Media Marketing – If people are on your Facebook page and click a link to your site from their mobile device, they will see the site properly.

If your site is a few years old, it might be time to think about a redesign that includes Responsive coding. Even if you recently launched a site and it’s not Responsive, in most cases the design can be updated affordably with Responsive coding to make it more mobile friendly.

via