Episode 106: Responsive Logos, Waves, Pagekit

I'm Nick Pettit. 0:00 >> I'm Jason Seifer. 0:01 >> And you're watching The Treehouse Show, your weekly dose of 0:02 Internets where we talk about all things web design, development, and more. 0:04 >> For a free months trial of Treehouse join us over at teamtreehouse.com/show. 0:08 In this episode we'll be talking about Responsive logos, Waves, Pagekit and more. 0:13 >> Let's check it out. 0:19 [MUSIC] 0:20 >> First up, our Responsive logos. 0:25 Now, if you've been watching this show. 0:28 Which, I don't blame you- 0:30 >> I haven't. 0:31 If you haven't responsive design is of course a technique where 0:32 you can make the same code work on multiple different screen resolutions. 0:36 The idea of responsive logos is to take 0:41 responsive design and apply it to logo design. 0:44 So here we have a couple of popular logos for major consumer brands. 0:48 And I have the browser at full screen here but if I resize the browser downwards. 0:53 Oops, that's moving it. 0:59 If I resize the browser downwards, you'll see that those logos actually get smaller. 1:00 >> Wow. 1:07 >> But not just smaller, they actually change their design. 1:07 To be mor appropriate for that particular size. 1:11 So, I'll scroll down here, take a look at the Disney logo here or the Levis logo. 1:14 Nick, do you have a folder on your desktop called Desktop? 1:19 >> I do, that's where I keep my desktop. 1:22 >> Good call. 1:23 >> Mm-hm. 1:24 >> Desktop-ception. 1:25 >> That's right. 1:27 You have to go Desk-topper. 1:27 [BLANK_AUDIO] 1:30 >> Next up we have a project called Waves. 1:36 Waves is a project that lets you add click and 1:38 hover effects to buttons that are inspired by Google's material design. 1:41 Now, we have a demo over here on the page. 1:46 So here we have some flat buttons called A, B, C, and D respectively. 1:48 You'll notice I'm just hovering, but when I click, whoa look at that, 1:53 look at that, we get some visual 1:57 feedback that something was clicked, that something. 1:59 Where's the button? 2:03 And that works across all these different buttons here. 2:04 And you can see we've got different styles of buttons 2:07 and the effect still works, depending on the button style. 2:10 Plain icons work, colored icons work and it's not limited to just buttons and 2:16 icons, this effect works on divs, boxes, even images. 2:21 >> And you'll notice that it actually has an 2:28 origin that's the same as your mouse so if. 2:30 >> I didn't notice that. 2:34 >> If you >> that is cool. 2:35 >> If you click on different parts of the image 2:36 >> I'm doing that right now it will create the effect from where you clicked. 2:38 >> Let's create the effect at the top of the Eiffel Tower. 2:43 Wow! 2:46 What just happened? 2:46 Was that in the GI Joe movie? 2:48 >> Amazing. 2:50 >> Or is this a website? 2:50 Okay so this was inspired by Google's 2:51 material design document that just recently came out. 2:53 And here is how easy it is to get started. 2:56 You just add the class, waves effect. 2:59 And waves button to your element and include the JavaScript 3:02 and then call waves.displayeffect and you are good to go. 3:07 So that's it, you can restyle this if you want to, we have 3:13 a link in the show notes which you can get to at YouTube.com/gotreehouse. 3:15 You can also search for us on iTunes. 3:18 We're the Treehouse show and of course, 3:20 don't forget to check us out at teamtreehouse.com/show. 3:22 >> Very cool stuff. 3:25 Well next up is a new CMS, CMS called Pagekit. 3:26 CMS of course stands for Content Management System so if you're creating a 3:31 website you probably have content that 3:36 needs managing and Pagekit does exactly that. 3:38 Of course there are other content management 3:42 systems out there, Wordpress being one of them. 3:44 But personally I never actually liked using Wordpress as a CMS, I 3:48 know a lot of people do but I always felt like it was more so for blogging. 3:53 So I kind of am liking Pagekit a 3:58 lot because it's specifically designed for making websites. 4:00 So let's jump over to Features here. 4:05 There is a dashboard, you can, of course, create a blog or pages, 4:08 just like you can with WordPress and many other popular CMSs. 4:14 You can have widgets. 4:19 So here is, like, a sidebar widget, where you can rearrange things. 4:20 A lot of features that might be familiar to you 4:23 if you've used any kind of CMS in the past. 4:25 There is, of course, really great 4:29 documentation here, which you can check out. 4:31 So you can click on, like widgets for 4:34 example, and see exactly how to structure those. 4:36 Anyway, I felt this was really, really smart and 4:40 definitely a great new entry into the world of CMSs. 4:44 >> Yeah. 4:47 And it's not bad looking either. 4:48 [CROSSTALK]. 4:49 >> Yeah, it looks. 4:49 It looks really nice. 4:50 >> Dig the design. 4:51 >> Mm-hm. 4:52 >> Next up, while you're developing the site that you 4:53 have in your cms, make sure to check out DevDocs. 4:55 DevDocs combines multiple different sources of 4:58 documentation into one easily searchable website. 5:01 So, right here you can see that there's a search bar at the top of the screen. 5:05 And if I just start typing in something I want to look up. 5:09 For documentation, like lets say, table, this will pull up the different 5:12 documentation for all the different documentation that I have selected. 5:17 Now, if I click on the home button right here,. 5:23 And this little burger menu, which is delicious. 5:28 You can choose from all of this 5:31 different documentation that the website will search through. 5:33 Now, you'll notice there's this disabled tab right here. 5:37 It is only going to be searching and auto-completing 5:39 from the documentation that I have selected up here. 5:43 So CSS, Dom, DomEvents, HTML, HTTP, and JavaScript. 5:45 If you want to enable something else you can 5:49 scroll all the way down and hit select documentation. 5:52 And at that point you get check boxes 5:56 for the other documentation you want to search through. 5:58 Click save, it will download the documentation and 6:01 it is very responsive when you type it in. 6:05 You'll see I selected the Ruby documentation, and now I 6:07 have access to all of the different documentation for these methods. 6:11 Anyway, this is great. 6:15 You can check it out at devdocs.io. 6:16 It's really nice if you need to look up some documentation. 6:19 >> Very nice stuff. 6:22 Well next up, over on the Opera blog 6:23 is a wonderful blog post about responsive images. 6:25 In Chromium 37, Firefox Nightly, and in WebKit, 6:30 the picture element is starting to come along. 6:34 And basically this is an element that allows 6:39 you to create responsive images a lot more easily. 6:42 There's also some new attributes for the image element. 6:46 So if you wanna give those a try, you can try out, of course those browsers. 6:50 Chromium 37, Firefox Nightly and WebKit. 6:54 And, basically, when you're implementing one of 6:59 these things you have to ask yourself. 7:03 These four questions. 7:05 Do my image sizes change depending on my responsive design rules? 7:07 Do I want to optimize for high dpi screens? 7:11 Do I want to serve my images with 7:14 different mime types to browsers that support them? 7:15 And, do I want to serve different art depending on certain contextual factors? 7:19 So for example, one used case might be if you're resizing the browser, 7:24 perhaps at smaller sizes you only wanna show a part of the image 7:28 that's maybe the most important part, but if the browser is much wider, 7:33 maybe you wanna show a more zoomed out version of that same image. 7:38 So, based on those four questions, this blog post goes into detail about 7:42 how you might implement each one of those things or achieve different goals. 7:48 So, if you want to maybe serve up different 7:53 image types or different MIME types and then maybe art 7:55 direct them a little bit, this might be an 7:59 example of the code that you might want to use. 8:01 Anyway, this is really detailed blog post. 8:04 And, I really like it because it breaks down the picture element and these 8:06 new image attributes which can be pretty 8:10 complex if you've never worked with them before. 8:13 So, it's really nice to have good examples. 8:16 >> Speaking of breaking down, we promised ourselves we wouldn't when the show ended. 8:18 Nick, who are you on Twitter? 8:23 [MUSIC] 8:24 >> I am @nickrp. 8:25 >> And I am @jseifer. 8:26 For more information on anything we talked 8:27 about, check out the show notes at youtube.com/GoTreehouse. 8:29 You can also search for us on iTunes. 8:32 We are The Treehouse Show. 8:34 >> And, of course, if you'd like to see 8:35 more videos like this one, about web design, web development, 8:36 mobile, business, and so much more, be sure to check 8:39 us out at teamtreehouse.com/show for a free 30 day trial. 8:43 Thank you so much for watching and we will see you next week. 8:49 [MUSIC] 8:51

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

Sign up