RWD Podcast Episode #20 : Brad Frost

Transcript

Justin Avery Hey everyone and welcome to another edition of Responsive Design Weekly Podcast. My name is Justin Avery and I’m your host and curator of the Responsive Design Weekly newsletter, a weekly newsletter strangely enough all about responsive design. This week, we have a special sponsor and the sponsor is Pattern Lab.

Pattern Lab is this really cool thing. It’s basically atomic design and we’re looking at how that creates and constructs web design systems. It looks at starting with atoms and atoms might be things like tags or form labels, inputs and buttons and then we put the atoms together, they become molecules and that might be something like a search widget and then we put the molecules together to form organisms which form template, which form pages and we build up our website or our pages from tiny small elements into much larger ones.

It’s an interesting take on designing websites, but it’s definitely something you should go and check out. It’s free, which is amazing, so patternlab.io. This week, we’ve also got another special guest who is actually the author of Pattern Lab, Mr. Brad Frost. Welcome Brad.

Brad Frost Hey, thanks for having me Justin.

Justin Avery Thank you for coming on. It’s good to have you on finally.

Brad Frost Yeah, absolutely. Again, I really appreciate it. Also, worth pointing out that Dave Olsen who is the other author of Pattern Lab has very much taken Pattern Lab into the stratosphere. I just sort of smile and nod these days, because he has gone from … He’s taken it from my sort of crummy initial idea and turned it into something real which has been absolutely fantastic to watch, but Dave Olsen definitely [00:02:00] deserves all the credit for that.

Justin Avery We’ll try and dig. Well, I’d like to dig a little bit deeper into Pattern Lab and the approach of atomic design when building out websites and stuff, but before we jump in for some folks who may not have come across Brad Frost before, perhaps you could do an introduction. Who is Brad, where did he come from? Where did he get his start and the web and what do you up to these days?

Brad Frost I’m Brad Frost, I’m a web designer living in beautiful Pittsburgh, Pennsylvania here in the States. Yeah, I guess I got my start in 2007 making websites and started out making real estate websites and mortgage websites right before the housing bubble burst here in the US. That was a lot of fun.

Subsequently, I moved to New York City and worked first at a place doing fashion e-commerce sites and then moved over to an agency called RGA working on some massive projects for equally massive brands. Then, yeah, eventually moved back to Pittsburgh and have been set up my own business and have been freelancing and speaking and consulting and doing a whole bunch of other stuff ever since.

Yeah, I think whenever I was at RGA, I got hired on as a mobile web developer which was the only job opening they had open at the time and a thought going through my head was, “Ugh, that sounds awful. That’s not making real websites.” [00:04:00] I said, “Well, alright, we’ll use this as my foot in the door and eventually I’ll get a chance to make real websites.

Sure enough, I got this gig and as a couple months went by, it became pretty apparent that this whole mobile thing had some legs to it. It might be what we’re all focusing on and stuff moving forward. I consider myself to be extremely fortunate and getting in pretty early with a lot of this web stuff, making web stuff for these mobile devices.

Justin Avery Did the big change happen while you’re at RGA, sort of the switch between … The focus on mobile happened when you were there. Were you still there when it was moving across to an m-dot site or a mobile app definitely the place where we need to be at?

Brad Frost Whenever I started, it was like late 2009, by this point and time, the iPhone had already been out for a little while, Android first version was coming out on the scene. A lot of the stuff that I was first tasked with was doing some maintenance work for some of Nike’s mobile websites and stuff and just getting under the hood and being a student of web standards and all of that stuff and just seeing some of just the absolutely nightmarish code going on there. I was like, “Oh.”

At first, I sort of reside myself, “Well, okay this is what’s required in order to make the stuff work on these little devices.” As time went on, I realise, “No, this doesn’t have to be this way.” Yeah, whenever I was there, the iPad got released and I sort of helped again with [00:06:00] Nike do some of their Nike ipad.nike.com believe it or not.

Yeah, I saw some stuff and saw that evolve and saw Android pick up some steam and we kept getting more and more devices in and more and more devices, and more and more devices and all the while, those experiences were helping craft the mentality in my head about how best to approach all this, because ipad.nike.com doesn’t really scale very well.(laughs)

Justin Avery There’s a lot of subdomains coming up.

Brad Frost The Kindle Fire gets released and Android 3.0 gets released with all their tablet specific stuff and it becomes pretty crazy pretty quickly. It was a great experience and again, I consider myself to be really fortunate to be in the right place in the right time for that.

Justin Avery Was it difficult early on to convince bigger companies that this was the right switch?

What ends up happening, especially the larger the organization is, the more risk averse they are. Whenever you find something that works, even if it is an imperfect process or an imperfect work flow or an imperfect structure, people very much cling to that because it’s familiar, it’s there.

Brad Frost Still is.(laughs) It still is difficult. What ends up happening, especially the larger the organization is, the more risk averse they are. Whenever you find something that works, even if it is an imperfect process or an imperfect work flow or an imperfect structure, people very much cling to that because it’s familiar, it’s there. “It worked for me, and so therefore, we should continue doing this because it’s worked for me in the past.”

