1
00:00:00,000 --> 00:00:03,800
[? Music ?]

2
00:00:03,800 --> 00:00:07,610
[Treehouse Friends]

3
00:00:07,610 --> 00:00:15,970
[? Music ?]

4
00:00:15,970 --> 00:00:19,630
Hey guys, it's Allison Grayce here for another episode of Treehouse Friends.

5
00:00:19,630 --> 00:00:23,000
I'm here in Orlando, Florida at the In Control Conference

6
00:00:23,000 --> 00:00:26,370
with Ben Callahan, the president of Sparkbox.

7
00:00:26,370 --> 00:00:28,060
Ben, thanks for being here today.

8
00:00:28,060 --> 00:00:30,380
My pleasure.

9
00:00:30,380 --> 00:00:35,440
So tell us a little bit about Sparkbox and also the Build Responsively workshops.

10
00:00:35,440 --> 00:00:40,510
[Ben Callahan] [President, Sparkbox] Let's see, we started officially in 2009.

11
00:00:40,510 --> 00:00:42,770
There were 4 of us at that time,

12
00:00:42,770 --> 00:00:46,140
and we went by a different name at the time, Forge,

13
00:00:46,140 --> 00:00:50,410
and that's actually still the company name, but we work as Sparkbox now.

14
00:00:50,410 --> 00:00:54,300
We kind of reinvented ourselves in the beginning of 2011,

15
00:00:54,300 --> 00:00:59,460
and we really started to feel like there was some space

16
00:00:59,460 --> 00:01:02,590
available for us at least to specialize a bit more

17
00:01:02,590 --> 00:01:06,000
on trying to build sites that worked at any resolution,

18
00:01:06,000 --> 00:01:08,360
responsive web design in particular.

19
00:01:08,360 --> 00:01:12,630
At that same time, we had purchased a domain called Build Responsively,

20
00:01:12,630 --> 00:01:15,880
jokingly thinking about the idea of drinking responsibly,

21
00:01:15,880 --> 00:01:18,010
and weren't quite sure what to do with it,

22
00:01:18,010 --> 00:01:22,670
and we had been learning a ton the year previous about how to do this stuff,

23
00:01:22,670 --> 00:01:28,120
and somebody had suggested that we start to share some of the things we were doing,

24
00:01:28,120 --> 00:01:33,020
and so we started to do that on our blog The Foundry on our site.

25
00:01:33,020 --> 00:01:37,820
And we just really got the itch for this idea of a culture of learning

26
00:01:37,820 --> 00:01:43,090
in our office itself, and so we started to speak a bit more about it

27
00:01:43,090 --> 00:01:47,390
and organize the whole workshop series that we did last year.

28
00:01:47,390 --> 00:01:51,590
We mostly focused in the Midwest, but we did maybe 6 or 7 events,

29
00:01:51,590 --> 00:01:55,960
and they were 2-day events, which took a lot of work.

30
00:01:55,960 --> 00:01:59,880
This year we decided to try and attach to some bigger conferences, 

31
00:01:59,880 --> 00:02:02,700
like In Control, actually, and so that's worked out really well.

32
00:02:02,700 --> 00:02:05,510
We've got at least half a dozen lined up for the year.

33
00:02:05,510 --> 00:02:07,070
We're really excited. 

34
00:02:07,070 --> 00:02:10,970
We try to think about the techniques that are needed in responsive web design,

35
00:02:10,970 --> 00:02:13,420
but we try to think about it from an approach of 

36
00:02:13,420 --> 00:02:16,790
looking for common problems that exist in the industry

37
00:02:16,790 --> 00:02:20,770
and ways that we can solve those problems with these techniques. 

38
00:02:20,770 --> 00:02:25,190
That way we're able to bring multiple disciplines into the conversation

39
00:02:25,190 --> 00:02:27,170
as opposed to just speaking to front-end developers 

40
00:02:27,170 --> 00:02:29,000
or people who write CSS.

41
00:02:29,000 --> 00:02:31,480
I think the goal is to try and keep more people engaged.

42
00:02:31,480 --> 00:02:35,490
We're trying to invite some of the rest of the disciplines into the process with us.

43
00:02:35,490 --> 00:02:38,960
So how involved are you with putting on the workshops?

44
00:02:38,960 --> 00:02:42,120
Is that something that you do by yourself, or do you have a team of people?

45
00:02:42,120 --> 00:02:45,870
The first one we did was in Cincinnati.

46
00:02:45,870 --> 00:02:49,320
We had every single person from my company speak.

47
00:02:49,320 --> 00:02:51,070
At that time, I think there were 8 of us, 

48
00:02:51,070 --> 00:02:54,190
and it was an amazing time.

49
00:02:54,190 --> 00:02:59,340
Most of my team hadn't spoken in public before,

50
00:02:59,340 --> 00:03:01,930
so I was asking a lot of them to get up in front of people 

51
00:03:01,930 --> 00:03:05,300
and share what they'd learned, but everybody really did it.

52
00:03:05,300 --> 00:03:07,000
I mean, it was really neat.

