Episode 48: Tablet friendly design, good ui, gif.js

I'm Nick Pettit. >>I'm Jason Seifer. 0:01 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 In this episode, we'll be talking about a tablet-friendly design, gif.js, 0:09 good UI practices and more. >>Let's check it out. 0:14 [The Treehouse Show] 0:18 First up is a blog post from the CSS Tricks blog—>> Friend of the show. 0:24 Which, of course, is maintained by Chris Coyier. 0:29 This is a guest post from Ben Terrill—I hope I'm saying his last name right— 0:32 called "A Couple of Best Practices for Tablet-Friendly Design." 0:38 The first tip he gives is to increase the font size and the line height 0:42 so that your text is legible on tablets. 0:46 The next tip is to increase the size of buttons and basically be aware of tap targets 0:50 so that your finger can actually hit the buttons, 0:57 because it's a little bit less imprecise than a mouse. 1:01 You should enable contextual keyboards. 1:05 So, for example, if you need to type in a phone number, you should enable a numeric keyboard 1:08 to make it a little bit easier to type in. 1:14 And there's a couple of other great tips there, but it's a really great blog post, 1:17 and I highly recommend that you check it out. 1:21 Yeah, first hand. Don't just take our word for it. >>It's awesome. >>Yeah, it is. 1:24 Next up, we have a project called gif.js. >>Don't you mean gif.js? 1:29 Pretty sure it's gif.js. >>I"m pretty sure you're wrong. >>Like the peanut butter. 1:34 This is a fully featured JavaScript gif encoder that runs in your browser. How crazy is that? 1:39 You can actually create gifs right inside your web browser. 1:45 Let's take a look at the code here. So pretty easy to use. 1:50 You just create a new gif variable, adding in this new gif. 1:53 You specify the number of workers you want, as well as the quality. 1:58 This uses Canvas to add different images in the case of adding an animated gif. 2:02 And you can get the downloads and documentation over on github. 2:08 This works in most browsers—works in Google Chrome, Firefox 17, 2:14 Safari 6, IE 10 and up. 2:17 So 10 different options that you can put in, including whether or not to repeat the gif., 2:20 the quality workers, and just 10 different options. 2:26 So anyway, pretty crazy that you can actually fully encode gifs inside the web browser. 2:30 And check that out. We'll have a link to it in the Show Notes, 2:35 which you can get to in our iTunes feed, search for "The Treehouse Show," 2:37 or on YouTube at YouTube.com/gotreehouse. 2:41 Next up is Portkit, which is this really cool set of UX metaphor equivalents for IOS and Android. 2:46 So if you're designing, say, an iPhone app and you want to create the equivalent 2:54 UX on an Android device or on another version of IOS, 2:59 you should definitely check this out. So let's take a look at Portkit. 3:03 I'm going to scroll down the page here. And they have this UX Comparison Chart. 3:07 So on the left side they have IOS 7. 3:12 Then in the middle they have IOS 6. 3:14 And on the right they have Android 4 and up. 3:17 You can, of course, download PSDs here that will give you all of the UX elements, 3:20 or you can go ahead and just compare the individual elements 3:26 that you want to take a look at. 3:30 You can also go directly to the documentation. 3:34 So say that you were creating this switch in IOS. 3:37 You can look at the equivalent documentation for Android 3:41 just by looking across the columns here. 3:44 So they have all of the UI elements that you could possibly need, 3:47 and they also have links to some pretty cool resources— 3:53 there it is down at the bottom. 3:57 So definitely check that out if you're designing iPhone apps, Android apps 4:00 and you want them to be cross-platform. 4:06 Just check it out even if you're doing less or more than that too. 4:08 Yeah. Check it out no matter what. >>Yeah, don't discriminate. >>Yes. 4:11 Next up we have a blog post called 4:14 "What Every Web Developer Needs to Know about URL Encoding." 4:16 Now, when you link to something, you know what you have is the URL. 4:20 And encoding refers to changing the characters around just a little bit 4:25 if you need to paste them somewhere else. 4:29 As an example, if you're trying to link to a webpage 4:31 and you want to set a parameter that has a space in it—like someone's full name— 4:34 well, that space needs to be encoded because you can't have spaces in a URL. 4:39 And that's where you have that nasty %20. 4:43 >>Yeah. See, Nick knows it off the top of his head. >> Yep. 4:46 >>Just Tweet him if you need to know any of those characters. << Yeah. 4:49 But anyway, there's a great article that goes into 4:52 everything that you would need to know about this. 4:54 Now, there are things that are common pitfalls— 4:57 what are the reserved characters, what are character encodings, using ASCII or UTF-8. 5:00 So it goes through how to fix that as well as common mistakes. 5:08 Anyway, there is probably a bit too much to go into right on the show here, 5:11 but definitely check out the blog post, 5:15 get a good idea of what's going on with URL encoding. >>Very cool stuff. 5:17 Well, as you may or may not know, HTML5 has introduced a number of new form elements. 5:21 Of course, support for those form elements is a little bit shaky 5:27 depending on which browser you're using. 5:31 But fortunately, there's this really cool webpage 5:33 that you can look at all the HTML5 elements in. 5:37 And you can basically see what that looks like in your particular browser. 5:40 So in this case, I'm using the latest version of Google Chrome. 5:45 And so if I go ahead and scroll down the page here 5:49 to something like input type=datetime-local, 5:53 I can see, oh, look, that actually seems to work in my browser. 5:59 You can also have a color picker here. So it looks like that one works. 6:05 There's also sliders here, which is input type=range. 6:08 So there's a bunch of different form elements here 6:15 that you may have not seen accept in the context of a jQuery plug-in or something like that. 6:19 And it's good to know if it's okay to use those in the browser that you're targeting. 6:26 Like I said, you should definitely check this out 6:33 if you're planning to use HTML5 form elements 6:36 and you're not sure if the browsers you're targeting supports them. 6:39 And for more of an overview for that, you can go review 6:43 other episodes of "The Treehouse Show" where we've talked about this before. 6:46 We have talked about HTML5 form elements quite a bit. >>HTML5. >>Bam. 6:49 Next up we have an app called Prepros. 6:56 This is an application where you can preprocess your CSS and JavaScript. 6:58 Super easy to use and it is also cross-platform. 7:04 So if we take a look at the Prepros website, 7:08 it says, hey, preprocessing just got easier with Prepros. This is what it looks like. 7:11 So what you would do is grab your app, drag it in here 7:16 or click that little plus sign, and then you can see the different items that you have in here. 7:19 Now, this works with CoffeeScript, Sass, Jade, HAML, 7:24 ton of different templating languages. 7:28 And you can actually tell your web browser to reload live. 7:30 It can optionally use the live reload plug-in. 7:35 So this works on Windows and Mac cross-platform. 7:38 Download it, totally free. Check it out. 7:42 And I think we should probably address what preprocessing actually is— 7:45 Good call, Nick. >>—for people that may not be quite—>>I always do this. 7:50 —as hip as us. >>I always do this. 7:54 Basically preprocessing is just a way for you to make— 7:56 it's basically a way to add features on top of things like CSS or JavaScript. 8:03 So if you're writing CSS and you want to use, say, a variable, 8:08 you can go ahead and do that in Sass or Les. 8:13 And it will process that and output CSS that you can then include in your webpage. 8:17 So it's a cool way to get some additional functionality 8:24 that is not necessarily provided in the languages by default. 8:27 Good explanation. >>Thanks, Jason. 8:30 Next up is Real Shadow, which is a piece of JavaScript 8:33 that will make it really easy for you to generate shadows in the browser. 8:38 So if we go ahead and take a look here, I'll mouse over these shadows here. 8:43 And whoa! >>Who—ho—hoa! 8:48 It actually casts these shadows as if there were real lighting. >>Is your mouse daylight? 8:50 It looks that way, but actually I imagine—I haven't looked at the code, 8:56 but I imagine that this is using some sort of box shadow to generate these 9:01 and just multiplying the shadow a number of times to actually make it cast there. 9:07 So if you look at, say, this little red triangle here, and I move the mouse to the upper right, 9:13 you can see that the shadow becomes longer. 9:19 And it looks like there's multiple shadows being generated there 9:22 and they're just being spread out. 9:25 This is a plug-in for jQuery, but you can use it without jQuery. 9:27 That was a recent addition that was made. 9:31 If you scroll down here, you can see how to use it with jQuery, 9:34 how to use it without jQuery, how to use it with Inset Shadows, 9:38 and you can even use it with a couple of other JavaScript libraries. 9:42 You don't necessarily have to use it with jQuery. So pretty nifty stuff. 9:47 And if you're trying to do that on your own, it would be pretty difficult to do, 9:52 so it's nice that somebody has already written the code for you. 9:57 Next, we have a site called Good UI. This is a site for good landing page design. 10:00 That's good. Because I hate it when people try to make bad UI. 10:06 I'm glad somebody finally had the idea to make good UI. >>Yeah, exactly. 10:10 We had two submissions to the show this week—one was good UI, one was bad UI. 10:14 Guess which one we picked? >>The good one. >>Good UI. 10:17 So this webpage actually has a ton of great tips when creating landing pages. 10:21 So if you want to have high conversion rates and make your site easier to use, 10:27 give all of these a try. 10:31 So there's some great tips in here using a one-column layout instead of multi-columns. 10:34 And you'll also notice that this site looks pretty great. 10:38 It's very easy to read. It's very simple. 10:41 So they actually go through and do all their own tips while they're showing you the page. 10:45 They're saying, hey, give people a gift. They're more likely to download your stuff. 10:49 Merge similar functions instead of fragmenting your UI. 10:54 As you build a site, you tend to add different elements to the page, 10:57 and sometimes more than one of them can do pretty much the same thing. 11:02 So you always want to be looking and seeing how you can simplify your webpages. 11:05 Anyway, there's a ton of great tips in here. Don't want to spoil it. 11:10 You can find the link in the Show Notes. And I recommend giving it a read. 11:13 It really is a bunch of really good tips, not bad tips. We don't want any of those. 11:16 Yeah. Really cool stuff. Well, I am @NICKRP on Twitter. >>And I am @JSEIFER. 11:21 For more information on anything we talked about —including Show Notes— 11:27 check out our YouTube channel at YouTube.com/gotreehouse. 11:30 You can also find us in iTunes. Search for "The Treehouse Show." 11:33 And, of course, if you'd like to see more videos like this one 11:37 about web design, web development, mobile development and so much more, 11:40 be sure to check us out at teamtreehouse.com. 11:44 Thanks so much for watching and we'll see you next week. 11:48 [treehouse] 11:55 If you'd like to see more advanced videos and tutorials like this one, 11:57 go to teamtreehouse.com and start learning for free. 12:01 [? music ?] 12:05

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

Sign up