That’s a very tough thing to overcome and it requires a lot of convincing and conversation and data and [00:08:00] to help get people who are comfortable to venture into the unknown. That happened just even with my teammates working across different disciplines. We’ve always made this high fidelity wireframes. We’ve always made these crazy high fidelity comps and have gone through 16 rounds of revisions with them and then eventually will code them up.

The people that come from that world are now the people in charge of those departments. We made wireframes in the past and look at where I’m at now. It’s very challenging to convince people to challenge their current mentalities, what they consider to be best practices. When you really think about it in a medium that’s 25 years old at max, those best practices, those things that are clinging to …

Justin Avery What is the best practice.

Brad Frost Yeah, exactly. Of course, on the client side, it gets challenging to convince them, but there’s load of things you could do to help that along.

Justin Avery Just show them how well their competitors are doing that have switched over or how much easier it is …

Brad Frost That’s the other thing. I’ve always hated that. “Well, we’re not going to do it until our competitors do it.” Is that really the mentality or taking on? That’s incredible. Why not try to blaze trails, why not try to do something on your own merit rather than as a me too? That stuff always blows my mind.

There’s tons of things you could do. I think one of the best things that … One of the best tricks I’ve ever come across was [00:10:00] to take a company’s existing website. We did this with Tiffany & Company, the jewelry e-commerce website and we basically …

I took a representative page from their site, so like a product detail page for a ring or something and spent a couple hours basically slapping on some media queries, some sort of layout specific roles to reshuffle a lot of their divs and just making sure that the layout worked well across different screen sizes. It included a little swipe image gallery type thing to also drive home to point that responsive design is a lot more than just adjusting layout.

Then what we did is we went over to their headquarters and we had a big table and we just sprayed all of these different devices on to the table with two tabs open on each device. One with their current live desktop site and then one with this prototype of what their site could be with responsive design.

They just had everybody go around the table and pick up these different devices and actually look at be able to switch back and forth between the two tabs and it just became blatantly obvious which one is better. It also helped them understand where all their website can go. That at the time, they’re very focused on iPhones and everything else was an undesirable, but whenever you actually pick up one of these cheaper, crappier devices and see your stuff working on there, you start [00:12:00] seeing potential.

It does a lot of things with a lot fewer words or without this 700 page pitch deck or anything like that. Of course, like data and stuff like that helps as well, but really I’ve found that showing, not telling is a lot more effective in getting people on board just so you could actually see. You could actually see what this might accomplish.

Justin Avery Speaking of data, from Australia, I’m living in the UK. I’m sure I always say data and then I always get corrected it’s data or data.

Brad Frost It’s both.

Justin Avery Gifs, gifs, data, data, whatever. Speaking of data, no one that I’ve spoken to so far talks much about doing that research beforehand. Do you get involved in that part of the project of looking at what the current audience they have coming to the website and whether that informs decisions about how you then start the redesign or retrofit of their current site?

…of course you’re going to make your website look and functioning great on an iPhone, but a large part of those conversations for me is using this tip to educate them on … We’re not just making this for your current stats. A lot of these devices weren’t even around last year. What we’re trying to do is build you an interface that’s going to work and function properly on any device even those that haven’t been conceived yet.

Brad Frost I take a lot of that stuff with a grain of salt simply because a lot of times, your stats … That’s not to say that they’re not entirely … That they’re totally false, but then at the same time, especially because Android is so fragmented and so if you’re looking at your stats, you see iPhone traffic typically coming far and away in the lead and then everything else. 

It’s basically like iPhone 70% and then it’s like Android, this type of Android device 1.2%, [00:14:00] this type of Android device 1.1%. Naturally, if you look at stuff like that and only pay attention to that stuff and act on it, you’re going to make an iPhone site essentially and leave everything else in the dust.

I do think that it’s important to consider that and of course you’re going to make your website look and functioning great on an iPhone, but a large part of those conversations for me is using this tip to educate them on … We’re not just making this for your current stats. A lot of these devices weren’t even around last year. What we’re trying to do is build you an interface that’s going to work and function properly on any device even those that haven’t been conceived yet.

I think that that’s a conversation I love to have and 9 times out of 10 will win because from a business standpoint, that makes a ton of sense, right? The more your site works, the more devices your site works, the more likely people are going to use it, the more likely people are going to buy whatever you’re selling or whatever you’re trying to do.

Justin Avery You’re just casting a lot of net.

Brad Frost Yeah, exactly and who doesn’t want to do that? That’s what’s always … Especially with these larger companies, I’ve had to fight that battle pretty hard because they’re trying very hard to only cater to iPhones and it’s like, “Guys, can’t you … Just try to see the bigger picture.” Which is also another trick for convincing people.

I found that as soon as I started talking to CEOs and stuff [00:16:00] about this, these battles became a lot easier because CEOs get it. They understand the benefit of casting a broader net. It’s all this middle managers, the people that are trying to get things done on budget and just make things that look pretty so that they could get a promotion or whatever.

Those are the people that will fight you with tooth and nail and not try to do the right thing. I found that actually talking to the CEOs up front helps get them on board and then she could trickle that down to the rest of her staff to make it a priority which is awesome. That just becomes way easier than trying to fight up the ladder.

