There is more to responsive design than we think
A couple weeks ago, I attended STLUX 2014, a User Experience conference that was held in the heart of Saint Louis. Like most conferences, there were lots of good talks. But in this instance, there was one specific presentation that really stood out to me and got me thinking about how we currently think about responsive web design and what we really ought to be thinking about.
Whenever we hear or talk about responsive web design, the first thing that comes to our minds as designers, developers or others involved in the site creation process is providing an optimal viewing experience in the myriad of devices that can be used to consume our website's content. We struggle with how best to tackle the issue of responsive images, finnagle with fluid grids, and wrangle with media queries to make everything look spiffy. But is there more to "responsive" design than this?
Enter Responsive Design for All. This was the title of the talk given by Aaron Gwin, Carl Armbruster, Kate Chadha and Justin Hickman, and their overarching message was that we need to think beyond screen sizes when we are talking about responsive design and focus on making our designs universal and accessible to all users. The reason for this? Not all users are created equal. Some people read faster than others, some see better than others, and some have physical limitations that affect their ability to interact with things around them.
Universal design ... the concept of designing all products and the built environment to be aesthetic and usable to the greatest extent possible by everyone, regardless of their age, ability, or status in life.
This is not to say efforts aren't being made in this regard. For example, the W3C has put together recommendations such as WAI-ARIA and WCAG that are excellent guides on how best to build your sites. We also have the Congress-mandated Section 508 that requires federal agencies make their electronic information technology accessible to people with disabilities. These guidelines and laws have translated into features and workflow changes that we see in web design/development today: alt tags and captions for images, em units for font sizing, captioning and audio transcripts for videos, semantic markup for screen readers and audio browsers. But after listening to Aaron & Co., I see that there is still a lot we can do to make our sites truly responsive to all our users. Here are my takeaways.
Understand the user
“You must really understand the needs of your customers to design great products for them.” - Jason Mayes
If there is a core tenet that User Experience professionals adhere to, it is understanding the needs of the users. This is not something that should apply to just UX professionals. It applies to all of us site creators: designers, developers, project managers etc. To really understand how people interact with the products we build, we have to put ourselves in their shoes. Yes, we can use Google Analytics and other analytics platforms to find out things about our users, like what browsers they use and what devices they are viewing our sites on, but we don't get any data about what limitations they have, or whether they are using assistive devices/tools with our products. So immerse yourself in your users' lives, see how they live and what they have to go through to build empathy (think along the lines of 30 Days, not Wife Swap). Ford's Empathy Belly provides an excellent example of working to understand the needs of your users as your work on designing your products.
Test in real environments
“Test early on real devices to see the true ramifications of every interface element you introduce into your designs.” - Brad Frost
The quote above is from Brad Frost's article on embedding performance and performance thinking into our designs, and while it was meant to address the issue of website performance, it is something that we can also use as a lesson in other aspects of design. For instance, testing of our designs really should be done on devices/environments that we might not normally think about. When was the last time you ran your designs through a color blindness test to see how users with this limitation would perceive your site? Have you ever tested your site with a screen reader during your QA process? And there is more we need to be aware of besides poor vision and color blindness, as outlined in this Michigan State University document.
In the United States, about 7 percent of the male population—or about 10.5 million men—and 0.4 percent of the female population either cannot distinguish red from green, or see red and green differently from how others do (Howard Hughes Medical Institute, 2006).
If we truly care about the user's experience then these are things we definitely need to add to our workflows to achieve better designs. Chris Campbell wrote a great article back in 2008 that is a superb starting point for designing with color blindness in mind, and tools like Apple's VoiceOver utility and NVDA are great for understanding how screen readers view our sites.
Let your site respond to users
While responsive web design focuses on making our designs respond to the environments (read devices) they are in, we should also be allowing our sites to respond and provide feedback to users. Back in 2004, and I know I'm really digging through the trenches here, Andy Clarke and James Edwards penned an article on A List Apart titled Invasion of the Body Switchers. I remember reading through the article and being amazed at how these chaps were using stylesheet switching to "give users even more choices or accessibility options." While the article is mostly technical in nature, the example they put together is something we can learn from. In it, visitors to the page can change the contrast of the site by selecting the desired contrast level from a dropdown. What this does is toggle the stylesheet used by the site to switch out color schemes and even layouts as chosen. Some variations of this are already in use today. When browsing the web, have you come across sites that display three A's in progressively larger size right next to each other and clicking on one of them changes the size of the text on the page? That is essentially the same concept. Other possibilities abound with this, including using tactile feedback like sounds or vibrations to give feedback to the user. An unvetted example would be using sounds to signify successful or errant form submissions.
A call to arms
There’s no denying how far we have come with responsive web design, and how important that has become for delivering exceptional experiences for our users. But we need to stop limiting ourselves with our “traditional” view of responsive web design. We need to go beyond just trying to maintain the integrity of our designs on different devices, and maybe start thinking of our users as the devices, and design to fit them all. If we can make a concerted effort and rally to push for things like web standards then surely we can make a concerted effort to reach users like Chris Campbell that we are otherwise leaving out in the cold. Let’s think a little deeper about what we do and make the web truly responsive for all.