53
00:03:07,000 --> 00:03:12,220
Since then, there are 2 or 3 of us who really enjoy presenting a lot more,

54
00:03:12,220 --> 00:03:14,280
something that we're pretty passionate about--

55
00:03:14,280 --> 00:03:17,540
there are actually 4 of us probably--

56
00:03:17,540 --> 00:03:20,850
and so the 4 of us focus on doing most of the presenting,

57
00:03:20,850 --> 00:03:22,610
but everybody helps with content development,

58
00:03:22,610 --> 00:03:25,730
and we have 2 or 3 folks in the office who are really organized

59
00:03:25,730 --> 00:03:29,330
and can help make sure things are running smoothly

60
00:03:29,330 --> 00:03:32,240
and on schedule and getting the events planned and all that.

61
00:03:32,240 --> 00:03:35,080
Well, while we're on the topic of speaking,

62
00:03:35,080 --> 00:03:37,560
have you always been comfortable with speaking in front of people

63
00:03:37,560 --> 00:03:40,410
and sharing your knowledge, and what advice can you give to people 

64
00:03:40,410 --> 00:03:43,470
who are thinking about maybe teaching or

65
00:03:43,470 --> 00:03:46,220
starting their own workshops or starting a blog?

66
00:03:46,220 --> 00:03:49,570
How do you find the confidence to start sharing what you know?

67
00:03:49,570 --> 00:03:51,000
You know, it's funny.

68
00:03:51,000 --> 00:03:54,890
For a long time--I actually haven't done much speaking, to be honest.

69
00:03:54,890 --> 00:04:02,090
Let's see, I guess last year in January was the first time I ever spoke in public,

70
00:04:02,090 --> 00:04:04,780
and that was at CodeMash up in Sandusky, Ohio,

71
00:04:04,780 --> 00:04:09,700
which is a bunch of devs that get together and eat a ton of bacon, basically.

72
00:04:09,700 --> 00:04:15,230
But it feels natural to me, so I don't know that I have anything to say

73
00:04:15,230 --> 00:04:17,390
that's wisdom for how to do it.

74
00:04:17,390 --> 00:04:20,600
It's just I guess at some point enough people told me

75
00:04:20,600 --> 00:04:25,530
that we were smart, and so I don't really feel like

76
00:04:25,530 --> 00:04:29,180
we're that far ahead of other people, but I do think that

77
00:04:29,180 --> 00:04:31,820
we're just willing to share everything that we know.

78
00:04:31,820 --> 00:04:34,590
The truth is as I've traveled around and met a bunch of people 

79
00:04:34,590 --> 00:04:37,230
who come to these workshops and other conferences, 

80
00:04:37,230 --> 00:04:40,740
everybody that I meet has something that I can pull from,

81
00:04:40,740 --> 00:04:44,100
and so these engagements for us and what we're speaking

82
00:04:44,100 --> 00:04:48,910
are more--we get just as much out of them from speaking

83
00:04:48,910 --> 00:04:52,330
and learning from the people who attend as they do from us,

84
00:04:52,330 --> 00:04:55,850
maybe even more, so encouragement, I would say 

85
00:04:55,850 --> 00:04:59,470
you have something that you're good at, and if you're good at it,

86
00:04:59,470 --> 00:05:02,420
write about it to start with, just start documenting what you do.

87
00:05:02,420 --> 00:05:04,290
It's good for you.

88
00:05:04,290 --> 00:05:06,030
Even if nobody reads it, it's good for you to be able to go back and find that stuff,

89
00:05:06,030 --> 00:05:08,470
but you'll see that you'll quickly get an audience,

90
00:05:08,470 --> 00:05:10,850
because there are people hungry for this information.

91
00:05:10,850 --> 00:05:13,230
Speaking of an audience too,

92
00:05:13,230 --> 00:05:16,760
you're currently redesigning the Sparkbox website live

93
00:05:16,760 --> 00:05:19,030
for everyone to see.

94
00:05:19,030 --> 00:05:22,690
Tell us a little bit about why you decided to do that.

95
00:05:22,690 --> 00:05:25,010
Most people don't invite people into their process like that,

96
00:05:25,010 --> 00:05:27,150
so that's a really cool idea. 

97
00:05:27,150 --> 00:05:29,250
Why did we do it? Let's see.

98
00:05:29,250 --> 00:05:31,380
There are probably a handful of reasons.

99
00:05:31,380 --> 00:05:34,270
Like I said before, I feel like we're trying to build

100
00:05:34,270 --> 00:05:39,710
a culture of learning, and so for us, it's not easy 

101
00:05:39,710 --> 00:05:43,740
to write all of the time, but we require everybody in the office to write,

102
00:05:43,740 --> 00:05:47,390
and this gave us some really poignant subject matter,

103
00:05:47,390 --> 00:05:49,560
I think, to cover, in terms of writing.

104
00:05:49,560 --> 00:05:52,550
It's an opportunity to introduce the rest of the team

105
00:05:52,550 --> 00:05:56,290
to writing more about the things, the problems that they're solving.

