Treehouse Friends

Welcome to another episode of Treehouse Friends.

I'm Randy Hoyt, and today I'm joined by designer Brad Frost.

Thanks for joining us, Brad.

Thanks for having me, Randy.

Would you mind telling us a little bit about your background, what you do,

how long you've been working on the web.

[Brad Frost, Mobile Web Strategist, Designer]

Sure--I've been working on the web since 2007 and got my start

doing real estate websites right as the bubble burst, so that was fun.

Then I moved to New York City and worked at an ecommerce shop

and then worked at a large agency called RGA, and I was actually there for

a few years and then actually just recently set out on my own,

so now I'm self-employed, so--

Excellent.

--lots of fun.

That going well so far?

It's busy (laughs).

>>That's to be expected though, I suppose. >>Absolutely.

But yeah, it's a whole lot of fun.

It's nice to be able to set your own agenda, for sure, so--yeah.

We're here at In Control in Orlando, and Brad's giving a talk.

Can you tell us a little bit about the talk that

you'll be giving here at the conference?

Yeah--it's sort of a broad topic, Mobile Web Best Practices,

so I actually made a site several years ago, actually, about sort of

tips and tricks and recommendations and considerations for creating things

for the mobile web.

At the time, it was really only sort of a handful of people that were actually

working in that area and sharing knowledge and stuff,

and I kept fielding the same questions over and over and over again

from my colleagues--

"Hey, what do we do about forms?"

"How do we treat navigation?"

"How do we do--" this, that, or the other,

and so instead of writing the same email 50 times,

I decided to make a website about it.

So that's was sort of the genesis of that and so this talk is sort of a

broad overview of all the different considerations for dealing

with our multi-device world.

So--everything from strategy through design best practices and

development best practices and all sorts of stuff, so--

What are a couple of things that you think people have really started to get right

and what are things that people are still really doing wrong?

One of the things that I'm really excited about is that

you no longer have to twist people's arms to get them

to pay attention to mobile.

It's here and you still have a few laggards that are saying,

"Oh, well, you know, it doesn't really matter that much."

Very, very few people are saying that, so I'm really excited that

I think that everybody understands that this is a fundamental change

and not just sort of a "nice to have" or an add-on, so I definitely say

that's one of the things I'm most excited about, but I still think that

people fall short a lot.

I think that you see sites with between 10% and 20% of traffic coming from

mobile devices and as a result, it gets 10% to 20% of the attention

and 10 to 20% of a budget and all that stuff, so that in the broadest

sense, I think, is my biggest concern--is that people still aren't

skating to where the puck is going.

They're sort of just looking right in front of their hand, so--

And mobile and responsive design are big topics among developers

and designers, but among clients, what are clients asking for

in this area?

I know that they're thinking more about mobile.

What are they thinking or what are the things they're requesting?

Yeah, there's still, I think, a lot of confusion where as soon as you say

"mobile," they're like--app!

We need to have an app, and that just isn't the case really.

That's not to say that apps aren't valuable and stuff, but I do think that clients

have this sort of myopic view of what's available--

what the toolkit available to them is, and as far as the web front goes,

I do think that responsive design has gained quite a bit of traction.

More people are talking about it.

I read a lot of news about responsive design and a lot of the sort of

"executive level" writeups on responsive design.

It makes me wince a little bit, and so I do think that there is a long way

to go to educate clients to basically what the web means in this

multi-device world, how they can put their stuff in front of more people,

why that matters, how people use devices, and how people sort of

seamlessly transition between devices to do a single task, for example.

I think that's all still very, very much in its infancy.

I think that you still get a lot of clients saying, "Well, mobile users only

want to do certain things," or "We'll add these 4 features and just

forget about the rest," so they're not really thinking holistically still, I think,

but I do think that they are acknowledging

they need to do something.

It's just a matter of how good they are at planning out into the future versus

"We need to do something in a very reactive manner."

Last fall before the election, you had written up a post for Smashing Magazine

comparing the 2 mobile strategies for the candidates--one being a responsive site,

and one being a separate mobile site.

Even though the election's gone, I still think we're at a place where

that's a good discussion to have.

What are your thoughts about that today, here, a few months after the election?

Yeah, responsive design won the election--no.

It's interesting and the reason why the subject and the topic was so

attractive and to put it into that lens is that very seldom--

maybe this might be one of the only examples--

is an example where 2 sites--2 different sites--are trying to accomplish

the exact same thing, reach the exact same audience, exact same goals,

exact same content, more or less.

Obviously, the differences between the candidates were apparent,

but at the same time, from a web strategy standpoint--very, very rarely

do you have this apples-to-apples comparison, and they took

2 different approaches, which is great because there are all these control

variables that aren't normally there because even if you look at, say, a hotel.

One hotel is going to pitch itself as being a little more luxury or more affordable

but also just the difference in time, right?

You know, the mobile landscape changes weekly.

You know what I mean?

It's nuts, so you can't even make a comparison of--like, "Oh, well, we did

have a separate mobile site and then we made a responsive site,

and here's the difference."

It's like--well, you're in a different time and place now.

