Episode 118: Page Transitions, Designing for Thumbs, Concise

I'm Nick Pettit. 0:00 >> I'm Jason Seifer. 0:01 >> And you're watching the Tree House Show. 0:02 Your pleekly dose of Internets where we talk about all things web design, 0:03 web development and more. 0:06 >> In this episode, we will be talking about a new front-end framework, 0:07 page transitions, designing for thumbs and more. 0:11 >> Let's check it out. 0:14 [MUSIC] 0:16 First up is concise. 0:21 >> Well, that about covers that. 0:25 >> Oh, I guess I should say a little bit more about it. 0:27 Concise is a better front-end framework. 0:29 I know that, because it says it right here on the web site. 0:33 >> Do you feel like, they could have summed that up a little bit better. 0:36 Just been a little bit more concise. 0:38 >> [CROSSTALK] Concise. 0:41 >> It says give up the bloat, stop tripping over your classes. 0:42 >> Yeah man. >> Quit tripping. 0:46 Be concise. 0:47 Down here, it says, it's perfect for all devices, so it's responsive mobile first. 0:49 That's always good. 0:56 You can use it with your favorite preprocessor, and it's highly expandable, 0:57 so it's very easy to customize it, and use some addons, bunch of people are using it. 1:02 Now you're probably thinking at this point, well, there's a lot of 1:08 frontend frameworks, in fact we talk about them all the time on The Treehouse Show. 1:11 What makes this one different? 1:16 Well, if you click on why concise. 1:17 >> Sum it up in one word. 1:19 >> Concise. 1:22 It is actually aptly named. 1:24 It says, there are a million other front-end frameworks out there. 1:26 What makes Concise unique? 1:29 And basically it's the things that I just said. 1:31 It has a lot. 1:33 Fewer features than a framework like bootstrap, or foundation. 1:34 So it's not gonna have tabs and model's, and all that sort of stuff. 1:39 But, what it does have, is grid topography. 1:44 And just a few very basic features that you actually need, 1:49 to get started making websites. 1:53 Now, if you are familiar with something like foundation, 1:55 you're gonna find that the syntax is very similar for grids. 2:00 So, you have a row, and then you can create columns. 2:03 Anywho, that's concise and. 2:08 >> Yeah. I don't think we need to 2:11 say anymore than that. 2:12 >> That's pretty much it. 2:13 >> I think you summed it up pretty well. 2:14 >> Check it out. 2:15 >> Next up, we have a blog post over on CSS-TRICKS, 2:17 about adding page transitions with CSS, and a plugin called smoothState.js. 2:20 Now, this attempts to address the issue where you click on a link in a webpage. 2:27 And then the page is loading, the screen kind of turns white while the page is 2:32 loading, and then everything else gets loaded. 2:35 Now, smoothState.js is a plugin that will attempt to fetch the new 2:38 page over [UNKNOWN]. 2:42 Then apply some CSS transitions, and 2:42 make the whole process less disorienting and jarring for a user. 2:46 Now let's go ahead, and 2:51 just check out the demo to see exactly what they're talking about. 2:52 And you'll see here is just a webpage. 2:56 This is the demo page for smoothState. 2:58 And then if I click this link Get it, Get Started with smoothState.js. 3:00 And watch my computer screen, and you'll see that, nothing really happened. 3:04 There was no flash to white. 3:09 It just sort of smoothly loaded, and applied this transition. 3:10 Now if I click back, 3:14 you'll see the transition gets applied again, and so on for the different links. 3:15 Now, if we go back over to the CSS tricks article, there's a great walk through 3:20 from the author who demonstrates how to go through all this. 3:26 First he demonstrates the problem, all this is kinda. 3:31 How janky it looks when just clicking around to a webpage. 3:34 Okay, there's a flash of white, well let's go ahead and fix it. 3:37 So the first thing that he says is, hey, 3:41 let's identify how the elements will animate. 3:43 Do we want to slide up and fade in? 3:46 Slide from the right. 3:48 then, so we figure that out, then create the different keyframes that you need. 3:50 We'll create those in CSS. 3:55 Once those are created we can go ahead, and 3:57 write the CSS declarations using those keyframes. 3:59 And then add those classes back to the layout. 4:03 Now you'll see that results in a nicer entrance to the pages. 4:06 But, you still see the flash. 4:11 That is where the smoothState.js plugin comes to the rescue. 4:14 This is a nice little jQuery plugin and 4:19 it gives you some different options saying hey. 4:21 This is the content that we're trying to animate in between. 4:23 This is how long we want the animation to occur that's gonna be in milliseconds. 4:27 And then what animation state class to apply? 4:31 And there's a little more TSS to go through and do that. 4:36 Now the nice thing about this plugin is that it also has an option to 4:39 pre-fetch the data in the page. 4:42 So, when the user is hovering over a link on a page it'll actually go out and 4:44 fetch that, keep it in memory. 4:49 That way as soon as the user actually clicks, 4:51 it will seem like no time has gone by at all. 4:53 It's actually kind of you know, misleading in that way, but in a good way. 4:56 >> It's pretty smooth. 4:59 >> Yep. 5:02 >> Well, transitioning. 5:03 I wanna talk about this blog post called, How to design for 5:05 thumbs in the Era of Huge Screens. 5:09 Now if, if, if you have an iPhone 6 or 5:12 6 Plus, or maybe some of these, new enormous Android phones. 5:15 I think the Nexus7. 5:21 >> Six. 5:23 >> Six. >> Six. 5:23 >> Six just came out and they're, they're pretty epically huge phones. 5:24 And if you've tried to use one one-handed. 5:30 Probably know that it's hard to reach certain parts of the screen, 5:32 depending on kind of how you're equipping it. 5:36 >> There two headed phones. 5:38 >> They definitely are. 5:39 They're, they're iPad in those. 5:40 So, this article attempts to address, at least some of the research behind 5:42 how you might start to design for these huge screens. 5:49 So if we scroll down here, there's some pretty wonderful graphics that show where 5:54 the natural sweeping arch of your thumb might land on different screen sizes. 6:01 So, over here we have an iPhone to 4S, and 6:06 it's pretty easy to reach just about any part of the screen. 6:12 You don't have to stretch a whole lot, and you can tap just about anything. 6:15 As you move all the may up to the IPHONE 6 PLUS, 6:20 there's a pretty small area that you can actually easily reach with your thumb. 6:24 And you can stretch to reach some other parts of the screen, but eventually, it's 6:29 kind of impossible even if you have pretty large hands to hit some of the areas and 6:35 the corners. 6:40 And hit some of those UI elements. 6:41 So. 6:45 What do you do? 6:46 Well, this article sums up some of that research pretty well shows, 6:47 you know, how people might grip their phone a little bit differently and 6:52 maybe reach higher parts of the screen, it talks about reachability. 6:57 Anyway, really great post and definitely one to read if you are designing websites, 7:01 because these new screen sizes are becoming more and more popular. 7:08 >> Yes. >> I think they have a graph and 7:12 they're showing how like, it represents 15% or more of mobile browsing now so. 7:13 >> So you gotta keep all the good content in the thumb zone. 7:19 >> It, it's, it's no longer enough to worry about what's below the fold. 7:22 You gotta worry about what. 7:26 >> Cuz fingers don't fold. 7:28 >> That's right. You gotta worry about what you 7:29 can hit with your thumbs. 7:30 >> Outside of the thumb zone, is the danger zone. 7:32 >> Yes. 7:34 >> Call Kenny Loggins. 7:36 >> Yes, that's concise. 7:37 >> Next up, we have a plugin called converse.js. 7:39 This is a really interesting free piece of JavaScript, 7:43 that allows you to add XMPP or Jabber Chat, to your website. 7:47 And there a bunch of different plugins, for different CMSs. 7:52 There's integration with Plone, 7:57 Django, Roundcube, Wordpress, Patternslib, and Alfresco. 7:59 I know a few of those. 8:02 Alfresco's delicious, by the way. 8:04 >> Mm-hm. 8:06 >> anyway. 8:06 So, this feature is single user chat. 8:07 A bunch of different chat rooms. 8:09 Just a ton of different things. 8:10 Vcard support, service discovery, so many different things. 8:12 Now, you are going to need an XMPP, or 8:14 Java server if you do wanna get this set up. 8:19 But, all you really need to do despite this very thorough documentation. 8:21 Is include the CSS and the JavaScript. 8:26 Initialize it with some different items like the service URL, and 8:31 kind of some different options like whether or not you want to list rooms, and 8:37 auto subscribe to different things and then you are good to go. 8:40 So this is similar to Facebook Chat, but also supports multi user chat rooms. 8:43 And it features off the record encrypted messaging, as well as sound notifications. 8:48 And it also has multi-lingual support. 8:54 Supports most commands that you would think from banning, 8:57 clearing the messages, setting topics. 9:00 And even changing your nickname. 9:04 So what you'll need to get started is, 9:07 like we said, an XMPP server, a connection manager, 9:08 and access to the server to overcome cross-domain request restrictions. 9:13 And there is different configuration options for both Nginx and 9:18 Apache about how to get that set up. 9:22 Anyway, if you're looking to add chat to your site, 9:25 this is a pretty easy way to get started, so make sure to check it out. 9:27 >> Very nice stuff. 9:32 Well next up is Pushy. 9:33 This is an off-canvas navigation menu, and 9:35 what's cool about this is that it uses CSS transforms and transitions. 9:39 That's kind of boring, let's just see what this does. 9:44 >> Yeah. >> Whoa, look at that. 9:46 When I click the menu button, it slides over from the left and 9:47 you've probably seen this design pattern before on mobile devices, and apps and 9:52 on websites but this is a common pattern because. 9:57 It saves on space and it also is responsive so that's pretty nice. 10:01 >> Don't they call that a hamburger menu? 10:08 >> They do call it a hamburger menu, and we've talked about this before Jason. 10:10 I wish you wouldn't bring that up cuz now I'm really hungry. 10:15 >> Yeah me too. 10:18 >> Yeah. 10:19 >> What are you doing after this? 10:20 >> I'm thinking about getting- 10:21 >> Yeah, we should do that. 10:23 >> Hamburger, yeah. 10:24 >> I mean I don't wanna be pushy about it. 10:24 But we should do it. 10:25 >> That sounds, that sounds delicious. 10:26 So, I mentioned this uses CSS transforms and transitions. 10:29 That's really nice, because those actually render on the GPU, so 10:32 it's going to give you nice smooth frame rates in browser. 10:37 And it also still has a jQuery animation fallback for internet explorer 7 10:41 through 9, so if these CSS transforms and transitions are not supported, 10:46 you can still enjoy this animation, it just might not look quite as smooth. 10:52 This requires jQuery 1.9. 11:00 It works in all the most popular browsers, and it also works great on mobile. 11:02 And if we head over to the Documentation, it will take us over to GitHub. 11:09 And you can read more about, how to actually install it 11:15 with a package manager like Bower, and how to include it onto your page. 11:19 Anyway, not a whole lot to say about it, but I thought it was pretty cool. 11:24 >> Yeah, nice little plugin. 11:28 well, that's about all we have time for this week. 11:29 Nick, who are you on Twitter? 11:31 >> I am @nickrp. 11:32 >> And I am @jseifer. 11:33 For more information on anything we talked about. 11:35 Go ahead and check out, our show notes right below this video. 11:37 And thanks so much for watching. 11:40 And we'll talk to you next week. 11:42 [MUSIC] 11:43

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

Sign up