Episode 111: DPI, Responsive Charts, Media Queries

I'm Nick Pettit. 0:00 >> I'm Jason Seifer. 0:01 >> And you're watching The Treehouse Show, your weekly dose of internet where we 0:02 talk about all things web design, web development, and more. 0:05 >> For a free month's trial of Treehouse, head on over to teamtreehouse.com/show. 0:08 In this episode we'll be talking about DPI, 0:13 responsive charts, media queries, and more. 0:16 >> Let's check it out. 0:19 [MUSIC] 0:21 First up is the designers guide to DPI. 0:26 What does that mean? 0:29 Well, DPI is dots per inch. 0:30 And it's an important topic that designers have been talking about quite a lot. 0:33 Because these days you can't rely on every single screen having the same 0:37 pixel density, the same amount of pixels packed into the same area. 0:44 It tends to vary. 0:49 For example, we have retina iPhones and eye iPads now, and 0:50 even retina displays on computers like this one. 0:55 >> There only gonna get more dense. 0:59 >> They are, at least that's the rumor or the speculation, so. 1:00 This is a really good time to start learning about DPI and 1:06 what it means to you as a designer or a developer if you haven't done so already. 1:10 This is a fairly basic guide, but 1:16 it's good that it's basic because DPI can be somewhat confusing if you're new to it. 1:18 So there's an explanation about what is DPI and what is PPI, or pixels 1:24 per inch, and it goes in depth there with some really great illustrations. 1:30 Then it goes on to say what the impact on your design might be, so. 1:36 Basically anything that is at a higher pixel, 1:41 density is going to appear smaller on the screen, or physically smaller. 1:45 At least in general as sort of a general rule. 1:51 There's a more detailed explanation there. 1:54 There is a difference between the screen resolution and 1:57 what the screen's actual native resolution is. 2:00 And then it also talks about what's 4k, 2:04 what are monitor hertz, what's a retina display, and so on. 2:07 Basically, everything that you might need to know as a designer. 2:11 So this is a really great in-depth article about all of 2:16 these newer screens and kind of what they mean for design. 2:20 But anyway, great article. 2:25 Be sure to check that one out. 2:26 >> Yeah. Also good, you know, 2:28 if you're a designer send it to some developers so 2:29 you guys can establish some common ground. 2:31 >> Mm-hm. Yeah. >> Put the we in DPI, not make it so one sided. 2:33 >> Yeah. Maybe, 2:37 maybe some day we'll form an understanding. 2:37 Next up we have a project called Chartist.JS. 2:40 As you might expect from the name this is a JavaScript library for charts. 2:44 But the spin on it is that they are responsive. 2:49 And this little guy with the top hat and pitchfork pointing at the chart. 2:53 And you can also see this chart even supports CSS animations. 2:57 Look at that. 3:01 >> It is, it is happening. 3:02 >> Wow. I know. 3:03 So very, very easy to use. 3:04 They're also customizable. 3:07 A few different kinds of charts are supported. 3:08 We've got line charts, bar charts, pie charts. 3:10 Oh, I'm kinda hungry now talking about pie charts. 3:13 >> Yeah. 3:16 >> Any hamburger venues on this site? 3:17 [CROSSTALK] I, I don't think so. 3:18 >> You know how much of that pie chart is a pie chart? 3:19 >> How much? >> 100% of it. 3:22 Yeah. The whole thing. 3:25 >> I'm pretty hungry. 3:26 >> The whole things a pie. 3:26 >> Now that you said that. 3:27 >> Oh. >> So here is a CSS animation example. 3:29 Look at that. We, 3:32 the, I don't exactly what this is, what this is doing. 3:33 But these, these results are absolutely insane and 3:35 not typical for what the chart usually should display. 3:38 >> Wow. >> So you should have 3:40 a very strong emotional reaction to what's going on here and I, 3:41 I mean with the chart not with the tension between nick and myself. 3:45 But it is responsive so lets see what happens when I resize the browser. 3:49 What. 3:54 This chart is getting smaller. 3:55 Oh, look at that different chart. 3:59 No it didn't, it didn't change. 4:00 It's in a different spot on the page. 4:02 It had to move when the browser moved. 4:05 Okay, anyway, so any CSS3 animations are supported. 4:07 And actually we can look at the API documentation, 4:12 no that's not what I wanted, I wanted to the examples, live coating. 4:16 You can actually edit the examples on the site which is pretty awesome, so 4:20 here are the different labels. 4:23 Like, so. 4:25 For example, instead of Monday we'll change that to Nickday and 4:26 you can see that, that change is right there. 4:29 And then we can mess around with the numbers and 4:31 the changes are directly reflected on the chart right there. 4:34 So you can see really, really simple to use. 4:39 You just give it some data and then call Chartist and 4:41 the kind of chart that you want to use. 4:44 Here's a pie chart example, and I think we can just say Chartist.Pie. 4:48 Instead of a line chart, we're using a pie chart here. 4:53 Anyway, very, very easy to use. 4:56 We'll have a link to this in the show notes which you can check out at 4:58 youtube.com/gotreehouse/ or search for us in iTunes, we are The Treehouse Show. 5:00 And don't forget to join us for a free month's trial at teamtreehouse.com/show. 5:05 Very cool stuff. 5:11 Well next up if this wonderful blog post from Brad Frost. 5:12 That was really difficult to say for some reason. 5:17 It's called Seven Habits of Highly Effective Media Queries of course. 5:19 I think that's a play on the title of book Seven Habits of Highly Effective People I 5:25 think is the title of the book. 5:30 >> Think you're thinking of Twilight. 5:31 I think you're right. 5:34 I think, I think Twilight is actually what I was thinking of there. 5:35 anyway, this blog post is a little older, but it's still perfectly good. 5:40 Let's go down and look at some of these seven habits. 5:45 First one I wanna point out is, let the content determine the break points. 5:49 And I think this is really great advice that Brad Frost is giving here, and 5:53 he says, every time you see 320px, 480px, and so on, used as breakpoint values, 5:57 a kitten got its head bitten off by an angel, or something like that. 6:03 Wow, that sounds really horrible, so don't do that. 6:07 You should use breakpoints that are basically based on the content 6:10 of the page because these preset break points are just based on popular devices. 6:16 So for example 320 is an iPhone and portrait, 480 is an iPhone and landscape, 6:22 768 is an iPad in portrait and so on, because these actual dimensions could be 6:29 irrelevant in you know, a week's time or a year's time or something like that. 6:36 New devices come out all the time. 6:41 So, it's much better to tailor your content to the breakpoints and 6:44 not the other way around. 6:49 Or, or I should say, it's better to tailor your breakpoints to the content. 6:50 Excuse me. 6:55 It's not a good idea to use these preset ones, just because they could change. 6:56 They, they may not mean anything in a year's time or something like that. 7:01 >> Also media queries sparkle in the daylight. 7:07 >> That is something that I think you just made up. 7:11 You should treat layout as an enhancement. 7:15 So for example if you're building a mobile first responsive site, 7:18 which you probably should be doing in this day and age, 7:23 you wanna make sure that layout is just sort of treated as an enhancement. 7:26 So you build your very simple mobile-first styles for 7:32 the web, and says that right here. 7:36 And you can then enhance that with layout later on. 7:40 So when you go up to these larger desktop styles you can start to add layouts. 7:44 Last thing I'm gonna point out here. 7:52 There's a couple more you should check out. 7:53 But last thing I'm gonna, for now is the idea of using major and 7:55 minor break points. 7:59 So, for example, you might have a website that has a single column layout on mobile. 8:00 And then expands into maybe two or 8:07 three columns on larger desktop devices or perhaps tablets. 8:10 Those types of dramatic changes do need a breakpoint, but 8:15 you can also have smaller breakpoints in between if you 8:19 just wanna change small parts of the site, such as a, a font size. 8:23 Or maybe the navigation might switch from horizontal to vertical, and so on. 8:27 And you can do smaller breakpoints in these sort of minor breakpoints, 8:33 as Brad Frost points out here, instead of doing dramatic changes and 8:38 trying to squeeze those minor changes into the more dramatic breakpoints. 8:45 Anyway, really good article. 8:50 Be sure to check this one out. 8:52 >> Very nice. 8:55 Next up we have a project called Victor.JS. 8:56 This is a JavaScript two D vector maps library for Node.js and the browser. 8:59 I know that because it says it in the header of this web page. 9:06 One thing I'm just going to point out that is of little to no relevance to what we're 9:10 talking about, is that you can click anywhere on this page right here and 9:13 that little thing will follow to the points that you just clicked on. 9:16 >> I think that's really the most important thing here. 9:20 >> If you take one thing away from the Treehouse Show, 9:23 it is well it's not this particular thing. 9:26 I think, I think it'll be a, a deep sense of sadness and regret. 9:29 Anyway. 9:32 This is very, very easy to use. 9:33 You simply install it using Node.js or at the browser. 9:35 It's very easy to use with Bower. 9:39 And then you can create new vector. 9:41 I'm sorry. New x and y coordinates with Victor. 9:45 So why would you use this library instead of just creating your own 9:48 JavaScript object for it? 9:53 Well, you get all sorts of maths that go along with it. 9:54 So you create your point and then you can go through and add to the point. 9:58 You can have all this math done for you. 10:03 You can for example, right here, create a new vector and then add to 10:05 the x coordinate another vector coordinate, and then call to string. 10:10 You'll get these particular values. 10:16 Now you don't need to call to string, you can have all that math done for 10:19 you right there. 10:22 Now this also works, not just with addition, but 10:23 you can do rotation you can do all sorts of different math calculations. 10:27 And this is very easy to use. 10:33 The documentation is also very thorough. 10:34 So, make sure to check that out. 10:37 We will have a link in the show notes. 10:38 >> Very nice. I like the fact that it's called Victor, 10:42 because there's probably other JavaScript objects that might be a, a vector and 10:44 could conflict with the names, so it's pretty clever and it's, it's nice that 10:51 they called it Victor just so you can sort of remember that it is actually a vector. 10:55 >> You could say it's the winning name for the library. 10:59 >> It just, it was the Victor. 11:02 Next up is an article called Pure CSS parallax scrolling websites. 11:04 Of course, parallax scrolling websites have been popular for quite some time now. 11:10 That's basically where a website might have multiple layers of depth, 11:14 or at least the appearance of such and. 11:20 >> Like an onion. 11:22 >> Right. 11:23 Or like our relationship. 11:24 And when you scroll down the page there's sort of 11:26 multiple components that parallax with one another or move at different speeds. 11:29 This is sort of like when you're riding in a car or 11:34 a train and you look at something that's close to you and it moves by very quickly. 11:37 While something that's far away moves by much more slowly, or 11:42 at least it has the perception of doing that because of perspective. 11:46 >> Like our time together. 11:50 >> Indeed. [SOUND] The parallax is typically handled 11:51 with JavaScript and that's actually not very perfomant. 11:55 It's listening to the scroll event and 12:01 it does a couple of things once a scroll happens. 12:04 And it triggers lots of reflows and repaints, and 12:07 that's just not good for performance. 12:11 So typically ends up with lower frame rates than what might be desirable. 12:15 >> So are you saying that they can be done in pure CSS? 12:21 >> That is exactly what this article describes how to do. 12:23 Now, there's a bunch of theory here but that's boring. 12:29 Let's go ahead and jump into a demo. 12:31 I'm going to do this in Safari because, actually I'll switch back to the article, 12:35 here, it points out that this technique is broken in Chrome 37. 12:40 And at the time of this recording I am indeed using Chrome 37 here. 12:44 So I have to switch to a different browser. 12:49 But here's what the demo looks like. 12:51 You can scroll down the page and it's parallaxing all of this with pure CSS. 12:53 Now- >> Wow. 13:00 >> How the heck are they doing that? 13:01 Because it's not using any kind of JavaScript event to listen to the scroll. 13:04 So, how are they able to get these layers of scroll? 13:10 >> Magic. >> Well, if you click on this debug mode. 13:15 >> What? 13:19 >> It will show you exactly what's actually going on here. 13:19 >> Wow. 13:23 >> Basically they are placing these elements on to different planes, and 13:23 then translating them using the transform property. 13:29 So it's moving these different layers into the z-plane, or the depth of the page. 13:34 And then when you actually look at it straight on, 13:42 looking at it from straight on here. 13:46 It looks like some layers are moving slower and 13:49 some layers are moving faster and you get that nice parallax effect. 13:54 Anyway, this article goes into a lot more depth 13:58 as to how this particular effect is achieved. 14:01 Highly recommend you check it out. 14:05 And I think that's all we have time for. 14:07 >> Well that is, who are you on Twitter? 14:09 >> I am @nickrp. 14:11 >> And I am @jseifer. 14:12 For more information on anything that we talked about, check out our show notes at 14:13 www.youtube.com/gotreehouse/ or search for us on iTunes, we are The Treehouse Show. 14:16 >> And of course, if you'd like to see more videos like this one about web 14:20 design, web development, mobile, business, and so much more, be sure to check us 14:23 out at teamtreehouse.com/show and get a month free. 14:28 Thank you so much for watching, and we will see you next week. 14:34 [MUSIC] 14:37

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

Sign up