1
00:00:01,270 --> 00:00:04,900
I'm Nick Petitt. >>I'm Jason Seifer. >>And you're watching the Treehouse Show,

2
00:00:04,900 --> 00:00:07,390
your weekly dose of Internets, where we talk about all things 

3
00:00:07,390 --> 00:00:09,760
web design, web development, and more.

4
00:00:09,760 --> 00:00:12,670
>>In this episode, we'll be talking about reflections, 

5
00:00:12,670 --> 00:00:15,800
mobile typography, and responsive images.

6
00:00:15,800 --> 00:00:17,830
>>Let's check it out.

7
00:00:17,830 --> 00:00:20,960
[? music ?]

8
00:00:20,960 --> 00:00:23,700
[The Treehouse Show]

9
00:00:23,700 --> 00:00:27,400
So first up, we were talking about this jQuery plugin called Better Toggle.

10
00:00:27,400 --> 00:00:32,200
This provides sleek CSS3 toggling of elements.

11
00:00:32,200 --> 00:00:37,040
Now, it's really easy to use, as you expect from any jQuery plugin.

12
00:00:37,040 --> 00:00:40,560
You get your click handler, or any event that you have.

13
00:00:40,560 --> 00:00:43,930
Click the toggle button, and you'll watch this image on the right here, and

14
00:00:43,930 --> 00:00:48,000
boom! Toggle has played.

15
00:00:48,000 --> 00:00:50,580
You can do this with, what, one element? 

16
00:00:50,580 --> 00:00:52,650
No, we'll throw in more than one element.

17
00:00:52,650 --> 00:00:55,350
Check this one out. Ready? Toggle all. Boom!

18
00:00:55,350 --> 00:01:00,150
You know what? Oh, hey, maybe I don't have an element on the screen.

19
00:01:00,150 --> 00:01:03,040
I want it to get on the screen using a sleek CSS3 transition.

20
00:01:03,040 --> 00:01:05,150
Oh, what about this? Check this one out.

21
00:01:05,150 --> 00:01:09,360
Wow! All this can be yours for the low price of $0.00.

22
00:01:09,360 --> 00:01:12,250
Just click Download the Plugin. Or fork it on GitHub.

23
00:01:12,250 --> 00:01:14,500
>>That's pretty amazing. >>Better Toggle.

24
00:01:14,500 --> 00:01:18,110
>>Better check it out. >>Yes. Act now. Supplies are limited.

25
00:01:18,110 --> 00:01:24,620
>>Next up is this really cool blog post about creating this glossy, reflective,

26
00:01:24,620 --> 00:01:29,720
animated element thing. It's pretty cool. Let's take a look. >>Very technical. 

27
00:01:29,720 --> 00:01:34,030
>>So on the left-hand side, you can see that we have this animated div,

28
00:01:34,030 --> 00:01:39,720
and as it kind of moves around, we have this nice glossy reflection.

29
00:01:39,720 --> 00:01:44,710
And if I hover over it, which I already just did there, but if I hover over,

30
00:01:44,710 --> 00:01:48,090
you can see where the reflection is coming in.

31
00:01:48,090 --> 00:01:51,850
They go ahead and color that reflection in with red.

32
00:01:51,850 --> 00:01:55,090
So that's pretty impressive. How the heck are they doing that?

33
00:01:55,090 --> 00:01:57,310
Well, the markup is pretty simple.

34
00:01:57,310 --> 00:02:00,240
There's basically just this box here 

35
00:02:00,240 --> 00:02:04,060
and then another div nested inside of it for the reflection.

36
00:02:04,060 --> 00:02:08,350
Now I would say that this is a little bit unsemantic, 

37
00:02:08,350 --> 00:02:10,520
but we'll come back to that at the end here.

38
00:02:10,520 --> 00:02:14,590
So next up is the styling for the box. Nothing fancy there.

39
00:02:14,590 --> 00:02:19,290
For the reflection, they're actually using a WebKit gradient,

40
00:02:19,290 --> 00:02:21,870
and one thing that they point out at the start of this article 

41
00:02:21,870 --> 00:02:26,250
is that this will only work in WebKit-based browsers, so this isn't quite 

42
00:02:26,250 --> 00:02:29,530
production-ready, but it's still a neat tech demo.

43
00:02:29,530 --> 00:02:31,770
So they're using WebKit gradients there.

44
00:02:31,770 --> 00:02:38,820
And then they use transforms and animations to move the box around

45
00:02:38,820 --> 00:02:42,660
and then move the reflection around as well,

46
00:02:42,660 --> 00:02:47,480
and then they animate those using just a two-second animation