106
00:05:56,290 --> 00:05:59,850
It's also a little bit of accountability for us.

107
00:05:59,850 --> 00:06:03,470
If you're out there and you had to redesign your own site,

108
00:06:03,470 --> 00:06:05,690
you know how hard that can be.

109
00:06:05,690 --> 00:06:09,450
And putting it out there for the rest of our peers to see

110
00:06:09,450 --> 00:06:13,520
and give feedback on has been an opportunity to say to us,

111
00:06:13,520 --> 00:06:15,810
"Look, this is important to do."

112
00:06:15,810 --> 00:06:17,740
"We have to make time for this."

113
00:06:17,740 --> 00:06:22,030
We have to make sure that--we have obligations to clients obviously,

114
00:06:22,030 --> 00:06:25,410
but this is just as important as that work too.

115
00:06:25,410 --> 00:06:28,640
And for a year, we've been using our website 

116
00:06:28,640 --> 00:06:32,050
as an example of some things not to do in our workshops

117
00:06:32,050 --> 00:06:35,310
because it's one of the first sites that we built with some of these techniques.

118
00:06:35,310 --> 00:06:37,700
We've learned so much in a year or two,

119
00:06:37,700 --> 00:06:41,050
and so it was time to do it.

120
00:06:41,050 --> 00:06:46,540
Yeah, I bet that pressure too of letting everyone see your timeline 

121
00:06:46,540 --> 00:06:51,410
and opening it up for people to see really makes you stick to it and get it done.

122
00:06:51,410 --> 00:06:53,980
Yeah, I mean, the holidays hit right in the middle,

123
00:06:53,980 --> 00:06:55,940
so we've actually been a little quiet,

124
00:06:55,940 --> 00:06:59,310
but later this week we're kicking it back up.

125
00:06:59,310 --> 00:07:04,110
But to be honest, if you have the illusion 

126
00:07:04,110 --> 00:07:06,260
that what you're doing on the Web is private, 

127
00:07:06,260 --> 00:07:10,700
then you're probably mistaken, because all of our work is out there.

128
00:07:10,700 --> 00:07:13,160
People can view source on pretty much anything we do,

129
00:07:13,160 --> 00:07:16,230
so it's kind of the nature of the industry too.

130
00:07:16,230 --> 00:07:19,900
You mentioned how your site was an example of what not to do.

131
00:07:19,900 --> 00:07:21,360
What do you mean by that?

132
00:07:21,360 --> 00:07:23,140
A perfect example.

133
00:07:23,140 --> 00:07:26,660
If you go to the Sparkbox Foundry and go to any post,

134
00:07:26,660 --> 00:07:29,160
and you're on, say, a small device, 

135
00:07:29,160 --> 00:07:32,350
what you will see will actually look more like a 404 page

136
00:07:32,350 --> 00:07:35,990
than an article, and that's because we didn't think so much

137
00:07:35,990 --> 00:07:38,600
about the usability of the site when we did it.

138
00:07:38,600 --> 00:07:40,820
We were obsessed.

139
00:07:40,820 --> 00:07:45,470
We got caught up in the 3 prime techniques of responsive web design.

140
00:07:45,470 --> 00:07:47,700
What we ended up doing was taking a big site 

141
00:07:47,700 --> 00:07:52,800
and cramming it on to a small device, which is not how this should work.

142
00:07:52,800 --> 00:07:54,960
There is a lot more to it than that,

143
00:07:54,960 --> 00:07:59,210
and that work was primarily done by front-end developers,

144
00:07:59,210 --> 00:08:02,840
and so one of the things that we talk a lot about in our workshop

145
00:08:02,840 --> 00:08:08,990
is that you have to invite the rest of the team into the conversation,

146
00:08:08,990 --> 00:08:11,090
and we speak about this idea of collaboration.

147
00:08:11,090 --> 00:08:13,190
Obviously, everybody who has talked about this stuff and has done it

148
00:08:13,190 --> 00:08:16,450
knows that you've got to have the right team members 

149
00:08:16,450 --> 00:08:18,620
in the room to make decisions.

150
00:08:18,620 --> 00:08:21,240
We've actually found that we end up--

151
00:08:21,240 --> 00:08:24,060
we do something--I don't even know if this is new or not,

152
00:08:24,060 --> 00:08:27,280
but we call it natural decisions, because in a more linear process,

153
00:08:27,280 --> 00:08:30,880
a more traditional process, what we've seen is one person

154
00:08:30,880 --> 00:08:33,789
or one discipline feels like they need to finish their thing

155
00:08:33,789 --> 00:08:36,070
and get to the deliverable and hand it to the next person.

156
00:08:36,070 --> 00:08:38,049
They feel like they have to make all of the decisions 

157
00:08:38,049 --> 00:08:41,780
about that specific discipline early in the process.

158
00:08:41,780 --> 00:08:45,260
What we try to do is delay decisions as long as we can.

159
00:08:45,260 --> 00:08:48,460
We're waiting until it's the right time to make those decisions,

