Responsive Web Design Trends

As gleaned from the Artifact Conference

In November 2013 I attended the Artifact Conference in Providence, RI for two days. The conference was adeptly organized by Jennifer Robbins (@jenville) and Christopher Schmitt (@teleject) and billed as a conference for “DESIGNERS who are adapting to the challenge of designing for a MULTI-DEVICE world”.

Like all great conferences, I came away energized and inspired with all of the great discussions and ideas that were bouncing around, but also with a small sense of relief as I watched a number of speakers confirm thoughts, trends and processes that I have been observing recently. My job requires me to stay closely on top of industry trends, and responsive web design is certainly a topic which I have more than a passing interest in!

So, there were a lot of themes that could be extrapolated from the talks given over the two days, but two stuck out as being particularly notable and I’d like to share them here.

The evolving landscape of the web

We are living in a really interesting time for web design and development, the fundamentals of HTML, CSS and Javascript as well as the technologies and services that surround and support them (browsers, GitHub and TypeKit to name just a few) are changing and growing on a daily basis.

In many ways this is nothing new, but it is the rapid ascent of designing for “mobile” that is altering the design landscape for good. This reality can best be confirmed by the multiple design professionals who over and over again said on stage a variation on this theme: “None of us *really* know what we’re doing!”.

Amid the uncertainty, clear trends are emerging

Of course these folks actually do know what they’re doing. You don’t get to keep making responsive sites such as The Boston Globe, Microsoft, Entertainment Weekly among others if you are clueless. The larger point is that the craft of web design and development is in yet another phase of re-invention and it’s worth taking a step back and clarifying what this means. Here’s my take on it:

  1. The process of taking your content from inception to publication and how you collaborate with team-members and clients along the way could be called workflow. Specifically, a responsive workflow understands that the diversity of screen sizes and devices requires a new way of interpreting content and new methods of collaboration.
  2. Responsive design is forcing site performance to get a true seat at the table. Slow-loading and bloated sites are just as much of a design flaw as confusing layout, clashing colors, and the rampant proliferation of typefaces on a page.

Responsive workflow is disrupting past methods of page design

Let’s examine responsive workflow first: the goal of making web pages that are adaptable is not a new idea and yet we have held onto some concepts that are not so adaptable for years. The most notable example may be page designs based on mockups in Photoshop. Photoshop mockups are fixed-width by default. The responsive web is not fixed-width. Done deal, we need to move away from Photoshop right? Actually it’s more complex than that, there is no consensus on the matter, however many designers are relying on Photoshop less and some are even abandoning it altogether.

Sounds intriguing right? But if Photoshop page mockups are out, what takes their place? Plausible alternatives are emerging. For example, consider the use of style tiles or element collages two related techniques used to help pin down the look and feel of a site without resorting to a “mockup”. The idea here is to obtain consensus on the direction of a design, and then move into the browser as early as possible. One of the best quotations to illustrate this updated workflow was from Kevin Sharon and Sophie Shepherd’s presentation “A New Toolbox”:

“Most of what I do doesn’t look like a website.”

This relates specifically to the style tile and element collage concepts mentioned earlier but is also tightly connected to the idea that today’s modern designer needs to be continually involved (for realsies!) in all stages from research to final documentation. However you slice it, the times are a changing if you consider yourself a “responsive” designer or developer.

Slide from the presentation “A New Toolbox” by Kevin Sharon and Sophie Shepherd

Site performance no longer an afterthought

The second trend involving site performance was well represented on the second day of the conference by Ethan Marcotte who kicked things off with a call for designers to improve the health of the web, specifically he encouraged asking the following question:

“Is this design worth its performance cost?”

The average file size of a web page in December of 2013 is approximately 1.635 megabytes. So every time you load a single page on the average website you are downloading more data (by about 200kb) than fits on the floppy disk used back in the day.

The 3,5 floppy stored 1447 kb of data

The increasing size of web pages shows no signs of slowing down, and it’s a markedly unhealthy situation. Slow-loading sites are one of those universal frustrations that cut across every single category of user you have. I ride the subway to work everyday, and magically there is always some network connection, albeit often a weak one. As I observe my fellow passengers on their phones and tablets I wonder how many sales are being lost, how many articles are never fully read, how much productivity is being wasted all because a site is not optimized for this scenario.

Images are the primary culprit behind page bloat and admittedly, dealing with the landscape of responsive images feels like a descent into the lower circles of Dante’s Hell. To deal effectively with responsive images you need a sense of humor as exemplified by my new hero Dave Rupert, whose presentation Mo’ Pixels, Mo’ Problems was one of the highlights of the entire conference. Yes, dealing with the page bloat incurred by images is a little tricky, start with basic solutions such as image optimization and mindful use of background images and you’ll be ahead of the pack already.

Making responsive websites accessible, beautiful and low-weight is absolutely within our reach and totally worth the effort. The distinction between “web design” and “responsive web design” is feeling sillier every day. How long before every project is responsive?

Further Resources
Many of the presenters put their slides online. I’ve provided links to some of them here as well as a few other resources.