[? music ?]

Welcome to another episode of Treehouse Friends.

My name's Randy Hoyt, and today I'm here at the In Control Conference in Orlando

joined by one of the co-organizers, Christopher Schmidt.

How are you Christopher? >>Doing great man. How are you doing?

Doing well. Thanks for joining us today. >>Of course.

Can you tell us a little about the In Control Conference?

It's a conference we started about 4 or 5 years ago.

We started out in Cincinnati, and one of the things we do is we work with local AIGA

chapters, and AIGA is a national organization of design professionals.

So it's design professionals of any various design field,

but their primary background is print design.

With In Control, we really wanted to bring web designers who are really just experts

in their field and bring them to local chapters as well as inviting people outside the AIGA

to attend a conference and really just deep dive into different technologies

and aspects of web design.

It's a 2-day conference, so each day kicks off with a keynote,

and then on the first day we start with HTML as a foundation of HTML5,

and then we get to a CSS, and the next session is JavaScript,

and then the last session of the first day is kind of like

a session that kind of ties everything together.

Right now while we're talking Chris Coyier is doing his modern work flow.

So he's really going to be touching on HTML, CSS, JavaScript,

and all the other stuff that a really great website in today's age.

Day 2 is what we call the propri track.

We kick off another keynote, but then that day is more like soft sciences,

usability, content strategy, accessibility,

stuff that technically you don't need to make a website,

but it's the materials and the education and the substance that you need

to make a really great user experience for that.

So our hope is that by the end of the day and the conference that

people have a really good idea of what it takes to build even a better,

more impressive website than when they started out

and by having the new tools and the ideas that they leave inspired to do great work.

Excellent. Now there's a lot of content available for free or pretty inexpensive

on the internet--blogs, books, and even the Treehouse videos

can provide people a lot of those same technical skills.

What would you say is the benefit to getting out

from behind the laptop and going to a conference?

Well, I think you just said it. You get out of the laptop. Right?

So you're always like in front of the laptop, and so your mind is always trying to

find the latest blog tutorial or what not.

Sometimes those get out of date and don't get updated.

Sometimes information changes so fast, as you know.

We just talked about responsive images and how much has changed within the last year.

So that content needs to be updated, and sometimes what's really popular

in Google searches isn't what you really need to know. Right?

So you really need someone that can--speaker at a conference who can hopefully,

if they're expert enough, put it into context for you

and then also ask questions.

The speaker probably wasn't expecting to answer that question,

but it's a question that you came up with and they'll help you put the ideas

into a better context for that.

Also it's a great way to network and to meet like-minded folks

who you normally wouldn't meet otherwise.

It's really a great way of doing that.

You know just the way the whole industry changes so fast.

It's a really great way just to get up to date pretty fast.

Not only just the speakers, but there is saying that sometimes the speaker

isn't the smartest person in the room, it's the audience is the smartest person in the room.

That's one of the things that when I speak is that if there's a question that I don't know

I make sure I tell people, "I don't know the answer to that one,

but maybe someone here knows."

Most of the time they probably know the answer to it.

That's a great way to just learn, get your answers, and move on and make--

really not make it but just be inspired to great things,

and I feel like you get inspired by knowing. Right?

And knowing what you need to do to build great things.

You mentioned Cincinnati, and you've had In Control here in Orlando a couple of times.

What other venues do you have coming up for this year?

Well, we started out with Cincinnati because I used to live there,

and I was on the board of an AIGA Cincinnati, so we started there.

I was also on the board of AIGA Orlando, so I knew people here,

and so we've been actually coming back to Orlando--this is our 4th year.

It's just a great spot, and it's middle of wintertime

so it's a really great way to warm up doing that. We come here.

We also did Hawaii last year as well, and that was really great

because we got people from all over the world to come to that one.

Hawaii's awesome.

Some other conferences we have lined up is Artifact Conference,

which is more geared toward designing for this new multi-device web that we have now.

Things have changed so much that some people just--