160
00:08:48,460 --> 00:08:52,520
so I'm not forcing my UX people or whoever is doing wireframes or whatever

161
00:08:52,520 --> 00:08:55,670
to have all of that done and figured out before we've gotten into the code.

162
00:08:55,670 --> 00:09:00,780
That just doesn't make any sense. Things are too dynamic, too fluid.

163
00:09:00,780 --> 00:09:03,140
I was talking to Samantha Warren last night, 

164
00:09:03,140 --> 00:09:05,800
and she said, "There is no responsive process."

165
00:09:05,800 --> 00:09:09,540
"The process itself has to be responsive."

166
00:09:09,540 --> 00:09:14,780
"It has to change for the project," and that's very true, very true.

167
00:09:14,780 --> 00:09:20,430
So speaking of the process, there is all this about designing in the browser

168
00:09:20,430 --> 00:09:24,140
and trying to figure out that process, because I think saying that

169
00:09:24,140 --> 00:09:28,980
a process is responsive, bosses and clients don't like that, right?

170
00:09:28,980 --> 00:09:33,260
So how do you think that's going to work moving forward?

171
00:09:33,260 --> 00:09:38,290
Do you think that designers--there is less of a deliverable at the end for them?

172
00:09:38,290 --> 00:09:43,120
Do you think that maybe--like how do you envision that process changing?

173
00:09:43,120 --> 00:09:46,880
I said a little bit earlier that I feel like it's really more about collaboration.

174
00:09:46,880 --> 00:09:52,520
For us, we end up putting front-end developers with designers.

175
00:09:52,520 --> 00:09:55,710
If you know about pair programming, we do that with 

176
00:09:55,710 --> 00:09:57,600
content people and technical people.

177
00:09:57,600 --> 00:10:01,360
We do that with every person, every discipline in our office

178
00:10:01,360 --> 00:10:04,640
pairs with other disciplines, and we do that because 

179
00:10:04,640 --> 00:10:07,320
I want all of my team to broaden their knowledge 

180
00:10:07,320 --> 00:10:09,030
about the Web as a whole.

181
00:10:09,030 --> 00:10:13,040
That gives them the ability to be informed at least

182
00:10:13,040 --> 00:10:15,930
and help make better decisions when they're tasked

183
00:10:15,930 --> 00:10:17,950
 with doing  something on their own.

184
00:10:17,950 --> 00:10:20,890
But early in the process, I'll put my technical director

185
00:10:20,890 --> 00:10:23,980
and my content director in the room, lock them in the conference room together

186
00:10:23,980 --> 00:10:27,820
with a projector and let them figure out how to get a basis

187
00:10:27,820 --> 00:10:29,240
for the site started.

188
00:10:29,240 --> 00:10:31,610
Those are the 2 people that really need to be there at the beginning.

189
00:10:31,610 --> 00:10:33,940
Somebody has to get the architecture of the thing, 

190
00:10:33,940 --> 00:10:36,370
something functional built, the technical director,

191
00:10:36,370 --> 00:10:39,170
and somebody who understands the content early in the process.

192
00:10:39,170 --> 00:10:42,690
Those are the 2 that have to figure out how this stuff is going to actually live together,

193
00:10:42,690 --> 00:10:44,600
so we put them together early.

194
00:10:44,600 --> 00:10:47,160
They get something built that we can actually use

195
00:10:47,160 --> 00:10:52,160
during our dev process, and then we do something called style prototypes,

196
00:10:52,160 --> 00:10:55,380
and we run that in parallel with something called a content priority prototype.

197
00:10:55,380 --> 00:10:58,280
These are both deliverables that happen in the browser for us,

198
00:10:58,280 --> 00:11:02,410
so it's HTML, and it's some CSS, and they're separate at this point.

199
00:11:02,410 --> 00:11:05,350
We try to make sure that deliverables we offer

200
00:11:05,350 --> 00:11:08,980
that aren't intended to focus on design

201
00:11:08,980 --> 00:11:11,260
look as ugly as they can,

202
00:11:11,260 --> 00:11:14,260
because I've been in too many meetings with beautiful wireframes

203
00:11:14,260 --> 00:11:16,910
where my clients are commenting about colors 

204
00:11:16,910 --> 00:11:22,400
or layout or something, and it's like, "Okay, let's just cut this stuff out."

205
00:11:22,400 --> 00:11:25,360
We show pretty much unstyled HTML

206
00:11:25,360 --> 00:11:28,610
in what is like a prototype but with real content,

207
00:11:28,610 --> 00:11:30,940
as much real content in it as we can very early,

208
00:11:30,940 --> 00:11:32,810
and we do that in a linear way

209
00:11:32,810 --> 00:11:34,320
so that they can see priority.

210
00:11:34,320 --> 00:11:37,100
The linear nature forces us to prioritize things.

211
00:11:37,100 --> 00:11:40,270
And then at the same time, we're working on a style prototype,

212
00:11:40,270 --> 00:11:43,690
which is like an evolution of style tiles from Samantha,