47
00:02:47,480 --> 00:02:51,790
with some nice easing there, and they alternate back and forth.

48
00:02:51,790 --> 00:02:58,570
And then, of course, this is in 3D, so they add WebKit perspective of 500 there.

49
00:02:58,570 --> 00:03:03,470
So, pretty nifty piece of code here. It's just basically very clever.

50
00:03:03,470 --> 00:03:07,550
The thing that I kind of was wondering about when I first saw this

51
00:03:07,550 --> 00:03:11,630
was whether or not you actually need that second div there,

52
00:03:11,630 --> 00:03:14,040
because I think you could actually use 

53
00:03:14,040 --> 00:03:17,850
CSS3 pseudo elements and then animate them. 

54
00:03:17,850 --> 00:03:23,460
For some time, I was trying to actually try to animate pseudo elements myself,

55
00:03:23,460 --> 00:03:27,120
and it wasn't included in WebKit, but I think it's there now.

56
00:03:27,120 --> 00:03:30,650
I don't think you need that extra div, but I don't know for sure.

57
00:03:30,650 --> 00:03:33,600
So that's some extra credit on the show.

58
00:03:33,600 --> 00:03:39,960
>>But we won't report you to the SBI, the Semantic Bureau of Investigation.

59
00:03:39,960 --> 00:03:42,920
[laughter] >>Which we just made up

60
00:03:42,920 --> 00:03:45,950
>>on the last episode, so check that one out if you haven't seen it.

61
00:03:45,950 --> 00:03:49,850
Next up, we have a project called Drawscript. This is really interesting.

62
00:03:49,850 --> 00:03:53,230
This lets you turn Illustrator shapes into code.

63
00:03:53,230 --> 00:03:57,840
Now this is an extension for Adobe Illustrator, which is in Creative Cloud.

64
00:03:57,840 --> 00:04:02,070
Right now, it's free to download, but the author says it will be open sourced

65
00:04:02,070 --> 00:04:05,240
as soon as it's considered stable, and he's looking for some help.

66
00:04:05,240 --> 00:04:07,910
But enough about that. It's really, really interesting.

67
00:04:07,910 --> 00:04:12,740
If you're developing iOS applications, you can immediately export shapes

68
00:04:12,740 --> 00:04:15,840
straight from Illustrator to develop right on iOS.

69
00:04:15,840 --> 00:04:22,650
It also has exports for C++, JavaScript, Processing.js, ActionScript 3,

70
00:04:22,650 --> 00:04:26,810
Jason, and even raw Bezier points.

71
00:04:26,810 --> 00:04:29,200
Now it's super simple to use. 

72
00:04:29,200 --> 00:04:33,070
You can just use it as a dropdown, click what sort of generation format you want,

73
00:04:33,070 --> 00:04:35,820
and you can even check this Live button right here,

74
00:04:35,820 --> 00:04:40,530
and it'll update the shape as you're coding it in Illustrator.

75
00:04:40,530 --> 00:04:43,370
I don't know if coding's the right word, but I'm a developer.

76
00:04:43,370 --> 00:04:49,550
So anyway, super simple to use, really, really easy to install,

77
00:04:49,550 --> 00:04:51,600
and go ahead and check that out.

78
00:04:51,600 --> 00:04:55,330
 I'm sure this is going to be very, very useful for all of you using Illustrator.

79
00:04:55,330 --> 00:04:57,500
>>Very cool stuff.

80
00:04:57,500 --> 00:05:01,590
Well, next up is another great blog post from Codrops.

81
00:05:01,590 --> 00:05:03,640
They've just been killing it lately.

82
00:05:03,640 --> 00:05:06,220
>>They've been dropping a lot of code. >>They have. 

83
00:05:06,220 --> 00:05:11,300
So this one is called Full Screen Layout with Page Transitions,

84
00:05:11,300 --> 00:05:14,400
and I'm just going to go ahead and view the demo here,

85
00:05:14,400 --> 00:05:17,700
because I don't think the code is really very groundbreaking.

86
00:05:17,700 --> 00:05:21,280
I think what's interesting here is the design.

87
00:05:21,280 --> 00:05:24,370
So of course we've been talking a lot about flat design here

88
00:05:24,370 --> 00:05:30,260
on the Treehouse Show as the rest of the web design community—

89
00:05:30,260 --> 00:05:32,510
Flat design is pretty hot.

90
00:05:32,510 --> 00:05:38,140
And I think we're starting to see more mature uses of flat design.

91
00:05:38,140 --> 00:05:42,080
This is a much different way to lay out a web page.

92
00:05:42,080 --> 00:05:47,870
So we have four little sections here, and that's basically our navigation,