Justin Avery Get it all pushing down from the top works a whole lot better.

Brad Frost Yeah exactly.

Justin Avery I talked about this story with one of the guests previous in terms of opening up and casting a wider net or opening up to move of your audience. That story of how the YouTube player, they got that down from over a megabyte to under 100 kilobytes and all of a sudden their load times tripled or quadrupled. It went up huge and it was because they could then … People in, not developing countries, but countries where you’re paying by the megabytes, by the bits now had access to a player which is fantastic. That’s amazing.

Brad Frost It really comes down to the priorities and stuff of the organisation. I’ve just heard some awful things said in meetings and board rooms and stuff are, “We don’t care about this kind of person. We don’t mind about ...”

Justin Avery [mumbles].

Brad Frost Yeah it’s …

Justin Avery I think you tweeted one really, really [00:18:00] horrific one once upon a time. It was about the accessibility of a site, just not good.

Brad Frost Yeah, I ended up writing a pretty inflammatory, purposely inflammatory post about that where it’s basically just running down the list of all the things that these organisations will say, “We don’t care about blind people. We don’t care about poor people. We don’t care about Firefox. We don’t care about IE. We don’t care about BlackBerry’s. We don’t care about whatever.” It’s like, “Just listen to yourself.”

I get where this is coming from. You’re trying to be conscious of time and money and all of that stuff. Don’t say it like that. Ultimately, what I’ve tried to do in those situations, because it’s like, yeah I’m not going to regression and test on every last old crusty BlackBerry that happens to come across. It’s about trying to be considerate and try to support as many devices and environments as possible and scenarios as possible while still optimising for those best case scenarios, the things that make the most sense from business standpoint.

They’re not mutually exclusive, but so often, I’ve seen people use that especially in their earlier days of the mobile web where it’s like, “Oh, you’re not on an iPhone, so therefore you get the table scraps if anything.” Thankfully, over the past of couple of years, I think we’ve seen that mentality change at least a little, at least with the clients I’ve been working with.

Justin Avery Do you think your mentality has been pushing the mobile [00:20:00] first sort of stuff because you started as a mobile web developer and you saw the pain of like that’s where your focus was and you’ve expanded it? Do you think that’s probably lacking in some current web developers, designers these days not having that background in this is really tough, you’re facing web mobile issues that you don’t face normally with a desktop connection?

Brad Frost I think so. I think that a lot of how I think and how I go about my business is very much influenced by being hands-on. I’ll admit that I am not as hands-on these days really testing on just a whole swath of devices, but I used to just have, just everything under the sun and I would see things that no person, no developer should see. Just things breaking all over the place and I’ve gotten very skeptical about, “Oh, you say you support …” Even a minor feature.

For example back in the Web OS days with Palm, if you turn on text rendering optimized legibility, the text would disappear. It’s just straight disappear.

Justin Avery So optimized, you cannot see it.

Brad Frost Exactly. It’s like I’ve just gotten so incredibly skeptical of literally anything working, just even the text rendering on the page that every time I see some crazy, clever, whiz bang techniques and stuff, I’m like very skeptical that this is going to work anywhere outside of the best case scenario.

I will say though, again back to being influenced by actually firing [00:22:00] up these devices and interacting with the things that I’m making on actual devices has very much influenced like how I do things. I think that right now, we do have a crop, a generation if you will of web designers and developers that they have … They’re resizing their browser, they have some sort of Chrome developer emulation tools, they have an iPhone on their pocket and they’ll say, “That’s good,” and that’s their testing environment.

That’s certainly better than not doing any device testing at all, but at the same time, I do think that there is a need for designers and developers, if they really want to see how their creations are being experienced by real people, you need to get on a bunch of different devices and just live through it and you’ll be surprised. You will be very surprised and probably a little shattered at first.

Again, sort of the same way how like back in the day we would figure out how like all the sorts … Like little hacks and little tricks and just things to avoid in order to avoid having to beat your head against the dust dealing with old IE. It’s the same way with a lot of mobile stuff. You just start to gravitate towards certain techniques and avoid other things just because you know it’s going to cause you problems in different environments.

Justin Avery Itself, looking and work those things out through building lends itself to an understanding of some more advanced techniques when building these sites. You’ve looked at … [00:24:00] It’s not so much UA sniffing because I’m pretty sure that’s bad, but feature detection, can that also have these little niggles and problems with …

Brad Frost Absolutely. If you get under the hood for as much as we rally against UA detection, you’d get under the hood of something like Modernizr. There’s sort of plenty of that going on. One example that I’ll give. This is back … I’ve been citing a lot of my work that I did with Nike, but it’s a worthwhile story …

Justin Avery That’s all right. I’m going to ask you about some of your other recent work.

Brad Frost Yeah, all of the … We were doing a mobile design for Nike ID which is you could customize and build your own shoe which is really cool. If you wanted an orange swoosh and then yellow sort of tongue or whatever, you could do that.

Justin Avery Did they ban certain color combinations?

Brad Frost Maybe, I don’t know.

Justin Avery I can just imagine because I know we’re not going to put our name to something like greyish. Fuchsia and purple definitely don’t go together.

