Responsive Web Design is Hard/Easy

Grace Steite Masri · May 5, 2014

Your Majesty Speaker Series • Dan Mall

As part of our monthly YM Speaker Series, we had the pleasure of a visit from Dan Mall at our New York HQ to talk about Responsive Web-design. Dan is the Founder and Creative Director at SuperFriendly, a Philly based digital agency. Dan rolled up his sleeves and shared a cornucopia of thoughtful tips and advice on frameworks and recommendations for how to approach RWD.

Haven’t we outgrown the assembly line approach yet?

Dan cleverly used Henry Ford’s assembly line approach as a metaphor for the Waterfall process, to illustrate the tactics and strategies many agencies still currently use in digital product development. The goal of the assembly line was originally to bring cars to the masses at lower costs, thanks to more efficient, streamlined and sequenced work. While this was a successful approach for Henry Ford to achieve his goal, Dan brought up an interesting question:

Why do we use a similar process for car building as we do for digital invention when our end-goal is ultimately quality over quantity?

Often, makers, agencies and clients follow a similar pattern by separating the strategy, design and development phases from each other, making it more difficult to approach RWD effectively.

When tackling design for multiple screens, opting for an Agile approach combined with a framework supported by focused divergent and convergent thinking may be more conducive to success.

Becoming an Agile team requires some agility

Shifting from Waterfall to Agile can sometimes seem like a daunting task, but we learned it’s really not that painful once you commit to it. The key lies in creating more opportunities for extended overlaps, where more frequent cross-disciplinary collaboration between phases can happen. The goal is to gradually increase everyone’s involvement throughout the project lifespan, using appropriate tapering of separated activities paired with a scaled increase in collaborative periods of focus. This flexible framework can and should be guided by the needs of the product. With respect to process, Dan also suggested the concept of focal points as a successful way to graduate into a more Agile approach. In a focal point process, everyone kicks off together and wraps up together while allowing time to go in different directions iteratively. Applying this process in micro increments throughout a project can and does enhance the value of ideas derived and improves overall creativity. The final step – “Rinse & Repeat”. Tackle each section of the project in a similar manner: diverge, converge, overlap and collaborate. And there you have it, an applied agile framework with maximum scalability and flexibility to boot.

The roadmaps Dan shared were particularly compelling because each were structured around simple yet thorough checklists that anyone can adopt and adapt, allowing the process for anyone attempting to shift to Agile or experiment with transitioning from Waterfall approaches, to be easily customized for any challenge.

RWD Tip!

Experimenting with more nimble and efficient approaches that provide for closer collaboration between all disciplines does ultimately translate to a better setup, especially when tackling RWD.

Once the stage is set, all you need to do is apply a simple mix of tools that support this framework nicely. One of the tools Dan shared which he uses regularly and with great success are Element Collages. Using this approach has proven to help teams and clients to get out of the hurry up and wait cycles involved in using PSD comps as a method for showing progress or making decisions. Element Collages allow teams and the client to progressively explore look and feel together, without getting ahead of UX or wireframes, whose focus is often used to illustrate how resizing the browser might affect the content layout and hierarchy. Using Element Collages can be a clearer and more relevant way to make decisions, collectively.

A sampling of other helpful tools Dan shared:

http://patternlab.io to help break down and rebuild intended approaches molecularly.

https://gridsetapp.com/features/ to help organize design and content requirements, simply.

http://styletil.es to help spark efficiencies with layout decisions, and avoid hurry up & wait design cycles.

Each of these tools represent a minimal investment in effort to adopt, providing for simultaneous collaborative involvement and yield significant results for both the client and the team. The trick is to take a step back and think about how the team can receive or cultivate the answers they need up front while working fluidly with the client in a way that allows for them to understand what responsive entails. Applied together, this combination hopefully helps avoid surprises for everyone at later stages of any project. The benefits are in a nutshell, efficiency and quality. Not only do these methods reduce revision time, they also ensure that both the goals of the client and the team are achieved efficiently and with fun, quality and value in mind.

Takeaways:

Responsive Design is a great catalyst for change and provides a good reminder for us to continually re-configure past methods to create new contexts for how we conceive, design, and build successful products efficiently and collaboratively.

Dan reminded us while many variables depend on project parameters and client needs, once you have the right set-up and tools in place to experiment with, RWD can go from hard to easy, painlessly. While these tips, tools and approaches are handy for RWD, they’re also incredibly helpful for improving the overall framework and process of designing for the web, no matter what screen size.

We are thankful and thrilled to have had this opportunity to learn from Dan, and are excited to experiment with these new tools, frameworks and methods. Thank you Dan!

To learn more about SuperFriendly, Dan, and his work: http://superfriend.ly