93
00:05:47,870 --> 00:05:52,090
and if we click on one of those, it will transition the whole page

94
00:05:52,090 --> 00:05:58,070
to a whole other page, so it's basically transitioning the entire layout

95
00:05:58,070 --> 00:06:03,880
to the next page, and I think this is pretty different.

96
00:06:03,880 --> 00:06:09,560
I don't think I have seen anything quite like this before on the web,

97
00:06:09,560 --> 00:06:12,460
and it really makes me wonder if we're kind of missing this whole other

98
00:06:12,460 --> 00:06:16,090
plane of awesomeness, if you will, where, you know, maybe we don't

99
00:06:16,090 --> 00:06:19,240
need to really lay things out where navigation 

100
00:06:19,240 --> 00:06:22,960
is kind of at the top or in a sidebar or something.

101
00:06:22,960 --> 00:06:26,900
Maybe you just—I mean, in this case, the whole web page is the navigation.

102
00:06:26,900 --> 00:06:28,920
>>Maybe we should coin that term.

103
00:06:28,920 --> 00:06:31,750
>>What's that? >>Plane of Awesomeness, POA.

104
00:06:31,750 --> 00:06:34,210
>>Plane of Awesomeness. I like it.

105
00:06:34,610 --> 00:06:36,230
>Yeah, you heard it here first on the Treehouse Show.

106
00:06:36,230 --> 00:06:38,230
>>Yeah, let's make it happen.

107
00:06:38,230 --> 00:06:42,800
>>Next up, over on the DesignWoop blog—I hope I'm saying that correctly—

108
00:06:42,800 --> 00:06:48,480
There is a blog post by Jake Rocheleau about how to customize your CSS

109
00:06:48,480 --> 00:06:50,860
buttons with pictogram icons.

110
00:06:50,860 --> 00:06:54,970
Now we'll take a look at the live demo first, and this is a blog post where

111
00:06:54,970 --> 00:06:58,210
he goes through and shows you how to create all these different buttons.

112
00:06:58,210 --> 00:07:04,360
Now he's doing this using a Google web font as well as another custom font

113
00:07:04,360 --> 00:07:06,640
to create these icons.

114
00:07:06,640 --> 00:07:09,850
So he kind of just walks you through, sets up how

115
00:07:09,850 --> 00:07:11,850
you're going to build the document,

116
00:07:11,850 --> 00:07:15,650
how you're going to link to all of these different resources,

117
00:07:15,650 --> 00:07:19,090
as well as setting up the different buttons and what you're going to need

118
00:07:19,090 --> 00:07:21,300
to generate all these different assets.

119
00:07:21,300 --> 00:07:24,940
Now the benefit of using CSS fonts for something like this is

120
00:07:24,940 --> 00:07:28,510
your file size is going to be smaller than if you were 

121
00:07:28,510 --> 00:07:31,810
attaching images to it, just by the nature of using the web font.

122
00:07:31,810 --> 00:07:36,080
And there are even resources available where you can take just the characters

123
00:07:36,080 --> 00:07:39,140
that you're interested in for your different pictograms

124
00:07:39,140 --> 00:07:43,720
and use onto generate a custom web font, which is going to save everybody

125
00:07:43,720 --> 00:07:46,220
space when downloading and make your site faster.

126
00:07:46,220 --> 00:07:49,220
Anyway, check out that blog post for a great introduction

127
00:07:49,220 --> 00:07:51,630
 on creating these buttons with web fonts.

128
00:07:51,630 --> 00:07:56,150
>>Very cool stuff. Well, we're on a roll here, so her's another cool blog post.

129
00:07:56,150 --> 00:08:02,080
This one is from Designmodo, and it's about typography

130
00:08:02,080 --> 00:08:04,150
in mobile design.

131
00:08:04,150 --> 00:08:06,720
Important aspects and examples. 

132
00:08:06,720 --> 00:08:09,330
I know that because it says it right here on the web page.

133
00:08:09,330 --> 00:08:15,470
Basically, they say that the most important thing about mobile typography

134
00:08:15,470 --> 00:08:21,170
is readability, and that comes down to size, contrast, and spacing.

135
00:08:21,170 --> 00:08:25,990
And the blog post has a whole bunch of really great examples

136
00:08:25,990 --> 00:08:28,060
of mobile typography here.

137
00:08:28,060 --> 00:08:32,950
I think the important thing to remember about mobile typography,

138
00:08:32,950 --> 00:08:36,140
like they're saying, is that it's a different context.

139
00:08:36,140 --> 00:08:41,799
So basically, you have this small, really brightly lit, screen.

