On Creating Inclusive Interfaces

On Creating Inclusive Interfaces image

What is inclusive design? It’s an approach that embraces the widest possible range of users to make sure that even complex interfaces are possible to understand by anyone.

In this case, putting users first means being as device-agnostic as possible. Accessibility advocates promoted a way to develop websites that made content available through any web-enabled tool: classic PCs, feature phones, screen readers and even when you hit that print button in your browser.

We used CSS2 media types to optimise for print and lots of other good practices to support people using various assistive technologies.

It was good, but not ideal. We helped those users but still had a division between mobile and desktop web.

There is no Mobile Web. There is only The Web, which we view in different ways. There is also no Desktop Web. Or Tablet Web. Thank you.

— Stephen Hay (@stephenhay) January 7, 2011

During the last decade we followed recommendations like Mobile-BP which didn’t take into account that keeping this division doesn’t go along with One Web design principle.

The problem with Responsive Web Design

In 2010, Ethan Marcotte wrote his ground-breaking article and the trend skyrocketed. Developers and designers starting building responsive websites that adapt to most of the popular viewports.

However, something was lost during that shift. In his talk, Guy Podjarny presented outcomes from a performance test of popular responsive websites. It turned out that most of them served the same assets size everywhere and were built mobile last. They often only worked on latest generation or most popular devices.

That’s a common antipattern — focusing on devices that are popular right now will lead to many problems when the market will change. There are a couple of ways of how to deal with this problem and be more fault tolerant:

Think beyond common breakpoints

Common viewport sizes for Android

The border between certain devices, such as smartphones and small tablets, is becoming hard to define. The list of popular viewports constantly changes. It’s better to build your breakpoint strategy basing on your content and not focusing on any device type in particular.

Develop with progressive enhancement

Keep content as the main thing in the web design process (content first). Build starting from the most basic functionalities, then feature detect to provide better UX through a more sophisticated interface.

Maintain your site post-launch

Dedicate time in your project to think about accessibility not only during the design and development phases, but also after the site has shipped. It’s easy to overlook changes that cause serious problems to challenged users which appear no earlier than during the last steps.

Building your site trying to be as device agnostic as possible will make your users happier and your website more future friendly.

KEEP MOVING FORWARD

Wojtek Zając / code