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