140
00:08:41,799 --> 00:08:45,450
People are kind of on the go. It's very different than sitting down 

141
00:08:45,450 --> 00:08:50,460
and reading something, say, on a tablet or a laptop screen.

142
00:08:50,460 --> 00:08:56,290
So the size of the font is, of course, important because the screen size is smaller,

143
00:08:56,290 --> 00:09:00,640
but the contrast is important as well, because oftentimes the brightness is

144
00:09:00,640 --> 00:09:04,170
very variable. It's a lot different than an environment where, 

145
00:09:04,170 --> 00:09:07,810
you know, the brightness is kind of set, you know what that's going to be like,

146
00:09:07,810 --> 00:09:13,930
and when you're on the move, especially, the brightness levels can change.

147
00:09:13,930 --> 00:09:16,600
So you want to make sure that you have really good contrast.

148
00:09:16,600 --> 00:09:19,570
>>That's why I always choose light yellow for the font color

149
00:09:19,570 --> 00:09:22,850
and slightly darker yellow for the background color.

150
00:09:22,850 --> 00:09:25,370
>>That's smart, Jason.>>I want to make sure everybody 

151
00:09:25,370 --> 00:09:27,630
can all see what you're talking about.

152
00:09:27,630 --> 00:09:30,540
>>And then, of course, spacing is important for the same thing as size, right?

153
00:09:30,540 --> 00:09:33,010
You basically want to make sure that there's enough space

154
00:09:33,010 --> 00:09:36,540
around your text so that it's easily readable and doesn't

155
00:09:36,540 --> 00:09:40,140
look like it's running into the sides of the page or running into other text.

156
00:09:40,140 --> 00:09:46,450
But a really good blog post, just really great advice about mobile typography.

157
00:09:46,450 --> 00:09:51,500
>>Cool stuff. Next up, we have a project called Clowncar.

158
00:09:51,500 --> 00:09:57,320
This is a really, really interesting technique for using an SVG

159
00:09:57,320 --> 00:10:00,280
to create a responsive image.

160
00:10:00,280 --> 00:10:05,850
Yeah, so what this means is if you have your web page, you give one image tag,

161
00:10:05,850 --> 00:10:11,990
give it the source of an SVG, and inside that SVG you can give it different

162
00:10:11,990 --> 00:10:15,010
sizes of, say, other PNGs.

163
00:10:15,010 --> 00:10:19,500
So one for small mobile web browsers, all the different 

164
00:10:19,500 --> 00:10:21,500
responsive breakpoints that you're used to.

165
00:10:21,500 --> 00:10:24,820
>>It's just images all the way down. >>Yeah. It's imageception.

166
00:10:24,820 --> 00:10:28,700
Now there's a pretty big walk-through over on the readme,

167
00:10:28,700 --> 00:10:32,840
as well a ton of different examples, so you can see the small image,

168
00:10:32,840 --> 00:10:36,760
she goes through and says listen for the min with the 401

169
00:10:36,760 --> 00:10:41,160
and max with the 700, only display what you need to, and then

170
00:10:41,160 --> 00:10:43,490
all that for the different sizes.

171
00:10:43,490 --> 00:10:46,680
Now I'm going to show you a little bit of a demo here.

172
00:10:49,920 --> 00:10:53,130
So here we have one image.

173
00:10:53,130 --> 00:10:57,220
This is the Clowncar technique. You'll notice this crying clown with a hat.

174
00:10:57,220 --> 00:11:01,740
I'm not sure why he's crying, but I'm sure it's sad.

175
00:11:01,740 --> 00:11:07,210
Anyway, as I resize my browser, you'll notice that this image changes.

176
00:11:07,210 --> 00:11:10,390
He's still crying, but he's got some balloons.

177
00:11:10,390 --> 00:11:14,370
This is just the exact same SVG file changing, 

178
00:11:14,370 --> 00:11:16,750
depending on how you resize your browser.

179
00:11:16,750 --> 00:11:19,360
So if you want more background information, 

180
00:11:19,360 --> 00:11:22,100
definitely read that blog post and check out the examples.

181
00:11:22,100 --> 00:11:25,220
It's really incredible, and you can fork it on GitHub.

182
00:11:25,220 --> 00:11:30,300
>>Last up is an article from, I think it's the New York Times. 

183
00:11:30,300 --> 00:11:34,720
Yeah, the New York Times, and there's not a whole lot to say about this one.

184
00:11:34,720 --> 00:11:38,180
Basically, it's just an article called "The Flattening of Design," about

185
00:11:38,180 --> 00:11:41,760
flat design, and I just thought it was interesting, because 

186
00:11:41,760 --> 00:11:44,980
flat design is hitting the mainstream.

