1
00:00:03,850 --> 00:00:05,950
Treehouse Friends

2
00:00:19,100 --> 00:00:21,050
Welcome to another episode of Treehouse Friends. 

3
00:00:21,050 --> 00:00:23,880
I'm Randy Hoyt, and today I'm joined by designer Brad Frost.

4
00:00:23,880 --> 00:00:25,000
Thanks for joining us, Brad.

5
00:00:25,000 --> 00:00:26,290
Thanks for having me, Randy.

6
00:00:26,290 --> 00:00:29,280
Would you mind telling us a little bit about your background, what you do,

7
00:00:29,280 --> 00:00:30,490
how long you've been working on the web.

8
00:00:30,490 --> 00:00:33,050
[Brad Frost, Mobile Web Strategist, Designer] 

9
00:00:33,050 --> 00:00:37,500
Sure--I've been working on the web since 2007 and got my start

10
00:00:37,500 --> 00:00:44,210
doing real estate websites right as the bubble burst, so that was fun.

11
00:00:44,210 --> 00:00:47,210
Then I moved to New York City and worked at an ecommerce shop

12
00:00:47,210 --> 00:00:54,850
and then worked at a large agency called RGA, and I was actually there for 

13
00:00:54,850 --> 00:00:58,720
a few years and then actually just recently set out on my own, 

14
00:00:58,720 --> 00:01:00,460
so now I'm self-employed, so--

15
00:01:00,460 --> 00:01:01,490
Excellent.

16
00:01:01,490 --> 00:01:02,210
--lots of fun.

17
00:01:02,210 --> 00:01:03,900
That going well so far?

18
00:01:03,900 --> 00:01:06,910
It's busy (laughs).

19
00:01:06,910 --> 00:01:09,450
>>That's to be expected though, I suppose.  >>Absolutely.

20
00:01:09,450 --> 00:01:10,580
But yeah, it's a whole lot of fun.

21
00:01:10,580 --> 00:01:16,260
It's nice to be able to set your own agenda, for sure, so--yeah.

22
00:01:16,260 --> 00:01:19,110
We're here at In Control in Orlando, and Brad's giving a talk.

23
00:01:19,110 --> 00:01:20,280
Can you tell us a little bit about the talk that

24
00:01:20,280 --> 00:01:21,940
you'll be giving here at the conference?

25
00:01:21,940 --> 00:01:25,890
Yeah--it's sort of a broad topic, Mobile Web Best Practices,

26
00:01:25,890 --> 00:01:31,510
so I actually made a site several years ago, actually, about sort of

27
00:01:31,510 --> 00:01:35,910
tips and tricks and recommendations and considerations for creating things

28
00:01:35,910 --> 00:01:36,790
for the mobile web.

29
00:01:36,790 --> 00:01:41,140
At the time, it was really only sort of a handful of people that were actually

30
00:01:41,140 --> 00:01:44,320
working in that area and sharing knowledge and stuff,

31
00:01:44,320 --> 00:01:48,250
and I kept fielding the same questions over and over and over again

32
00:01:48,250 --> 00:01:49,030
from my colleagues--

33
00:01:49,030 --> 00:01:51,660
"Hey, what do we do about forms?"

34
00:01:51,660 --> 00:01:53,030
"How do we treat navigation?"

35
00:01:53,030 --> 00:01:54,810
"How do we do--" this, that, or the other,

36
00:01:54,810 --> 00:01:58,440
and so instead of writing the same email 50 times,

37
00:01:58,440 --> 00:02:00,870
I decided to make a website about it.

38
00:02:00,870 --> 00:02:05,850
So that's was sort of the genesis of that and so this talk is sort of a 

39
00:02:05,850 --> 00:02:12,130
broad overview of all the different considerations for dealing

40
00:02:12,130 --> 00:02:14,220
with our multi-device world.

41
00:02:14,220 --> 00:02:18,430
So--everything from strategy through design best practices and 

42
00:02:18,430 --> 00:02:21,540
development best practices and all sorts of stuff, so--

43
00:02:21,540 --> 00:02:24,680
What are a couple of things that you think people have really started to get right

