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
Well done!
You have completed Treehouse Friends!
You have completed Treehouse Friends!
Preview
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