You've already started watching Dealing with Our Multi-Device World - Brad Frost
Brad Frost talks with Treehouse Teacher, Randy Hoyt, about how people use mobile devices, setting client expectations, and whether you should build a mobile app, a responsive site, or a separate mobile site.
-
0:03
Treehouse Friends
-
0:19
Welcome to another episode of Treehouse Friends.
-
0:21
I'm Randy Hoyt, and today I'm joined by designer Brad Frost.
-
0:23
Thanks for joining us, Brad.
-
0:25
Thanks for having me, Randy.
-
0:26
Would you mind telling us a little bit about your background, what you do,
-
0:29
how long you've been working on the web.
-
0:30
[Brad Frost, Mobile Web Strategist, Designer]
-
0:33
Sure--I've been working on the web since 2007 and got my start
-
0:37
doing real estate websites right as the bubble burst, so that was fun.
-
0:44
Then I moved to New York City and worked at an ecommerce shop
-
0:47
and then worked at a large agency called RGA, and I was actually there for
-
0:54
a few years and then actually just recently set out on my own,
-
0:58
so now I'm self-employed, so--
-
1:00
Excellent.
-
1:01
--lots of fun.
-
1:02
That going well so far?
-
1:03
It's busy (laughs).
-
1:06
>>That's to be expected though, I suppose. >>Absolutely.
-
1:09
But yeah, it's a whole lot of fun.
-
1:10
It's nice to be able to set your own agenda, for sure, so--yeah.
-
1:16
We're here at In Control in Orlando, and Brad's giving a talk.
-
1:19
Can you tell us a little bit about the talk that
-
1:20
you'll be giving here at the conference?
-
1:21
Yeah--it's sort of a broad topic, Mobile Web Best Practices,
-
1:25
so I actually made a site several years ago, actually, about sort of
-
1:31
tips and tricks and recommendations and considerations for creating things
-
1:35
for the mobile web.
-
1:36
At the time, it was really only sort of a handful of people that were actually
-
1:41
working in that area and sharing knowledge and stuff,
-
1:44
and I kept fielding the same questions over and over and over again
-
1:48
from my colleagues--
-
1:49
"Hey, what do we do about forms?"
-
1:51
"How do we treat navigation?"
-
1:53
"How do we do--" this, that, or the other,
-
1:54
and so instead of writing the same email 50 times,
-
1:58
I decided to make a website about it.
-
2:00
So that's was sort of the genesis of that and so this talk is sort of a
-
2:05
broad overview of all the different considerations for dealing
-
2:12
with our multi-device world.
-
2:14
So--everything from strategy through design best practices and
-
2:18
development best practices and all sorts of stuff, so--
-
2:21
What are a couple of things that you think people have really started to get right
-
2:24
and what are things that people are still really doing wrong?
-
2:27
One of the things that I'm really excited about is that
-
2:31
you no longer have to twist people's arms to get them
-
2:34
to pay attention to mobile.
-
2:36
It's here and you still have a few laggards that are saying,
-
2:41
"Oh, well, you know, it doesn't really matter that much."
-
2:44
Very, very few people are saying that, so I'm really excited that
-
2:49
I think that everybody understands that this is a fundamental change
-
2:53
and not just sort of a "nice to have" or an add-on, so I definitely say
-
2:58
that's one of the things I'm most excited about, but I still think that
-
3:02
people fall short a lot.
-
3:06
I think that you see sites with between 10% and 20% of traffic coming from
-
3:13
mobile devices and as a result, it gets 10% to 20% of the attention
-
3:18
and 10 to 20% of a budget and all that stuff, so that in the broadest
-
3:24
sense, I think, is my biggest concern--is that people still aren't
-
3:28
skating to where the puck is going.
-
3:32
They're sort of just looking right in front of their hand, so--
-
3:35
And mobile and responsive design are big topics among developers
-
3:40
and designers, but among clients, what are clients asking for
-
3:43
in this area?
-
3:45
I know that they're thinking more about mobile.
-
3:47
What are they thinking or what are the things they're requesting?
-
3:49
Yeah, there's still, I think, a lot of confusion where as soon as you say
-
3:54
"mobile," they're like--app!
-
3:56
We need to have an app, and that just isn't the case really.
-
3:59
That's not to say that apps aren't valuable and stuff, but I do think that clients
-
4:04
have this sort of myopic view of what's available--
-
4:09
what the toolkit available to them is, and as far as the web front goes,
-
4:16
I do think that responsive design has gained quite a bit of traction.
-
4:20
More people are talking about it.
-
4:22
I read a lot of news about responsive design and a lot of the sort of
-
4:27
"executive level" writeups on responsive design.
-
4:31
It makes me wince a little bit, and so I do think that there is a long way
-
4:36
to go to educate clients to basically what the web means in this
-
4:42
multi-device world, how they can put their stuff in front of more people,
-
4:47
why that matters, how people use devices, and how people sort of
-
4:52
seamlessly transition between devices to do a single task, for example.
-
4:57
I think that's all still very, very much in its infancy.
-
5:01
I think that you still get a lot of clients saying, "Well, mobile users only
-
5:08
want to do certain things," or "We'll add these 4 features and just
-
5:13
forget about the rest," so they're not really thinking holistically still, I think,
-
5:18
but I do think that they are acknowledging
-
5:21
they need to do something.
-
5:22
It's just a matter of how good they are at planning out into the future versus
-
5:31
"We need to do something in a very reactive manner."
-
5:35
Last fall before the election, you had written up a post for Smashing Magazine
-
5:42
comparing the 2 mobile strategies for the candidates--one being a responsive site,
-
5:48
and one being a separate mobile site.
-
5:50
Even though the election's gone, I still think we're at a place where
-
5:53
that's a good discussion to have.
-
5:54
What are your thoughts about that today, here, a few months after the election?
-
5:57
Yeah, responsive design won the election--no.
-
6:02
It's interesting and the reason why the subject and the topic was so
-
6:10
attractive and to put it into that lens is that very seldom--
-
6:14
maybe this might be one of the only examples--
-
6:17
is an example where 2 sites--2 different sites--are trying to accomplish
-
6:25
the exact same thing, reach the exact same audience, exact same goals,
-
6:30
exact same content, more or less.
-
6:32
Obviously, the differences between the candidates were apparent,
-
6:37
but at the same time, from a web strategy standpoint--very, very rarely
-
6:45
do you have this apples-to-apples comparison, and they took
-
6:48
2 different approaches, which is great because there are all these control
-
6:51
variables that aren't normally there because even if you look at, say, a hotel.
-
6:56
One hotel is going to pitch itself as being a little more luxury or more affordable
-
7:01
but also just the difference in time, right?
-
7:05
You know, the mobile landscape changes weekly.
-
7:08
You know what I mean?
-
7:09
It's nuts, so you can't even make a comparison of--like, "Oh, well, we did
-
7:15
have a separate mobile site and then we made a responsive site,
-
7:18
and here's the difference."
-
7:18
It's like--well, you're in a different time and place now.
-
7:20
So that what was so attractive about it and to really be able to put them
-
7:26
against each other, and they both had their pros and their cons, and
-
7:31
it really kind of came out to what really matters with a mobile web experience,
-
7:37
what goes into making a great experience, what are some of the
-
7:42
common pitfalls and stuff, so it was a lot of fun to explore, so--
-
7:45
Which would you say users prefer to have--a separate mobile site
-
7:48
or a responsive site?
-
7:49
They don't care--they honestly don't care.
-
7:52
What they care about is, can I get the information I need?
-
7:56
Can I do what I came here to do--period.
-
7:59
It's sort of a tough pill to swallow.
-
8:02
You know, people say, "Oh, well, Brad's a responsive design man," whatever.
-
8:07
You can make a separate mobile web experience that achieves content parody,
-
8:15
meaning that the experience is optimized by--it's on an entirely separate
-
8:21
code base, an entirely separate template, and users aren't really going to know.
-
8:26
But the problem is in literally every single example of a separate mobile website,
-
8:31
is that it just opens the door for these issues wherever parody isn't achieved,
-
8:37
so that's sort of the biggest thing and certainly, Mitt Romney's separate
-
8:42
mobile website suffered from that.
-
8:45
Wherever certain things were available on the desktop site, but they were
-
8:50
nowhere to be found on the mobile version, so--
-
8:54
What things would you consider when trying to decide between
-
8:57
a responsive site and a mobile website?
-
8:59
Is there one that's more often the best solution?
-
9:01
I would say for responsive by default, just in general again.
-
9:06
You don't have to maintain a separate code base.
-
9:09
You don't have to sort of do double duty.
-
9:12
I've seen separate sites so where the desktop site is advertising
-
9:17
Valentine's Day but the mobile site's still stuck on Christmas, stuff like that.
-
9:22
But at the same time, very often it's really not a matter of, I think, technical
-
9:29
consideration that determines what strategy you're going to do.
-
9:34
It's more organizational, so can you go into work on Monday and totally
-
9:40
bulldoze your site and put in place a new shiny website?
-
9:44
Is that just--from an organizational level, is that possible?
-
9:47
Very rarely, so you have sort of this mobile website, this separate thing
-
9:53
coming in to sort of stop the bleeding, so to speak or to react to
-
9:57
the rise of mobile, but at the same time, that doesn't
-
10:03
have to be to where you stop.
-
10:05
You could actually use that separate mobile website as sort of a
-
10:09
step in a responsive direction, so eventually--I call it "planting the seed"
-
10:14
towards a responsive future where you could say, you have this separate
-
10:17
experience; yes, it might be limited; yes, it might be lacking,
-
10:22
but at the same time, you're learning about how to build and design for mobile,
-
10:27
you're learning about your audience's behaviors on mobile,
-
10:31
you're learning a whole lot of stuff and just dealing with the pain of so much
-
10:35
diversity in that whenever the time comes to do a big redesign,
-
10:40
you have that.
-
10:41
It's better to do that, I think, than to just sit on your hands and wait
-
10:46
for that big redesign project to come through because it just rarely doesn't.
-
10:51
I went to a conference probably a year ago, and they had 2 sites:
-
10:54
a desktop and a mobile site.
-
10:55
The mobile site had a lot less content, very focused on schedule and speakers,
-
11:00
but then the desktop site was also responsive, so if you did want more
-
11:04
information and you were on your mobile device, you still went there and the site,
-
11:08
the full site, still worked well on the mobile device.
-
11:12
Yeah, and I think that what you're talking about, what you're describing is
-
11:16
sort of the difference between an app and a site.
-
11:20
I think that those two are often conflated.
-
11:23
I see a lot of--just even like news sites and blogs and stuff that try their
-
11:30
damnedst to be an app, and they shouldn't be really, but at the same time,
-
11:35
you can create a separate app experience that is a focused experience,
-
11:40
it shows you the schedule, it shows you the here-and-now, it focuses on a
-
11:45
few set core tasks, but then you still need the breadth of information that's
-
11:50
provided in a site.
-
11:52
For example--like, I use Artio as an example.
-
11:57
I was getting bombarded with all these emails from them.
-
12:01
"Here's what your friends are listening to," and stuff like that, and I'm like--
-
12:06
"Man, these emails are getting annoying," and I go to--it said,
-
12:10
"Update your email preferences," so okay, did that, but I was on my phone,
-
12:14
and I go and I get blocked because they just want me to download the app.
-
12:19
Well, the app doesn't provide the "update your email preferences,"
-
12:24
so I couldn't do anything until I got onto my desktop computer, so that's annoying,
-
12:29
so I do think that's there's a difference between providing a core app-like
-
12:34
experience and providing--like, all your legal information, your privacy policy,
-
12:40
or about your company, and all of that stuff.
-
12:43
That needs to live somewhere.
-
12:45
You're not going to cram it all into an app, so I do think that apps
-
12:48
are super valuable, but I don't like it whenever people try to
-
12:52
conflate the two.
-
12:53
Gotcha--you run a site called, "This is Responsive," which contains
-
12:57
responsive patterns.
-
12:58
Could you tell us a little bit about how that site came in to being,
-
13:00
and what its current status is?
-
13:02
Sure--the agency I was at--I played a very sort of unique role in that I sort of
-
13:09
floated around between accounts and saw sort of the direction
-
13:13
people were going in but also some of the things they were struggling with,
-
13:16
and 1 week everybody just seemed to be hitting their head against a wall,
-
13:22
trying to figure out responsive bread crumbs like navigation between
-
13:27
parent and child sort of elements, and what I found was that, you know, I said,
-
13:33
"Well, I could help solve their problems individually, or I can sort of create
-
13:39
sort of abstractive solutions to this problem," and so that's what I did.
-
13:44
I sort of set out and I made this sort of black and white, grayscale,
-
13:48
sort of neutral pattern library with--here's 3 different ways to sort of
-
13:55
treat bread crumbs.
-
13:56
Then I've also written about different navigation patterns for
-
14:02
responsive design as well as other things, and other people have written
-
14:05
about layout patterns and other things and stuff, so basically what I did
-
14:10
was I sort of took all that stuff and abstracted them and created this library
-
14:15
of these responsive patterns and encouraged other people
-
14:20
to contribute theirs as well, and so basically, where it's at now is that
-
14:26
basically anybody can contribute to this thing.
-
14:28
If they've created a whole new solution to deal with say, a carousel
-
14:33
or to deal with accordions or tabs or whatever, they can contribute
-
14:39
a pattern to the library, which is great because it helps everybody else
-
14:43
that's dealing with the exact same problem, so that's sort of why it came into
-
14:47
existence and that's why it continues to be useful, so it's great.
-
14:52
I love it whenever people submit patterns--it's just, you know,
-
14:55
here's a novel way to do this, that, or the other, so it's great, so.
-
14:59
And that's on GitHub, is that right?
-
15:01
Uh-hunh (affirmative), yep, yep--so anybody can contribute.
-
15:03
I need to make it easier because--the GitHub thing is great, but it's ultimately--
-
15:11
I'm just using CodePen and other sort of tools like that,
-
15:14
and people are free to use whatever as long as it's just sort of
-
15:18
an abstracted pattern.
-
15:19
It could be self-hosted or whatever.
-
15:21
Basically, all I need is a link to it, so--
-
15:24
But yeah, it's all totally open source, but I need to work on it to make it
-
15:28
a little more apparent that you can contribute to it, so that's--like, Phase 2.
-
15:34
And is that managed with source control?
-
15:35
People submit pull requests for the new patterns?
-
15:38
Yeah, they can, but they could just as easily email me or tweet me a link
-
15:42
or something, so--I'm pretty good at--especially with--like, with a new pattern
-
15:46
but it also has like a big resource center on it, so if you want 17 articles
-
15:54
about how to do responsive data tables or if you want sort of more
-
15:59
big picture stuff--like, "Well, where do I go to learn 101 stuff about
-
16:03
responsive design," I basically have just a whole page there, so that stuff,
-
16:08
again, anybody can contribute a link to it, which is great, so--
-
16:12
Excellent--1 thing I've seen you write about a lot recently is about Photoshop
-
16:15
and the role of Photoshop in design now that we're designing
-
16:19
for mobile and responsive.
-
16:21
What are your thoughts on that?
-
16:22
Is designing in the browser something you do exclusively now or
-
16:25
where do you stand on that process?
-
16:27
I mean, it really depends.
-
16:29
If it's a personal project, and it's just me working on something,
-
16:33
I'll design in the browser because I have that luxury, but obviously, whenever
-
16:37
you get into a client situation or something, that's a much different story.
-
16:41
I do think that we need to evolve the design process beyond the days of
-
16:50
creating full Photoshop comps and presenting them to clients, hanging them
-
16:55
on the walls like paintings and getting them to sign off on it.
-
16:59
It's not true to the web.
-
17:03
You're not signing off on a website.
-
17:06
You're signing off of a picture of a website, and now what you're seeing--
-
17:10
what responsive design in just this multi-device world,
-
17:13
what you're seeing with it is, now you're seeing people mock up the Sumo display
-
17:19
version, and the iPad display version, and the iPhone version, and they
-
17:24
sort of tilt them, but it's all still a comp--it's still an abstraction.
-
17:28
It's just an entirely false way of presenting what a website is going
-
17:34
to ultimately be.
-
17:36
So it's not about designing in the browser, but it's about being smarter
-
17:41
about how you use a tool like Photoshop, so I still think that Photoshop
-
17:47
is really valuable for what Andy Clark calls, "creating the design atmosphere,"
-
17:53
so your colors, your textures, your sort of typography, your just basic
-
17:57
sort of rhythm and look and feel, but it doesn't make sense that
-
18:01
just because you're doing that in Photoshop, it doesn't mean that you have
-
18:06
to see that all the way through and then end moving things around 2 pixels
-
18:11
to the right or 2 pixels to the left.
-
18:13
That's just, I think, a fool's error in this day and age.
-
18:16
I don't think it make the best use out of really talented designers' time.
-
18:20
One story I have is--a client came back.
-
18:26
It was a mobile site, and it was all in comps, and the client requested that
-
18:33
all of the body copy be bumped up a point size, and so she had to go
-
18:40
through 60, 70 different PSDs and update every single instance
-
18:47
of text fields to represent this client request.
-
18:52
It was just nonsense.
-
18:54
She now works at Apple.
-
18:56
You know, this isn't a production artist, somebody like an intern or something.
-
19:02
This is an art director with a lot of experience using her time
-
19:06
extremely poorly, and so I do think--my friend, Dan Ball, sort of wrote
-
19:11
a followup post to mine about really how it comes down to setting expectations.
-
19:16
It's about helping the clients understand that getting things into the final
-
19:22
environment is a better representation of what they're going to be seeing,
-
19:26
being able to sort of feel things on their actual phones, on their personal
-
19:31
device--they're able to get a much better sense of what their
-
19:36
website's going to be a lot sooner, but you have tools like
-
19:40
Style Tiles, you have tools like, again, Dan Ball, created element collages
-
19:45
where it's--like, he'll give sort of like a taste of a part of the website,
-
19:50
so if it's an article or something, he'll show the headline, the author,
-
19:55
the body copy, so you still get a sense of the visual rhythm of all the
-
20:02
typography, of just sort of how things flow, how things look, but
-
20:05
he's not going through and designing the entire header, the entire footer,
-
20:11
every single item in the side bar.
-
20:14
It's not that comprehensive, but he's still giving them a visual direction,
-
20:19
and then whenever they're sold off on that general direction,
-
20:23
that's when everyone will switch gears and go into the browser and sort of
-
20:28
finesse things from there.
-
20:30
So there's still an important role in Photoshop, but I think it's about being
-
20:37
smarter about how we actually use it, so--
-
20:40
And what tools or software do you use for designing in the browser?
-
20:44
It doesn't matter. (laughs)
-
20:45
It's Text Editor and I did make the jump over to SASS, so that's something
-
20:57
that's a tool in my tookit now, but ultimately it's just--I get asked that a lot,
-
21:03
and I'm always leery about--because I haven't tested every single tool
-
21:08
out there and stuff
-
21:09
I use what works for me, but that's when turf wars happen as people say,
-
21:14
"No, this tool is better, " "This tool is--",
-
21:16
It's all HTML, it's all CSS, it's all Javascript, but SASS certainly
-
21:20
makes things easier, so--
-
21:22
Excellent--well, thank you so much for your time, Brad.
-
21:25
If people want to follow you to keep up with the mobile responsive--
-
21:28
I know you tweet a lot of content about your blog.
-
21:30
That's one of the ways I keep up with what's going on with responsive.
-
21:33
Where can they follow you?
-
21:34
I'm on Twitter at brad_frost, and my website is bradfrostweb.com, and those
-
21:42
are really the 2 areas that I spend a lot of time in, so--yeah.
-
21:46
Great--well, thanks a lot.
-
21:48
Yeah--thanks for having me--yeah.
-
21:49
This has been another episode of Treehouse Friends.
-
21:52
Join us next time.
-
21:53
Treehouse Friends
You need to sign up for Treehouse in order to download course files.
Sign up