44
00:02:24,680 --> 00:02:27,510
and what are things that people are still really doing wrong?

45
00:02:27,510 --> 00:02:31,350
One of the things that I'm really excited about is that 

46
00:02:31,350 --> 00:02:34,860
you no longer have to twist people's arms to get them

47
00:02:34,860 --> 00:02:36,260
to pay attention to mobile.

48
00:02:36,260 --> 00:02:41,010
It's here and you still have a few laggards that are saying, 

49
00:02:41,010 --> 00:02:44,820
"Oh, well, you know, it doesn't really matter that much."

50
00:02:44,820 --> 00:02:49,080
Very, very few people are saying that, so I'm really excited that 

51
00:02:49,080 --> 00:02:53,110
I think that everybody understands that this is a fundamental change

52
00:02:53,110 --> 00:02:58,470
and not just sort of a "nice to have" or an add-on, so I definitely say

53
00:02:58,470 --> 00:03:02,770
that's one of the things I'm most excited about, but I still think that 

54
00:03:02,770 --> 00:03:06,380
people fall short a lot.

55
00:03:06,380 --> 00:03:13,100
I think that you see sites with between 10% and 20% of traffic coming from 

56
00:03:13,100 --> 00:03:18,090
mobile devices and as a result, it gets 10% to 20% of the attention

57
00:03:18,090 --> 00:03:24,340
and 10 to 20% of a budget and all that stuff, so that in the broadest 

58
00:03:24,340 --> 00:03:28,460
sense, I think, is my biggest concern--is that people still aren't

59
00:03:28,460 --> 00:03:32,050
skating to where the puck is going.

60
00:03:32,050 --> 00:03:35,890
They're sort of just looking right in front of their hand, so--

61
00:03:35,890 --> 00:03:40,410
And mobile and responsive design are big topics among developers 

62
00:03:40,410 --> 00:03:43,840
and designers, but among clients, what are clients asking for

63
00:03:43,840 --> 00:03:45,860
in this area?

64
00:03:45,860 --> 00:03:47,440
I know that they're thinking more about mobile.

65
00:03:47,440 --> 00:03:49,820
What are they thinking or what are the things they're requesting?

66
00:03:49,820 --> 00:03:54,500
Yeah, there's still, I think, a lot of confusion where as soon as you say

67
00:03:54,500 --> 00:03:56,020
"mobile," they're like--app!

68
00:03:56,020 --> 00:03:59,610
We need to have an app, and that just isn't the case really.

69
00:03:59,610 --> 00:04:04,890
That's not to say that apps aren't valuable and stuff, but I do think that clients

70
00:04:04,890 --> 00:04:09,700
have this sort of myopic view of what's available--

71
00:04:09,700 --> 00:04:16,329
what the toolkit available to them is, and as far as the web front goes,

72
00:04:16,329 --> 00:04:20,839
I do think that responsive design has gained quite a bit of traction.

73
00:04:20,839 --> 00:04:22,710
More people are talking about it.

74
00:04:22,710 --> 00:04:27,550
I read a lot of news about responsive design and a lot of the sort of

75
00:04:27,550 --> 00:04:31,220
"executive level" writeups on responsive design.

76
00:04:31,220 --> 00:04:36,310
It makes me wince a little bit, and so I do think that there is a long way

77
00:04:36,310 --> 00:04:42,870
to go to educate clients to basically what the web means in this

78
00:04:42,870 --> 00:04:47,800
multi-device world, how they can put their stuff in front of more people,

79
00:04:47,800 --> 00:04:52,240
why that matters, how people use devices, and how people sort of

80
00:04:52,240 --> 00:04:57,080
seamlessly transition between devices to do a single task, for example.

81
00:04:57,080 --> 00:05:01,730
I think that's all still very, very much in its infancy.

82
00:05:01,730 --> 00:05:08,610
I think that you still get a lot of clients saying, "Well, mobile users only

83
00:05:08,610 --> 00:05:13,370
want to do certain things," or "We'll add these 4 features and just