Brad Frost I think they sort of embraced it I think. Yeah, on the desktop, it was like this Gigantor Flash widget which is it is what it is and made them quite a bit of money. We are reporting it over for mobile and in order to make it work especially with the existing infrastructure and stuff, we needed to use HTML5 canvass in order to paint the show on to the thing and have it be interactive and all of that stuff.

At the time, we are working with Android 2.1, 2.2 and eventually 2.3. [00:26:00] They’re like, “Sure, yeah we support canvass. Yeah, no problem.” Then you actually test on this device and you’re like … It draws this sort of TV static border around the perimeter of the shoe and it just was chugging and the battery dies after 30 seconds. It was just like … Yes, you say you support …

Justin Avery Technically.

Brad Frost Yeah, technically support canvass but you really don’t. As a result, what do we do? Eventually we white-listed the devices that could handle it and while that’s shunned upon and *gasp/horror* whatever, that needed to happen or I’ll see to have a bunch of really upset people.

Granted that means they don’t get an experience at all, but that’s one case where we thought that having a … Excluding them altogether is better than having them suffer through something that ultimately it’s broken like fundamentally broken, like you couldn’t actually get done what you’re trying to do. We made that decision and I think that that’s perfectly acceptable.

Justin Avery The difference between that like making the decision and then just making the decision by default by not providing … At least you went through that process.

Brad Frost Yeah, exactly. Again, it’s all come such a long way since then. This is several years ago or whatever, but yeah, so many people were just like, “We want an iPhone site. Make us an iPhone site.” Our site needs to look good on iPhones. “Okay, well there’s these other devices out there called …” “No, no, no. I just want an iPhone site.“

Justin Avery Jeremy Keith was talking a little while [00:28:00] ago about they were doing a redevelopment, just a redevelopment of … I know someone came to them for an app and he was recommending doing a web app and they’re like, “No, no, no. Just an iPhone. Just an iPhone.“

They did the iPhone and then six months later they came back and went, “We want a Windows phone app.”  Then they came back with Android and after all of it, they were like, “Hey, there’s this thing called responsive design. Just wondering if it’s like …” oh no, we’re telling you that a year ago. Why have you done this? Why?

Brad Frost Hopefully I got them three times as much money. For as painful as that was, so hopefully that was that at least worked out for them.

Justin Avery I was hoping he had have built them a responsive site to begin with and just put an iPhone wrap around it and then a Windows wrap and then, “Yeah, sure. The responsive design will take three months,” but it’s just sitting there ready to go. Click a button and then the way it goes.

Aside from the work that you have been doing, sort of back with RGA and when I touch on some of the stuff that you’ve done recently since going on your own as well, you do a lot of open-source stuff as well. You’ve got the responsive pattern stuff that you keep up to date and also the sponsor of the show Pattern Lab.

How did Pattern Lab come about and you said … Is it Dave?

Brad Frost Yeah, Dave Olsen.

Justin Avery Dave is taking it to the next level as well. How did it start and what has happened to it since?

Basically, you have these patterns that you establish and then you could simply include those patterns within other patterns and include those patterns in ultimately these templates and pages and stuff like that. That’s really what it was.

Brad Frost From myself, I’m frustrated with my work flow really trying to break things up into smaller bits and pieces and doing so was just a very [00:30:00] manual process. I got this idea to basically … Actually, I started with Jeremy Keith’s Pattern Primer which is essentially just … All it is is it’s a folder of patterns and then he has a little PHP loop that basically goes and grabs all of those patterns in isolation and spit them all out on one page.

That was sort of I wanted to do something with that but then actually be able to use those patterns as actual building blocks in my design. Not like a simple copy and paste job. That’s what I did was took that and built largely the interface which is still alive now.

Basically, you have these patterns that you establish and then you could simply include those patterns within other patterns and include those patterns in ultimately these templates and pages and stuff like that. That’s really what it was. What I wanted to be able to do was have something like a label and input and say instructional text about that field and have that as this isolated chunk, this stand-alone chunk of interface and then be able to include that in a hundred different places.

Then if I wanted to go and make a global change to that pattern, it would propagate out through all the instances of it which up until that point I certainly I haven’t seen a whole lot of things that could do that. I want to say like Dreamweaver and stuff back in the day. We would try to make stuff like that.

Justin Avery Little library includes … ah good times.

Brad Frost The first project I did with … We did a redesign of TechCrunch, [00:32:00] sort of technology blog. It was cool because I was able to … I was working with Josh Clark and Jennifer Brook and Dan Mall and Jonathan Stark to build this thing out. They were extremely patient with me as I was building the tool that was helping us actually build the site right along side with the actual work itself. That was pretty cool.

Then right after that, we worked on a redesign of Entertainment Weekly’s mobile site and sort of same thing where I was able to keep chipping away at Pattern Lab as a project while still doing client work for it. During that time, I started talking to Dave about having him take a look at things. He took a look at things and two days later he’s like, “Yeah, I totally rebuilt.” (laughs)

Justin Avery (laughs) You were doing it wrong?

