Web Conferences and Responsive Images - Christopher Schmitt

[? music ?] 0:00 Welcome to another episode of Treehouse Friends. 0:15 My name's Randy Hoyt, and today I'm here at the In Control Conference in Orlando 0:17 joined by one of the co-organizers, Christopher Schmidt. 0:20 How are you Christopher? >>Doing great man. How are you doing? 0:23 Doing well. Thanks for joining us today. >>Of course. 0:25 Can you tell us a little about the In Control Conference? 0:27 It's a conference we started about 4 or 5 years ago. 0:30 We started out in Cincinnati, and one of the things we do is we work with local AIGA 0:34 chapters, and AIGA is a national organization of design professionals. 0:38 So it's design professionals of any various design field, 0:42 but their primary background is print design. 0:46 With In Control, we really wanted to bring web designers who are really just experts 0:50 in their field and bring them to local chapters as well as inviting people outside the AIGA 0:53 to attend a conference and really just deep dive into different technologies 0:58 and aspects of web design. 1:02 It's a 2-day conference, so each day kicks off with a keynote, 1:05 and then on the first day we start with HTML as a foundation of HTML5, 1:10 and then we get to a CSS, and the next session is JavaScript, 1:15 and then the last session of the first day is kind of like 1:20 a session that kind of ties everything together. 1:22 Right now while we're talking Chris Coyier is doing his modern work flow. 1:26 So he's really going to be touching on HTML, CSS, JavaScript, 1:29 and all the other stuff that a really great website in today's age. 1:32 Day 2 is what we call the propri track. 1:37 We kick off another keynote, but then that day is more like soft sciences, 1:40 usability, content strategy, accessibility, 1:43 stuff that technically you don't need to make a website, 1:47 but it's the materials and the education and the substance that you need 1:49 to make a really great user experience for that. 1:52 So our hope is that by the end of the day and the conference that 1:55 people have a really good idea of what it takes to build even a better, 2:00 more impressive website than when they started out 2:03 and by having the new tools and the ideas that they leave inspired to do great work. 2:06 Excellent. Now there's a lot of content available for free or pretty inexpensive 2:12 on the internet--blogs, books, and even the Treehouse videos 2:15 can provide people a lot of those same technical skills. 2:18 What would you say is the benefit to getting out 2:21 from behind the laptop and going to a conference? 2:23 Well, I think you just said it. You get out of the laptop. Right? 2:25 So you're always like in front of the laptop, and so your mind is always trying to 2:28 find the latest blog tutorial or what not. 2:33 Sometimes those get out of date and don't get updated. 2:36 Sometimes information changes so fast, as you know. 2:39 We just talked about responsive images and how much has changed within the last year. 2:42 So that content needs to be updated, and sometimes what's really popular 2:47 in Google searches isn't what you really need to know. Right? 2:52 So you really need someone that can--speaker at a conference who can hopefully, 2:55 if they're expert enough, put it into context for you 3:00 and then also ask questions. 3:03 The speaker probably wasn't expecting to answer that question, 3:07 but it's a question that you came up with and they'll help you put the ideas 3:09 into a better context for that. 3:14 Also it's a great way to network and to meet like-minded folks 3:17 who you normally wouldn't meet otherwise. 3:21 It's really a great way of doing that. 3:24 You know just the way the whole industry changes so fast. 3:26 It's a really great way just to get up to date pretty fast. 3:28 Not only just the speakers, but there is saying that sometimes the speaker 3:32 isn't the smartest person in the room, it's the audience is the smartest person in the room. 3:37 That's one of the things that when I speak is that if there's a question that I don't know 3:41 I make sure I tell people, "I don't know the answer to that one, 3:45 but maybe someone here knows." 3:47 Most of the time they probably know the answer to it. 3:49 That's a great way to just learn, get your answers, and move on and make-- 3:53 really not make it but just be inspired to great things, 3:58 and I feel like you get inspired by knowing. Right? 4:01 And knowing what you need to do to build great things. 4:04 You mentioned Cincinnati, and you've had In Control here in Orlando a couple of times. 4:07 What other venues do you have coming up for this year? 4:12 Well, we started out with Cincinnati because I used to live there, 4:14 and I was on the board of an AIGA Cincinnati, so we started there. 4:17 I was also on the board of AIGA Orlando, so I knew people here, 4:20 and so we've been actually coming back to Orlando--this is our 4th year. 4:22 It's just a great spot, and it's middle of wintertime 4:26 so it's a really great way to warm up doing that. We come here. 4:29 We also did Hawaii last year as well, and that was really great 4:32 because we got people from all over the world to come to that one. 4:36 Hawaii's awesome. 4:40 Some other conferences we have lined up is Artifact Conference, 4:42 which is more geared toward designing for this new multi-device web that we have now. 4:44 Things have changed so much that some people just-- 4:50 you just can't make Photoshop comps because it's not just 160 pixels anymore. 4:52 Right? How do you design for responsive stuff when Photoshop doesn't cut it? 4:59 We're working with people at Converge and also Jennifer Robbins 5:05 who has been around with the web forever. 5:09 This conference is a 2-day conference with workshops. 5:12 We're more geared towards designers. 5:17 So we'll have Trent Walton from Paravel there. 5:19 Jennifer Simmons from the 5by5 podcast is going to be there. 5:22 I'll be there talking about GitHub for designers 5:27 just talking about new ways to design as well as HTML collages-- 5:30 Dan Mall is going to be there--to style tiles to a whole bunch of other things. 5:37 So it's going to be kind of a really geared towards front-end designers in terms of 5:42 what does it take to be a designer now? 5:47 Also then in October we're doing CSS Dev Conf. 5:50 I'm a big CSS nerd. I've written the CSS code book for Riley. 5:55 I've written other books about CSS too, and that's one I'm really geared to. 5:59 I love that a lot. So that one's going to be in Colorado in the Stanley Hotel. 6:06 One thing I love about that is that it's a double-blind call for papers, 6:10 so people can submit talks for that conference, 6:16 and instead of just like voting for a published speaker, 6:19 we actually separate the name from the actual content. 6:23 So people will vote on the content that they want to see, 6:25 but they can also vote on the speakers there too. 6:28 So we get a good idea what people want to see but also really what the content is. 6:30 That's going to be our 2nd annual CSS Dev Conf. 6:34 We did the CSS Dev Conf. the first year in Hawaii like back to back with In Control. 6:36 That was just a huge success so we're going to go back and do it again. 6:41 Where did you say Artifact was going to be, and what were the dates of that? 6:45 Artifact is going to be May 13 through the 15. 6:48 It's going to be in Austin, Texas. 6:52 The first 2 days is going to be the normal conference too. 6:54 It's just going to be sessions like half hour to hour sessions, 6:56 and there are some panels--about an hour and 15 minutes or so with that. 7:01 It's going to be a great time just to learn and get up to speed on that. 7:04 The third day is going to be workshops. 7:06 The folks from Build Responsively like Ben Callahan are going to be there 7:10 to teach people all day about how to build responsively. 7:14 Then also we have Brad Frost doing kind of design patterns workshop. 7:16 We'll have a half-day workshop just talking about designing for touch, 7:23 and what does that mean? Stuff like that. 7:28 It's going to be a really great 3 days for that. 7:30 CSS Conf. is also 3 days with just kind of the same format-- 7:33 session for the first few days and then workshops the third day. 7:35 Now for people that can't travel maybe to Austin, Colorado, or Hawaii, 7:40 what would you recommend to have some of that similar networking 7:43 and conference experience? 7:45 I would definitely look into Refresh. 7:47 Refresh is this concept where people just meet up kind of like a user's group, 7:49 and it's really big in Austin where I am from. 7:53 Every month there is a designer talk for about 40 minutes 7:57 followed by a developer talk. 8:01 It's just a really great way for the community to get together, 8:04 share ideas, network, and mingle. 8:05 Check to see if there's a Refresh in your area. 8:08 If not, definitely start one. There's no reason why you can't do that. 8:10 Also if your a designer check out and see if there's a local AIGA chapter in your area 8:15 and also just check out Meetup--meetup.com. 8:21 It's a really great way to see if there's any local interest in the area, 8:23 and then also try to see if there are local conferences. 8:26 We do great conferences, I believe, and I really support those a lot, 8:29 but there's conferences that are all over that are great. 8:34 So definitely check out to see if anyone is coming to your area. So definitely do that. 8:36 Excellent. Now how did you get into organizing conferences? 8:40 I think before that you were building websites for clients. 8:43 When did you make the transition, and what brought that about? 8:45 I was a speaker for a while. 8:48 I've been doing web stuff for a long time, and really what happened was that 8:51 during the dot com crash of the fabled 2000-2001 era 8:54 I got laid off, and that weekend I got my first book offer. 8:58 So I was like I was rummaging for the next 3 months or 6 months, so I'll just write a book. 9:05 Once I did that, I just said, "Hey, you know, I would really like to speak at conferences." 9:10 If people who are listening or seeing this feel they have the chops or whatnot, 9:15 just to ask conference organizers, "Hey, I really want to talk about this XYZ topic, 9:19 and this is what I've done." 9:25 Once I had written the book I said I've done this, I know the technology, 9:27 and so I started speaking around different conferences like Web Visions. 9:31 That's in Portland and all over the place. 9:36 So that's how I got involved. 9:41 I had a lot of ideas about how to do a conference based off of what I saw, 9:43 and then also I met my partner, Ari Styles. 9:48 She actually worked for South by Southwest in Austin. 9:51 So we met, and we started talking about conferences 9:55 and really had a kind of boring conversation to other people, 9:58 but to us we were like that would be great. 10:00 It was just like on my bucket list. You know? 10:02 I was just talking to Kimberly Blessing. She does this really great job of web standards. 10:05 We decided to make a list of what we were going to do in the next year. 10:11 I was like I really just know--rain or shine--no matter what happens next year 10:14 I'll be doing a conference. 10:19 Thankfully AIGI Cincinnati was gung ho with it. 10:21 We put it on, and that was the first In Control. 10:25 Not much has changed with In Control since that. 10:28 So that the one that you see today is pretty much the same one that you saw back then 10:30 except a lot more people, and the faces may change a little bit and the speakers. 10:34 So that's kind of how it got started, and so that was really great. 10:39 And then at the same time I spoke at an online conference 10:43 called the Head Conference, and that was put on by Aral Balkan. 10:48 That was just amazing because as I told you I spoke at conferences, 10:52 and so what happens is usually as a speaker you go to conferences, 10:56 you speak, and then you go back to your hotel room, 10:59 pack up, and then head for the airport. Right? 11:02 So I'd speak into my computer at home, and then when I was done 11:03 I felt like I had to go to my bedroom, pack, and then go to the airport 11:09 even though I was still there. I had to go up and leave. 11:14 I felt like wow, this a really powerful impact for something that just--I just happened-- 11:16 I had like over 100 people I was talking to. I was like this is a really awesome experience. 11:21 It would be awesome just to have a whole day geared to CSS, 11:27 like a mecca for total CSS nerd. 11:31 So I got a whole bunch of my friends who are CSS nerds together, 11:34 and we decided to see if we could make it work. 11:37 That was the 1st annual CSS Summit. 11:41 That just went off great like gangbusters, and so we've just been doing it ever since. 11:44 We've done a CSS Summit. We've done a jQuery and JavaScript Summit every year. 11:48 Now we've added Responsive Design Summit. 11:54 So basically with all 9 conferences we just do online tracks, 11:57 like all just deep dive in 1 topic and try to make things-- 12:01 try to make things awesome. 12:05 The name of our Environments for Humans, 12:07 and the idea behind that is that we really want to teach people to build better tools 12:09 so they make better websites. You know? 12:12 Just make better user experiences for people 12:15 because there's really a lot of bad websites out there. 12:18 Thankfully things like Treehouse-- 12:21 people can build better websites out there for people. 12:23 I spoke at one of those online conferences. 12:26 I was really impressed with the setup you guys have there. 12:28 You can follow along. You feel like you're at a conference 12:32 and even network with people in the chat room. 12:34 So props to you for making that happen even remotely. 12:36 Yeah. Definitely. So if there's not a conference coming to you, 12:39 if there's not a Refresh or Meetup that you want to do, 12:41 definitely check out online conferences. 12:44 You can definitely meet and interact with people, 12:46 and definitely the experts will come to your desktop as we say. 12:48 You can definitely ask the questions you wanted to 12:52 and feel like you're part of the community because that's one of the things 12:54 that's great about our industry. 12:56 That's why when I first started speaking was that just by our nature of our industry, 12:58 we're so open that we have to share our information in order to 13:02 get better but also to continue on because it's not going to happen otherwise. 13:06 With web it's always about view source and how can we learn to do better? 13:13 One of the hot topics these days are responsive images, 13:17 and I know you have a book out, Designing Web and Mobile Graphics. 13:20 [Christopher] Yeah, it just came out. 13:24 Yeah, and it's talking a lot about images. 13:26 What are your thoughts on responsive images these days? 13:28 What techniques are people using? What's your favorite technique 13:30 or the one you think works in most of the cases? 13:32 Well, the one that's most well known is the picture element that's trying to be produced 13:36 and go through HTML process--the working group process right now. 13:41 That one kind of borrows a lot from the video tag and the audio tag 13:45 to be easy to apply to media queries and HD, retina-- 13:51 to be able to sort and say I want this image to be sorted to this one. 13:58 That's really popular. People can kind of easily grok that. 14:01 It's also kind of easy to work that into a browser rather than working with 14:04 trying to create a whole new image format, 14:09 create whole new modules for your server and stuff like that. 14:11 So that's one way people are trying to do it like that. 14:14 That's not my favorite way because the big issue with that is it's all about raster images. 14:16 You can't really stretch and resize a raster image 14:23 and have the imager quality be the same as it was for a vector graphic 14:27 that you can get from Illustrator or something like that. 14:30 So that's really the pain point of responsive images. 14:33 A picture element allows you to do that. 14:37 I'm not a big fan of that because I don't really feel like messing my CSS with my HTML. 14:39 I like them separate. Right? 14:44 My favorite way is one that requires a large JPEG, a large raster image--like huge, 14:46 almost like desktop pattern, desktop background size pattern-- 14:53 and you take it to Photoshop, and you just compress the heck out of it 14:56 to like 0% quality. 15:00 It looks like your dog just walked all over it or someone from the outside. 15:02 Then you just resize it, because with responsive web design 15:07 it's all about scaling images. Right? It looks great. 15:09 Most times the file size will be lower than an image you would use for 72pdi screen. 15:12 And since it's a huge image, and your stretching it, 15:25 it also looks great on retina or HD screens. 15:28 That's my favorite technique right now. 15:31 There are some caveats with that that I mention in the book. 15:34 You have to be mindful what type of your histogram 15:37 which is kind of like the display colors in the image. Right? 15:42 So you want like a nice mountain kind of range in the histogram, 15:46 but if you have peaks and valleys like really sharp high-contrast colors, 15:49 that type of technique doesn't really work very well. You have to be careful of that. 15:52 But overall if you have a nice almost kind of mutated color range if you will, 15:56 that technique is awesome. It's a really great way. 16:01 It's a low file size, but it serves both retina and regular old school displays very well. 16:03 In fact, you may want to be able to do a quick image swap with a mobile-first image 16:12 and then swap it in with a high res after the page gets loaded. 16:17 That's kind of my favorite technique right now. 16:21 You mentioned the picture element. 16:23 That's not supported by all browsers yet, so how do you work around that? 16:25 Yeah. Right. It's going through the process right now. 16:28 Hopefully it will be standardized, but even that is a slow, laborious process. Right? 16:31 One of the things they can do is called a polyfill or really a patch, 16:35 and so you just get that from GitHub--from the fine folks at Filament Group 16:39 and just download it and apply it. 16:45 It's a little bit more complex than what I would like it to be, 16:48 but definitely if you want to use the picture element as a way to go 16:50 and get familiar with what they're trying to do with it, 16:53 that's definitely one solution to go with. 16:55 You talked about raster and vector graphics. 16:58 With raster images there are a number of different formats. 17:00 I image you cover that in the book like when to use which format. 17:02 Oh, yes. Yeah. >>What can you give as a high level just as a guide? 17:05 The best way is if it's a photo go with a JPEG format. 17:08 Flat colors you may want to go with GIF or maybe in PNG. 17:12 So basically flat colors is GIF or PNG-8--PNG 8 bit. 17:15 If you want transparency definitely look into PNG-24 17:21 because that way you're going to have very subtle graphics 17:24 and very nice overlays with your transparencies. 17:27 What's the status of vectors in the browser? 17:30 I know SVG is a popular format. Is that widely supported these days? 17:33 It's widely supported, but there still are some minor bugs. 17:36 But if you just need an image like a logo or a graphic that's not going to do a whole lot, 17:40 SVGs are really well supported in browsers. It kind of blew my mind. 17:46 I was doing research for the book--you can actually just do image source 17:51 file name dot SVG, and it works. 17:55 The only caveat is that if it's a complex SVG image, 17:59 you might be better off going with an actual raster image. 18:03 If it's just a logo with just kind of a flat simple-type face type of illustration or what not, 18:06 SVG is the way to go with that, but if it's more complex almost like kind of an illustration 18:13 more so, it might be better to go with a raster image for that. 18:19 And then use one of the various responsive images techniques 18:23 on top of that raster graphic? >>Right. Yeah. 18:26 In the book we talk about a couple of techniques. 18:28 We do talk about picture element. It goes step by step on how people can do that 18:31 as well as the other technique for using big compressed images. 18:35 What software can you use to make SVGs? 18:38 Can you just export a Photoshop document into an SVG? 18:40 The software you can use actually is Adobe Illustrator. 18:43 In the book we go through the steps that you take to get a really well-compressed SVG 18:49 graphic from Illustrator, and it's pretty awesome. 18:52 Excellent. Well, I think that's all I had for you today Christopher. 18:56 Thank you so much for your time. If people want to follow you, keep up with 18:59 what you're doing, keep up with In Control, where can they find you online? 19:03 What's the best way to follow you? 19:05 Probably the best way is on Twitter. It's twitter.com/teleject. 19:07 My website's christopherschmidt.com. 19:11 My blog for the book is dwmgbook.com. 19:14 I'll be updating graphic techniques as they change because the responsive web design 19:20 chapter for the book I had to rewrite 3 times during the course of writing the book. 19:25 I just knew as the book was coming out that I definitely need to have a place 19:30 where I can just talk about responsive images 19:34 and image techniques as they change and adapt. 19:37 Great. Well, thanks so much. 19:39 This was another episode of Treehouse Friends. We'll see you next time. 19:41 [? music ?] 19:43