84
00:05:13,370 --> 00:05:18,010
forget about the rest," so they're not really thinking holistically still, I think,

85
00:05:18,010 --> 00:05:21,670
but I do think that they are acknowledging

86
00:05:21,670 --> 00:05:22,970
they need to do something.

87
00:05:22,970 --> 00:05:31,100
It's just a matter of how good they are at planning out into the future versus

88
00:05:31,100 --> 00:05:35,270
"We need to do something in a very reactive manner."

89
00:05:35,270 --> 00:05:42,240
Last fall before the election, you had written up a post for Smashing Magazine

90
00:05:42,240 --> 00:05:48,360
comparing the 2 mobile strategies for the candidates--one being a responsive site,

91
00:05:48,360 --> 00:05:50,480
and one being a separate mobile site.

92
00:05:50,480 --> 00:05:53,040
Even though the election's gone, I still think we're at a place where 

93
00:05:53,040 --> 00:05:54,170
that's a good discussion to have.

94
00:05:54,170 --> 00:05:57,710
What are your thoughts about that today, here, a few months after the election?

95
00:05:57,710 --> 00:06:02,130
Yeah, responsive design won the election--no.

96
00:06:02,130 --> 00:06:10,150
It's interesting and the reason why the subject and the topic was so

97
00:06:10,150 --> 00:06:14,520
attractive and to put it into that lens is that very seldom--

98
00:06:14,520 --> 00:06:17,650
maybe this might be one of the only examples--

99
00:06:17,650 --> 00:06:25,270
is an example where 2 sites--2 different sites--are trying to accomplish

100
00:06:25,270 --> 00:06:30,470
the exact same thing, reach the exact same audience, exact same goals, 

101
00:06:30,470 --> 00:06:32,890
exact same content, more or less.

102
00:06:32,890 --> 00:06:37,420
Obviously, the differences between the candidates were apparent, 

103
00:06:37,420 --> 00:06:45,130
but at the same time, from a web strategy standpoint--very, very rarely

104
00:06:45,130 --> 00:06:48,470
do you have this apples-to-apples comparison, and they took 

105
00:06:48,470 --> 00:06:51,530
2 different approaches, which is great because there are all these control 

106
00:06:51,530 --> 00:06:56,820
variables that aren't normally there because even if you look at, say, a hotel. 

107
00:06:56,820 --> 00:07:01,590
One hotel is going to pitch itself as being a little more luxury or more affordable

108
00:07:01,590 --> 00:07:05,350
but also just the difference in time, right?

109
00:07:05,350 --> 00:07:08,560
You know, the mobile landscape changes weekly.  

110
00:07:08,560 --> 00:07:09,870
You know what I mean?

111
00:07:09,870 --> 00:07:15,240
It's nuts, so you can't even make a comparison of--like, "Oh, well, we did 

112
00:07:15,240 --> 00:07:18,050
have a separate mobile site and then we made a responsive site, 

113
00:07:18,050 --> 00:07:18,810
and here's the difference."

114
00:07:18,810 --> 00:07:20,980
It's like--well, you're in a different time and place now.

115
00:07:20,980 --> 00:07:26,560
So that what was so attractive about it and to really be able to put them

116
00:07:26,560 --> 00:07:31,590
against each other, and they both had their pros and their cons, and 

117
00:07:31,590 --> 00:07:37,340
it really kind of came out to what really matters with a mobile web experience,

118
00:07:37,340 --> 00:07:42,150
what goes into making a great experience, what are some of the 

119
00:07:42,150 --> 00:07:45,620
common pitfalls and stuff, so it was a lot of fun to explore, so--

120
00:07:45,620 --> 00:07:48,380
Which would you say users prefer to have--a separate mobile site

121
00:07:48,380 --> 00:07:49,650
or a responsive site?

122
00:07:49,650 --> 00:07:52,880
They don't care--they honestly don't care.

123
00:07:52,880 --> 00:07:56,650
What they care about is, can I get the information I need?

124
00:07:56,650 --> 00:07:59,090
Can I do what I came here to do--period.

125
00:07:59,090 --> 00:08:02,630
It's sort of a tough pill to swallow.

