Episode 41: Reflections, Mobile Typography and Responsive Images

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