1 00:00:00,000 --> 00:00:15,380 [? music ?] 2 00:00:15,380 --> 00:00:17,590 Welcome to another episode of Treehouse Friends. 3 00:00:17,590 --> 00:00:20,820 My name's Randy Hoyt, and today I'm here at the In Control Conference in Orlando 4 00:00:20,820 --> 00:00:23,320 joined by one of the co-organizers, Christopher Schmidt. 5 00:00:23,320 --> 00:00:25,320 How are you Christopher? >>Doing great man. How are you doing? 6 00:00:25,320 --> 00:00:27,740 Doing well. Thanks for joining us today. >>Of course. 7 00:00:27,740 --> 00:00:30,120 Can you tell us a little about the In Control Conference? 8 00:00:30,120 --> 00:00:34,120 It's a conference we started about 4 or 5 years ago. 9 00:00:34,120 --> 00:00:38,520 We started out in Cincinnati, and one of the things we do is we work with local AIGA 10 00:00:38,520 --> 00:00:42,990 chapters, and AIGA is a national organization of design professionals. 11 00:00:42,990 --> 00:00:46,570 So it's design professionals of any various design field, 12 00:00:46,570 --> 00:00:50,220 but their primary background is print design. 13 00:00:50,220 --> 00:00:53,490 With In Control, we really wanted to bring web designers who are really just experts 14 00:00:53,490 --> 00:00:58,970 in their field and bring them to local chapters as well as inviting people outside the AIGA 15 00:00:58,970 --> 00:01:02,800 to attend a conference and really just deep dive into different technologies 16 00:01:02,800 --> 00:01:05,330 and aspects of web design. 17 00:01:05,330 --> 00:01:10,490 It's a 2-day conference, so each day kicks off with a keynote, 18 00:01:10,490 --> 00:01:15,820 and then on the first day we start with HTML as a foundation of HTML5, 19 00:01:15,820 --> 00:01:20,510 and then we get to a CSS, and the next session is JavaScript, 20 00:01:20,510 --> 00:01:22,720 and then the last session of the first day is kind of like 21 00:01:22,720 --> 00:01:26,020 a session that kind of ties everything together. 22 00:01:26,020 --> 00:01:29,340 Right now while we're talking Chris Coyier is doing his modern work flow. 23 00:01:29,340 --> 00:01:32,460 So he's really going to be touching on HTML, CSS, JavaScript, 24 00:01:32,460 --> 00:01:37,100 and all the other stuff that a really great website in today's age. 25 00:01:37,100 --> 00:01:40,100 Day 2 is what we call the propri track. 26 00:01:40,100 --> 00:01:43,960 We kick off another keynote, but then that day is more like soft sciences, 27 00:01:43,960 --> 00:01:47,400 usability, content strategy, accessibility, 28 00:01:47,400 --> 00:01:49,640 stuff that technically you don't need to make a website, 29 00:01:49,640 --> 00:01:52,950 but it's the materials and the education and the substance that you need 30 00:01:52,950 --> 00:01:55,880 to make a really great user experience for that. 31 00:01:55,880 --> 00:02:00,020 So our hope is that by the end of the day and the conference that 32 00:02:00,020 --> 00:02:03,580 people have a really good idea of what it takes to build even a better, 33 00:02:03,580 --> 00:02:06,980 more impressive website than when they started out 34 00:02:06,980 --> 00:02:12,650 and by having the new tools and the ideas that they leave inspired to do great work. 35 00:02:12,650 --> 00:02:15,520 Excellent. Now there's a lot of content available for free or pretty inexpensive 36 00:02:15,520 --> 00:02:18,770 on the internet--blogs, books, and even the Treehouse videos 37 00:02:18,770 --> 00:02:21,520 can provide people a lot of those same technical skills. 38 00:02:21,520 --> 00:02:23,970 What would you say is the benefit to getting out 39 00:02:23,970 --> 00:02:25,970 from behind the laptop and going to a conference? 40 00:02:25,970 --> 00:02:28,690 Well, I think you just said it. You get out of the laptop. Right? 41 00:02:28,690 --> 00:02:33,320 So you're always like in front of the laptop, and so your mind is always trying to 42 00:02:33,320 --> 00:02:36,720 find the latest blog tutorial or what not. 43 00:02:36,720 --> 00:02:39,880 Sometimes those get out of date and don't get updated. 44 00:02:39,880 --> 00:02:42,120 Sometimes information changes so fast, as you know. 45 00:02:42,120 --> 00:02:47,010 We just talked about responsive images and how much has changed within the last year. 46 00:02:47,010 --> 00:02:52,060 So that content needs to be updated, and sometimes what's really popular 47 00:02:52,060 --> 00:02:55,380 in Google searches isn't what you really need to know. Right? 48 00:02:55,380 --> 00:03:00,480 So you really need someone that can--speaker at a conference who can hopefully, 49 00:03:00,480 --> 00:03:03,760 if they're expert enough, put it into context for you 50 00:03:03,760 --> 00:03:07,390 and then also ask questions. 51 00:03:07,390 --> 00:03:09,950 The speaker probably wasn't expecting to answer that question, 52 00:03:09,950 --> 00:03:14,070 but it's a question that you came up with and they'll help you put the ideas 53 00:03:14,070 --> 00:03:17,400 into a better context for that. 54 00:03:17,400 --> 00:03:21,470 Also it's a great way to network and to meet like-minded folks 55 00:03:21,470 --> 00:03:24,470 who you normally wouldn't meet otherwise. 56 00:03:24,470 --> 00:03:26,780 It's really a great way of doing that. 57 00:03:26,780 --> 00:03:28,780 You know just the way the whole industry changes so fast. 58 00:03:28,780 --> 00:03:32,480 It's a really great way just to get up to date pretty fast. 59 00:03:32,480 --> 00:03:37,760 Not only just the speakers, but there is saying that sometimes the speaker 60 00:03:37,760 --> 00:03:41,440 isn't the smartest person in the room, it's the audience is the smartest person in the room. 61 00:03:41,440 --> 00:03:45,230 That's one of the things that when I speak is that if there's a question that I don't know 62 00:03:45,230 --> 00:03:47,510 I make sure I tell people, "I don't know the answer to that one, 63 00:03:47,510 --> 00:03:49,510 but maybe someone here knows." 64 00:03:49,510 --> 00:03:53,470 Most of the time they probably know the answer to it. 65 00:03:53,470 --> 00:03:58,080 That's a great way to just learn, get your answers, and move on and make-- 66 00:03:58,080 --> 00:04:01,500 really not make it but just be inspired to great things, 67 00:04:01,500 --> 00:04:04,950 and I feel like you get inspired by knowing. Right? 68 00:04:04,950 --> 00:04:07,830 And knowing what you need to do to build great things. 69 00:04:07,830 --> 00:04:12,520 You mentioned Cincinnati, and you've had In Control here in Orlando a couple of times. 70 00:04:12,520 --> 00:04:14,650 What other venues do you have coming up for this year? 71 00:04:14,650 --> 00:04:17,700 Well, we started out with Cincinnati because I used to live there, 72 00:04:17,700 --> 00:04:20,130 and I was on the board of an AIGA Cincinnati, so we started there. 73 00:04:20,130 --> 00:04:22,840 I was also on the board of AIGA Orlando, so I knew people here, 74 00:04:22,840 --> 00:04:26,000 and so we've been actually coming back to Orlando--this is our 4th year. 75 00:04:26,000 --> 00:04:29,170 It's just a great spot, and it's middle of wintertime 76 00:04:29,170 --> 00:04:32,100 so it's a really great way to warm up doing that. We come here. 77 00:04:32,100 --> 00:04:36,810 We also did Hawaii last year as well, and that was really great 78 00:04:36,810 --> 00:04:40,440 because we got people from all over the world to come to that one. 79 00:04:40,440 --> 00:04:42,440 Hawaii's awesome. 80 00:04:42,440 --> 00:04:44,740 Some other conferences we have lined up is Artifact Conference, 81 00:04:44,740 --> 00:04:50,000 which is more geared toward designing for this new multi-device web that we have now. 82 00:04:50,000 --> 00:04:52,280 Things have changed so much that some people just-- 83 00:04:52,280 --> 00:04:59,120 you just can't make Photoshop comps because it's not just 160 pixels anymore. 84 00:04:59,120 --> 00:05:05,410 Right? How do you design for responsive stuff when Photoshop doesn't cut it? 85 00:05:05,410 --> 00:05:09,780 We're working with people at Converge and also Jennifer Robbins 86 00:05:09,780 --> 00:05:12,830 who has been around with the web forever. 87 00:05:12,830 --> 00:05:17,120 This conference is a 2-day conference with workshops. 88 00:05:17,120 --> 00:05:19,390 We're more geared towards designers. 89 00:05:19,390 --> 00:05:22,690 So we'll have Trent Walton from Paravel there. 90 00:05:22,690 --> 00:05:27,960 Jennifer Simmons from the 5by5 podcast is going to be there. 91 00:05:27,960 --> 00:05:30,640 I'll be there talking about GitHub for designers 92 00:05:30,640 --> 00:05:37,550 just talking about new ways to design as well as HTML collages-- 93 00:05:37,550 --> 00:05:42,620 Dan Mall is going to be there--to style tiles to a whole bunch of other things. 94 00:05:42,620 --> 00:05:47,930 So it's going to be kind of a really geared towards front-end designers in terms of 95 00:05:47,930 --> 00:05:50,460 what does it take to be a designer now? 96 00:05:50,460 --> 00:05:55,490 Also then in October we're doing CSS Dev Conf. 97 00:05:55,490 --> 00:05:59,290 I'm a big CSS nerd. I've written the CSS code book for Riley. 98 00:05:59,290 --> 00:06:06,080 I've written other books about CSS too, and that's one I'm really geared to. 99 00:06:06,080 --> 00:06:10,840 I love that a lot. So that one's going to be in Colorado in the Stanley Hotel. 100 00:06:10,840 --> 00:06:16,250 One thing I love about that is that it's a double-blind call for papers, 101 00:06:16,250 --> 00:06:19,510 so people can submit talks for that conference, 102 00:06:19,510 --> 00:06:23,140 and instead of just like voting for a published speaker, 103 00:06:23,140 --> 00:06:25,720 we actually separate the name from the actual content. 104 00:06:25,720 --> 00:06:28,190 So people will vote on the content that they want to see, 105 00:06:28,190 --> 00:06:30,030 but they can also vote on the speakers there too. 106 00:06:30,030 --> 00:06:34,500 So we get a good idea what people want to see but also really what the content is. 107 00:06:34,500 --> 00:06:36,820 That's going to be our 2nd annual CSS Dev Conf. 108 00:06:36,820 --> 00:06:41,660 We did the CSS Dev Conf. the first year in Hawaii like back to back with In Control. 109 00:06:41,660 --> 00:06:45,360 That was just a huge success so we're going to go back and do it again. 110 00:06:45,360 --> 00:06:48,140 Where did you say Artifact was going to be, and what were the dates of that? 111 00:06:48,140 --> 00:06:52,950 Artifact is going to be May 13 through the 15. 112 00:06:52,950 --> 00:06:54,950 It's going to be in Austin, Texas. 113 00:06:54,950 --> 00:06:56,490 The first 2 days is going to be the normal conference too. 114 00:06:56,490 --> 00:07:01,260 It's just going to be sessions like half hour to hour sessions, 115 00:07:01,260 --> 00:07:04,190 and there are some panels--about an hour and 15 minutes or so with that. 116 00:07:04,190 --> 00:07:06,890 It's going to be a great time just to learn and get up to speed on that. 117 00:07:06,890 --> 00:07:10,430 The third day is going to be workshops. 118 00:07:10,430 --> 00:07:14,230 The folks from Build Responsively like Ben Callahan are going to be there 119 00:07:14,230 --> 00:07:16,710 to teach people all day about how to build responsively. 120 00:07:16,710 --> 00:07:23,350 Then also we have Brad Frost doing kind of design patterns workshop. 121 00:07:23,350 --> 00:07:28,620 We'll have a half-day workshop just talking about designing for touch, 122 00:07:28,620 --> 00:07:30,680 and what does that mean? Stuff like that. 123 00:07:30,680 --> 00:07:33,250 It's going to be a really great 3 days for that. 124 00:07:33,250 --> 00:07:35,910 CSS Conf. is also 3 days with just kind of the same format-- 125 00:07:35,910 --> 00:07:40,100 session for the first few days and then workshops the third day. 126 00:07:40,100 --> 00:07:43,430 Now for people that can't travel maybe to Austin, Colorado, or Hawaii, 127 00:07:43,430 --> 00:07:45,550 what would you recommend to have some of that similar networking 128 00:07:45,550 --> 00:07:47,830 and conference experience? 129 00:07:47,830 --> 00:07:49,830 I would definitely look into Refresh. 130 00:07:49,830 --> 00:07:53,710 Refresh is this concept where people just meet up kind of like a user's group, 131 00:07:53,710 --> 00:07:57,810 and it's really big in Austin where I am from. 132 00:07:57,810 --> 00:08:01,080 Every month there is a designer talk for about 40 minutes 133 00:08:01,080 --> 00:08:04,070 followed by a developer talk. 134 00:08:04,070 --> 00:08:05,930 It's just a really great way for the community to get together, 135 00:08:05,930 --> 00:08:08,350 share ideas, network, and mingle. 136 00:08:08,350 --> 00:08:10,540 Check to see if there's a Refresh in your area. 137 00:08:10,540 --> 00:08:15,380 If not, definitely start one. There's no reason why you can't do that. 138 00:08:15,380 --> 00:08:21,010 Also if your a designer check out and see if there's a local AIGA chapter in your area 139 00:08:21,010 --> 00:08:23,690 and also just check out Meetup--meetup.com. 140 00:08:23,690 --> 00:08:26,600 It's a really great way to see if there's any local interest in the area, 141 00:08:26,600 --> 00:08:29,160 and then also try to see if there are local conferences. 142 00:08:29,160 --> 00:08:34,190 We do great conferences, I believe, and I really support those a lot, 143 00:08:34,190 --> 00:08:36,960 but there's conferences that are all over that are great. 144 00:08:36,960 --> 00:08:40,919 So definitely check out to see if anyone is coming to your area. So definitely do that. 145 00:08:40,919 --> 00:08:43,570 Excellent. Now how did you get into organizing conferences? 146 00:08:43,570 --> 00:08:45,570 I think before that you were building websites for clients. 147 00:08:45,570 --> 00:08:48,090 When did you make the transition, and what brought that about? 148 00:08:48,090 --> 00:08:51,260 I was a speaker for a while. 149 00:08:51,260 --> 00:08:54,970 I've been doing web stuff for a long time, and really what happened was that 150 00:08:54,970 --> 00:08:58,670 during the dot com crash of the fabled 2000-2001 era 151 00:08:58,670 --> 00:09:05,770 I got laid off, and that weekend I got my first book offer. 152 00:09:05,770 --> 00:09:10,620 So I was like I was rummaging for the next 3 months or 6 months, so I'll just write a book. 153 00:09:10,620 --> 00:09:15,260 Once I did that, I just said, "Hey, you know, I would really like to speak at conferences." 154 00:09:15,260 --> 00:09:19,800 If people who are listening or seeing this feel they have the chops or whatnot, 155 00:09:19,800 --> 00:09:25,460 just to ask conference organizers, "Hey, I really want to talk about this XYZ topic, 156 00:09:25,460 --> 00:09:27,460 and this is what I've done." 157 00:09:27,460 --> 00:09:31,530 Once I had written the book I said I've done this, I know the technology, 158 00:09:31,530 --> 00:09:36,350 and so I started speaking around different conferences like Web Visions. 159 00:09:36,350 --> 00:09:41,790 That's in Portland and all over the place. 160 00:09:41,790 --> 00:09:43,790 So that's how I got involved. 161 00:09:43,790 --> 00:09:48,290 I had a lot of ideas about how to do a conference based off of what I saw, 162 00:09:48,290 --> 00:09:51,710 and then also I met my partner, Ari Styles. 163 00:09:51,710 --> 00:09:55,150 She actually worked for South by Southwest in Austin. 164 00:09:55,150 --> 00:09:58,830 So we met, and we started talking about conferences 165 00:09:58,830 --> 00:10:00,400 and really had a kind of boring conversation to other people, 166 00:10:00,400 --> 00:10:02,880 but to us we were like that would be great. 167 00:10:02,880 --> 00:10:05,710 It was just like on my bucket list. You know? 168 00:10:05,710 --> 00:10:11,090 I was just talking to Kimberly Blessing. She does this really great job of web standards. 169 00:10:11,090 --> 00:10:14,790 We decided to make a list of what we were going to do in the next year. 170 00:10:14,790 --> 00:10:19,100 I was like I really just know--rain or shine--no matter what happens next year 171 00:10:19,100 --> 00:10:21,660 I'll be doing a conference. 172 00:10:21,660 --> 00:10:25,870 Thankfully AIGI Cincinnati was gung ho with it. 173 00:10:25,870 --> 00:10:28,130 We put it on, and that was the first In Control. 174 00:10:28,130 --> 00:10:30,530 Not much has changed with In Control since that. 175 00:10:30,530 --> 00:10:34,530 So that the one that you see today is pretty much the same one that you saw back then 176 00:10:34,530 --> 00:10:39,970 except a lot more people, and the faces may change a little bit and the speakers. 177 00:10:39,970 --> 00:10:43,910 So that's kind of how it got started, and so that was really great. 178 00:10:43,910 --> 00:10:48,120 And then at the same time I spoke at an online conference 179 00:10:48,120 --> 00:10:52,610 called the Head Conference, and that was put on by Aral Balkan. 180 00:10:52,610 --> 00:10:56,450 That was just amazing because as I told you I spoke at conferences, 181 00:10:56,450 --> 00:10:59,620 and so what happens is usually as a speaker you go to conferences, 182 00:10:59,620 --> 00:11:02,130 you speak, and then you go back to your hotel room, 183 00:11:02,130 --> 00:11:03,670 pack up, and then head for the airport. Right? 184 00:11:03,670 --> 00:11:09,140 So I'd speak into my computer at home, and then when I was done 185 00:11:09,140 --> 00:11:14,000 I felt like I had to go to my bedroom, pack, and then go to the airport 186 00:11:14,000 --> 00:11:16,610 even though I was still there. I had to go up and leave. 187 00:11:16,610 --> 00:11:21,870 I felt like wow, this a really powerful impact for something that just--I just happened-- 188 00:11:21,870 --> 00:11:27,990 I had like over 100 people I was talking to. I was like this is a really awesome experience. 189 00:11:27,990 --> 00:11:31,180 It would be awesome just to have a whole day geared to CSS, 190 00:11:31,180 --> 00:11:34,200 like a mecca for total CSS nerd. 191 00:11:34,200 --> 00:11:37,960 So I got a whole bunch of my friends who are CSS nerds together, 192 00:11:37,960 --> 00:11:41,300 and we decided to see if we could make it work. 193 00:11:41,300 --> 00:11:44,880 That was the 1st annual CSS Summit. 194 00:11:44,880 --> 00:11:48,300 That just went off great like gangbusters, and so we've just been doing it ever since. 195 00:11:48,300 --> 00:11:54,870 We've done a CSS Summit. We've done a jQuery and JavaScript Summit every year. 196 00:11:54,870 --> 00:11:57,430 Now we've added Responsive Design Summit. 197 00:11:57,430 --> 00:12:01,900 So basically with all 9 conferences we just do online tracks, 198 00:12:01,900 --> 00:12:05,040 like all just deep dive in 1 topic and try to make things-- 199 00:12:05,040 --> 00:12:07,040 try to make things awesome. 200 00:12:07,040 --> 00:12:09,040 The name of our Environments for Humans, 201 00:12:09,040 --> 00:12:12,810 and the idea behind that is that we really want to teach people to build better tools 202 00:12:12,810 --> 00:12:15,560 so they make better websites. You know? 203 00:12:15,560 --> 00:12:18,720 Just make better user experiences for people 204 00:12:18,720 --> 00:12:21,380 because there's really a lot of bad websites out there. 205 00:12:21,380 --> 00:12:23,800 Thankfully things like Treehouse-- 206 00:12:23,800 --> 00:12:26,800 people can build better websites out there for people. 207 00:12:26,800 --> 00:12:28,890 I spoke at one of those online conferences. 208 00:12:28,890 --> 00:12:32,200 I was really impressed with the setup you guys have there. 209 00:12:32,200 --> 00:12:34,340 You can follow along. You feel like you're at a conference 210 00:12:34,340 --> 00:12:36,340 and even network with people in the chat room. 211 00:12:36,340 --> 00:12:39,030 So props to you for making that happen even remotely. 212 00:12:39,030 --> 00:12:41,230 Yeah. Definitely. So if there's not a conference coming to you, 213 00:12:41,230 --> 00:12:44,040 if there's not a Refresh or Meetup that you want to do, 214 00:12:44,040 --> 00:12:46,510 definitely check out online conferences. 215 00:12:46,510 --> 00:12:48,230 You can definitely meet and interact with people, 216 00:12:48,230 --> 00:12:52,190 and definitely the experts will come to your desktop as we say. 217 00:12:52,190 --> 00:12:54,190 You can definitely ask the questions you wanted to 218 00:12:54,190 --> 00:12:56,210 and feel like you're part of the community because that's one of the things 219 00:12:56,210 --> 00:12:58,210 that's great about our industry. 220 00:12:58,210 --> 00:13:02,580 That's why when I first started speaking was that just by our nature of our industry, 221 00:13:02,580 --> 00:13:06,720 we're so open that we have to share our information in order to 222 00:13:06,720 --> 00:13:13,160 get better but also to continue on because it's not going to happen otherwise. 223 00:13:13,160 --> 00:13:17,700 With web it's always about view source and how can we learn to do better? 224 00:13:17,700 --> 00:13:20,670 One of the hot topics these days are responsive images, 225 00:13:20,670 --> 00:13:24,470 and I know you have a book out, Designing Web and Mobile Graphics. 226 00:13:24,470 --> 00:13:26,470 [Christopher] Yeah, it just came out. 227 00:13:26,470 --> 00:13:28,470 Yeah, and it's talking a lot about images. 228 00:13:28,470 --> 00:13:30,940 What are your thoughts on responsive images these days? 229 00:13:30,940 --> 00:13:32,990 What techniques are people using? What's your favorite technique 230 00:13:32,990 --> 00:13:36,240 or the one you think works in most of the cases? 231 00:13:36,240 --> 00:13:41,350 Well, the one that's most well known is the picture element that's trying to be produced 232 00:13:41,350 --> 00:13:45,860 and go through HTML process--the working group process right now. 233 00:13:45,860 --> 00:13:51,250 That one kind of borrows a lot from the video tag and the audio tag 234 00:13:51,250 --> 00:13:58,100 to be easy to apply to media queries and HD, retina-- 235 00:13:58,100 --> 00:14:01,960 to be able to sort and say I want this image to be sorted to this one. 236 00:14:01,960 --> 00:14:04,870 That's really popular. People can kind of easily grok that. 237 00:14:04,870 --> 00:14:09,430 It's also kind of easy to work that into a browser rather than working with 238 00:14:09,430 --> 00:14:11,870 trying to create a whole new image format, 239 00:14:11,870 --> 00:14:14,830 create whole new modules for your server and stuff like that. 240 00:14:14,830 --> 00:14:16,990 So that's one way people are trying to do it like that. 241 00:14:16,990 --> 00:14:23,400 That's not my favorite way because the big issue with that is it's all about raster images. 242 00:14:23,400 --> 00:14:27,050 You can't really stretch and resize a raster image 243 00:14:27,050 --> 00:14:30,270 and have the imager quality be the same as it was for a vector graphic 244 00:14:30,270 --> 00:14:33,100 that you can get from Illustrator or something like that. 245 00:14:33,100 --> 00:14:37,880 So that's really the pain point of responsive images. 246 00:14:37,880 --> 00:14:39,880 A picture element allows you to do that. 247 00:14:39,880 --> 00:14:44,600 I'm not a big fan of that because I don't really feel like messing my CSS with my HTML. 248 00:14:44,600 --> 00:14:46,690 I like them separate. Right? 249 00:14:46,690 --> 00:14:53,830 My favorite way is one that requires a large JPEG, a large raster image--like huge, 250 00:14:53,830 --> 00:14:56,840 almost like desktop pattern, desktop background size pattern-- 251 00:14:56,840 --> 00:15:00,470 and you take it to Photoshop, and you just compress the heck out of it 252 00:15:00,470 --> 00:15:02,470 to like 0% quality. 253 00:15:02,470 --> 00:15:07,210 It looks like your dog just walked all over it or someone from the outside. 254 00:15:07,210 --> 00:15:09,240 Then you just resize it, because with responsive web design 255 00:15:09,240 --> 00:15:12,220 it's all about scaling images. Right? It looks great. 256 00:15:12,220 --> 00:15:25,930 Most times the file size will be lower than an image you would use for 72pdi screen. 257 00:15:25,930 --> 00:15:28,320 And since it's a huge image, and your stretching it, 258 00:15:28,320 --> 00:15:31,100 it also looks great on retina or HD screens. 259 00:15:31,100 --> 00:15:34,540 That's my favorite technique right now. 260 00:15:34,540 --> 00:15:37,660 There are some caveats with that that I mention in the book. 261 00:15:37,660 --> 00:15:42,800 You have to be mindful what type of your histogram 262 00:15:42,800 --> 00:15:46,410 which is kind of like the display colors in the image. Right? 263 00:15:46,410 --> 00:15:49,220 So you want like a nice mountain kind of range in the histogram, 264 00:15:49,220 --> 00:15:52,710 but if you have peaks and valleys like really sharp high-contrast colors, 265 00:15:52,710 --> 00:15:56,190 that type of technique doesn't really work very well. You have to be careful of that. 266 00:15:56,190 --> 00:16:01,980 But overall if you have a nice almost kind of mutated color range if you will, 267 00:16:01,980 --> 00:16:03,980 that technique is awesome. It's a really great way. 268 00:16:03,980 --> 00:16:12,310 It's a low file size, but it serves both retina and regular old school displays very well. 269 00:16:12,310 --> 00:16:17,780 In fact, you may want to be able to do a quick image swap with a mobile-first image 270 00:16:17,780 --> 00:16:21,780 and then swap it in with a high res after the page gets loaded. 271 00:16:21,780 --> 00:16:23,780 That's kind of my favorite technique right now. 272 00:16:23,780 --> 00:16:25,780 You mentioned the picture element. 273 00:16:25,780 --> 00:16:28,460 That's not supported by all browsers yet, so how do you work around that? 274 00:16:28,460 --> 00:16:31,420 Yeah. Right. It's going through the process right now. 275 00:16:31,420 --> 00:16:35,650 Hopefully it will be standardized, but even that is a slow, laborious process. Right? 276 00:16:35,650 --> 00:16:39,490 One of the things they can do is called a polyfill or really a patch, 277 00:16:39,490 --> 00:16:45,640 and so you just get that from GitHub--from the fine folks at Filament Group 278 00:16:45,640 --> 00:16:48,690 and just download it and apply it. 279 00:16:48,690 --> 00:16:50,520 It's a little bit more complex than what I would like it to be, 280 00:16:50,520 --> 00:16:53,650 but definitely if you want to use the picture element as a way to go 281 00:16:53,650 --> 00:16:55,880 and get familiar with what they're trying to do with it, 282 00:16:55,880 --> 00:16:58,120 that's definitely one solution to go with. 283 00:16:58,120 --> 00:17:00,230 You talked about raster and vector graphics. 284 00:17:00,230 --> 00:17:02,260 With raster images there are a number of different formats. 285 00:17:02,260 --> 00:17:05,210 I image you cover that in the book like when to use which format. 286 00:17:05,210 --> 00:17:08,609 Oh, yes. Yeah. >>What can you give as a high level just as a guide? 287 00:17:08,609 --> 00:17:12,349 The best way is if it's a photo go with a JPEG format. 288 00:17:12,349 --> 00:17:15,260 Flat colors you may want to go with GIF or maybe in PNG. 289 00:17:15,260 --> 00:17:21,010 So basically flat colors is GIF or PNG-8--PNG 8 bit. 290 00:17:21,010 --> 00:17:24,680 If you want transparency definitely look into PNG-24 291 00:17:24,680 --> 00:17:27,180 because that way you're going to have very subtle graphics 292 00:17:27,180 --> 00:17:30,950 and very nice overlays with your transparencies. 293 00:17:30,950 --> 00:17:33,000 What's the status of vectors in the browser? 294 00:17:33,000 --> 00:17:36,910 I know SVG is a popular format. Is that widely supported these days? 295 00:17:36,910 --> 00:17:40,290 It's widely supported, but there still are some minor bugs. 296 00:17:40,290 --> 00:17:46,050 But if you just need an image like a logo or a graphic that's not going to do a whole lot, 297 00:17:46,050 --> 00:17:51,130 SVGs are really well supported in browsers. It kind of blew my mind. 298 00:17:51,130 --> 00:17:55,480 I was doing research for the book--you can actually just do image source 299 00:17:55,480 --> 00:17:59,850 file name dot SVG, and it works. 300 00:17:59,850 --> 00:18:03,340 The only caveat is that if it's a complex SVG image, 301 00:18:03,340 --> 00:18:06,970 you might be better off going with an actual raster image. 302 00:18:06,970 --> 00:18:13,930 If it's just a logo with just kind of a flat simple-type face type of illustration or what not, 303 00:18:13,930 --> 00:18:19,270 SVG is the way to go with that, but if it's more complex almost like kind of an illustration 304 00:18:19,270 --> 00:18:23,740 more so, it might be better to go with a raster image for that. 305 00:18:23,740 --> 00:18:26,240 And then use one of the various responsive images techniques 306 00:18:26,240 --> 00:18:28,910 on top of that raster graphic? >>Right. Yeah. 307 00:18:28,910 --> 00:18:31,840 In the book we talk about a couple of techniques. 308 00:18:31,840 --> 00:18:35,060 We do talk about picture element. It goes step by step on how people can do that 309 00:18:35,060 --> 00:18:38,670 as well as the other technique for using big compressed images. 310 00:18:38,670 --> 00:18:40,950 What software can you use to make SVGs? 311 00:18:40,950 --> 00:18:43,930 Can you just export a Photoshop document into an SVG? 312 00:18:43,930 --> 00:18:49,230 The software you can use actually is Adobe Illustrator. 313 00:18:49,230 --> 00:18:52,870 In the book we go through the steps that you take to get a really well-compressed SVG 314 00:18:52,870 --> 00:18:56,870 graphic from Illustrator, and it's pretty awesome. 315 00:18:56,870 --> 00:18:59,710 Excellent. Well, I think that's all I had for you today Christopher. 316 00:18:59,710 --> 00:19:03,090 Thank you so much for your time. If people want to follow you, keep up with 317 00:19:03,090 --> 00:19:05,480 what you're doing, keep up with In Control, where can they find you online? 318 00:19:05,480 --> 00:19:07,480 What's the best way to follow you? 319 00:19:07,480 --> 00:19:11,380 Probably the best way is on Twitter. It's twitter.com/teleject. 320 00:19:11,380 --> 00:19:14,230 My website's christopherschmidt.com. 321 00:19:14,230 --> 00:19:20,720 My blog for the book is dwmgbook.com. 322 00:19:20,720 --> 00:19:25,600 I'll be updating graphic techniques as they change because the responsive web design 323 00:19:25,600 --> 00:19:30,150 chapter for the book I had to rewrite 3 times during the course of writing the book. 324 00:19:30,150 --> 00:19:34,600 I just knew as the book was coming out that I definitely need to have a place 325 00:19:34,600 --> 00:19:37,110 where I can just talk about responsive images 326 00:19:37,110 --> 00:19:39,320 and image techniques as they change and adapt. 327 00:19:39,320 --> 00:19:41,320 Great. Well, thanks so much. 328 00:19:41,320 --> 00:19:43,880 This was another episode of Treehouse Friends. We'll see you next time. 329 00:19:43,880 --> 00:19:49,990 [? music ?]