So that what was so attractive about it and to really be able to put them

against each other, and they both had their pros and their cons, and

it really kind of came out to what really matters with a mobile web experience,

what goes into making a great experience, what are some of the

common pitfalls and stuff, so it was a lot of fun to explore, so--

Which would you say users prefer to have--a separate mobile site

or a responsive site?

They don't care--they honestly don't care.

What they care about is, can I get the information I need?

Can I do what I came here to do--period.

It's sort of a tough pill to swallow.

You know, people say, "Oh, well, Brad's a responsive design man," whatever.

You can make a separate mobile web experience that achieves content parody,

meaning that the experience is optimized by--it's on an entirely separate

code base, an entirely separate template, and users aren't really going to know.

But the problem is in literally every single example of a separate mobile website,

is that it just opens the door for these issues wherever parody isn't achieved,

so that's sort of the biggest thing and certainly, Mitt Romney's separate

mobile website suffered from that.

Wherever certain things were available on the desktop site, but they were

nowhere to be found on the mobile version, so--

What things would you consider when trying to decide between

a responsive site and a mobile website?

Is there one that's more often the best solution?

I would say for responsive by default, just in general again.

You don't have to maintain a separate code base.

You don't have to sort of do double duty.

I've seen separate sites so where the desktop site is advertising

Valentine's Day but the mobile site's still stuck on Christmas, stuff like that.

But at the same time, very often it's really not a matter of, I think, technical

consideration that determines what strategy you're going to do.

It's more organizational, so can you go into work on Monday and totally

bulldoze your site and put in place a new shiny website?

Is that just--from an organizational level, is that possible?

Very rarely, so you have sort of this mobile website, this separate thing

coming in to sort of stop the bleeding, so to speak or to react to

the rise of mobile, but at the same time, that doesn't

have to be to where you stop.

You could actually use that separate mobile website as sort of a

step in a responsive direction, so eventually--I call it "planting the seed"

towards a responsive future where you could say, you have this separate

experience; yes, it might be limited; yes, it might be lacking,

but at the same time, you're learning about how to build and design for mobile,

you're learning about your audience's behaviors on mobile,

you're learning a whole lot of stuff and just dealing with the pain of so much

diversity in that whenever the time comes to do a big redesign,

you have that.

It's better to do that, I think, than to just sit on your hands and wait

for that big redesign project to come through because it just rarely doesn't.

I went to a conference probably a year ago, and they had 2 sites:

a desktop and a mobile site.

The mobile site had a lot less content, very focused on schedule and speakers,

but then the desktop site was also responsive, so if you did want more

information and you were on your mobile device, you still went there and the site,

the full site, still worked well on the mobile device.

Yeah, and I think that what you're talking about, what you're describing is

sort of the difference between an app and a site.

I think that those two are often conflated.

I see a lot of--just even like news sites and blogs and stuff that try their

damnedst to be an app, and they shouldn't be really, but at the same time,

you can create a separate app experience that is a focused experience,

it shows you the schedule, it shows you the here-and-now, it focuses on a

few set core tasks, but then you still need the breadth of information that's

provided in a site.

For example--like, I use Artio as an example.

I was getting bombarded with all these emails from them.

"Here's what your friends are listening to," and stuff like that, and I'm like--

"Man, these emails are getting annoying," and I go to--it said,

"Update your email preferences," so okay, did that, but I was on my phone,

and I go and I get blocked because they just want me to download the app.

Well, the app doesn't provide the "update your email preferences,"

so I couldn't do anything until I got onto my desktop computer, so that's annoying,

so I do think that's there's a difference between providing a core app-like

experience and providing--like, all your legal information, your privacy policy,

or about your company, and all of that stuff.

That needs to live somewhere.

You're not going to cram it all into an app, so I do think that apps

are super valuable, but I don't like it whenever people try to

conflate the two.

Gotcha--you run a site called, "This is Responsive," which contains

responsive patterns.

Could you tell us a little bit about how that site came in to being,

and what its current status is?

Sure--the agency I was at--I played a very sort of unique role in that I sort of

floated around between accounts and saw sort of the direction

people were going in but also some of the things they were struggling with,

and 1 week everybody just seemed to be hitting their head against a wall,

trying to figure out responsive bread crumbs like navigation between

parent and child sort of elements, and what I found was that, you know, I said,

"Well, I could help solve their problems individually, or I can sort of create

sort of abstractive solutions to this problem," and so that's what I did.

I sort of set out and I made this sort of black and white, grayscale,

sort of neutral pattern library with--here's 3 different ways to sort of

treat bread crumbs.

Then I've also written about different navigation patterns for

responsive design as well as other things, and other people have written

about layout patterns and other things and stuff, so basically what I did

was I sort of took all that stuff and abstracted them and created this library

of these responsive patterns and encouraged other people

to contribute theirs as well, and so basically, where it's at now is that

basically anybody can contribute to this thing.

If they've created a whole new solution to deal with say, a carousel

or to deal with accordions or tabs or whatever, they can contribute

a pattern to the library, which is great because it helps everybody else

that's dealing with the exact same problem, so that's sort of why it came into

