Episode 45: UX, Sitemaps and JS Tours

>>[Nick Pettit] I'm Nick Pettit, >>[Jason Seifer] and I'm Jason Seifer, 0:01 >>[Nick Pettit] the treehouse show, your weekly dose of Internet— 0:03 all things web design, web development, and more. 0:05 [Jason Seifer] In this episode we will be talking about UX, Sitemaps, JavaScript tours, and more. 0:10 [Nick Pettit] Lets check it out. 0:15 First up we have this really amazing site, called Six UX. 0:23 [Jason Seifer] I thought it was 'Sixux'. 0:28 [Nick Pettit] Six UX, there's a space there. 0:29 Six UX is this really cool site that is your daily dose 0:36 of inspiring 6 second transitions and animations 0:40 saved for reference. 0:44 If we scroll down the page here you can see that there is a bunch of little videos 0:46 that basically show these animated interactive elements 0:50 that you can catch around the web. 0:54 One of the really cool things about this site is that they are actually 0:56 using Vine to record these videos and post them to the site. 0:59 So a really interesting use of Vine. 1:04 The more important thing is that this is a great collection 1:06 of animated transitions. 1:10 [Jason Seifer] Yeah, it's a great place to go for inspiration. 1:13 I totally agree with you, I didn't even know what to use Vine for 1:15 until I saw Six UX. 1:18 [Nick Pettit] Now we know. 1:20 [Jason Seifer] Next up we have a website that addresses the problem of 1:22 staying up-to-date on front-end technologies. 1:26 [Nick Pettit] I thought you could do that at treamtreehouse.com. 1:29 [Jason Seifer] This is for people that don't watch the treehouse show, I guess. 1:32 However, this website does list the treehouse blog as a great source of information. 1:35 [Nick Pettit] That is true. 1:40 [Jason Seifer] So this is a ton of different resources. 1:42 It says "Follow Cool People" on Twitter. 1:46 Twitter is a great source of information. 1:48 For people who are working on the web, 1:51 they will post what they're working on. 1:53 There's a great list of people to follow on here. 1:55 I don't think I'm in this. 1:58 [Nick Pettit] I didn't see you and me in here, that's kind of weird. 2:01 [Jason Seifer] So take it with a grain of salt right there. 2:05 Next is "Find the Best Sources", so it goes through and lists some different 2:07 blogs that you might want to go to. 2:10 This is a good one right here, the treehouse blog. 2:12 Really a great repository of information. 2:14 One thing that is pretty awesome about this site 2:18 is there's been a lot of lists like this in the past, 2:21 but they can quickly fall out of date when new resources come out. 2:24 What's cool about this is you can actually fork this on GitHub 2:28 and add new things to it as they come out. 2:31 It should theoretically always be up to date. 2:34 [Nick Pettit] So then you could go ahead and fork it, submit a pole request 2:37 with your changes and then they could be included on the site. 2:40 [Jason Seifer] Very nice. 2:43 [Nick Pettit] Next up is the Gif Countdown. 2:45 [Jason Seifer] Do you mean "gif" countdown? 2:48 [Nick Pettit] I do mean gif, apparently you pronounce gif as "Jif". 2:51 [Jason Seifer] Now did you Joogle for that information or did you read that somewhere else? 2:56 [Nick Pettit] I did not. 3:02 Gif Countdown is a real-time updating 3:05 animating countdown for when all you can embed is an image. 3:11 Basically, you can set your settings over here with this calendar 3:17 and the time zone adjustment, 3:23 you can set the theme that you want to use, 3:25 and then finally you can grab the code and embed it on your site. 3:29 And you will have this really nice countdown clock. 3:35 Now the cool thing about this that it will adjust for the user's time zone. 3:38 So when they hit the site it will actually take that into account 3:44 and make the super complicated time zone adjustments 3:50 that you definitely don't want to have to do yourself. 3:54 Very cool stuff, there's not really a whole lot to say here, 3:56 but if you need a countdown clock, this is a pretty good one. 4:01 [Jason Seifer] Next up we have a project called SlickMap CSS. 4:04 This is pretty cool. 4:09 This is a piece of CSS, a little project that you can download 4:11 and it will take your sitemap and put it into a really nicely displayed flowchart. 4:14 This can be really useful to keep your sitemap up to date 4:18 for search engines with the correct semantics, 4:23 but also give your visitors something really nice to look at. 4:25 So there's a quick little demo on the site right there. 4:28 As you can see, a little flowchart— 4:32 First level is blue, then green, then yellow. 4:34 Really nice. Not too much to say about that 4:36 just go ahead and download it. 4:40 Great little project there. 4:42 [Nick Pettit] Pretty nifty. 4:44 Next up is tourist.js, and as you know when you hit a brand new website 4:45 you want to know what it does and you want to take a little tour of it 4:51 almost as if you are a tourist, right? 4:55 So that's where the name comes from, pretty clever. 4:58 Rather than explain how it works, let me just show you what it does. 5:02 If I click "Run This Example" 5:07 you will immediately see that it's highlighting an element on the page 5:10 and it's bringing up this little tool tip that says, "First, look at this thing." 5:13 We're done looking at that thing. 5:17 Next step, then look at this thing. 5:20 All right, I think we're ready to finish up. 5:22 Basically you can just go ahead and highlight different things 5:25 on your page in a certain order. 5:29 Then you can include the text that you want to put into that tool tip. 5:33 They have another example here. 5:37 Let me check this out, you can put various different pieces of text into here. 5:40 Pretty easy to use and I think this is an area where a lot of app developers struggle quite a bit. 5:45 It can be difficult to put together that blank slate state 5:53 where there is really nothing in the app just yet, 5:59 but you want to help your users understand how they should be using it. 6:01 This is yet another great way to go ahead and do that. 6:05 There is a lot of libraries that do this, but I like this one just because it's simple. 6:08 [Jason Seifer] Speaking of libraries 6:11 we have one called lease.js, this one is pretty cool. 6:13 This is a "random and responsive HTML5 and CSS3 gallery 6:18 "with lazy load." 6:22 Now the lazy load is what's important in a gallery. 6:24 When something is lazily loaded, 6:27 it is not fetched immediately. 6:29 So if you have a thumbnail of a picture 6:31 and you link to the full-size version, the full-size version won't be downloaded 6:34 until it is actually requested by the client inside of the web browser. 6:38 This is going to be especially important with a responsive plug-in, 6:42 because somebody on a phone is going to save a lot of bandwidth, 6:45 which may be constrained. 6:48 It uses CSS animations and it looks so good. 6:50 Island, view picture, wow, unbelievable. 6:54 Mountain, look at that, there it is, beautiful, I want to go there right now. 6:57 Incredible, Vegas, not the Vegaus I know but still a great picture. 7:03 Very, very easy to use it just takes a little bit of code to insert. 7:08 in your site and then all you need is have some semantic divs and unordered lists 7:12 and you're good to go. 7:18 That's lease.js, you can find the link to that in the show notes at YouTube.com/gotreehouse 7:20 or in iTunes search for the treehouse show and rate us. 7:25 [Nick Pettit] Very cool, next up is dimensionsapp.com 7:29 and it's a free tool for designers to quickly test responsive websites, 7:36 at least that's what it says on the homepage. 7:41 Let's click "Start Testing" and see what this does. 7:43 Here in the upper left it says to enter a URL, so lets go ahead and type in 7:47 http://teamtreehouse.com. 7:53 Looks like I typed that in there earlier. 7:56 We'll go ahead a click "Test", it's going to load up the webpage. 7:59 Eventually. 8:04 [Jason Seifer] This is almost like being able to resize your browser. 8:08 The important takeaway here is to never do live demos 8:15 on the air or even in person at a conference. 8:23 Trust us, this works assuming you have a decent internet connection. 8:26 Actually it's really cool, if we take a look over at my screen 8:31 you can see that you can go from a phone all the way over to a wide phone 8:33 and there is some give that you have. 8:37 Then even up to a tablet, see maybe you're looking at it this way 8:40 for portrait then all the way up to landscape on wide tablet. 8:44 Hey do I want the desktop version? I do. 8:49 Then look, there's my lovely co-host. 8:51 [Nick Pettit] That's my favorite part of the website. 8:53 [Jason Seifer] That's at dimensionsapp.com you can even add this 8:56 as a plug-in or extension to Chrome and use it offline. 9:00 What will they think of next? 9:04 So is that all we have this week? 9:06 [Nick Pettit] I think so. 9:09 [Jason Seifer] Who are you? >>[Nick Pettit] I am @NickRP. 9:11 [Jason Seifer] I am @JSeifer, for show notes and more information 9:13 on anything we talked about, check out show notes at YouTube/go treehouse 9:16 and also find in iTunes at treehouse show. 9:21 [Nick Pettit] And, of course, if you'd like to see more videos like this one 9:25 about Android, iOS, how to start a business, 9:27 how to make websites, and so much more, be sure to check us out 9:30 at teamtreehouse.com, thanks so much for watching and we'll see you next week. 9:33

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

Sign up