126
00:08:02,630 --> 00:08:07,270
You know, people say, "Oh, well, Brad's a responsive design man," whatever.

127
00:08:07,270 --> 00:08:15,390
You can make a separate mobile web experience that achieves content parody, 

128
00:08:15,390 --> 00:08:21,480
meaning that the experience is optimized by--it's on an entirely separate

129
00:08:21,480 --> 00:08:26,520
code base, an entirely separate template, and users aren't really going to know.

130
00:08:26,520 --> 00:08:31,320
But the problem is in literally every single example of a separate mobile website,

131
00:08:31,320 --> 00:08:37,470
is that it just opens the door for these issues wherever parody isn't achieved, 

132
00:08:37,470 --> 00:08:42,900
so that's sort of the biggest thing and certainly, Mitt Romney's separate 

133
00:08:42,900 --> 00:08:45,520
mobile website suffered from that.

134
00:08:45,520 --> 00:08:50,110
Wherever certain things were available on the desktop site, but they were 

135
00:08:50,110 --> 00:08:54,010
nowhere to be found on the mobile version, so--

136
00:08:54,010 --> 00:08:57,180
What things would you consider when trying to decide between

137
00:08:57,180 --> 00:08:59,080
a responsive site and a mobile website?

138
00:08:59,080 --> 00:09:01,810
Is there one that's more often the best solution?

139
00:09:01,810 --> 00:09:06,570
I would say for responsive by default, just in general again.

140
00:09:06,570 --> 00:09:09,480
You don't have to maintain a separate code base. 

141
00:09:09,480 --> 00:09:12,470
You don't have to sort of do double duty.

142
00:09:12,470 --> 00:09:17,480
I've seen separate sites so where the desktop site is advertising

143
00:09:17,480 --> 00:09:22,280
Valentine's Day but the mobile site's still stuck on Christmas, stuff like that.

144
00:09:22,280 --> 00:09:29,480
But at the same time, very often it's really not a matter of, I think, technical 

145
00:09:29,480 --> 00:09:34,560
consideration that determines what strategy you're going to do.

146
00:09:34,560 --> 00:09:40,250
It's more organizational, so can you go into work on Monday and totally

147
00:09:40,250 --> 00:09:44,100
bulldoze your site and put in place a new shiny website?

148
00:09:44,100 --> 00:09:47,960
Is that just--from an organizational level, is that possible?

149
00:09:47,960 --> 00:09:53,000
Very rarely, so you have sort of this mobile website, this separate thing

150
00:09:53,000 --> 00:09:57,570
coming in to sort of stop the bleeding, so to speak or to react to

151
00:09:57,570 --> 00:10:03,000
the rise of mobile, but at the same time, that doesn't

152
00:10:03,000 --> 00:10:05,640
have to be to where you stop.

153
00:10:05,640 --> 00:10:09,420
You could actually use that separate mobile website as sort of a 

154
00:10:09,420 --> 00:10:14,310
step in a responsive direction, so eventually--I call it "planting the seed"

155
00:10:14,310 --> 00:10:17,880
towards a responsive future where you could say, you have this separate 

156
00:10:17,880 --> 00:10:22,350
experience; yes, it might be limited; yes, it might be lacking, 

157
00:10:22,350 --> 00:10:27,420
but at the same time, you're learning about how to build and design for mobile,

158
00:10:27,420 --> 00:10:31,660
you're learning about your audience's behaviors on mobile,

159
00:10:31,660 --> 00:10:35,840
you're learning a whole lot of stuff and just dealing with the pain of so much

160
00:10:35,840 --> 00:10:40,110
diversity in that whenever the time comes to do a big redesign, 

161
00:10:40,110 --> 00:10:41,580
you have that.

162
00:10:41,580 --> 00:10:46,310
It's better to do that, I think, than to just sit on your hands and wait 

163
00:10:46,310 --> 00:10:51,090
for that big redesign project to come through because it just rarely doesn't.

164
00:10:51,090 --> 00:10:54,280
I went to a conference probably a year ago, and they had 2 sites: 

