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]