Brad Frost on workflow, responsive frameworks and the future of the web 2

atomic_designWeb designer, speaker, writer, consultant, musician, and artist (phew!) Brad Frost is one of the speakers at this year’s Webdagene. He is one of many people in the web community that challenge conventions, and set standards that the rest of us working on the web can aim for. In this interview we (Martin and Øyvind) try to get to know more about Brad’s workflow and his thoughts on web design.

Brad Frost wearing a space helmet

Responsive design, strategy and frameworks

Webdagene: In the web community you are known for your passion for the web, especially responsive design. Why do you care so much about this?

The power of the Web is its ubiquity, and increasingly more and more people are accessing the Web from a plethora of connected devices. It’s our jobs to create Web experiences that look and function beautifully across all of these devices and environments. Responsive design and sound progressive enhancement techniques are incredibly powerful techniques we can use to ensure people will have a good experience no matter how they happen to access the Web.

Webdagene: How do you see the role of content management systems today, given the prevalence of responsive design, and do they need to work differently than before?

For my money, I think one the biggest area that needs improved is the world of CMSes. I totally agree with Karen McGrane when she says we have to move away from treating CMSes as web publishing platforms, and more as truly agnostic content management systems.

I worked on a project where I was doing the Web portion of it, while my colleague was working on an iOS app counterpart. Watching the developer have to write tons of logic just to strip out all the HTML garbage that the feed provided made it abundantly clear that since we’re sending our content to more places, we need to think about our content in a more platform-agnostic way.

Seeing demos like the one recently published by Tim Murtaugh excites me, as I see it as good first steps to tackling multi-channel publishing.

Webdagene: What are the most common misconceptions clients have of responsive design?

By now, most clients have heard of responsive design, however most of them think of it as yet another checkbox they need to tick during the redesign process. However, there’s far more to solid multi-device Web experiences than creating squishy layouts. It’s my job to help clients understand all the other factors that go into making solid adaptive experiences. Things like performance, progressive enhancement, future-friendliness, flexibility, and other contextual design conventions can go a long way to making a better user experience.

Webdagene: You recently wrote about responsive strategy, what approach do you recommend when you work with clients?

As far as what responsive strategy I recommend to clients, it really depends on the client. Some organizations aren’t in a position to bulldoze their entire desktop site and start from scratch. That’s when creating a responsive m dot site or piecemeal site might make a whole lot of sense. But if the conditions are right at an organization, I definitely recommend pursuing a mobile-first responsive strategy.

Webdagene: Images are a challenge when working with responsive websites. How do we deal with them?

Short answer: I don’t know. Responsive images is the one area I sort of try to stay out of, as it’s still all up in the air. I just want somebody to say “Hey Brad, here’s the solution we came up with”. For now, techniques like compressive images help a lot, and we’ve used Picturefill on projects to great effect.

Webdagene: Responsive design frameworks have become popular. What are your thoughts on using frameworks in projects?

I’m a fan of tools like Bootstrap and Foundation, as they chunk out interfaces into smaller components, are nicely documented, and provide elegant solutions to hard problems. They make it easy for teams to quickly prototype responsive interfaces, and I think they’re great as a sketching tool.

However, I’m not a big fan of them for use in production sites. For one, they’re one-size-fits-all solutions that provide people with the answers. As a result, there’s a large risk of running into lookalike issues with other sites. And yes you can adjust the styles to better fit your site, but doing so means fighting against the ready-made styles that came with the framework. In addition these frameworks provide a whole lot of solutions, many of which you might never use, but the user still has to incur all that extra bloat. On the flip side, many of these frameworks don’t go far enough, and you’ll find yourself having to write custom stuff anyways.

I could go on, but let’s just leave it at that.

Brad’s workflow

Webdagene: Lets talk about workflow. Which applications do you use, and for what?

I use Sublime Text 2 as my editor, Pattern Lab to design/develop my interface system, Sass to author my CSS, typically jQuery for JavaScript, and Codekit or Grunt for compiling Sass and other stuff.

Webdagene: Designing in the browser is good, but when many people are working together in a single prototype, it can become a mess. Any thoughts on how to deal with this?