165
00:10:54,280 --> 00:10:55,690
a desktop and a mobile site.

166
00:10:55,690 --> 00:11:00,600
The mobile site had a lot less content, very focused on schedule and speakers,

167
00:11:00,600 --> 00:11:04,720
but then the desktop site was also responsive, so if you did want more

168
00:11:04,720 --> 00:11:08,800
information and you were on your mobile device, you still went there and the site,

169
00:11:08,800 --> 00:11:12,410
the full site, still worked well on the mobile device.

170
00:11:12,410 --> 00:11:16,700
Yeah, and I think that what you're talking about, what you're describing is

171
00:11:16,700 --> 00:11:20,380
sort of the difference between an app and a site.

172
00:11:20,380 --> 00:11:23,960
I think that those two are often conflated.

173
00:11:23,960 --> 00:11:30,800
I see a lot of--just even like news sites and blogs and stuff that try their

174
00:11:30,800 --> 00:11:35,610
damnedst to be an app, and they shouldn't be really, but at the same time,

175
00:11:35,610 --> 00:11:40,750
you can create a separate app experience that is a focused experience, 

176
00:11:40,750 --> 00:11:45,540
it shows you the schedule, it shows you the here-and-now, it focuses on a

177
00:11:45,540 --> 00:11:50,830
few set core tasks, but then you still need the breadth of information that's

178
00:11:50,830 --> 00:11:52,310
provided in a site.

179
00:11:52,310 --> 00:11:57,530
For example--like, I use Artio as an example.

180
00:11:57,530 --> 00:12:01,780
I was getting bombarded with all these emails from them.

181
00:12:01,780 --> 00:12:06,740
"Here's what your friends are listening to," and stuff like that, and I'm like--

182
00:12:06,740 --> 00:12:10,450
"Man, these emails are getting annoying," and I go to--it said, 

183
00:12:10,450 --> 00:12:14,800
"Update your email preferences," so okay, did that, but I was on my phone,

184
00:12:14,800 --> 00:12:19,540
and I go and I get blocked because they just want me to download the app.

185
00:12:19,540 --> 00:12:24,820
Well, the app doesn't provide the "update your email preferences,"

186
00:12:24,820 --> 00:12:29,160
so I couldn't do anything until I got onto my desktop computer, so that's annoying,

187
00:12:29,160 --> 00:12:34,300
so I do think that's there's a difference between providing a core app-like

188
00:12:34,300 --> 00:12:40,880
experience and providing--like, all your legal information, your privacy policy,

189
00:12:40,880 --> 00:12:43,520
or about your company, and all of that stuff.

190
00:12:43,520 --> 00:12:45,190
That needs to live somewhere.

191
00:12:45,190 --> 00:12:48,890
You're not going to cram it all into an app, so I do think that apps 

192
00:12:48,890 --> 00:12:52,020
are super valuable, but I don't like it whenever people try to

193
00:12:52,020 --> 00:12:53,350
conflate the two.

194
00:12:53,350 --> 00:12:57,140
Gotcha--you run a site called, "This is Responsive," which contains 

195
00:12:57,140 --> 00:12:58,310
responsive patterns. 

196
00:12:58,310 --> 00:13:00,950
Could you tell us a little bit about how that site came in to being,

197
00:13:00,950 --> 00:13:02,530
and what its current status is? 

198
00:13:02,530 --> 00:13:09,230
Sure--the agency I was at--I played a very sort of unique role in that I sort of

199
00:13:09,230 --> 00:13:13,110
floated around between accounts and saw sort of the direction

200
00:13:13,110 --> 00:13:16,090
people were going in but also some of the things they were struggling with, 

201
00:13:16,090 --> 00:13:22,640
and 1 week everybody just seemed to be hitting their head against a wall,

202
00:13:22,640 --> 00:13:27,230
trying to figure out responsive bread crumbs like navigation between

203
00:13:27,230 --> 00:13:33,320
parent and child sort of elements, and what I found was that, you know, I said,

204
00:13:33,320 --> 00:13:39,130
"Well, I could help solve their problems individually, or I can sort of create

