Interview with Responsive Design Expert Jason CranfordTeague

Our new Responsive Design Studio is just around the corner! Join us in NYC, April 29-May 1, for three days with three multi-disciplinary experts: Sara Wachter-Boettcher, Jason CranfordTeague and Aaron Gustafson. Each will be on hand for all three days; capped at 50 participants, that’s a 17:1 student:teacher ratio!

This week we had a chance to ask Jason to share some wisdom on Responsive Design from his perspective as a visual designer. Here’s what he had to say:

Rosenfeld Media: As a designer, how do you convince your clients to get on board with Responsive Design?

Jason CranfordTeague: I get this question from a lot of designers: they would love to be using Responsive Web Design (RWD) techniques in their projects, but their clients and managers don’t understand what the benefits are. This is especially true when weighted against the extra effort it requires. Before you can even start planning to include RWD in a project, you need to get buy in from clients and from co-workers. The good news is once you show the upward trend of mobile devices and and lay out how RWD allows you to target not only the devices, but the context those devices are likely to be used in, most clients and team members quickly come around. In fact, the most common response I get is “why wouldn’t we do it that way?”

RM: What are some of the pitfalls designers encounter with creating responsive web designs?

JCT: The biggest downside to working with RWD is during the planning stage, where you have to consider your content and design, not just from the perspective of someone sitting at a computer screen or a laptop, but of someone sitting in a coffee shop using a tablet or walking busy streets using a smart-phone. Web designers are used to creating static wireframes and visual comps, and struggle when it comes to having to produce these for multiple-screens. One of the techniques I help my students understand is how using recently developed prototyping tools makes it so much easier to plan their designs for all three major contexts dynamically.

RM: How can RWD be used to help tailor an interface for context

JCT: If content is king, then context is queen. But for a long time, web interface designers have been able to get away with assuming their audiences are all in the same context: sitting at a desk. This is no longer the case as mobile devices allow users to untether themselves. RWD cannot tell you exactly where and how a user may be interacting with your designs, but by detecting the device capabilities, we can make some educated guesses that will inform our use cases for presentation and functionality.

RM: What is the most common mistake you see being made with RWD?

JCT: I see designs all the time where the tablet or smart-phone versions are just “mini-me” iterations of the computer screen version. One size does not fit all, and the layout that works for one screen and orientation does not always work on others screens or orientations. Navigation patterns, layouts, interactions, and even functionality will need to shift or change entirely as the design shifts between different contexts.

RM: What’s the coolest thing you can do with RWD that most people haven’t heard about?

JCT: That would have to be Webfont iconography. Web fonts have come on strong the last several years, exploding the typographic possibilities for web designs. But what a lot of designers and developers do not realize is that web fonts can be used to create easily styleable and infinitely resizable icons. Since fonts are vector in nature, you can create dingbat font files with your needed icons, and then size them for the context without resorting to multiple images and without loss of image quality.

RM: Thanks Jason!

There’s still time to get the Early Bird Discount for our Responsive Design Studio on April 29-May1 in NYC! Join Jason along with Sara Wachter-Boettcher and Aaron Gustafson for a three-day intensive course that’s interdisciplinary by design (so bring your whole team). Hope to see you there!