213
00:11:43,690 --> 00:11:45,570
but it happens in the browser.

214
00:11:45,570 --> 00:11:49,030
Just a basic, basic HTML page, no real content at all,

215
00:11:49,030 --> 00:11:51,920
and it's really about typography, color, texture, 

216
00:11:51,920 --> 00:11:55,850
some of the core design principles that we have.

217
00:11:55,850 --> 00:11:58,000
Our designers build those on their own.

218
00:11:58,000 --> 00:12:01,860
If they need a little help, they'll work with somebody who is a specialist in CSS,

219
00:12:01,860 --> 00:12:04,990
but we're trying to get them to build these on their own,

220
00:12:04,990 --> 00:12:08,670
because they need to know CSS.

221
00:12:08,670 --> 00:12:11,680
I mean, there is a big conversation. I don't want to open up that can of worms.

222
00:12:11,680 --> 00:12:15,000
But I actually believe that it's very true if you're going to design

223
00:12:15,000 --> 00:12:17,000
for the Web, you need to learn some CSS.

224
00:12:17,000 --> 00:12:19,000
I think this is true too.

225
00:12:19,000 --> 00:12:21,960
If you're going to write content for the Web, you should probably learn some HTML.

226
00:12:21,960 --> 00:12:23,730
That's semantics, right?

227
00:12:23,730 --> 00:12:27,590
Yeah, because you used to be able to get a job as a web designer 

228
00:12:27,590 --> 00:12:32,250
knowing just a few CSS, a little bit of CSS, a little bit of HTML.

229
00:12:32,250 --> 00:12:35,220
Now it seems like the expectations are so much higher 

230
00:12:35,220 --> 00:12:38,410
with having to know HTML5, CSS3, LESS and SASS

231
00:12:38,410 --> 00:12:41,370
and all this stuff, so what do you think

232
00:12:41,370 --> 00:12:44,820
a web designer needs just to get into the door these days?

233
00:12:44,820 --> 00:12:47,320
A web designer?

234
00:12:47,320 --> 00:12:49,520
What does that even mean? [laughs]

235
00:12:49,520 --> 00:12:51,740
I mean, do you think there is a bigger gulf now between 

236
00:12:51,740 --> 00:12:55,060
a front-end designer and then maybe someone who is a front-end developer

237
00:12:55,060 --> 00:12:58,650
than there used to be, or do you still think that someone should wear both hats?

238
00:12:58,650 --> 00:13:01,050
My technical director is Rob Harr,

239
00:13:01,050 --> 00:13:03,510
and he keeps saying this thing in the office

240
00:13:03,510 --> 00:13:10,380
where he says that SASS--or LESS I think is one of the more popular

241
00:13:10,380 --> 00:13:15,210
first preprocessors, but he says, "These preprocessors for CSS

242
00:13:15,210 --> 00:13:18,060
were like a gateway drug for front-end devs."

243
00:13:18,060 --> 00:13:21,900
What he's trying to say is that this whole front-end development thing

244
00:13:21,900 --> 00:13:24,540
has gotten so complex.

245
00:13:24,540 --> 00:13:27,690
I feel like front-end devs who lean technically,

246
00:13:27,690 --> 00:13:31,270
technical in their nature are shifting towards all of this complex 

247
00:13:31,270 --> 00:13:35,220
local build process stuff with running node and grunt

248
00:13:35,220 --> 00:13:38,820
and all this stuff to get a really cool, easy-to-use front-end development.

249
00:13:38,820 --> 00:13:40,590
Well, easy to use if you're a technical person, 

250
00:13:40,590 --> 00:13:43,240
a front-end development tool, or environment running.

251
00:13:43,240 --> 00:13:46,210
But then you have designers who started maybe branding in print

252
00:13:46,210 --> 00:13:49,290
and are trying to move into this space, and they're going to learn CSS.

253
00:13:49,290 --> 00:13:51,070
They're going to learn some HTML. That's great.

254
00:13:51,070 --> 00:13:54,340
But they're going to shy away from even using something like SASS,

255
00:13:54,340 --> 00:13:57,740
if they have to install Ruby or use the command line.

256
00:13:57,740 --> 00:13:59,100
Andy Clark goes on about this.

257
00:13:59,100 --> 00:14:01,210
"Why is this a command line?"

258
00:14:01,210 --> 00:14:03,170
"Make this easy for me to do."

259
00:14:03,170 --> 00:14:06,260
He's got a really valid point, which is at some point

260
00:14:06,260 --> 00:14:08,510
the tooling that we use for doing this stuff 

261
00:14:08,510 --> 00:14:10,630
is going to settle a little bit I hope,

262
00:14:10,630 --> 00:14:12,560
and we'll start to see there are some clear winners 

263
00:14:12,560 --> 00:14:14,220
in terms of what you should be doing.

264
00:14:14,220 --> 00:14:17,470
And then I think the people who are less technical 

265
00:14:17,470 --> 00:14:20,540
will be able to come into that and embrace it a bit easier.

