Menu

An agency workflow for Responsive Web Design

I’ve been thinking about workflows for Responsive Web Design quite a bit, particularly since it’s now become our default approach on every new project (similar to Cloud Four’s recent change of heart). I’ve been especially influenced by two recent articles on the topic, namely Dennis Kardys’s A More Flexible Workflow, and Viljami Salminen’s Responsive workflow.

I struggled a bit to make their approaches fit into how we worked, so I decided to expand on what they’ve done and draw something that reflects a bit more accurately how we are incorporating Responsive Web Design into a user-centered workflow within an agency model. It’s not perfect by any means, but here’s what I came up with:

Responsive design workflow

The goals of this approach is to stay grounded in two core principles:

  • Content first. We need to stop thinking about content in terms of layout, and plan content independent of design.
  • Mobile first. We need to stop the focus on device thinking, and assume a multi-device world where we work on style direction independent of layout.

I’ll briefly go through each step in the diagram and how it helps us to accomplish these goals.

During Discovery we do our research to uncover user needs, develop personas, and create the user journey map that becomes our product strategy (see my article Usable yet Useless: Why Every Business Needs Product Discovery in A List Apart).

In the Planning phase we evolve the user journey map into a content plan and Information Architecture document (see my post on this topic). Once we have our scaffolding in place, we start the design process.

We rarely do static wireframes any more (Cennydd Bowles explains why), but we do a lot of Sketching. The benefits of sketching have been proven time and time again (see, for example, How Diagrams Solve Problems and The importance of sketching in product design). What I like most about the sketching process is how it allows the team to try multiple solutions to a problem, before settling on one or two ideas to iterate further (see Jon Kolko’s Iteration and Variation). I like using Zurb’s responsive sketch sheets as templates because they keep us focused on a multi-device approach.

Once we’ve gone through the sketching phase with clients, and we know what approach we’d like to pursue, we start Prototyping. We mainly use Axure, but there are multiple solutions out there to suit a variety of approaches. Axure isn’t natively responsive (yet), so we’ve been building two prototypes on our projects: starting Mobile first, and then moving on to Desktop. This isn’t ideal, but it works for our current purposes. We have a strong focus on user testing, so we test these prototypes in our usability lab, and iterate the design based on the findings.

Towards the end of the Prototyping process we start working on Style Tiles so we can have a discussion about graphics with clients without focusing on layout and flow issues. We’ve seen huge success with this approach. Once clients are comfortable with the visual direction, the focus can return to discussing how the UI will help them meet their business goals and user needs. It also makes the move from prototype to graphic design much smoother.

Although I won’t say that we’re completely post-PSD, we definitely don’t create the entire site in Photoshop. Since we have an interactive prototype and strong style guides, we generally only create about 6 or so pages in Photoshop, so clients can get a good feel for the direction.

At this point we also start working on Front-end Development. We build the framework using the prototype and style tiles, and pick up speed as the graphic design gets finalized. We don’t use boilerplate frameworks like Foundation and Bootstrap for production code. On this point we stand with Aaron Gustafson:

I find Foundation, Bootstrap, and similar frameworks interesting from an educational standpoint, but I would never use one when building a production site. For prototyping a concept, sure, but to take one of these into production you need to be rigorous in your removal of unused CSS and JavaScript or you end up creating a heavy, slow experience for your users.

An important point on the last three phases: as the diagram points out, these are all very much iterative phases. We make changes all the time based on user feedback, and discussions between designers, developers, and the client. I think we can all agree that responsive design is messy, and we just need to get comfortable with a certain amount of ambiguity during design and development. That’s ok, as long as we’re prepared for it.

