Responsive Design is a Hack

Responsive design has become a quick-and-dirty way to say “Hey! We looked at this on not-just-a-PC!” Our users deserve so much better — something that intentionally works with the ever-increasing array of input methods. Keyboards, cursors, touch, voice, & motion; the digital world has never been simultaneously as accessible and as overtly complicated as it is today.

Netflix does a pretty good job at wrangling the chaos, designing experiences around the input method, reducing touches and navigational elements on more simple devices and taking advantage of all available screen real-estate to maximize an interfaces usefulness.

Maybe we’ll call it “Input Aware” or “Device Aware” design — I guess I don’t really care about the name as much as distinguishing the approach from the myriad of responsive hacks and shims floating aimlessly around our collective github toolboxes.

I was recently reminded of the spectrum of media-types available to the CSS2.1 media spec, which largely got me thinking about how bad we are at utilizing them:

• all — Suitable for all devices.
• braille — Intended for braille tactile feedback devices.
• embossed — Intended for paged braille printers.
• handheld — Intended for handheld devices (typically small screen, limited bandwidth).
• print — Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on paged media for information about formatting issues that are specific to paged media.
• projection — Intended for projected presentations, for example projectors. Please consult the section on paged media for information about formatting issues that are specific to paged media.
• screen — Intended primarily for color computer screens.
• speech — Intended for speech synthesizers. Note: CSS2 had a similar media type called ‘aural’ for this purpose. See the appendix on aural style sheets for details.
• tty — Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities). Authors should not use pixel units with the “tty” media type.
• tv — Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).

CSS2.1 even comes with a handy media-groups spec to pair media-types to devices based on their anticipated attributes:

Typical responsive design approaches target the screen type (and maybe print) which is accidentally celebrating doing-responsive-design-wrong. To correctly respond to different devices, we need to target more than max-width and min-width in the screen media-type, and let browsers and rendering engines on our televisions and refrigerators do their jobs.

Unfortunately for me, the software libraries I live most of my life in right now (WordPress, BuddyPress, and bbPress) are all pretty bad at this. The WordPress iOS app is a crippled version of WordPress’s relatively fantastic interface; WordPress itself barely functions on small screens and touch devices; BuddyPress & bbPress do the bare minimum to inherit surrounding styling, but don’t own the experience or set a great example in this regard as much as they might in others.

The greater tech community needs to target more input devices, intentionally design better experiences, and stop patting ourselves on our backs for doing the bare minimum of design.

Sure… it’s an iterative process, and yes… we’re all working hard and putting in the long hours together to improve the digital world around us, but it’s a great time to lift up our heads, unsquint our eyes, and design for the world around us instead of for ourselves.