I'm Nick Petitt. >>I'm Jason Seifer. >>And you're watching the Treehouse Show,

your weekly dose of Internets, where we talk about all things

web design, web development, and more.

>>In this episode, we'll be talking about reflections,

mobile typography, and responsive images.

>>Let's check it out.

[? music ?]

[The Treehouse Show]

So first up, we were talking about this jQuery plugin called Better Toggle.

This provides sleek CSS3 toggling of elements.

Now, it's really easy to use, as you expect from any jQuery plugin.

You get your click handler, or any event that you have.

Click the toggle button, and you'll watch this image on the right here, and

boom! Toggle has played.

You can do this with, what, one element?

No, we'll throw in more than one element.

Check this one out. Ready? Toggle all. Boom!

You know what? Oh, hey, maybe I don't have an element on the screen.

I want it to get on the screen using a sleek CSS3 transition.

Oh, what about this? Check this one out.

Wow! All this can be yours for the low price of $0.00.

Just click Download the Plugin. Or fork it on GitHub.

>>That's pretty amazing. >>Better Toggle.

>>Better check it out. >>Yes. Act now. Supplies are limited.

>>Next up is this really cool blog post about creating this glossy, reflective,

animated element thing. It's pretty cool. Let's take a look. >>Very technical.

>>So on the left-hand side, you can see that we have this animated div,

and as it kind of moves around, we have this nice glossy reflection.

And if I hover over it, which I already just did there, but if I hover over,

you can see where the reflection is coming in.

They go ahead and color that reflection in with red.

So that's pretty impressive. How the heck are they doing that?

Well, the markup is pretty simple.

There's basically just this box here

and then another div nested inside of it for the reflection.

Now I would say that this is a little bit unsemantic,

but we'll come back to that at the end here.

So next up is the styling for the box. Nothing fancy there.

For the reflection, they're actually using a WebKit gradient,

and one thing that they point out at the start of this article

is that this will only work in WebKit-based browsers, so this isn't quite

production-ready, but it's still a neat tech demo.

So they're using WebKit gradients there.

And then they use transforms and animations to move the box around

and then move the reflection around as well,

and then they animate those using just a two-second animation

with some nice easing there, and they alternate back and forth.

And then, of course, this is in 3D, so they add WebKit perspective of 500 there.

So, pretty nifty piece of code here. It's just basically very clever.

The thing that I kind of was wondering about when I first saw this

was whether or not you actually need that second div there,

because I think you could actually use

CSS3 pseudo elements and then animate them.

For some time, I was trying to actually try to animate pseudo elements myself,

and it wasn't included in WebKit, but I think it's there now.

I don't think you need that extra div, but I don't know for sure.

So that's some extra credit on the show.

>>But we won't report you to the SBI, the Semantic Bureau of Investigation.

[laughter] >>Which we just made up

>>on the last episode, so check that one out if you haven't seen it.

Next up, we have a project called Drawscript. This is really interesting.

This lets you turn Illustrator shapes into code.

Now this is an extension for Adobe Illustrator, which is in Creative Cloud.

Right now, it's free to download, but the author says it will be open sourced

as soon as it's considered stable, and he's looking for some help.

But enough about that. It's really, really interesting.

If you're developing iOS applications, you can immediately export shapes

straight from Illustrator to develop right on iOS.

It also has exports for C++, JavaScript, Processing.js, ActionScript 3,

Jason, and even raw Bezier points.

Now it's super simple to use.

You can just use it as a dropdown, click what sort of generation format you want,

and you can even check this Live button right here,

and it'll update the shape as you're coding it in Illustrator.

I don't know if coding's the right word, but I'm a developer.

So anyway, super simple to use, really, really easy to install,

and go ahead and check that out.

I'm sure this is going to be very, very useful for all of you using Illustrator.

>>Very cool stuff.

Well, next up is another great blog post from Codrops.

They've just been killing it lately.

>>They've been dropping a lot of code. >>They have.

So this one is called Full Screen Layout with Page Transitions,

and I'm just going to go ahead and view the demo here,

because I don't think the code is really very groundbreaking.

I think what's interesting here is the design.

So of course we've been talking a lot about flat design here

on the Treehouse Show as the rest of the web design community—

Flat design is pretty hot.

And I think we're starting to see more mature uses of flat design.

This is a much different way to lay out a web page.

So we have four little sections here, and that's basically our navigation,

and if we click on one of those, it will transition the whole page

to a whole other page, so it's basically transitioning the entire layout

to the next page, and I think this is pretty different.

I don't think I have seen anything quite like this before on the web,

and it really makes me wonder if we're kind of missing this whole other

plane of awesomeness, if you will, where, you know, maybe we don't

need to really lay things out where navigation

is kind of at the top or in a sidebar or something.

Maybe you just—I mean, in this case, the whole web page is the navigation.

>>Maybe we should coin that term.

>>What's that? >>Plane of Awesomeness, POA.

>>Plane of Awesomeness. I like it.

>Yeah, you heard it here first on the Treehouse Show.

>>Yeah, let's make it happen.

>>Next up, over on the DesignWoop blog—I hope I'm saying that correctly—

There is a blog post by Jake Rocheleau about how to customize your CSS

buttons with pictogram icons.

Now we'll take a look at the live demo first, and this is a blog post where

he goes through and shows you how to create all these different buttons.

Now he's doing this using a Google web font as well as another custom font

to create these icons.

So he kind of just walks you through, sets up how