Brad Frost (laughs) Dave is a good programmer and I am a bad programmer. It was awesome because he just cleaned it all up just in a couple of days, but then really after that, he just hit the ground running with it and basically what I would do was go, “Dave, it would be so cool if we could do X.” Then two hours later he was like, “It’s in dev.” He just make it happen magically. It was just amazing.

That’s what ended up happening is I started went from this really crude you could include patterns within other patterns within other patterns to ultimately construct your design interface system to this really sophisticated tool that allows you to pipe in [00:34:00] dynamic data to these patters.

For example, back to that form input thing that I was talking about. You could say, “Well, I want this input typed to be an email and I wanted to have this label and I want the text to be different.” You could do all that dynamically and separate from the actual HTML which makes constructing your design just so much easier.

Think about if you had to go in to Photoshop and you have … Let’s say you have 10 users and you’re listing them out in a grid. It’s like in you all of a sudden the client says, “We want the text size to be a bit smaller and we want each one of those things to have it to be a circle avatar rather than a square avatar.” You would spend the next hour, right?

You would spend the next hour going in and changing the names and changing the font size and changing the effect around the image. With something like Pattern Lab … Granted that’s maybe not the best example because that’s basically just CSS tweaks. You just tweak a couple of lines of CSS and that’s that, but even if you wanted to change the source order of something or you want to add in additional field to a pattern, you do that once and it just magically propagates through well.

That for me is why it’s such an indispensable tool for me. I do not develop websites outside of Pattern Lab anymore. It’s been really wonderful and again there’s just … He took it to the next level and did all of this stuff and now he’s actually taking the even further and he’s in the process of doing another rebuild of it. Now, like [00:36:00] if you wanted to write your dynamic data in HAML or mark down versus JSON or something, you could do that.

If you want to use handlebars instead of moustache, or if you want to use blade and some other templating engine, you could use that instead of that. Again, he has hit the ground running with it and it’s been awesome to see it evolve which is great.

Justin Avery Again, casting a wider net of who people that can use it I suppose if their talents are in different languages.

Brad Frost Exactly. He’s already done a lot of great work, but it very much sort of dev tails really nicely into your Grunts or Gulp or whatever work flow. He’s getting to a point where however you work, Pattern Lab can jive with that. You don’t really have to do too much of anything to have that in your work flow. It’s not like, “Oh well, we don’t work with this stuff and this stuff or whatever.” He’s making it so whatever you’re comfortable working in, it will work which is awesome.

Justin Avery Are there different entry points for Pattern Lab? I talked to you just before this podcast around sort of like beginner, intermediate and advanced things that you can do around responsive design. Is there a steep learning curve to Pattern Lab or are there entry points that you could take and take a snippet out of here or go the whole hog?

Brad Frost Yeah. I’m an idiot.

Justin Avery Me too.

Brad Frost I love talking to Dave about that because basically what will often happen with software, you go to the website for and it’s like, “It’s super easy. Just simply NPM, install, blah-blah-blah.” They just have this tunnel vision and forget that that not everybody [00:38:00] is some advanced Node programmer or whatever.

That’s always been a really big jiving point for the philosophy of Pattern Lab is that I want this thing to be as easy to use as possible. As accessible to people who might not have the best chops and have all this server configuration and all of this. Dave was able to make it work where basically PHP was the only dependency. Not even like Apache or anything was required in order to get up and running with it which is really cool.

I’d say that the beginner Pattern Lab work flow is to just simply construct some patterns, include them inside other patterns and essentially make some pages out of that. That would be something that very 101 that anybody could really do with a little bit of know how of just here’s what an include looks like. If you’re going to include your header in your page template, here’s how that works.

I would say that that’s the entry point, but you can very easily get pretty sophisticated with it. Again, still working with all the dynamic data stuff. For example, your client wanted to see … Let’s say you’re making them a blog and they want to see what a comment thread looks like and they want to see a couple versions of it. They want to see what the comment thread looks like when it’s empty versus whenever there’s a hundred comments versus whenever there’s a bunch of nested comments.

With Pattern Lab, you could actually do that [00:40:00] and actually construct these things pretty easily. Again, using this dynamic data so you can pump in a new profile picture for the commenter, a new name, a new time stamp, a new comment entry and do that and repeat that a hundred times or whatever and then you could show your client this is what that looks like.

That’s pretty cool and I will say that that’s a little more advanced, but then there’s also other things you can do. There’s things like pseudo-patterns and pattern partials and all sorts of stuff that Dave has made. I guess he just hit the ground running with it and it’s just been awesome.

We’ll say in advance, Pattern Lab technique. Let’s say you have … You’re viewing your user’s profile, that might look different, you might include different buttons or different pieces of the interface based on whether or not you’re an administrator or just a user. You could basically create these pseudo-patterns to be able to show … To basically be able to flag something. I’ll do something like user is admin, true. By doing that, it will automatically reveal all of these buttons.

Justin Avery You say like publish this comment or mark as spam or …

Brad Frost Exactly. As a user, you wouldn’t see that stuff, but again it’s all still part of the same template. You know what I mean? It’s not …

Justin Avery It’s made up with the same atoms and molecules, but …

