You've already started watching Episode 41: Reflections, Mobile Typography and Responsive Images
Episode 41: Reflections, Mobile Typography and Responsive Images
14:25 with Nick Pettit and Jason SeiferIn this episode of The Treehouse Show, Nick Pettit (@nickrp) and Jason Seifer (@jseifer) talk about Reflections, Mobile Typography and Responsive Images.
-
0:01
I'm Nick Petitt. >>I'm Jason Seifer. >>And you're watching the Treehouse Show,
-
0:04
your weekly dose of Internets, where we talk about all things
-
0:07
web design, web development, and more.
-
0:09
>>In this episode, we'll be talking about reflections,
-
0:12
mobile typography, and responsive images.
-
0:15
>>Let's check it out.
-
0:17
[? music ?]
-
0:20
[The Treehouse Show]
-
0:23
So first up, we were talking about this jQuery plugin called Better Toggle.
-
0:27
This provides sleek CSS3 toggling of elements.
-
0:32
Now, it's really easy to use, as you expect from any jQuery plugin.
-
0:37
You get your click handler, or any event that you have.
-
0:40
Click the toggle button, and you'll watch this image on the right here, and
-
0:43
boom! Toggle has played.
-
0:48
You can do this with, what, one element?
-
0:50
No, we'll throw in more than one element.
-
0:52
Check this one out. Ready? Toggle all. Boom!
-
0:55
You know what? Oh, hey, maybe I don't have an element on the screen.
-
1:00
I want it to get on the screen using a sleek CSS3 transition.
-
1:03
Oh, what about this? Check this one out.
-
1:05
Wow! All this can be yours for the low price of $0.00.
-
1:09
Just click Download the Plugin. Or fork it on GitHub.
-
1:12
>>That's pretty amazing. >>Better Toggle.
-
1:14
>>Better check it out. >>Yes. Act now. Supplies are limited.
-
1:18
>>Next up is this really cool blog post about creating this glossy, reflective,
-
1:24
animated element thing. It's pretty cool. Let's take a look. >>Very technical.
-
1:29
>>So on the left-hand side, you can see that we have this animated div,
-
1:34
and as it kind of moves around, we have this nice glossy reflection.
-
1:39
And if I hover over it, which I already just did there, but if I hover over,
-
1:44
you can see where the reflection is coming in.
-
1:48
They go ahead and color that reflection in with red.
-
1:51
So that's pretty impressive. How the heck are they doing that?
-
1:55
Well, the markup is pretty simple.
-
1:57
There's basically just this box here
-
2:00
and then another div nested inside of it for the reflection.
-
2:04
Now I would say that this is a little bit unsemantic,
-
2:08
but we'll come back to that at the end here.
-
2:10
So next up is the styling for the box. Nothing fancy there.
-
2:14
For the reflection, they're actually using a WebKit gradient,
-
2:19
and one thing that they point out at the start of this article
-
2:21
is that this will only work in WebKit-based browsers, so this isn't quite
-
2:26
production-ready, but it's still a neat tech demo.
-
2:29
So they're using WebKit gradients there.
-
2:31
And then they use transforms and animations to move the box around
-
2:38
and then move the reflection around as well,
-
2:42
and then they animate those using just a two-second animation
-
2:47
with some nice easing there, and they alternate back and forth.
-
2:51
And then, of course, this is in 3D, so they add WebKit perspective of 500 there.
-
2:58
So, pretty nifty piece of code here. It's just basically very clever.
-
3:03
The thing that I kind of was wondering about when I first saw this
-
3:07
was whether or not you actually need that second div there,
-
3:11
because I think you could actually use
-
3:14
CSS3 pseudo elements and then animate them.
-
3:17
For some time, I was trying to actually try to animate pseudo elements myself,
-
3:23
and it wasn't included in WebKit, but I think it's there now.
-
3:27
I don't think you need that extra div, but I don't know for sure.
-
3:30
So that's some extra credit on the show.
-
3:33
>>But we won't report you to the SBI, the Semantic Bureau of Investigation.
-
3:39
[laughter] >>Which we just made up
-
3:42
>>on the last episode, so check that one out if you haven't seen it.
-
3:45
Next up, we have a project called Drawscript. This is really interesting.
-
3:49
This lets you turn Illustrator shapes into code.
-
3:53
Now this is an extension for Adobe Illustrator, which is in Creative Cloud.
-
3:57
Right now, it's free to download, but the author says it will be open sourced
-
4:02
as soon as it's considered stable, and he's looking for some help.
-
4:05
But enough about that. It's really, really interesting.
-
4:07
If you're developing iOS applications, you can immediately export shapes
-
4:12
straight from Illustrator to develop right on iOS.
-
4:15
It also has exports for C++, JavaScript, Processing.js, ActionScript 3,
-
4:22
Jason, and even raw Bezier points.
-
4:26
Now it's super simple to use.
-
4:29
You can just use it as a dropdown, click what sort of generation format you want,
-
4:33
and you can even check this Live button right here,
-
4:35
and it'll update the shape as you're coding it in Illustrator.
-
4:40
I don't know if coding's the right word, but I'm a developer.
-
4:43
So anyway, super simple to use, really, really easy to install,
-
4:49
and go ahead and check that out.
-
4:51
I'm sure this is going to be very, very useful for all of you using Illustrator.
-
4:55
>>Very cool stuff.
-
4:57
Well, next up is another great blog post from Codrops.
-
5:01
They've just been killing it lately.
-
5:03
>>They've been dropping a lot of code. >>They have.
-
5:06
So this one is called Full Screen Layout with Page Transitions,
-
5:11
and I'm just going to go ahead and view the demo here,
-
5:14
because I don't think the code is really very groundbreaking.
-
5:17
I think what's interesting here is the design.
-
5:21
So of course we've been talking a lot about flat design here
-
5:24
on the Treehouse Show as the rest of the web design community—
-
5:30
Flat design is pretty hot.
-
5:32
And I think we're starting to see more mature uses of flat design.
-
5:38
This is a much different way to lay out a web page.
-
5:42
So we have four little sections here, and that's basically our navigation,
-
5:47
and if we click on one of those, it will transition the whole page
-
5:52
to a whole other page, so it's basically transitioning the entire layout
-
5:58
to the next page, and I think this is pretty different.
-
6:03
I don't think I have seen anything quite like this before on the web,
-
6:09
and it really makes me wonder if we're kind of missing this whole other
-
6:12
plane of awesomeness, if you will, where, you know, maybe we don't
-
6:16
need to really lay things out where navigation
-
6:19
is kind of at the top or in a sidebar or something.
-
6:22
Maybe you just—I mean, in this case, the whole web page is the navigation.
-
6:26
>>Maybe we should coin that term.
-
6:28
>>What's that? >>Plane of Awesomeness, POA.
-
6:31
>>Plane of Awesomeness. I like it.
-
6:34
>Yeah, you heard it here first on the Treehouse Show.
-
6:36
>>Yeah, let's make it happen.
-
6:38
>>Next up, over on the DesignWoop blog—I hope I'm saying that correctly—
-
6:42
There is a blog post by Jake Rocheleau about how to customize your CSS
-
6:48
buttons with pictogram icons.
-
6:50
Now we'll take a look at the live demo first, and this is a blog post where
-
6:54
he goes through and shows you how to create all these different buttons.
-
6:58
Now he's doing this using a Google web font as well as another custom font
-
7:04
to create these icons.
-
7:06
So he kind of just walks you through, sets up how
-
7:09
you're going to build the document,
-
7:11
how you're going to link to all of these different resources,
-
7:15
as well as setting up the different buttons and what you're going to need
-
7:19
to generate all these different assets.
-
7:21
Now the benefit of using CSS fonts for something like this is
-
7:24
your file size is going to be smaller than if you were
-
7:28
attaching images to it, just by the nature of using the web font.
-
7:31
And there are even resources available where you can take just the characters
-
7:36
that you're interested in for your different pictograms
-
7:39
and use onto generate a custom web font, which is going to save everybody
-
7:43
space when downloading and make your site faster.
-
7:46
Anyway, check out that blog post for a great introduction
-
7:49
on creating these buttons with web fonts.
-
7:51
>>Very cool stuff. Well, we're on a roll here, so her's another cool blog post.
-
7:56
This one is from Designmodo, and it's about typography
-
8:02
in mobile design.
-
8:04
Important aspects and examples.
-
8:06
I know that because it says it right here on the web page.
-
8:09
Basically, they say that the most important thing about mobile typography
-
8:15
is readability, and that comes down to size, contrast, and spacing.
-
8:21
And the blog post has a whole bunch of really great examples
-
8:25
of mobile typography here.
-
8:28
I think the important thing to remember about mobile typography,
-
8:32
like they're saying, is that it's a different context.
-
8:36
So basically, you have this small, really brightly lit, screen.
-
8:41
People are kind of on the go. It's very different than sitting down
-
8:45
and reading something, say, on a tablet or a laptop screen.
-
8:50
So the size of the font is, of course, important because the screen size is smaller,
-
8:56
but the contrast is important as well, because oftentimes the brightness is
-
9:00
very variable. It's a lot different than an environment where,
-
9:04
you know, the brightness is kind of set, you know what that's going to be like,
-
9:07
and when you're on the move, especially, the brightness levels can change.
-
9:13
So you want to make sure that you have really good contrast.
-
9:16
>>That's why I always choose light yellow for the font color
-
9:19
and slightly darker yellow for the background color.
-
9:22
>>That's smart, Jason.>>I want to make sure everybody
-
9:25
can all see what you're talking about.
-
9:27
>>And then, of course, spacing is important for the same thing as size, right?
-
9:30
You basically want to make sure that there's enough space
-
9:33
around your text so that it's easily readable and doesn't
-
9:36
look like it's running into the sides of the page or running into other text.
-
9:40
But a really good blog post, just really great advice about mobile typography.
-
9:46
>>Cool stuff. Next up, we have a project called Clowncar.
-
9:51
This is a really, really interesting technique for using an SVG
-
9:57
to create a responsive image.
-
10:00
Yeah, so what this means is if you have your web page, you give one image tag,
-
10:05
give it the source of an SVG, and inside that SVG you can give it different
-
10:11
sizes of, say, other PNGs.
-
10:15
So one for small mobile web browsers, all the different
-
10:19
responsive breakpoints that you're used to.
-
10:21
>>It's just images all the way down. >>Yeah. It's imageception.
-
10:24
Now there's a pretty big walk-through over on the readme,
-
10:28
as well a ton of different examples, so you can see the small image,
-
10:32
she goes through and says listen for the min with the 401
-
10:36
and max with the 700, only display what you need to, and then
-
10:41
all that for the different sizes.
-
10:43
Now I'm going to show you a little bit of a demo here.
-
10:49
So here we have one image.
-
10:53
This is the Clowncar technique. You'll notice this crying clown with a hat.
-
10:57
I'm not sure why he's crying, but I'm sure it's sad.
-
11:01
Anyway, as I resize my browser, you'll notice that this image changes.
-
11:07
He's still crying, but he's got some balloons.
-
11:10
This is just the exact same SVG file changing,
-
11:14
depending on how you resize your browser.
-
11:16
So if you want more background information,
-
11:19
definitely read that blog post and check out the examples.
-
11:22
It's really incredible, and you can fork it on GitHub.
-
11:25
>>Last up is an article from, I think it's the New York Times.
-
11:30
Yeah, the New York Times, and there's not a whole lot to say about this one.
-
11:34
Basically, it's just an article called "The Flattening of Design," about
-
11:38
flat design, and I just thought it was interesting, because
-
11:41
flat design is hitting the mainstream.
-
11:44
I mean, it— >>We're talking about it here. >>Yeah, we're talking about it here,
-
11:48
obviously, the most important podcast in the world.
-
11:51
But, you know, it's on the New York Times as well,
-
11:53
which is a fairly respected publication, well known, right?
-
11:59
>>I guess I've heard of them. >>And they're saying—
-
12:02
I like the first line here. It says, "It might sound audacious to
-
12:05
"think that Microsoft, the arbiter of uncool, was at the forefront of
-
12:10
design a few years ago. But it was." And, of course, they're talking about
-
12:14
Microsoft's Metro UI design language, so to speak.
-
12:19
And they designed that several years ago, and it's only just now that
-
12:23
people are starting to catch on to all the benefits of this.
-
12:26
I mean, it creates these really uncluttered, very clean layouts,
-
12:29
and it's also really great for mobile devices, where, you know,
-
12:34
screen space is limited, bandwidth is limited, and you really just want to get
-
12:39
straight to the point, and it's also very interesting to look at.
-
12:42
I really like this resurgence of color and typography and communicating
-
12:49
just that, rather than having to have, like, shiny buttons
-
12:52
and a ton of texture everywhere.
-
12:55
>>Or even worse, the whole grunge thing.
-
12:58
That was popular for a little while, remember that?
-
13:00
>>It was, and that was basically just the use of texture or even overuse of texture.
-
13:05
So this is somewhat of a reaction to that.
-
13:09
I think it's reaction to, like, the grunge stuff.
-
13:12
I think it's a reaction to skeuomorphism,
-
13:15
which is basically where you try to make a UI element look like
-
13:18
something in real life, as like a real-life metaphor.
-
13:22
But it's very, very interesting. I mean, it's definitely a design trend.
-
13:27
I think at some point, you know, five, ten years down the road,
-
13:31
maybe even sooner, we'll decide that, oh, this is actually
-
13:35
really terrible looking and dated now.
-
13:37
But still, very cool.
-
13:39
I mean, I think there are a lot of functional, practical benefits to it.
-
13:43
So, worth checking out. >>Yeah, definitely, and if you want to stay on the cutting edge,
-
13:46
don't forget to check out the Plane of Awesomeness design pattern,
-
13:49
POA, you'll be hearing more about that.
-
13:51
>>That's right. On Twitter, I am @nickrp. >>And I am @jseifer.
-
13:55
That's all we have for you this episode. For show notes and more,
-
13:58
check out our YouTube channel at youtube.com/gotreehouse,
-
14:01
and if you like this show, please rate us in iTunes,
-
14:04
where you can find us by searching for the Treehouse Show.
-
14:06
>>And if you'd like to see more videos like this one about
-
14:10
web design, web development, Android, iOS, business, and more,
-
14:15
be sure to check us out at teamtreehouse.com.
-
14:19
Thanks so much for watching, and we'll see you next week.
-
14:21
[? music ?]
You need to sign up for Treehouse in order to download course files.
Sign up