266
00:14:20,540 --> 00:14:23,300
So there still is a place for them to co-exist.

267
00:14:23,300 --> 00:14:26,200
It's not like-->>Oh, yeah, absolutely.

268
00:14:26,200 --> 00:14:29,170
What is the biggest mistake you see web designers making

269
00:14:29,170 --> 00:14:31,630
when designing responsive websites?

270
00:14:31,630 --> 00:14:35,440
Designers like to control things,

271
00:14:35,440 --> 00:14:40,990
and if you're going to design for the Web, you have to let go of that.

272
00:14:40,990 --> 00:14:44,690
That's probably the biggest thing is I talk to people all the time about this,

273
00:14:44,690 --> 00:14:47,810
and they say, "Well, when do you actually design the site?"

274
00:14:47,810 --> 00:14:50,160
"When do you design the site?"

275
00:14:50,160 --> 00:14:54,220
And we still do a lot in Photoshop,

276
00:14:54,220 --> 00:14:57,020
but it's becoming more like a sketch pad for us.

277
00:14:57,020 --> 00:15:00,620
And the implementation of that is happening in the browser,

278
00:15:00,620 --> 00:15:02,550
and that's where it needs to happen.

279
00:15:02,550 --> 00:15:06,010
We're trying to get away from making pictures of websites

280
00:15:06,010 --> 00:15:10,890
as so many people are saying these days and actually building sites themselves.

281
00:15:10,890 --> 00:15:12,500
I don't know if that answers the question.

282
00:15:12,500 --> 00:15:16,230
So you think designers maybe get too fixated on perfection 

283
00:15:16,230 --> 00:15:19,070
of every single pixel and then the type,

284
00:15:19,070 --> 00:15:23,500
and then they get uncomfortable when they see it actually live in its environment.

285
00:15:23,500 --> 00:15:26,600
We used to--oh, gosh, we were so ridiculous about this stuff.

286
00:15:26,600 --> 00:15:33,530
My creative director, Jeremy Lloyd, is obsessed with type, typography. 

287
00:15:33,530 --> 00:15:35,390
He loves it.

288
00:15:35,390 --> 00:15:37,350
He comes from a branding background, and he cares about this stuff.

289
00:15:37,350 --> 00:15:42,490
And I can remember times where the type in Photoshop

290
00:15:42,490 --> 00:15:44,650
looked beautiful, but as soon as we would move it to the Web,

291
00:15:44,650 --> 00:15:47,040
obviously it's going to look different, 

292
00:15:47,040 --> 00:15:49,180
and then the client, we were showing static comps

293
00:15:49,180 --> 00:15:51,080
that were exported from Photoshop,

294
00:15:51,080 --> 00:15:53,530
so clients get an expectation about type and color

295
00:15:53,530 --> 00:15:57,300
and how these things are going to look, and I can remember times

296
00:15:57,300 --> 00:15:59,670
when we would literally move this stuff into the browser,

297
00:15:59,670 --> 00:16:03,490
get the Web font rendering, do a screen cap of the type

298
00:16:03,490 --> 00:16:05,870
in the browser and bring it back into Photoshop

299
00:16:05,870 --> 00:16:07,400
so that we could show accurate web type.

300
00:16:07,400 --> 00:16:10,430
That's ridiculous.

301
00:16:10,430 --> 00:16:12,550
Why don't we just put it in the browser?

302
00:16:12,550 --> 00:16:15,170
I think it's really about letting go of control.

303
00:16:15,170 --> 00:16:18,520
That's the biggest thing that I see, because we've wasted so much time

304
00:16:18,520 --> 00:16:21,270
making things perfect in Photoshop

305
00:16:21,270 --> 00:16:23,810
knowing that they're never actually going to look like that.

306
00:16:23,810 --> 00:16:25,650
It's just not realistic.

307
00:16:25,650 --> 00:16:28,270
So as far as responsive images go,

308
00:16:28,270 --> 00:16:31,170
there are a few things out there, like picture fill

309
00:16:31,170 --> 00:16:34,940
and some great options but nothing really solidified or set in stone.

310
00:16:34,940 --> 00:16:38,300
What do you think is the best solution right now?

311
00:16:38,300 --> 00:16:40,920
Well, things are getting solidified. 

312
00:16:40,920 --> 00:16:45,390
I think the first draft is out for both picture and source set,

313
00:16:45,390 --> 00:16:47,830
if I recall, very recently.

314
00:16:47,830 --> 00:16:49,530
Those things are happening.

315
00:16:49,530 --> 00:16:56,560
There are lots of heated dialogue still happening about those things,

316
00:16:56,560 --> 00:16:59,510
and I think that in the end, that's going to be what we really need.

317
00:16:59,510 --> 00:17:01,950
There are tons of solutions for this stuff, though.

318
00:17:01,950 --> 00:17:04,810
There is everything from proxy-based solutions

319
00:17:04,810 --> 00:17:09,500
where you've got  Resrc It, R-E-S-R-C dot I-T,

320
00:17:09,500 --> 00:17:12,760
which I haven't actually tried yet, but I know that it's similar