I’m not sure I’ve ever encountered this problem. If multiple people are working on the same thing, I highly recommend using a version control system like git to keep teammates from stepping on each other’s toes.

At the end of the day, it’s not so much about designing in the browser, but using the right tool at the right time. The projects I work on still make great use of tools like Photoshop, good ol’ fashioned sketching, and wireframes. But we also recognize that in order to truly represent how the user will receive our creation, we need to get into the browser as fast as possible. Once in the browser, we’re able to demonstrate flexibility, performance, ergonomics, realistic type rendering, etc, etc, etc.

Webdagene: Pattern-lab seems like a good idea, but its hard to get a grasp on. Why should we use it?

Pattern Lab is a tool for crafting your own design system by stitching together the bits and pieces that make up your interface. It applies the atomic design methodology, which breaks down interfaces into atoms, molecules, organisms, templates, and pages. Pattern Lab assembles these patterns together using Mustache to ultimately form the final production-ready front-end code.

In addition to the interface builder, Pattern Lab also features a smart viewport resizer, which is helpful not just as a developer tool but really as a client/team education tool. It also provides pattern annotations so you can explain what’s going on with each pattern you create. Another cool feature is the ability to see pattern lineage, so you can see exactly where you’re using tabs, or what patterns comprise the homepage template. It’s extremely valuable to be able to see that context. Pattern Lab has a bunch of other really cool features like code view, page follow, auto refresh, and other stuff which makes designing your site a bit easier.

Webdagene: In addition to being a web developer, you are also a musician. Is there anything you’ve learned from playing music that you also can put into your work as a web developer?

Absolutely. Music is both an artform and a discipline. I’ve learned (and forgotten) music theory twice in my life, so while I can appreciate the structure and rules of the music, I’m more attracted to the free-form nature of music as artistic expression. I feel the same way about web design. On one hand, a web design is comprised of tags, if/else statements, and all sorts of other codey goodness. But on the other hand, it’s this fluid medium with all sorts of opportunities to improvise, solve problems, and create something unique. Like music, I gravitate toward the loose, expressive side of web design rather than the hard-and-fast rules of programming.

Webdagene: How do you test the websites you’re building on users? How do you know they work, not just technically, but also in terms of helping the users visiting the site?

Getting into the browser earlier allows us to test our designs much earlier on. We’ve done tests where we’ll walk a user through the flow, and they can provide feedback. Unfortunately, this hasn’t always been the case in my career, as most projects I’ve been a part of don’t really test with users, either before or after launch. It’s been more like “here’s your website, see ya later!”

Webdagene: What is the biggest challenge when working with the web in 2014?

The challenge is certainly different from person to person. For me, I’ll say the big challenge is to get more up-to-speed on a lot of the technologies that can (hopefully) make my life easier, but are way more technical than I’ve been used to. Things like Grunt, Gulp, Brocolli, Gitflow, Bower, etc, etc have my head spinning, but I’m hoping that I can get my head around them to make me more effective.

Webdagene: How do you see the future of the web?

I see the future of the Web as being even more diverse than it is right now. More diverse in the environments people will access the Web from. More diverse in what we’re able to accomplish on the Web. And more diverse in who’s accessing the Web. The majority of the world still does not have access to the Web, and I’m excited to see an increase in the diversity of ideas, tools, and views once those people get online.

Webdagene: We are looking forward to your workshop about responsive design at Webdagene 2014. How should participants prepare to get the most out of your workshop?

Come with thoughts, opinions, and questions and get ready for an all-day responsive design extravaganza! We’ll be talking about strategy, design principles, atomic design, Pattern Lab, process & workflow, responsive patterns, and development best practices, so be prepared to cover a lot of ground!

To learn more from Brad Frost, join us at Webdagene in Oslo, October 15-17.

Øyvind Storli Hoel

Innholdsrådgiver og følsom detaljfanatiker som elsker tekst, tone og kode.

Flere artikler av Øyvind CV

Martin Berglund

Martin liker å lage produkter som er enkle og intuitive å bruke. Han setter sin ære i å skape delikate grensesnitt med god typografi og tydelig funksjonalitet.

Flere artikler av Martin CV

Skriv en kommentar

  • *

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>