Brad Frost Right. That’s the idea about this and what excites me so much about it … Actually, I have a blog post in the works about it and I hope to get it up the door soon. It provides what I see is this very necessary middle step between … Sort of just doing all [00:42:00] of your front-end work sort of like statistically and not dynamically. Not really taking these dynamic data things into consideration or these variations of a template into consideration versus integrating it with Drupal or WordPress or whatever CMS and then figuring out that your design doesn’t work there.

Justin Avery With real concerns.

Brad Frost Right. You might have a WordPress install and then all of a sudden, you could show your client the comment thread and they might hate it, but because it’s tied into the back end that there’s just a lot more stuff to trip over and there’s a lot more stuff to do, so that’s why I think that Pattern Labs sits really nicely in the middle between providing the ability to do a lot of this dynamic stuff without having to setup a database and setup all these crazy stuff and integrate it with the actual CMS and all of that stuff.

I like that. It allows you to still be nimble because you’re just working in front-end stuff.

Justin Avery Do you approach, because the Pattern Labs starts really small, so with your atoms, do you start your design with Pattern Lab itself and if you are doing it in that way, do you approach at designing a site with the desktop version in mind or the mobile version in mind or you have a general idea of how the entire things going to look before you jump in and start building these tiny little elements which make up the bigger picture?

Brad Frost There are few things there. My process, my work flow typically starts in Pattern Lab. The atoms, the smallest bits, your elements, your labels, your H1 through H6 paragraph [00:44:00] block code all of that stuff. You know you’re going to have a lot of those things in place. Those things, I’ll just have as a blueprint, as sort of a starting point and ultimately atoms are not really so much practical the same way that the other steps are.

They’re there more or less as a reference or it’s like, “What does my H1 look like? Oh, there it is.” You know what I mean? I’ll start there and have these bits and pieces set up and evolved those over time. For example, for adding a new image type, “Okay, well now we need a large avatar or we need a hero image or we need this. It has these dimensions, that will come on as a new atom.”

I’ll start there, I’ll establish, I’ll set up Pattern Lab, I’ll have some patterns to get started with and what I’ll start to do is start to sketch things out almost very wireframey, just blocking things out and I’ll do that …

Justin Avery Would you do that in Pattern Lab or sketching?

What we’re trying to do is just say like, “What content needs to go here and in what general order?” Having that conversation first in text is a hell of a lot better than trying to come up with a comp and then them saying, “Well, I don’t like that shade of blue.” In fact, you’re trying to get them to comment on does this content deserve to be here.

Brad Frost It’s a combination. It depends on who I’m working with too, because often times, I’m working with people that don’t work this way. It’s a personal work flow, but if it’s just me or me and my wife working on something, I’ll start in Pattern Lab, I’ll sketch things out in code and basically just have these big gray blocks that says page title, mission statement, more content, associated stuff and just get everything present and accounted.

I do that in a very mobile-first way wherever … It basically just reads as a bulleted list [00:46:00] and it’s very conducive to what Steven Hay talks about with his work flow. Wherever you start in text and just get everything present and accounted for. It’s like the homepage, what goes on the homepage. We’re not even considering what the thing looks like, how it’s laid out, any of that stuff whether there’s images or not.

What we’re trying to do is just say like, “What content needs to go here and in what general order?” Having that conversation first in text is a hell of a lot better than trying to come up with a comp and then them saying, “Well, I don’t like that shade of blue.” In fact, you’re trying to get them to comment on does this content deserve to be here.

That’s what I’ll do is I’ll make this stuff, I’ll sketch out these gray blocks and then ultimately we’ll start going through and iterating those things and I’ll start to establish patterns for some of those shared blocks and start to include those. It will still be a grayscale and blocky or crappy locking, but I’m just wiring things up.

Say for example on seven templates, I have a newsletter sign-up form. That is a shared widget or pattern. That newsletter is sign-up form. I’ll go through and I’ll make that its own pattern and then include it in those seven templates. Then as I go through and keep iterating, I will eventually replace that grayscale block with the actual markup of the newsletter sign-up form and then eventually as the design evolves, it will get prettier and …

Justin Avery Add pretty colours.

Brad Frost Yeah and then add the validation and do all the dot stuff and eventually be left with the final thing. That’s generally my [00:48:00] process. It all start in Pattern Lab, it’s as like wireframes, but then slowly but surely over time, it will evolve out of the wireframe into something that’s working and will ultimately be the final front end code.

Justin Avery I think it’s a great way. That’s a really great way of working. I’m just looking at the time. We’re comping up on an hour shortly. I had a couple of other … There’s two random questions at the end for you which is kind of fun, but one of the things I wanted to talk quickly about is the responsive images stuff and especially around the work you’ve done with Entertainment Weekly and TechCrunch.

This started came out when I was speaking with Jeremy Keith and I was thinking how with picture, it’s great how we can now with the source set, we can describe how wide the images are with our W descriptor and then within the sizes we’re saying what all our viewports are and the actual size of those.

Somebody might have min-width 45EMs and within that we want an 800 pixel image or that’s how much space we’ve got. I feel that with the picture are now putting more … We’re almost including design within the HTML. Those decisions get made at the design level and if we change that design, all of a sudden, the picture element is now made up from things which were from a formal design, so we have to go back and change the markup which I don’t really like the thought of.