321
00:17:12,760 --> 00:17:16,130
to some of the stuff Sentia was doing.

322
00:17:16,130 --> 00:17:19,970
And what that does is basically you can modify the URL of your image,

323
00:17:19,970 --> 00:17:23,730
so it's easy to implement,

324
00:17:23,730 --> 00:17:27,430
but it does come along with some other interesting implications.

325
00:17:27,430 --> 00:17:31,090
What happens is you're modifying it by changing a server,

326
00:17:31,090 --> 00:17:33,790
putting a new server basically on the front of the URL.

327
00:17:33,790 --> 00:17:36,630
Someone else gets the request, a different server.

328
00:17:36,630 --> 00:17:39,630
They parse out your image, which is still in the URL,

329
00:17:39,630 --> 00:17:41,290
take it to their server.

330
00:17:41,290 --> 00:17:45,610
Also, they inspect user/agent stuff, so they're doing some device classification,

331
00:17:45,610 --> 00:17:51,690
scaling that image, sending it back to you.

332
00:17:51,690 --> 00:17:55,180
Performance concerns obviously.

333
00:17:55,180 --> 00:17:58,380
You're dependent on someone else to solve that problem for you.

334
00:17:58,380 --> 00:18:02,530
Maybe you don't want it to be set to the size of the resolution of the device.

335
00:18:02,530 --> 00:18:06,250
But a very easy to use kind of solution.

336
00:18:06,250 --> 00:18:09,610
You can also do that same kind of thing on your own server

337
00:18:09,610 --> 00:18:13,860
with a little bit of htaccess and basically grabbing

338
00:18:13,860 --> 00:18:19,110
any image type and doing the exact same kind of thing

339
00:18:19,110 --> 00:18:21,690
but doing it on your box.

340
00:18:21,690 --> 00:18:24,980
Actually, picturefill is a really good solution.

341
00:18:24,980 --> 00:18:27,130
Scott has done a fantastic job with that, 

342
00:18:27,130 --> 00:18:30,740
and if you're going to implement it, I would say do something 

343
00:18:30,740 --> 00:18:33,230
where you in your CMS give the ability

344
00:18:33,230 --> 00:18:36,960
to at some point in the future generate the actual picture syntax

345
00:18:36,960 --> 00:18:38,950
when it's ready.

346
00:18:38,950 --> 00:18:41,700
But it's very well tested.

347
00:18:41,700 --> 00:18:43,870
People are using it with great success,

348
00:18:43,870 --> 00:18:47,800
so I think that's a very valid solution right now.

349
00:18:47,800 --> 00:18:51,010
There are all kinds of other crazy things that people are trying,

350
00:18:51,010 --> 00:18:55,670
but in the end, I think we need a little bit better HTML element.

351
00:18:55,670 --> 00:18:57,950
Yeah, definitely. They're working on it, right?

352
00:18:57,950 --> 00:19:00,450
What do you think will be the major improvements 

353
00:19:00,450 --> 00:19:02,330
to responsive web design this year?

354
00:19:02,330 --> 00:19:05,570
Well, I feel like some bigger organizations are finally starting to get on board

355
00:19:05,570 --> 00:19:09,150
with some of this stuff, so some of the requests that we're getting

356
00:19:09,150 --> 00:19:14,650
for 3 or 4 ROI case studies we'll finally start to have some of that data available,

357
00:19:14,650 --> 00:19:18,850
which I think will only encourage more to do so.

358
00:19:18,850 --> 00:19:21,880
I think there is going to be that move from some bigger companies, 

359
00:19:21,880 --> 00:19:25,290
some big e-commerce type stuff that's going to be happening this year I know,

360
00:19:25,290 --> 00:19:27,540
so that's really exciting.

361
00:19:27,540 --> 00:19:31,150
I talk about this a little bit, and I wrote an article called

362
00:19:31,150 --> 00:19:34,760
"The Responsive Dip," and it's based on the idea of how

363
00:19:34,760 --> 00:19:39,590
humans learn things, and you move through these 4 stages of learning,

364
00:19:39,590 --> 00:19:42,850
and I feel like we are at a stage where we 

365
00:19:42,850 --> 00:19:45,800
are finally starting to actually understand that

366
00:19:45,800 --> 00:19:48,010
we're not really doing this quite right.

367
00:19:48,010 --> 00:19:51,210
We have to rethink a lot more of what we've done.

368
00:19:51,210 --> 00:19:53,450
Sometimes you actually get worse at doing something 

369
00:19:53,450 --> 00:19:55,990
before you get better, but that's kind of the idea.

370
00:19:55,990 --> 00:19:59,430
I think for us as an industry that's part of what's happening here.

371
00:19:59,430 --> 00:20:03,190
In Jakob Nielsen's study not too long ago

372
00:20:03,190 --> 00:20:05,690
where there was so much--and Josh Clark responded--

373
00:20:05,690 --> 00:20:07,360
so many people wrote back about--

374
00:20:07,360 --> 00:20:10,620
Jakob said based on data of testing,