It’s been an enormous learning process — and we’re still figuring out the best ways to make Responsive Web Design our default approach. But we’re committed to it, because we believe in content parity, and we’re convinced that responsive design is the approach that will get us there. Some things we’ve learned along the way:

  • You can’t wing content choreography. We can’t just make our front-end developers figure out what happens at each breakpoint. This is something we have to plan together to consider all the goals and constraints of the project. Breakpoint graphs are particularly helpful in this step (see Stephen Hay’s Responsive Design Workflow).
  • Optimize for touch, support keyboard actions. Josh Clark points out that “every desktop UI should be designed for touch now.” He’s right. The lines are getting blurrier and blurrier between what is considered “desktop” and “mobile”, so we should just assume everything is a touch screen, and make controls easy to discover and manipulate.
  • The benefits go beyond mobile. Going mobile first helps us create better desktop sites as well, because we remain focused on meeting core user needs and ensuring there is an easy and discoverable path through the flows. There is no room for cruft on smaller screens, and that makes our desktop designs better as well.
  • It’s hard, but it’s worth it. As Ben Callahan points out in The Responsive Dip, “The fact that we don’t know how to do something today doesn’t mean we shouldn’t strive to do it tomorrow.” This is an amazing time. We get to be part of shaping the future of the web, because no one has it all figured out at the moment. I don’t know about you, but I want to be part of that, no matter how hard it is.

We have much maturing to do, but I’m excited about the progress we’ve made in shifting our entire process towards building responsive sites. Every project runs just a little bit smoother, and that’s encouraging. So my only advice to those standing on the edge of responsive design is this: jump in. The water is cold, but refreshing. And you’ll feel great when you get to the other side of the river.

[Sponsor] Encoding.com – cloud encoding service

Still encoding video with on-premise hardware? Encoding.com is the world’s fastest cloud encoding service. We’ve made proprietary optimizations for ingest, queue times, processing, and egress of your source content that rivals the fastest on-premise equipment, with infinite scalability.

We support nearly every video format imaginable, including a few that only we offer. We can accommodate a number of different transcoding workflows with an easy to use web interface, a flexible watch folder, a desktop uploader, or our robust and mature API. You can even automate basic editing tasks such as video overlays and concatenation programmatically using our API.

Vid.ly is a unique feature of our service that completely takes the guesswork out of your transcoding workflow, combining transcoding, device detection, delivery, and storage into a single short url.

Don’t take our word for it, try our forever free account today, complete with your own API key.

Encoding.com

Sponsorship by The Syndicate.

Emoji and post-literacy

In The ‘Mood Graph’: How Our Emotions Are Taking Over the Web Evan Selinger writes about the rise if emoji and other emotional signals in social media:

But there are costs to a mood graph too. The more we rely on finishing ideas with the same limited words (feeling happy) and images (smiley face) available to everyone on a platform, the more those pre-fabricated symbols structure and limit the ideas we express. Such general symbols can also lead to even more confusion or misunderstanding due to cultural, generational, and other differences.

And finally, drop-down expression makes us one-dimensional, living caricatures of G-mail’s canned responses — a style of speech better suited to emotionless computers than flesh-and-blood humans.

It’s a great article well worth reading all the way through. This trend is a continuation of something I’ve discussed quite often here over the years: our move towards a post-literate society:

What is post-literacy? It is the condition of semi-literacy, where most people can read and write to some extent, but where the literate sensibility no longer occupies a central position in culture, society, and politics. Post-literacy occurs when the ability to comprehend the written word decays. If post-literacy is now the ground of society questions arise: what happens to the reader, the writer, and the book in post-literary environment? What happens to thinking, resistance, and dissent when the ground becomes wordless?

I find myself here in full agreement with Guy English from his post Learn to X:

But, let’s not kid ourselves, literacy is the new literacy. The ability to read, comprehend, digest and come to rational conclusions — that’s what we need more of.

Emoji are fine, and I’m as much a fan of the animated gif as anyone. But I do feel like we’re trying to create all these shortcuts to express our emotions because it’s hard to do it in words. The thing is, though, it should be hard to express our emotions. That’s how we understand them and work through them. So let’s go easy on the giphy.com searches every once in a while, and try to find the right words instead.

The Feels

We’re only loyal to ourselves