205
00:13:39,130 --> 00:13:44,470
sort of abstractive solutions to this problem," and so that's what I did.

206
00:13:44,470 --> 00:13:48,150
I sort of set out and I made this sort of black and white, grayscale,

207
00:13:48,150 --> 00:13:55,500
sort of neutral pattern library with--here's 3 different ways to sort of

208
00:13:55,500 --> 00:13:56,300
treat bread crumbs.

209
00:13:56,300 --> 00:14:02,030
Then I've also written about different navigation patterns for

210
00:14:02,030 --> 00:14:05,480
responsive design as well as other things, and other people have written

211
00:14:05,480 --> 00:14:10,220
about layout patterns and other things and stuff, so basically what I did

212
00:14:10,220 --> 00:14:15,150
was I sort of took all that stuff and abstracted them and created this library

213
00:14:15,150 --> 00:14:20,760
of these responsive patterns and encouraged other people

214
00:14:20,760 --> 00:14:26,220
to contribute theirs as well, and so basically, where it's at now is that 

215
00:14:26,220 --> 00:14:28,680
basically anybody can contribute to this thing.   

216
00:14:28,680 --> 00:14:33,170
If they've created a whole new solution to deal with say, a carousel 

217
00:14:33,170 --> 00:14:39,250
or to deal with accordions or tabs or whatever, they can contribute 

218
00:14:39,250 --> 00:14:43,070
a pattern to the library, which is great because it helps everybody else

219
00:14:43,070 --> 00:14:47,720
that's dealing with the exact same problem, so that's sort of why it came into 

220
00:14:47,720 --> 00:14:52,190
existence and that's why it continues to be useful, so it's great.

221
00:14:52,190 --> 00:14:55,920
I love it whenever people submit patterns--it's just, you know,  

222
00:14:55,920 --> 00:14:59,980
here's a novel way to do this, that, or the other, so it's great, so.

223
00:14:59,980 --> 00:15:01,230
And that's on GitHub, is that right?

224
00:15:01,230 --> 00:15:03,790
Uh-hunh (affirmative), yep, yep--so anybody can contribute.

225
00:15:03,790 --> 00:15:11,070
I need to make it easier because--the GitHub thing is great, but it's ultimately--

226
00:15:11,070 --> 00:15:14,630
I'm just using CodePen and other sort of tools like that, 

227
00:15:14,630 --> 00:15:18,580
and people are free to use whatever as long as it's just sort of

228
00:15:18,580 --> 00:15:19,850
an abstracted pattern.

229
00:15:19,850 --> 00:15:21,590
It could be self-hosted or whatever.

230
00:15:21,590 --> 00:15:24,140
Basically, all I need is a link to it, so--

231
00:15:24,140 --> 00:15:28,890
But yeah, it's all totally open source, but I need to work on it to make it

232
00:15:28,890 --> 00:15:34,030
a little more apparent that you can contribute to it, so that's--like, Phase 2.

233
00:15:34,030 --> 00:15:35,520
And is that managed with source control?

234
00:15:35,520 --> 00:15:38,640
People submit pull requests for the new patterns?

235
00:15:38,640 --> 00:15:42,500
Yeah, they can, but they could just as easily email me or tweet me a link 

236
00:15:42,500 --> 00:15:46,900
or something, so--I'm pretty good at--especially with--like, with a new pattern

237
00:15:46,900 --> 00:15:54,770
but it also has like a big resource center on it, so if you want 17 articles

238
00:15:54,770 --> 00:15:59,700
about how to do responsive data tables or if you want sort of more 

239
00:15:59,700 --> 00:16:03,990
big picture stuff--like, "Well, where do I go to learn 101 stuff about 

240
00:16:03,990 --> 00:16:08,630
responsive design," I basically have just a whole page there, so that stuff, 

241
00:16:08,630 --> 00:16:12,010
again, anybody can contribute a link to it, which is great, so--

242
00:16:12,010 --> 00:16:15,630
Excellent--1 thing I've seen you write about a lot recently is about Photoshop

243
00:16:15,630 --> 00:16:19,560
and the role of Photoshop in design now that we're designing