375
00:20:10,620 --> 00:20:14,710
mobile-specific sites versus responsive sites,

376
00:20:14,710 --> 00:20:17,900
he found that the usability of the responsive sites was much worse,

377
00:20:17,900 --> 00:20:20,630
and his recommendations were to do something like

378
00:20:20,630 --> 00:20:23,070
build a mobile site, cut content, cut features,

379
00:20:23,070 --> 00:20:25,540
and give them a link to a full site.

380
00:20:25,540 --> 00:20:27,910
Obviously, many people in the industry said, "Wait a second."

381
00:20:27,910 --> 00:20:30,050
"What are you talking about? That's a bad idea."

382
00:20:30,050 --> 00:20:33,480
"You're making a lot of assumptions about context and all these things,"

383
00:20:33,480 --> 00:20:35,630
which I agree with.

384
00:20:35,630 --> 00:20:39,430
But I understand how Jakob arrived at the conclusion that he did,

385
00:20:39,430 --> 00:20:42,670
and that's because we've built very non-performance sites

386
00:20:42,670 --> 00:20:45,710
with lousy user experiences.

387
00:20:45,710 --> 00:20:48,460
We're learning.

388
00:20:48,460 --> 00:20:53,310
I think in some respects we've gotten worse at doing web design

389
00:20:53,310 --> 00:20:56,610
by trying to figure this stuff out.

390
00:20:56,610 --> 00:20:59,320
But we're going to come out of that dip of learning,

391
00:20:59,320 --> 00:21:01,710
and we're going to be, I think, in a much better place.

392
00:21:01,710 --> 00:21:05,460
We're starting to see some sites come out that are demonstrating 

393
00:21:05,460 --> 00:21:09,610
that this stuff can really work, so I think this is going to be the year

394
00:21:09,610 --> 00:21:14,600
where we start to see some really creative responsive type solutions,

395
00:21:14,600 --> 00:21:18,910
and we start to see real organizational change, 

396
00:21:18,910 --> 00:21:23,360
which is required to invite this kind of process to happen,

397
00:21:23,360 --> 00:21:26,720
at a bigger company in particular.

398
00:21:26,720 --> 00:21:28,980
I think there is so much happening there,

399
00:21:28,980 --> 00:21:32,650
and so for me, the future of this stuff, at least for the next year

400
00:21:32,650 --> 00:21:37,200
of what I see, it's really more about the hardest stuff to figure out,

401
00:21:37,200 --> 00:21:39,210
which is not the technical stuff.

402
00:21:39,210 --> 00:21:43,010
It's the politics of the organization that has to adjust.

403
00:21:43,010 --> 00:21:45,010
That's the hard stuff.

404
00:21:45,010 --> 00:21:47,350
All the people who build sites, they see this stuff,

405
00:21:47,350 --> 00:21:49,070
and it's obvious.

406
00:21:49,070 --> 00:21:51,240
This makes sense. This is how it should be.

407
00:21:51,240 --> 00:21:55,640
We're finally embracing the fluid nature of our medium.

408
00:21:55,640 --> 00:21:57,980
But it's the people who aren't as technical 

409
00:21:57,980 --> 00:22:01,740
but who are making money decisions, financial decisions 

410
00:22:01,740 --> 00:22:04,050
in an organization and have to say, "Yes, it's okay

411
00:22:04,050 --> 00:22:07,200
"for you all to sit together in the same room

412
00:22:07,200 --> 00:22:10,800
"and for me to not know exactly how long this is going to take

413
00:22:10,800 --> 00:22:12,600
the first couple times you do it."

414
00:22:12,600 --> 00:22:16,080
That's a hard decision for a financial person to make,

415
00:22:16,080 --> 00:22:18,020
 business person.

416
00:22:18,020 --> 00:22:20,270
Well, I think that's a great place to wrap it up,

417
00:22:20,270 --> 00:22:23,250
with the future of responsive web.

418
00:22:23,250 --> 00:22:26,460
Where can they keep up with your work and keep up with you?

419
00:22:26,460 --> 00:22:29,530
The Sparkbox website, SeeSparkbox.com,

420
00:22:29,530 --> 00:22:33,280
and on Twitter, just BenCallahan, all 1 word.

421
00:22:33,280 --> 00:22:35,410
I have BenCallahan.com if you want to see

422
00:22:35,410 --> 00:22:37,140
where I'm going to be speaking or what I'm writing about,

423
00:22:37,140 --> 00:22:41,280
those kinds of things, and then the Build Responsively 

424
00:22:41,280 --> 00:22:43,860
workshop is coming around, so try to find one of those,

425
00:22:43,860 --> 00:22:45,770
and we'd love to meet you guys there.

426
00:22:45,770 --> 00:22:47,900
Cool. Well, thank you for joining us today.

427
00:22:47,900 --> 00:22:50,360
My pleasure.>>Until next time.

428
00:22:50,360 --> 00:22:52,250
Thanks for watching.

429
00:22:52,250 --> 00:22:57,190
[Treehouse Friends]