Kathy Sierra wrote a brilliant post about loyalty called Your customer won’t take a bullet for you. She makes the point that to understand loyalty, we have to realize that we aren’t loyal to products, we’re loyal to ourselves:

If you want to benefit from a customer’s loyalty to himself, you can’t bribe it, you must earn it. Deserve it. Focus not on upgrading your product but upgrading your user’s capabilities. If you can’t enhance your product, enhance the context in which your product is used. Provide better and more inspiring documentation. Make YouTube tutorials. Join forums and offer expert help where it’s most needed. Use every nanosecond of your social media time to help people become better at something for themselves. Relentlessly ask, “How are we helping our users kick ass? What can we inspire, amplify, teach, enable, empower?”

This reminds me of Tom Fishburne’s “loyalty fatigue” cartoon:

Loyalty fatique

The importance of being idle

In Idle minds L.M. Frank writes about what happens inside our brains when we’re not actively working on or thinking about something:

Some researchers now think that resting-state networks may prime the brain to respond to stimuli. “The system is not sitting there doing nothing and waiting,” says [Andreas Kleinschmidt, director of research at the French National Institute of Health and Medical Research’s Cognitive Neuroimaging Unit]. Cycling activity in these networks may be helping the brain to use past experiences to inform its decisions. “It’s incredibly computationally demanding to calculate everything on the fly,” says Maurizio Corbetta at Washington University School of Medicine in St. Louis. “If I have ongoing patterns that are guessing what’s going to happen next in my life, then I don’t have to compute everything.” He likens the activity to the idling of a vehicle. “If your car is ready to go, you can leave faster than if you have to turn on the engine.”

It makes intuitive sense that we can’t just continue to create and consume information — our brains need time to process it all. And yet we still so often celebrate 80-hour weeks and shun “downtime” because we’re so afraid of not being productive. It seems like we’re doing ourselves more harm than good if we don’t give our brains time to be idle.

Nostalgia is what it used to be

John Tierney writes about the benefits of reminiscing in What Is Nostalgia Good For? Quite a Bit, Research Shows:

Nostalgia has been shown to counteract loneliness, boredom and anxiety. It makes people more generous to strangers and more tolerant of outsiders. Couples feel closer and look happier when they’re sharing nostalgic memories. On cold days, or in cold rooms, people use nostalgia to literally feel warmer. […]

Nostalgia serves a crucial existential function,” Dr. [Clay Routledge of North Dakota State University] says. “It brings to mind cherished experiences that assure us we are valued people who have meaningful lives. Some of our research shows that people who regularly engage in nostalgia are better at coping with concerns about death.”

Of course, there’s a fine line between reminiscing about great moments, and allowing those memories to make you feel depressed. In the words of Stephen Stills:

Don’t let the past remind us of what we are not now.

Microsoft’s woes explained

Bundled Out is a great post by Charles Miller on how every problem Microsoft is experiencing today was written into its DNA in the 1980s. You really should read the whole post, so I’m just going to quote a short teaser:

Software isn’t an industry where the monster company selling the last generation’s product gets to stay being the monster for the next generation. It’s the industry where a thousand hungry small companies are waiting for a shift in the market that will allow them to slay the monster, carve them up and eat them for breakfast.

Amazon: caught between a rock and a local maximum

Joshua Porter makes a good point about Amazon’s product pages:

The reality is that Amazon has designed themselves into a Local Maximum. They’ve tested and tweaked the same product page over and over and they’ve optimized it as much as possible. They can’t improve it significantly at this point without making a big change. But they can’t make a big change because the only changes they can make must increase revenue (or some closely related KPI). So any big change is a very, very scary thing when that page is driving billions of dollars in revenue. So it makes sense that Amazon only makes small changes to their product page design.

Amazon’s design is often held up as a gold standard in e-commerce, but at some point we have to realize that maybe the emperor has no clothes – and we need to start calling it out so clients can stop asking us to “just make it like Amazon”.

More

  1. 1
  2. ...
  3. 110
  4. 111
  5. 112
  6. 113
  7. 114
  8. ...
  9. 193