One of Jeremy’s comments was around … They are not images, so for … This is the example of Entertainment Weekly. You’ve got thousands and thousands of articles and each article has an image associated with it. On the news pages, [00:50:00] are the images actual content or are they decorative? If they’re decorative, do you then include them as part of the CSS and if so, do you include it a part of an entire CSS file or do you start looking at in-lining that CSS?

Have you encountered this? Did you guys talk about this when you are building TechCrunch or Entertainment … They both were kind of similar newsy sites.

Brad Frost Yeah. Actually, TechCrunch ended up being pretty aggressive with treating the thumbnails on the homepage as decorative. That follows what the BBC team and their mobile responsive site has done. By default, the BBC homepage only has one image in the DOM which is pretty wild.

Basically, if the environment, Cutting the Mustard as they so aptly called it, they’ll pipe in all those other images which they treat as enhancements, but by default, they’re just … All a lot of those like lists of news are are just simply like text lists of links.

With respect to TechCruch, that’s the approach that they took because they have a pretty sizeable DOM already. One of the things that they did in order to keep performance there is we had the featured stories images, they’re present in the DOM, but then pretty much every other image on the homepage gets lazy loaded.

Granted they’re still showing up as images, I don’t have any specific comment on doing those as CSS versus as actual HTML images. I don’t think I have a preference really, but I could see it [00:52:00] … I could see the argument either way, but at the same time, treating some images as auxiliary I think is totally fine.

Justin Avery It is the approach. It seems like a good idea.

If you’re showing a picture of a horse and that’s semantically important to the article or whatever, then that needs to be a picture of a horse.

Brad Frost I think so. Again, it’s about knowing where to do that. If you’re showing a picture of a horse and that’s semantically important to the article or whatever, then that needs to be a picture of a horse. I actually started to use that same example whenever everybody is creating their own hair-brained responsive image solutions where it would say, “Just have everything as a background image and so on.” It’s like, “No …” A picture of a horse needs to be a picture of a horse, or else it’s not a picture of a horse, right?

Justin Avery Is it the content? I suppose the first thing you ask why is it part of the story, is it content and if it is, then it’s content.

Brad Frost Exactly.

Justin Avery Put content where it belongs.

Brad Frost Yeah, but if it’s just like a list, that’s a list of link and a list of links and those images are more or less there to provide a little eye candy, it’s an enhance for sure. I think that that’s personally a really clever way to sort of whack off a bunch of different images from the DOM and not have to load 100,000 of them.

Again, in the case of TechCruch, we just have a massive, massive homepage and we’re pretty concerned about the performance of it and I’d say that Jonathan who was doing the Javascript and the team doing the integration did a pretty damn good job balancing the size of the [00:54:00] homepage with sort of like lazy loading those images so that it still feels fast even though it is a pretty sizeable page.

Justin Avery And it seems to work well as well like the images themselves that even though they’re being lazy loaded, it’s not one of those pages which just stutters as images come in like the space for the image is taking up already.

Brad Frost Yeah, like including a placeholder and stuff like that is a good idea and just making sure that things don’t jump around whenever the images are present. Yes, I think that that was a smart way to handle it, so kudos to them, they did a good job with it. I know that I certainly was worried about having a multiple meg page.

Justin Avery Especially with your name up against it. You might end up on your own WTF Mobile Web. I think TechCrunch is the same one where you do the lazy loading of the social sharing buttons as well. Was it that one?

Brad Frost Yup. I want to say that they might have commandeered some of that stuff. I think that we had maybe more of a custom button solution which is obviously a lot lighter and then I want to say that they did make the executive decision to include those third-party widgets either on hover or maybe just exposed it by now.

Justin Avery Yeah, it was definitely on hover. Yeah, because I did something about that last year. I just thought it was a really, really nifty technique of still letting the client get that iframe and liking it on the page without …

Brad Frost That’s Zach Leatherman who works at Filament Group … What’s it called? The Social Counts is like a plug-in that they did. Social Count [00:56:00] …

Justin Avery Part of … It’s part of that South Street stuff I think.

Brad Frost Yeah, Social Count is the name of it, but yeah this is sort of the same thing where like basically on hover, it takes … It could go and actually fetch the number of likes, the number of tweets and all of that stuff, but it’s still … You’re not loading in the whole kit and caboodle, but then whenever the user hovers over that, they can pull in the actual need of Facebook widget or whatever which I think is really, really smart.

Justin Avery Especially, they can be super size and also very blocky, as in blocking the rest of the page from coming down.

Brad Frost Zurb a couple of years ago, they did an analysis on loading in for social networks. I want to say it was like Facebook, Twitter, Google+ and something else. It actually might have just been those three widgets weighed something like 260k. It’s just insane. We just sort of just slapdash, throw those on to our pages. It’s like, “Sure, let’s make it social.“

Justin Avery In every page and in the footer [crosstalk 00:57:10] we find. I would love to keep talking to you for longer, but it is getting up towards the end of the hour and I do have two particular questions. Neither of them are super long, but one of the questions that we had in here … This is a scenario sort of thing.