existence and that's why it continues to be useful, so it's great.

I love it whenever people submit patterns--it's just, you know,

here's a novel way to do this, that, or the other, so it's great, so.

And that's on GitHub, is that right?

Uh-hunh (affirmative), yep, yep--so anybody can contribute.

I need to make it easier because--the GitHub thing is great, but it's ultimately--

I'm just using CodePen and other sort of tools like that,

and people are free to use whatever as long as it's just sort of

an abstracted pattern.

It could be self-hosted or whatever.

Basically, all I need is a link to it, so--

But yeah, it's all totally open source, but I need to work on it to make it

a little more apparent that you can contribute to it, so that's--like, Phase 2.

And is that managed with source control?

People submit pull requests for the new patterns?

Yeah, they can, but they could just as easily email me or tweet me a link

or something, so--I'm pretty good at--especially with--like, with a new pattern

but it also has like a big resource center on it, so if you want 17 articles

about how to do responsive data tables or if you want sort of more

big picture stuff--like, "Well, where do I go to learn 101 stuff about

responsive design," I basically have just a whole page there, so that stuff,

again, anybody can contribute a link to it, which is great, so--

Excellent--1 thing I've seen you write about a lot recently is about Photoshop

and the role of Photoshop in design now that we're designing

for mobile and responsive.

What are your thoughts on that?

Is designing in the browser something you do exclusively now or

where do you stand on that process?

I mean, it really depends.

If it's a personal project, and it's just me working on something,

I'll design in the browser because I have that luxury, but obviously, whenever

you get into a client situation or something, that's a much different story.

I do think that we need to evolve the design process beyond the days of

creating full Photoshop comps and presenting them to clients, hanging them

on the walls like paintings and getting them to sign off on it.

It's not true to the web.

You're not signing off on a website.

You're signing off of a picture of a website, and now what you're seeing--

what responsive design in just this multi-device world,

what you're seeing with it is, now you're seeing people mock up the Sumo display

version, and the iPad display version, and the iPhone version, and they

sort of tilt them, but it's all still a comp--it's still an abstraction.

It's just an entirely false way of presenting what a website is going

to ultimately be.

So it's not about designing in the browser, but it's about being smarter

about how you use a tool like Photoshop, so I still think that Photoshop

is really valuable for what Andy Clark calls, "creating the design atmosphere,"

so your colors, your textures, your sort of typography, your just basic

sort of rhythm and look and feel, but it doesn't make sense that

just because you're doing that in Photoshop, it doesn't mean that you have

to see that all the way through and then end moving things around 2 pixels

to the right or 2 pixels to the left.

That's just, I think, a fool's error in this day and age.

I don't think it make the best use out of really talented designers' time.

One story I have is--a client came back.

It was a mobile site, and it was all in comps, and the client requested that

all of the body copy be bumped up a point size, and so she had to go

through 60, 70 different PSDs and update every single instance

of text fields to represent this client request.

It was just nonsense.

She now works at Apple.

You know, this isn't a production artist, somebody like an intern or something.

This is an art director with a lot of experience using her time

extremely poorly, and so I do think--my friend, Dan Ball, sort of wrote

a followup post to mine about really how it comes down to setting expectations.

It's about helping the clients understand that getting things into the final

environment is a better representation of what they're going to be seeing,

being able to sort of feel things on their actual phones, on their personal

device--they're able to get a much better sense of what their

website's going to be a lot sooner, but you have tools like

Style Tiles, you have tools like, again, Dan Ball, created element collages

where it's--like, he'll give sort of like a taste of a part of the website,

so if it's an article or something, he'll show the headline, the author,

the body copy, so you still get a sense of the visual rhythm of all the

typography, of just sort of how things flow, how things look, but

he's not going through and designing the entire header, the entire footer,

every single item in the side bar.

It's not that comprehensive, but he's still giving them a visual direction,

and then whenever they're sold off on that general direction,

that's when everyone will switch gears and go into the browser and sort of

finesse things from there.

So there's still an important role in Photoshop, but I think it's about being

smarter about how we actually use it, so--

And what tools or software do you use for designing in the browser?

It doesn't matter. (laughs)

It's Text Editor and I did make the jump over to SASS, so that's something

that's a tool in my tookit now, but ultimately it's just--I get asked that a lot,

and I'm always leery about--because I haven't tested every single tool

out there and stuff

I use what works for me, but that's when turf wars happen as people say,

"No, this tool is better, " "This tool is--",

It's all HTML, it's all CSS, it's all Javascript, but SASS certainly

makes things easier, so--

Excellent--well, thank you so much for your time, Brad.

If people want to follow you to keep up with the mobile responsive--

I know you tweet a lot of content about your blog.

That's one of the ways I keep up with what's going on with responsive.

Where can they follow you?

I'm on Twitter at brad_frost, and my website is bradfrostweb.com, and those

are really the 2 areas that I spend a lot of time in, so--yeah.

Great--well, thanks a lot.

Yeah--thanks for having me--yeah.

This has been another episode of Treehouse Friends.

Join us next time.

Treehouse Friends