187
00:11:44,980 --> 00:11:48,500
I mean, it— >>We're talking about it here. >>Yeah, we're talking about it here,

188
00:11:48,500 --> 00:11:51,200
obviously, the most important podcast in the world.

189
00:11:51,200 --> 00:11:53,680
But, you know, it's on the New York Times as well,

190
00:11:53,680 --> 00:11:59,000
which is a fairly respected publication, well known, right?

191
00:11:59,000 --> 00:12:02,130
>>I guess I've heard of them. >>And they're saying—

192
00:12:02,130 --> 00:12:05,880
I like the first line here. It says, "It might sound audacious to

193
00:12:05,880 --> 00:12:10,040
"think that Microsoft, the arbiter of uncool, was at the forefront of

194
00:12:10,040 --> 00:12:14,200
design a few years ago. But it was." And, of course, they're talking about

195
00:12:14,200 --> 00:12:19,740
Microsoft's Metro UI design language, so to speak.

196
00:12:19,740 --> 00:12:23,070
And they designed that several years ago, and it's only just now that

197
00:12:23,070 --> 00:12:26,040
people are starting to catch on to all the benefits of this.

198
00:12:26,040 --> 00:12:29,980
I mean, it creates these really uncluttered, very clean layouts,

199
00:12:29,980 --> 00:12:34,750
and it's also really great for mobile devices, where, you know,

200
00:12:34,750 --> 00:12:39,050
screen space is limited, bandwidth is limited, and you really just want to get

201
00:12:39,050 --> 00:12:42,810
straight to the point, and it's also very interesting to look at.

202
00:12:42,810 --> 00:12:49,450
I really like this resurgence of color and typography and communicating

203
00:12:49,450 --> 00:12:52,950
just that, rather than having to have, like, shiny buttons

204
00:12:52,950 --> 00:12:55,280
and a ton of texture everywhere.

205
00:12:55,280 --> 00:12:58,290
>>Or even worse, the whole grunge thing. 

206
00:12:58,290 --> 00:13:00,020
That was popular for a little while, remember that?

207
00:13:00,020 --> 00:13:05,800
>>It was, and that was basically just the use of texture or even overuse of texture.

208
00:13:05,800 --> 00:13:09,470
So this is somewhat of a reaction to that.

209
00:13:09,470 --> 00:13:12,460
I think it's reaction to, like, the grunge stuff.

210
00:13:12,460 --> 00:13:15,570
I think it's a reaction to skeuomorphism,

211
00:13:15,570 --> 00:13:18,800
which is basically where you try to make a UI element look like

212
00:13:18,800 --> 00:13:22,790
something in real life, as like a real-life metaphor.

213
00:13:22,790 --> 00:13:27,500
But it's very, very interesting. I mean, it's definitely a design trend.

214
00:13:27,500 --> 00:13:31,300
I think at some point, you know, five, ten years down the road,

215
00:13:31,300 --> 00:13:35,190
maybe even sooner, we'll decide that, oh, this is actually

216
00:13:35,190 --> 00:13:37,260
really terrible looking and dated now.

217
00:13:37,260 --> 00:13:39,320
But still, very cool.

218
00:13:39,320 --> 00:13:43,100
I mean, I think there are a lot of functional, practical benefits to it.

219
00:13:43,100 --> 00:13:46,970
So, worth checking out. >>Yeah, definitely, and if you want to stay on the cutting edge,

220
00:13:46,970 --> 00:13:49,580
don't forget to check out the Plane of Awesomeness design pattern,

221
00:13:49,580 --> 00:13:51,900
POA, you'll be hearing more about that.

222
00:13:51,900 --> 00:13:55,820
>>That's right. On Twitter, I am @nickrp. >>And I am @jseifer.

223
00:13:55,820 --> 00:13:58,070
That's all we have for you this episode. For show notes and more,

224
00:13:58,070 --> 00:14:01,490
check out our YouTube channel at youtube.com/gotreehouse,

225
00:14:01,490 --> 00:14:04,310
and if you like this show, please rate us in iTunes, 

226
00:14:04,310 --> 00:14:06,920
where you can find us by searching for the Treehouse Show.

227
00:14:06,920 --> 00:14:10,660
>>And if you'd like to see more videos like this one about

228
00:14:10,660 --> 00:14:15,240
web design, web development, Android, iOS, business, and more,

229
00:14:15,240 --> 00:14:19,060
be sure to check us out at teamtreehouse.com.

230
00:14:19,060 --> 00:14:21,210
Thanks so much for watching, and we'll see you next week.

231
00:14:21,210 --> 00:14:25,210
[? music ?]