Smashing Book 5: Real-Life Responsive Web Design — Part 1

’ve seen teams create three (or more) separate prototypes — for mobile, tablet and desktop — and then proceed to test each one independently. When this happens, each of these separate experiences will evolve on its own, usually resulting in three unique experiences which will be very difficult (if not impossible) to build in a responsive way.

These days, the tools available for rapid prototyping are tremendously capable: frameworks like Bootstrap34 and Foundation35; CSS (or Sass36 and LESS37) toolkits like Bourbon38 and Pure CSS39; visual prototyping tools like InVision40 and Marvel41. Even visual web design and development tools like Macaw42 or presentation tools like Keynote43 can be used to create very

Samantha has a handful of examples on the style tiles site, and there are a few great resources listed below which cover their use in real-world process:
•“Get Your (Visual) Style On46”: Yesenia Perez-Cruz, Dan Mall and my presentation at Artifact Conference in Austin, Texas (May 13, 2013).
•“Faster Design Decisions with Style Tiles47”: Samantha Warren at An Event Apart in Austin, Texas (February 2015).
•The Style Guide Podcast with Samantha Warren48
Because of their static nature, we don’t use them too often. Our initial design direction is typically established with an element collage or a style prototype, both covered next.

During some recent usability tests, I noticed that on small screens many users never attempted to locate or use navigation.

I recently saw Aaron Quinn22 speak about information architecture and he said something that really stuck with me. He suggested that we might be relying too much on our common sense when it comes to grouping information. Instead, he made the case for us to consider consensus over common sense23 when planning how our users will interact with what we build. Let me explain why with a quick story.

One sentence describing the product and what makes it unique.”

Content Priority Guide
A content priority guide is “part content modeling, part stripped-down wireframe” (see “Content Priority Guide19” by Emily Gray20.); like a mini content model, in priority order, and with client collaboration. (See http://bit.ly/content-priority-guide21 for a working example of a content priority guide.)

For this reason, it’s critical to understand the priority of content and functionality throughout a system. Luke Wroblewski14 brilliantly encouraged us to think about mobile devices first15 to help our clients home in on what is truly important.

Think about it: we typically use things like size, position, order and contrast to help users understand where they should focus.

Generally, the more people you have on a project, the more rigidity you’ll need. As your team size goes down, you can get away with a less formal process. It’s the responsibility of your project manager to monitor the pulse of the team and adjust the process to keep things moving smoothly.