you just can't make Photoshop comps because it's not just 160 pixels anymore.

Right? How do you design for responsive stuff when Photoshop doesn't cut it?

We're working with people at Converge and also Jennifer Robbins

who has been around with the web forever.

This conference is a 2-day conference with workshops.

We're more geared towards designers.

So we'll have Trent Walton from Paravel there.

Jennifer Simmons from the 5by5 podcast is going to be there.

I'll be there talking about GitHub for designers

just talking about new ways to design as well as HTML collages--

Dan Mall is going to be there--to style tiles to a whole bunch of other things.

So it's going to be kind of a really geared towards front-end designers in terms of

what does it take to be a designer now?

Also then in October we're doing CSS Dev Conf.

I'm a big CSS nerd. I've written the CSS code book for Riley.

I've written other books about CSS too, and that's one I'm really geared to.

I love that a lot. So that one's going to be in Colorado in the Stanley Hotel.

One thing I love about that is that it's a double-blind call for papers,

so people can submit talks for that conference,

and instead of just like voting for a published speaker,

we actually separate the name from the actual content.

So people will vote on the content that they want to see,

but they can also vote on the speakers there too.

So we get a good idea what people want to see but also really what the content is.

That's going to be our 2nd annual CSS Dev Conf.

We did the CSS Dev Conf. the first year in Hawaii like back to back with In Control.

That was just a huge success so we're going to go back and do it again.

Where did you say Artifact was going to be, and what were the dates of that?

Artifact is going to be May 13 through the 15.

It's going to be in Austin, Texas.

The first 2 days is going to be the normal conference too.

It's just going to be sessions like half hour to hour sessions,

and there are some panels--about an hour and 15 minutes or so with that.

It's going to be a great time just to learn and get up to speed on that.

The third day is going to be workshops.

The folks from Build Responsively like Ben Callahan are going to be there

to teach people all day about how to build responsively.

Then also we have Brad Frost doing kind of design patterns workshop.

We'll have a half-day workshop just talking about designing for touch,

and what does that mean? Stuff like that.

It's going to be a really great 3 days for that.

CSS Conf. is also 3 days with just kind of the same format--

session for the first few days and then workshops the third day.

Now for people that can't travel maybe to Austin, Colorado, or Hawaii,

what would you recommend to have some of that similar networking

and conference experience?

I would definitely look into Refresh.

Refresh is this concept where people just meet up kind of like a user's group,

and it's really big in Austin where I am from.

Every month there is a designer talk for about 40 minutes

followed by a developer talk.

It's just a really great way for the community to get together,

share ideas, network, and mingle.

Check to see if there's a Refresh in your area.

If not, definitely start one. There's no reason why you can't do that.

Also if your a designer check out and see if there's a local AIGA chapter in your area

and also just check out Meetup--meetup.com.

It's a really great way to see if there's any local interest in the area,

and then also try to see if there are local conferences.

We do great conferences, I believe, and I really support those a lot,

but there's conferences that are all over that are great.

So definitely check out to see if anyone is coming to your area. So definitely do that.

Excellent. Now how did you get into organizing conferences?

I think before that you were building websites for clients.

When did you make the transition, and what brought that about?

I was a speaker for a while.

I've been doing web stuff for a long time, and really what happened was that

during the dot com crash of the fabled 2000-2001 era

I got laid off, and that weekend I got my first book offer.

So I was like I was rummaging for the next 3 months or 6 months, so I'll just write a book.

Once I did that, I just said, "Hey, you know, I would really like to speak at conferences."

If people who are listening or seeing this feel they have the chops or whatnot,

just to ask conference organizers, "Hey, I really want to talk about this XYZ topic,

and this is what I've done."

Once I had written the book I said I've done this, I know the technology,

and so I started speaking around different conferences like Web Visions.

That's in Portland and all over the place.

So that's how I got involved.

I had a lot of ideas about how to do a conference based off of what I saw,

and then also I met my partner, Ari Styles.