244
00:16:19,560 --> 00:16:21,120
for mobile and responsive.

245
00:16:21,120 --> 00:16:22,500
What are your thoughts on that?  

246
00:16:22,500 --> 00:16:25,900
Is designing in the browser something you do exclusively now or

247
00:16:25,900 --> 00:16:27,120
where do you stand on that process?

248
00:16:27,120 --> 00:16:29,050
I mean, it really depends.

249
00:16:29,050 --> 00:16:33,270
If it's a personal project, and it's just me working on something,

250
00:16:33,270 --> 00:16:37,760
I'll design in the browser because I have that luxury, but obviously, whenever 

251
00:16:37,760 --> 00:16:41,110
you get into a client situation or something, that's a much different story.

252
00:16:41,110 --> 00:16:50,240
I do think that we need to evolve the design process beyond the days of

253
00:16:50,240 --> 00:16:55,530
creating full Photoshop comps and presenting them to clients, hanging them

254
00:16:55,530 --> 00:16:59,000
on the walls like paintings and getting them to sign off on it.

255
00:16:59,000 --> 00:17:03,560
It's not true to the web.

256
00:17:03,560 --> 00:17:06,500
You're not signing off on a website.

257
00:17:06,500 --> 00:17:10,109
You're signing off of a picture of a website, and now what you're seeing--

258
00:17:10,109 --> 00:17:13,839
what responsive design in just this multi-device world, 

259
00:17:13,839 --> 00:17:19,730
what you're seeing with it is, now you're seeing people mock up the Sumo display

260
00:17:19,730 --> 00:17:24,849
version, and the iPad display version, and the iPhone version, and they 

261
00:17:24,849 --> 00:17:28,620
sort of tilt them, but it's all still a comp--it's still an abstraction.

262
00:17:28,620 --> 00:17:34,850
It's just an entirely false way of presenting what a website is going 

263
00:17:34,850 --> 00:17:36,250
to ultimately be.

264
00:17:36,250 --> 00:17:41,700
So it's not about designing in the browser, but it's about being smarter

265
00:17:41,700 --> 00:17:47,740
about how you use a tool like Photoshop, so I still think that Photoshop

266
00:17:47,740 --> 00:17:53,170
is really valuable for what Andy Clark calls, "creating the design atmosphere,"

267
00:17:53,170 --> 00:17:57,610
so your colors, your textures, your sort of typography, your just basic 

268
00:17:57,610 --> 00:18:01,840
sort of rhythm and look and feel, but it doesn't make sense that 

269
00:18:01,840 --> 00:18:06,790
just because you're doing that in Photoshop, it doesn't mean that you have

270
00:18:06,790 --> 00:18:11,390
to see that all the way through and then end moving things around 2 pixels 

271
00:18:11,390 --> 00:18:13,520
to the right or 2 pixels to the left.

272
00:18:13,520 --> 00:18:16,340
That's just, I think, a fool's error in this day and age.

273
00:18:16,340 --> 00:18:20,880
I don't think it make the best use out of really talented designers' time.

274
00:18:20,880 --> 00:18:26,930
One story I have is--a client came back.

275
00:18:26,930 --> 00:18:33,150
It was a mobile site, and it was all in comps, and the client requested that 

276
00:18:33,150 --> 00:18:40,680
all of the body copy be bumped up a point size, and so she had to go

277
00:18:40,680 --> 00:18:47,610
through 60, 70 different PSDs and update every single instance 

278
00:18:47,610 --> 00:18:52,250
of text fields to represent this client request.

279
00:18:52,250 --> 00:18:54,240
It was just nonsense.

280
00:18:54,240 --> 00:18:56,390
She now works at Apple.

281
00:18:56,390 --> 00:19:02,360
You know, this isn't a production artist, somebody like an intern or something.

282
00:19:02,360 --> 00:19:06,650
This is an art director with a lot of experience using her time 

283
00:19:06,650 --> 00:19:11,500
extremely poorly, and so I do think--my friend, Dan Ball, sort of wrote 

284
00:19:11,500 --> 00:19:16,070
a followup post to mine about really how it comes down to setting expectations.