Have you heard the story of the Buddhist hanging off the … I don’t know if it was Buddhist, but hanging off the edge of a cliff holding on to a branch with arm and there’s a beautiful strawberry and he reaches up and grabs the strawberry. Have you ever hard that title?

Brad Frost No.

Justin Avery That’s a bad description of it, but I’ll send you the link of that, but can you imagine this with you, you’re hanging on the edge of a cliff, one arm on a branch and you’re slipping with the other and you can’t quite grab the top, but two things come down to help you out. On one side, you can either grab [00:58:00] the Owl responsive carousel and on the other you can grab the FlexSlider 2 responsive carousel. What do you do Brad? (laughs) Which carousel are you going to include?

Brad Frost It’s falling to my death an option? (laughs)

Justin Avery I actually had falling to the death, yeah.

if they are going to save my life for at least keep me from getting fired or whatever, I would implement the appropriate carousel.

Brad Frost There we go. I think that’s my option. There’s a time and a place for everything and if they are going to save my life for at least keep me from getting fired or whatever, I would implement the appropriate carousel.

Justin Avery But suddenly falling the death is definitely an option when carousel has come to it.

Brad Frost Well, sometimes you got to do the brave thing.

Justin Avery Stand for what you believe in and go over there. The last question was from one of our previous speakers which is which is your favorite Star Wars movie?

Brad Frost I get ragged on quite a bit because as a web designer, you’re supposed to be a big nerd.

Justin Avery You’re not going to be one of those guys. You either hasn’t seen any of them?

Brad Frost No, I have seen them, but I just don’t worship at the altar (laughs) of George Lucas and all that. I enjoy them, but the same way that I would enjoy any other movie. This always comes up with you with Star Wars or Star Trek whenever they’re like, “What? What? You’re not a massive fan?” It’s like, “No, they’re good movies. I enjoy them. They were fun and groundbreaking and all of that and so I could appreciate them. I’m not just like a massive fan boy of them.”

I would probably say New Hope is a great one. I think that … I’m sure that I’ll [01:00:00] get some kudos points for saying that, the sort of new ones, especially the Jar Jar Binks one was a little too ridiculous but …

Justin Avery I had to clarify the question as to whether it was the last three or the first three. They left it open, but I’m glad. I am personally glad that you chose one of the last three in the series I suppose, not in the corner of being made, but that’s awesome.

Thank you very much for joining me today. Thanks for your comments, thank you for your stories. I’ve definitely learned a couple of things I’m sure. A lot of the listeners out there would have learned a few things as well. Have you got anything coming up that you’re releasing apart from this blog post which I’m now really keen to read about Pattern Lab? Have you got things coming out, products, or you’re talking soon, what’s happening with Brad in the world of Brad?

Brad Frost Yeah, there’s going to be a bunch of stuff coming up. Next week, I’ll be speaking at An Event Apart in Chicago which will be a lot of fun and after that in September, I’ll be speaking at ARTIFACT Conference which is a wonderful conference as well.

Somewhere in between, I’ll be moving into a new place, but then we’re also wrapping up the Pittsburgh Food Bank project which we’ve been …

Justin Avery That’s been going on for a while isn’t it?

Brad Frost Yeah. It’s been a little … It’s always a little tricky doing pro bono work. It often times takes the back burner whenever you’re trying to get other things done as well, but yeah we’re planning on launching that next month which I’m really looking forward to and trying to furiously finish that up.

I’m personally really excited about that and excited to hopefully write a lot more [01:02:00] about that and even talking what we’ve talked about earlier with respect to process and stuff like that. We’ve been documenting our process through out so you could actually step through and see how our designs have evolved from these very static grayscale wireframes in the browser, all the way up to the final code. Yes, I’m really excited about that and really excited to get that out to the world.

Justin Avery I was going to say, if you got case studies coming out, it would be so good to take those out. Make sure send us a tweet or something so we can include it in the Responsive Design Weekly. I’m sure I’ll find it in your RSS feed anyway. That would be great. Thank you again.

The last thing is you’ve got the next question to pass on to the next guest. If you’ve got one to mind now, otherwise you can send it through to me afterwards.

Brad Frost Maybe I’ll ask something that’s … It’s a little deeper than what’s your favorite sort of Star Wars movie. One of the things that I struggle with is there’s a flood of new stuff out there always and I feel like you get your head around Grunt and all of a sudden there’s Gulp and now you need to be on Gulp and now there’s Blockly. It’s crazy.

I guess my question is what is worth pursuing? How do you decide what tools, techniques, best practices, languages, all of that stuff, how do you decide which of those to use [01:04:00] in a world where it’s just being bombarded with 17,000 options every day?

Justin Avery That is an excellent question. That is a good question. I don’t know the answer to that, so I’m looking forward to hear the answer. At least, I’ll take on the answer from the next guest which will be awesome. All right, thank you very much again Brad. Yeah, thank you for all the wonderful work that you’re doing in the web development community, all the free stuff that you’re doing and writing about the paid stuff that you’re doing. It’s awesome.

Brad Frost Yeah. Thanks for having me Justin.

Justin Avery No problems at all. All right, thanks Brad and thank you for everyone for listening in this week. We’ll be back again next week with another exciting podcast with another exciting guest. Until then, thanks very much. Cheers, bye.