She actually worked for South by Southwest in Austin.

So we met, and we started talking about conferences

and really had a kind of boring conversation to other people,

but to us we were like that would be great.

It was just like on my bucket list. You know?

I was just talking to Kimberly Blessing. She does this really great job of web standards.

We decided to make a list of what we were going to do in the next year.

I was like I really just know--rain or shine--no matter what happens next year

I'll be doing a conference.

Thankfully AIGI Cincinnati was gung ho with it.

We put it on, and that was the first In Control.

Not much has changed with In Control since that.

So that the one that you see today is pretty much the same one that you saw back then

except a lot more people, and the faces may change a little bit and the speakers.

So that's kind of how it got started, and so that was really great.

And then at the same time I spoke at an online conference

called the Head Conference, and that was put on by Aral Balkan.

That was just amazing because as I told you I spoke at conferences,

and so what happens is usually as a speaker you go to conferences,

you speak, and then you go back to your hotel room,

pack up, and then head for the airport. Right?

So I'd speak into my computer at home, and then when I was done

I felt like I had to go to my bedroom, pack, and then go to the airport

even though I was still there. I had to go up and leave.

I felt like wow, this a really powerful impact for something that just--I just happened--

I had like over 100 people I was talking to. I was like this is a really awesome experience.

It would be awesome just to have a whole day geared to CSS,

like a mecca for total CSS nerd.

So I got a whole bunch of my friends who are CSS nerds together,

and we decided to see if we could make it work.

That was the 1st annual CSS Summit.

That just went off great like gangbusters, and so we've just been doing it ever since.

We've done a CSS Summit. We've done a jQuery and JavaScript Summit every year.

Now we've added Responsive Design Summit.

So basically with all 9 conferences we just do online tracks,

like all just deep dive in 1 topic and try to make things--

try to make things awesome.

The name of our Environments for Humans,

and the idea behind that is that we really want to teach people to build better tools

so they make better websites. You know?

Just make better user experiences for people

because there's really a lot of bad websites out there.

Thankfully things like Treehouse--

people can build better websites out there for people.

I spoke at one of those online conferences.

I was really impressed with the setup you guys have there.

You can follow along. You feel like you're at a conference

and even network with people in the chat room.

So props to you for making that happen even remotely.

Yeah. Definitely. So if there's not a conference coming to you,

if there's not a Refresh or Meetup that you want to do,

definitely check out online conferences.

You can definitely meet and interact with people,

and definitely the experts will come to your desktop as we say.

You can definitely ask the questions you wanted to

and feel like you're part of the community because that's one of the things

that's great about our industry.

That's why when I first started speaking was that just by our nature of our industry,

we're so open that we have to share our information in order to

get better but also to continue on because it's not going to happen otherwise.

With web it's always about view source and how can we learn to do better?

One of the hot topics these days are responsive images,

and I know you have a book out, Designing Web and Mobile Graphics.

[Christopher] Yeah, it just came out.

Yeah, and it's talking a lot about images.

What are your thoughts on responsive images these days?

What techniques are people using? What's your favorite technique

or the one you think works in most of the cases?

Well, the one that's most well known is the picture element that's trying to be produced

and go through HTML process--the working group process right now.

That one kind of borrows a lot from the video tag and the audio tag

to be easy to apply to media queries and HD, retina--

to be able to sort and say I want this image to be sorted to this one.

That's really popular. People can kind of easily grok that.

It's also kind of easy to work that into a browser rather than working with

trying to create a whole new image format,

create whole new modules for your server and stuff like that.

So that's one way people are trying to do it like that.

That's not my favorite way because the big issue with that is it's all about raster images.

You can't really stretch and resize a raster image

and have the imager quality be the same as it was for a vector graphic

that you can get from Illustrator or something like that.

So that's really the pain point of responsive images.

A picture element allows you to do that.

I'm not a big fan of that because I don't really feel like messing my CSS with my HTML.

I like them separate. Right?