you're going to build the document,

how you're going to link to all of these different resources,

as well as setting up the different buttons and what you're going to need

to generate all these different assets.

Now the benefit of using CSS fonts for something like this is

your file size is going to be smaller than if you were

attaching images to it, just by the nature of using the web font.

And there are even resources available where you can take just the characters

that you're interested in for your different pictograms

and use onto generate a custom web font, which is going to save everybody

space when downloading and make your site faster.

Anyway, check out that blog post for a great introduction

on creating these buttons with web fonts.

>>Very cool stuff. Well, we're on a roll here, so her's another cool blog post.

This one is from Designmodo, and it's about typography

in mobile design.

Important aspects and examples.

I know that because it says it right here on the web page.

Basically, they say that the most important thing about mobile typography

is readability, and that comes down to size, contrast, and spacing.

And the blog post has a whole bunch of really great examples

of mobile typography here.

I think the important thing to remember about mobile typography,

like they're saying, is that it's a different context.

So basically, you have this small, really brightly lit, screen.

People are kind of on the go. It's very different than sitting down

and reading something, say, on a tablet or a laptop screen.

So the size of the font is, of course, important because the screen size is smaller,

but the contrast is important as well, because oftentimes the brightness is

very variable. It's a lot different than an environment where,

you know, the brightness is kind of set, you know what that's going to be like,

and when you're on the move, especially, the brightness levels can change.

So you want to make sure that you have really good contrast.

>>That's why I always choose light yellow for the font color

and slightly darker yellow for the background color.

>>That's smart, Jason.>>I want to make sure everybody

can all see what you're talking about.

>>And then, of course, spacing is important for the same thing as size, right?

You basically want to make sure that there's enough space

around your text so that it's easily readable and doesn't

look like it's running into the sides of the page or running into other text.

But a really good blog post, just really great advice about mobile typography.

>>Cool stuff. Next up, we have a project called Clowncar.

This is a really, really interesting technique for using an SVG

to create a responsive image.

Yeah, so what this means is if you have your web page, you give one image tag,

give it the source of an SVG, and inside that SVG you can give it different

sizes of, say, other PNGs.

So one for small mobile web browsers, all the different

responsive breakpoints that you're used to.

>>It's just images all the way down. >>Yeah. It's imageception.

Now there's a pretty big walk-through over on the readme,

as well a ton of different examples, so you can see the small image,

she goes through and says listen for the min with the 401

and max with the 700, only display what you need to, and then

all that for the different sizes.

Now I'm going to show you a little bit of a demo here.

So here we have one image.

This is the Clowncar technique. You'll notice this crying clown with a hat.

I'm not sure why he's crying, but I'm sure it's sad.

Anyway, as I resize my browser, you'll notice that this image changes.

He's still crying, but he's got some balloons.

This is just the exact same SVG file changing,

depending on how you resize your browser.

So if you want more background information,

definitely read that blog post and check out the examples.

It's really incredible, and you can fork it on GitHub.

>>Last up is an article from, I think it's the New York Times.

Yeah, the New York Times, and there's not a whole lot to say about this one.

Basically, it's just an article called "The Flattening of Design," about

flat design, and I just thought it was interesting, because

flat design is hitting the mainstream.

I mean, it— >>We're talking about it here. >>Yeah, we're talking about it here,

obviously, the most important podcast in the world.

But, you know, it's on the New York Times as well,

which is a fairly respected publication, well known, right?

>>I guess I've heard of them. >>And they're saying—

I like the first line here. It says, "It might sound audacious to

"think that Microsoft, the arbiter of uncool, was at the forefront of

design a few years ago. But it was." And, of course, they're talking about

Microsoft's Metro UI design language, so to speak.

And they designed that several years ago, and it's only just now that

people are starting to catch on to all the benefits of this.

I mean, it creates these really uncluttered, very clean layouts,

and it's also really great for mobile devices, where, you know,

screen space is limited, bandwidth is limited, and you really just want to get

straight to the point, and it's also very interesting to look at.

I really like this resurgence of color and typography and communicating

just that, rather than having to have, like, shiny buttons

and a ton of texture everywhere.

>>Or even worse, the whole grunge thing.

That was popular for a little while, remember that?

>>It was, and that was basically just the use of texture or even overuse of texture.

So this is somewhat of a reaction to that.

I think it's reaction to, like, the grunge stuff.

I think it's a reaction to skeuomorphism,

which is basically where you try to make a UI element look like

something in real life, as like a real-life metaphor.

But it's very, very interesting. I mean, it's definitely a design trend.

I think at some point, you know, five, ten years down the road,

maybe even sooner, we'll decide that, oh, this is actually

really terrible looking and dated now.

But still, very cool.

I mean, I think there are a lot of functional, practical benefits to it.

So, worth checking out. >>Yeah, definitely, and if you want to stay on the cutting edge,

don't forget to check out the Plane of Awesomeness design pattern,

POA, you'll be hearing more about that.

>>That's right. On Twitter, I am @nickrp. >>And I am @jseifer.

That's all we have for you this episode. For show notes and more,

check out our YouTube channel at youtube.com/gotreehouse,

and if you like this show, please rate us in iTunes,

where you can find us by searching for the Treehouse Show.

>>And if you'd like to see more videos like this one about

web design, web development, Android, iOS, business, and more,

be sure to check us out at teamtreehouse.com.

Thanks so much for watching, and we'll see you next week.

[? music ?]