285
00:19:16,070 --> 00:19:22,530
It's about helping the clients understand that getting things into the final

286
00:19:22,530 --> 00:19:26,220
environment is a better representation of what they're going to be seeing,

287
00:19:26,220 --> 00:19:31,970
being able to sort of feel things on their actual phones, on their personal

288
00:19:31,970 --> 00:19:36,370
device--they're able to get a much better sense of what their

289
00:19:36,370 --> 00:19:40,430
website's going to be a lot sooner, but you have tools like 

290
00:19:40,430 --> 00:19:45,790
Style Tiles, you have tools like, again, Dan Ball, created element collages 

291
00:19:45,790 --> 00:19:50,790
where it's--like, he'll give sort of like a taste of a part of the website,

292
00:19:50,790 --> 00:19:55,100
so if it's an article or something, he'll show the headline, the author, 

293
00:19:55,100 --> 00:20:02,340
the body copy, so you still get a sense of the visual rhythm of all the 

294
00:20:02,340 --> 00:20:05,940
typography, of just sort of how things flow, how things look, but 

295
00:20:05,940 --> 00:20:11,220
he's not going through and designing the entire header, the entire footer, 

296
00:20:11,220 --> 00:20:14,120
every single item in the side bar.

297
00:20:14,120 --> 00:20:19,400
It's not that comprehensive, but he's still giving them a visual direction,

298
00:20:19,400 --> 00:20:23,990
and then whenever they're sold off on that general direction, 

299
00:20:23,990 --> 00:20:28,240
that's when everyone will switch gears and go into the browser and sort of

300
00:20:28,240 --> 00:20:30,250
finesse things from there.

301
00:20:30,250 --> 00:20:37,750
So there's still an important role in Photoshop, but I think it's about being

302
00:20:37,750 --> 00:20:40,320
smarter about how we actually use it, so--

303
00:20:40,320 --> 00:20:44,110
And what tools or software do you use for designing in the browser?

304
00:20:44,110 --> 00:20:45,660
It doesn't matter. (laughs)

305
00:20:45,660 --> 00:20:57,690
It's Text Editor and I did make the jump over to SASS, so that's something

306
00:20:57,690 --> 00:21:03,750
that's a tool in my tookit now, but ultimately it's just--I get asked that a lot,

307
00:21:03,750 --> 00:21:08,860
and I'm always leery about--because I haven't tested every single tool

308
00:21:08,860 --> 00:21:09,650
out there and stuff

309
00:21:09,650 --> 00:21:14,520
I use what works for me, but that's when turf wars happen as people say,

310
00:21:14,520 --> 00:21:16,010
"No, this tool is better, " "This tool is--", 

311
00:21:16,010 --> 00:21:20,680
It's all HTML, it's all CSS, it's all Javascript, but SASS certainly

312
00:21:20,680 --> 00:21:22,010
makes things easier, so--

313
00:21:22,010 --> 00:21:25,290
Excellent--well, thank you so much for your time, Brad.

314
00:21:25,290 --> 00:21:28,670
If people want to follow you to keep up with the mobile responsive--

315
00:21:28,670 --> 00:21:30,690
I know you tweet a lot of content about your blog.

316
00:21:30,690 --> 00:21:33,380
That's one of the ways I keep up with what's going on with responsive.

317
00:21:33,380 --> 00:21:34,630
Where can they follow you?

318
00:21:34,630 --> 00:21:42,260
I'm on Twitter at brad_frost, and my website is bradfrostweb.com, and those

319
00:21:42,260 --> 00:21:46,870
are really the 2 areas that I spend a lot of time in, so--yeah.

320
00:21:46,870 --> 00:21:48,310
Great--well, thanks a lot.

321
00:21:48,310 --> 00:21:49,680
Yeah--thanks for having me--yeah.

322
00:21:49,680 --> 00:21:52,330
This has been another episode of Treehouse Friends.

323
00:21:52,330 --> 00:21:53,710
Join us next time.

324
00:21:53,710 --> 00:21:56,760
Treehouse Friends