My favorite way is one that requires a large JPEG, a large raster image--like huge,

almost like desktop pattern, desktop background size pattern--

and you take it to Photoshop, and you just compress the heck out of it

to like 0% quality.

It looks like your dog just walked all over it or someone from the outside.

Then you just resize it, because with responsive web design

it's all about scaling images. Right? It looks great.

Most times the file size will be lower than an image you would use for 72pdi screen.

And since it's a huge image, and your stretching it,

it also looks great on retina or HD screens.

That's my favorite technique right now.

There are some caveats with that that I mention in the book.

You have to be mindful what type of your histogram

which is kind of like the display colors in the image. Right?

So you want like a nice mountain kind of range in the histogram,

but if you have peaks and valleys like really sharp high-contrast colors,

that type of technique doesn't really work very well. You have to be careful of that.

But overall if you have a nice almost kind of mutated color range if you will,

that technique is awesome. It's a really great way.

It's a low file size, but it serves both retina and regular old school displays very well.

In fact, you may want to be able to do a quick image swap with a mobile-first image

and then swap it in with a high res after the page gets loaded.

That's kind of my favorite technique right now.

You mentioned the picture element.

That's not supported by all browsers yet, so how do you work around that?

Yeah. Right. It's going through the process right now.

Hopefully it will be standardized, but even that is a slow, laborious process. Right?

One of the things they can do is called a polyfill or really a patch,

and so you just get that from GitHub--from the fine folks at Filament Group

and just download it and apply it.

It's a little bit more complex than what I would like it to be,

but definitely if you want to use the picture element as a way to go

and get familiar with what they're trying to do with it,

that's definitely one solution to go with.

You talked about raster and vector graphics.

With raster images there are a number of different formats.

I image you cover that in the book like when to use which format.

Oh, yes. Yeah. >>What can you give as a high level just as a guide?

The best way is if it's a photo go with a JPEG format.

Flat colors you may want to go with GIF or maybe in PNG.

So basically flat colors is GIF or PNG-8--PNG 8 bit.

If you want transparency definitely look into PNG-24

because that way you're going to have very subtle graphics

and very nice overlays with your transparencies.

What's the status of vectors in the browser?

I know SVG is a popular format. Is that widely supported these days?

It's widely supported, but there still are some minor bugs.

But if you just need an image like a logo or a graphic that's not going to do a whole lot,

SVGs are really well supported in browsers. It kind of blew my mind.

I was doing research for the book--you can actually just do image source

file name dot SVG, and it works.

The only caveat is that if it's a complex SVG image,

you might be better off going with an actual raster image.

If it's just a logo with just kind of a flat simple-type face type of illustration or what not,

SVG is the way to go with that, but if it's more complex almost like kind of an illustration

more so, it might be better to go with a raster image for that.

And then use one of the various responsive images techniques

on top of that raster graphic? >>Right. Yeah.

In the book we talk about a couple of techniques.

We do talk about picture element. It goes step by step on how people can do that

as well as the other technique for using big compressed images.

What software can you use to make SVGs?

Can you just export a Photoshop document into an SVG?

The software you can use actually is Adobe Illustrator.

In the book we go through the steps that you take to get a really well-compressed SVG

graphic from Illustrator, and it's pretty awesome.

Excellent. Well, I think that's all I had for you today Christopher.

Thank you so much for your time. If people want to follow you, keep up with

what you're doing, keep up with In Control, where can they find you online?

What's the best way to follow you?

Probably the best way is on Twitter. It's twitter.com/teleject.

My website's christopherschmidt.com.

My blog for the book is dwmgbook.com.

I'll be updating graphic techniques as they change because the responsive web design

chapter for the book I had to rewrite 3 times during the course of writing the book.

I just knew as the book was coming out that I definitely need to have a place

where I can just talk about responsive images

and image techniques as they change and adapt.

Great. Well, thanks so much.

This was another episode of Treehouse Friends. We'll see you next time.

[? music ?]