Episode 44: HTML5 Features, Responsive CSS Modules and Sass

I'm Nick Pettit. >>I'm Jason Seifer. 0:01 [Petit] And you're watching the Treehouse Show, your weekly dose of internets 0:03 where we talk about all things web design, web development, and more. 0:06 [Seifer] In this episode, we'll be talking about HTML5 features, 0:09 responsive CSS modules, Sass, and more. 0:12 [Petit] Let's check it out! 0:16 [The Treehouse Show] 0:22 First up is this really cool blog called Movies in Color, 0:24 and it's basically a bunch of still frames from movies 0:29 and then a breakdown of the color palette of that still frame. 0:32 So really good place to just get some inspiration 0:36 for creating a color palette for your next web design. 0:40 So let's take a quick look. >>[Seifer] Check it out. That first. 0:43 There's a picture of me and you right there. >>[Petit] Yup. That's me and that's Jason. 0:47 And there's a breakdown of the light, medium, and dark colors, 0:51 and then they give a general spectrum of the entire color palette. 0:55 So if we scroll down here. Here's another— >>[Seifer] We were just kids back then. 1:00 —really nice frame here. We're just exploring the ocean. 1:04 And again, light, medium, dark, and general spectrum, 1:06 and I think it's a really cool way to get a good idea 1:10 of what a nice color palette looks like 1:15 because in this particular frame, you can see the fish here is orange, 1:17 and it's set against a blue background and that's actually 1:24 a really nice complementary color palette rather that using orange and blue together. 1:27 So I think movies are good place to draw an inspiration from 1:32 because they spend a whole lot of time thinking about each one of these shots, 1:35 each one of these frames and really getting the colors just right. 1:39 So, why not draw some inspiration from it? 1:43 [Seifer] Yeah. Really cool site. >>[Petit] Yeah. Really cool. 1:45 [Seifer] Next up, we have a blog post called 5 HTML5 Features That You Need To Know. 1:48 Now there are more than 5 features that you should be aware of, 1:53 but this blog post is just concentrating on 5 of them. 1:56 First one is pretty interesting. It's about DNS Prefetching. 1:59 Each time your browser needs to look up a different resource— 2:03 say if you're using a Google font or a separate analytic service— 2:07 well, you're computer has to look up the DNS address for it 2:12 so DNS will turn a domain name into an IP address. 2:15 Each one of those request actually incurs 2:19 a little bit of time on the client site to look that up. 2:21 Now if you put in the prefetch attribute right here, link rel=dns-prefetch, 2:24 your browser will do that in the background 2:31 before those resources are necessarily used. 2:34 And the same thing can actually be done with links. 2:37 So that's a really interesting feature that you need to know. 2:41 Something else that's cool is the Download Attribute. 2:44 Before when you linked to files, you didn't necessarily have the choice 2:48 about whether or not it was downloaded by your browser. 2:52 You could send out different headers for it, but there was no specific guarantee. 2:55 You can use the download attribute 2:59 and cause the browser to download your file for you 3:02 and even give it a specific filename. 3:06 You can have Regular Expressions in your input tags. 3:09 Just give it a pattern right inside the input. 3:11 That will save a lot of help with JavaScript plugins, and finally 3:14 the Datalist Element is something that's really awesome. 3:18 If you've seen a search field or an input field 3:21 that has something be autocompleted, 3:24 the datalist attribute can accomplish the same exact thing using only HTML5. 3:26 So you don't need to spend a lot of time doing round trips to the server or 3:32 even including extra JavaScript, which will save on your page load times. 3:36 Anyway, there's a bit more to this article. 3:41 If you want to see a little bit more in depth how to use these different attributes, 3:43 find it in our show notes at youtube.com/gotreehouse 3:46 or in iTunes where you should rate us. 3:50 If you haven't already, search for the Treehouse Show. Thank you. 3:52 [Petit] Yes. Thank you. >>[Seifer] Thank you. 3:55 [Petit] I really like the download attribute. >>[Seifer] Yeah. 3:57 [Petit] And there's nothing more annoying than clicking a download link 4:00 and then having the browser like open up a new tab and take you to this 4:03 whole different web page and then it starts downloading or something weird like that. 4:08 It's really nice just be able to click the button and know that you're 4:12 going to get that file downloaded immediately. 4:16 So really nice user experience there. 4:18 [Seifer] I can of something a little more annoying. >>[Petit] What's that? 4:20 [Seifer] When somebody does this right before you're about to make a really good point. 4:23 It's kind of annoying. >>[Petit] Yeah. That's really, really annoying. 4:27 Next up, is this CSS file or CSS framework. 4:32 I'm not really sure what to call it. It's basically a CSS file. And it's called Pure. 4:35 It's self-described as a set of small, responsive CSS modules 4:42 that you can use in every web project. 4:46 Thank you for the contribution, Jason. 4:50 If we scroll down here, it has a really small file size. So that's very nice. 4:53 It should make a page load pretty quick even if you didn't include it. 4:59 And you can create responsive layouts and you can customize it quite a bit 5:04 to create your own look and feel, so you can customize the colors, 5:08 customize the border radius, or whatever you want. 5:11 So let's go ahead and take a look at a quick example here. 5:14 I'm going to jump into their forms, and if we scroll down here, 5:18 they have a couple of different examples of forms. 5:23 There's a compact inline form, a form that is stacked, and they even have 5:26 this really neat multi-column form that when you resize the browser 5:32 or when you look at it on a mobile device, it will actually 5:38 compact itself down into a single column. 5:40 So really pretty interesting concept because it's basically a set of 5:44 responsive design patterns. 5:50 We have this design patterns that 5:52 are already well established on a desktop layout. 5:54 So for example, when you're looking at search results and a search engine, 5:58 you always know that there's going to be pagination down at the bottom, 6:04 and that's generally going to look and feel the same way or follow the same model 6:07 where there's forward and back buttons and a bunch of numbers. 6:11 That's a design pattern, but these design patterns 6:14 are less well established on mobile devices. 6:18 That's your cue, Jason. >>[Seifer] I'm faking you out. >>[Petit] You've missed it. 6:22 Oh, I missed it. You faked me out. That's good. That's good. 6:26 That's it. That's like double annoying. 6:29 But that's basically what a design pattern is 6:33 and these are not really well established on mobile devices. 6:37 So it's nice to have this CSS file that sets up a couple of good examples. 6:41 [Seifer] Yeah. And easy to reuse. 6:48 Next up, we have something called Popcorn.js. 6:50 Popcorn.js is a really interesting project by Mozilla. 6:53 This let's you essentially have JavaScript integration between video and the web. 6:58 So, what does that mean? 7:05 Well, there some really cool examples on the site of things that you can do. 7:07 One of the things that they have—by the way, most of these examples 7:10 that they have on the page require Firefox in order to work 7:13 but forget about that for now. 7:16 One of the really interesting examples that hey have on the page 7:18 is a talk given by Linus Torvalds, 7:20 and it's synced up with slides from the same talk using only JavaScript 7:24 and the slides are synced up separately from the video. 7:29 So essentially using their JavaScript API, you have access to all sorts of different 7:32 callbacks and things you can do to manipulate videos 7:36 and web pages at the same time. 7:39 Now you can take a look at the documentation over in the API page. 7:41 It's really, really easy to get going. 7:45 You just include the Popcorn script in your website, and then if you want 7:47 to make a quick footnote, this is how easy it is. 7:52 Just a couple lines of code here, add in the start and end, 7:54 and what you want the target to be as well as the text. 7:58 So super simple to get started. 8:02 Really, really interesting if you're looking to integrate web video and your pages 8:05 and make everything all sorts of interactive. 8:09 I'm not sure of any sites that do that yet, 8:12 but maybe we'll watch for them pretty soon. 8:14 [Petit] Yeah. That's really interesting because normally to do something like that, 8:16 you would've had to actually burn the slides right into the video. 8:20 [Seifer] Yeah. >>[Petit] But using this, I can totally imagine a situation where the slides 8:24 are not only synced up with the video but actually maybe have some 8:29 sort of interactive element to them where like they show an in browser example— 8:31 [Seifer] Yeah. >>[Petit] —of what the person's talking about, maybe 8:37 there's links that you can click on to read more. 8:39 So that's pretty good use case— >>[Seifer] Yeah. 8:42 [Petit] —of that particular feature. >>[Seifer] Really awesome. 8:45 [Petit] So it's only for Firefox right now. 8:47 [Seifer] Well, not just for Firefox but in order to get the best experience, 8:49 you'll need a nightly version of Firefox and yes, some of the latest HTML5 features. 8:54 So not necessarily going to work with older browsers, 9:00 but I'm excited to see where it's going to go. 9:03 [Petit] Yeah. No. That's very cool. 9:04 So next up is a Sass Style Guide from Chris Coyier 9:06 over at CSS-Tricks—friend of the show. 9:11 And if we scroll down the pager, basically what Chris is saying 9:14 in this blog post is that we've had CSS style guides, so in other words, 9:19 we've had style guides that basically tell us how we should be using CSS 9:24 and this is a style guide for Sass. 9:30 So what he's saying is you should list your extends first than your 9:34 regular styles next and then your includes and so on. 9:38 One thing that I really like that he suggests is to only include 9:42 a maximum level of 3 levels of nesting. 9:48 So a maximum level of 3 levels of nesting, and then— 9:52 [Seifer] That solid advice, by the way, anywhere not just in Sass. >>[Petit] Yeah. No.Totally. 9:57 If you nest any more than that in Sass, it's going to start to get really confusing. 10:02 Also, related to nesting, he suggest that the maximum length of something 10:06 that's nested is should only be around 50 lines because after that, 10:12 I mean it starts to get really confusing to figure out where you're starting 10:17 a nesting point and where it's kind of ending, and if you're in the middle 10:23 of the huge code block and you don't know that it's nested inside, 10:28 something else that could be really confusing. 10:31 So, all really good advice. 10:33 There's a lot more in this particular blog post, but I'd go 10:35 ahead and check it out if you're using Sass. 10:39 [Seifer] Very nice. >>[Petit] Yup. 10:41 [Seifer] Next up, we have a website called Screensiz.es 10:43 This is just a really quick utility site that you may want to refer to 10:47 when you're developing pretty much any web site. 10:50 It goes through and lists different devices. 10:53 You can order them by popularity, width, height, and pixels of their display 10:55 and just a whole bunch of stuff including pixel density, device width, 11:01 operating system, and even the physical size of the device. 11:05 Now this works for smart phones, tablets, and even monitors. 11:08 So it goes through and tells you of the display density 11:13 and screen size of a ChromeBook, different models, and MacBook Pros, 11:16 different Dells, just a few of them. 11:19 So great site—something good to refer to while you're going through 11:21 and developing your sites, especially good if you're developing something 11:27 responsive and want of target, specific devices. 11:30 [Petit] Very nice. >>[Seifer] Yes, check that one out. 11:33 [Petit] Next up is a cool blog post called the Principles of Flat Design. 11:35 Now once again we've talked about this quite a bit on the show here. >>[Seifer] Yeah. 11:40 [Petit] And Flat Design is basically the opposite of skeuomorphism. 11:44 That said, I don't think it's really one or the other and I certainly don't think 11:49 that flat design is the end all be all future of design. 11:55 It's just kind of a design trend. 11:59 We've seen these types of things come and go with like the shiny Web 2.0 look. 12:01 We've seen the grunge trend kind of come and go, 12:07 and I think this is a little bit of a response to all that. 12:10 [Seifer] It's also worth noting that it can be complementary to skeuomorphism. >>[Petit] Yeah. 12:15 [Seifer] You can combine skeuomorphism and Flat Design when laying out your pages. 12:19 [Petit] Totally. Absolutely. 12:23 I think Flat Design is a little bit of response to all of the embellishments 12:25 that we've seen with the Web 2.0 look or the grunge look 12:30 or so many other trends or looks that we've seen. 12:35 [Seifer] Lots of use of textures. Things like that. >>[Petit] Yeah. Exactly. 12:38 So this is a much simpler approach to designing websites. 12:41 And, one of the first principles that they suggest is no added effects. 12:46 So exactly like I was just saying. 12:50 You should avoid drop shadows, bevels, embossing, any kind of gradients 12:52 or anything else that would add depth to the page. 12:57 You want it to be very flat. 13:01 Another thing that they suggest is using very simple elements. 13:03 So I think that's obvious, but basically you don't want to create 13:07 iconography that is very intricately detailed. 13:12 You want something that's super simple that's basically just a representation 13:15 of the thing that you're trying to represent. 13:19 And then, another tip they say is to really focus on your typography. 13:23 When there are fewer things on the page, 13:28 the user's attention is drawn much more to typography. 13:31 So it's really important to think about that a lot and get it right. 13:35 There are a whole bunch of more tips here, but it's a really pretty good blog post 13:40 that summarizes all things that have come together to make flat design what it is. 13:46 [Seifer] Very nice. >>[Petit] Yup. >>[Seifer] And speaking of design—not necessarily flat design— 13:53 next up, we have post called the Starters Guide to iOS Design, 13:58 and this is absolutely incredible. 14:02 It goes through everything that you need to know 14:04 when you get started designing for iOS, 14:06 talking about pixel density, screen sizes, and how it all relates. 14:09 It is incredibly, incredibly thorough. 14:12 So the author goes through, and he talks about developing 14:15 with a retina display and without a retina display. 14:20 He's even going through and telling you the different jargon that you 14:23 need to know while working with the different devices. 14:26 So I'm not going to be able to go through and show you this entire article 14:28 because it's incredibly long and it goes through every single part of the 14:32 design process including story boarding, pixel density, screen size, ratios— 14:36 basically everything you need to know. 14:41 Incredibly thorough blog post, and if you are new to iOS design 14:43 or even thinking about getting into it, definitely read this. 14:47 You can find it in the show notes. >>[Petit] Yeah. 14:50 It is a long blog post but it is very readable because there's a lot of pictures 14:52 that really helped it breakdown all the concepts that they're talking about. 14:56 [Seifer] Yeah. >>[Petit] Very cool stuff. 15:00 I think that's all about we have for you this week. Nick, who are you on Twitter? 15:02 [Petit] I am @NickRP. >>[Seifer] And I am @JSeifer. 15:05 For more information on anything we talked about on this show, 15:07 you can check out our show notes at youtube.com/gotreehouse 15:10 or search for us in iTunes, check us out at the Treehouse Show 15:13 and please leave us a rating. 15:17 [Petit] And of course, if you like to see more videos like this one about iOS, Android, 15:19 starting your own business, making websites, and so much more, 15:24 be sure to check us out at teamtreehouse.com. 15:28 Thank you so much for watching and we'll see you next week. 15:32

You need to sign up for Treehouse in order to set up Workspace

Sign up