Episode 46: Responsive Images and HTML5 Form Inputs

I'm Jason Seifer, >>and I'm Nick Pettit. 0:00 And you're watching the Treehouse Show. 0:03 Your weekly dose of internet where we talk about all things 0:05 web design, web development, and more. 0:07 In this week's episode we're going to be talking about responsive images, 0:10 HTML5 form inputs, and more. 0:13 Let's check it out. 0:16 [radar noises] 0:19 [The Treehouse Show] 0:23 First up is Midway.js, 0:26 which is basically a piece of JavaScript that allows you to 0:29 position elements in the middle of your pages. 0:33 [Seifer] Hence, why they call it Midway. 0:37 [Pettit] Exactly. 0:39 So if we scroll down here—we'll look at a live demo in just a second— 0:40 but you can see the usage here. 0:44 You basically include Midway, 0:46 and then you add the class, "centerHorizontal," 0:48 or, "centerVertical," or both. 0:52 And then it will go ahead and center your elements. 0:55 So let's see a live example. 0:58 [Seifer] This is actually a lot harder than you would expect it to be. 1:00 [Pettit] It is actually really hard and that's why it's so great that 1:03 somebody made it easy. 1:06 So if we go ahead and resize the browser here 1:09 you can see that the element stays right in the middle of the page, 1:11 and everything is centered perfectly. 1:16 So it's a pretty handy library, and it's a common problem 1:20 on a lot of responsive sites, so definitely one to check out. 1:24 Yeah, and very easy to use. That's really awesome. >>Yep. 1:27 Next up, over on the Zurb blog—we've talked about Zurb Foundation 1:30 the CSS framework on this show before. 1:34 Zurb Foundation recently had a new version release, 1:36 and in it they added something called data-interchange for responsive images. 1:39 So something that you'll run into 1:44 is if you're serving up a responsive version of your site to a mobile browser 1:46 a lot of people don't serve up smaller images to those particular browsers. 1:50 And—of course—you'd want to serve up smaller images 1:55 as to not take up a ton of bandwidth. >>Yes. 1:57 So the smallest possible size. >>Yep. 1:59 And this is something we'll be getting into more on the show later. 2:01 But anyway—in Zurb Foundation the latest release— 2:04 they added something called data-interchange. 2:07 And what it lets you do is serve up a small version of the image— 2:09 and you can see all the way on the left the min-width 2:15 is 400 pixels on this image right here. 2:18 So as soon as the page loads it serves up the smallest one, 2:20 and then you actually use media queries inside 2:24 the data-interchange attribute to serve up larger versions 2:27 to browsers that are more likely on a better connection. 2:31 And it's really, really easy to use. 2:35 You can see right here is the example—you can have an image, 2:38 give it your source, and then just use this data-interchange— 2:40 you can add as many as you want and have the media query right in there. 2:43 So in this example they are serving up the small JPEG on screens 2:48 that are a min-width of 768 pixels—so tablet-sized. 2:53 So really, really, really great plugin— 2:58 extremely simple to use and takes care of a problem 3:01 that we're starting to see more and more. 3:04 So check that one out—really like this—Zurb Foundation is pretty cool. 3:06 Yep, definitely. So over in the Six Revisions blog— 3:09 way better than the Five Revisions blog— 3:14 [Pettit] they've made a post called, 3:16 "A Guide to the New HTML5 Form Input Types." 3:18 Now—of course—in HTML5 there are several new input types for forms 3:22 and this blog post just goes over some of them and also shows 3:27 how they look different on mobile devices. 3:31 The really nice thing about having these more-specific input types 3:34 for things like dates and email addresses 3:38 is that a lot of the validation can actually occur in the browser. 3:41 They say that it will reduce our reliance 3:45 on client-side and server-side scripting for validation. 3:48 I do disagree with that a little bit. 3:51 I think you still should actually validate it server-side, 3:53 but you may just have to run less strict validation on it because of this. 3:57 So the first example is the new date input type. 4:03 And in this example you can see what it looks like 4:09 in HTML4 versus HTML5 on an iPhone. 4:12 So when you go ahead and click on this particular element here 4:18 it will bring up a date picker. 4:21 They have a similar example for URLs where if you have a URL input type, 4:25 it will actually change the keyboard. 4:30 So instead of having a space, which you wouldn't have in a valid URL, 4:31 it gives you a dot, a slash, and dot com, 4:36 or other extensions. 4:40 There is also the email input type, which does a similar thing— 4:42 changes the keyboard layout. 4:46 And if we scroll down a little bit further here in the post, 4:50 they have an input types, demo, so I'll go ahead and open that up. 4:54 And here we can see a couple of examples 5:00 of what these different input types actually look like. 5:02 There's a couple of other ones here that are pretty neat. 5:06 There's the color input type, which brings up a color picker. 5:08 That's pretty neat. 5:12 You can select a range, so if you want a number between 1 and 10 5:14 and you just want a little slider, you can include that. 5:21 And there are things like telephone numbers, 5:23 dates—like we discussed, and so on. 5:26 So pretty interesting stuff, and if you build a lot of forms— 5:29 or actually any forms at all—this would be very useful to you. 5:33 Really, really nice—nice little overview they got there. >>Yeah definitely. 5:36 Next up we have a project called Skrollr. 5:39 This is Parallax scrolling for the masses. 5:42 It's actually a really well-done and easy-to-use plugin. 5:45 So let's check this one out here. 5:49 Here's the Skrollr webpage, and get ready for this, 5:50 as I'm scrolling down the page—whoa—are we on a webpage or a rollercoaster? 5:53 [Pettit] Amazing. [Seifer] I don't even know. 6:00 So here's an example of the transform scrolling— 6:02 Parallax scrolling effect that we have there 6:06 where you can scale, rotate, and other adjectives of any element. 6:08 Anyway, it supports all numeric properties, and— 6:13 boy, the site sure is fun. 6:15 You'll notice on the bottom of the screen there is an optional 6:16 progress bar that you can do. 6:18 And it supports a bunch of different effects that you would figure out. 6:20 So this code is available on GitHub, where there are quite a few 6:23 instructions and examples of how to use it. 6:28 Anyway, go ahead and check it out—Skrollr—a wonderful plugin. 6:31 Very cool stuff. 6:35 Next up is Flippant.js, 6:37 which is yet another JavaScript library. 6:40 And it allows you to—as the name implies—flip things over. 6:43 So, if I go ahead and click here on this modal—whoa. 6:48 It brings up a modal that takes up the whole screen. 6:52 And we'll go ahead and click update—bam—it's right back. 6:55 You can also have this in the form of a smaller card. 6:59 So I'll click that and—bam—it brings up a card. >>Bam. 7:03 [Pettit] Let's see if this actually works here. 7:06 I'll type in test and hit update. 7:08 And—oh, look at that—it does actually update these little cards here. 7:11 So pretty nifty—I think it's a really cool way 7:17 to just update small areas of the page. 7:21 If you have a bunch of stuff on the page 7:24 and you just want to update individual pieces, 7:28 having those little cards there is definitely a nifty way to do it. 7:30 I really like the animations that they are applying here. 7:34 It's a really good way to build out that UI and create that metaphor. 7:39 [Seifer] Yeah really effective—I think. >>Yeah. 7:44 So very cool stuff, and I believe it's available on—yeah—on GitHub. 7:46 So very cool. >>Nice. 7:53 Next up—over on the Adioso blog there is a wonderful blog post 7:55 on how you can actually make a complex webapp responsive and quick. 8:00 Now in this blog post they walk through some of the challenges that they faced 8:06 in getting their webapp to be very performant even on smaller devices. 8:10 So it really walks through—you know it shows you right here the different 8:15 devices that this had to work on and be responsive. 8:19 So they don't go too far into what they did on the JavaScript side, 8:22 but they did use the Zurb Foundation framework, which we mentioned earlier— 8:28 Foundation is really knocking it out of the park. 8:32 And so what they did, they imported only what they needed to, 8:34 which is going to help page load times stay down. 8:38 If the client—the less the client has to download, the better it is. 8:42 Anyway, it's really just a wonderful walkthrough that we don't have time for 8:45 to do all the way on this show, but I really recommend checking it out. 8:50 You can find it in the show notes, on our YouTube channel 8:53 at YouTube.com/gotreehouse, or in iTunes search for The Treehouse Show. 8:56 And say Adioso to poor performance and hola to fast webpages. 8:59 That's Spanish, Jason—Spanish. 9:06 I am not fluent. 9:10 Next up is Progression.js. 9:11 And if we go ahead and scroll down the page here, 9:14 we can get right into the demo. 9:16 We have a form—a couple form fields here— 9:17 and I'll go ahead and click on the first one. 9:22 And as I tab through the form and progress through it, 9:24 you can see over on the right side, we have this little progress meter 9:28 that tells me how far along you are in the form. 9:32 Now when I first saw this, I thought it was actually a pretty stupid idea 9:35 because, obviously, this form is pretty short, 9:40 and I know that I'm only 3 form fields in. 9:44 I don't really need a progress tool tip over here to tell me that. 9:48 But Jason pointed out that it actually would be pretty useful 9:51 on very lengthy forms. 9:55 So if you have a really long form that takes up several screens 9:58 of scrolling or you actually have to page through it, 10:03 this would be an excellent time to use that kind of progress meter 10:06 so that your users know how far along they are. 10:10 It's actually really easy to use. 10:12 You just go ahead and include jQuery 10:15 and then include the Progression CSS and JavaScript files. 10:18 It recommends including these before the head section— 10:22 maybe there's a technical reason that you need to do that, 10:27 but I actually would recommend 10:29 including it towards the bottom of your page for faster load times. 10:31 And then you can go ahead and create the form and then initiate the plugin 10:35 by using a normal jQuery selector. 10:40 So you select the form and then apply Progression 10:44 and then you can also initiate the plugin with all these various options 10:47 such as tooltipwidth, tooltipposition, and so on. 10:52 So pretty nifty—again—if you're using forms 10:56 this would be a great thing to use with those HTML5 form elements. 11:00 Very nice. I like it. 11:05 I like being told that I'm making progress on something. >>Definitely. 11:07 No matter how small and incremental that progress is— 11:10 I like to know I'm almost there. 11:13 I think we're about 80% through the show. >>Very nice. 11:15 Next up—over on Dave Rupert's blog. 11:17 He has a blog post called, "Ughck. Images." 11:21 Uh—I think that's how you pronounce it, I'm not sure. 11:24 If anybody knows how to pronounce this word, tweet me. 11:27 Anyway, as we were talking about a little bit earlier 11:31 the web is in an interesting state right now 11:34 where we have a lot of devices, 11:36 and they do not always have fast connections. 11:39 Now images are a really huge part of the web, 11:42 and serving up different images to different browsers 11:44 is a bit of a pain. 11:47 So he's got some interesting statistics on here. 11:50 The average webpage in June 2013 or oh 13, as Nick says, 11:52 was almost 1.5 Megs, and 60% of that was images. 11:57 Now responsive images could reduce the image asset weight by 72%, 12:02 but not a lot of people use them. 12:06 So he goes through some more concerns here 12:08 including choosing break points for responsive images 12:11 and what in the world to do about this. 12:14 So what I found really awesome was this presentation here. 12:17 It's his slides from a conference that he gave, 12:20 and he goes through a ton of different techniques 12:24 for reducing image weight on a page. 12:27 Anyway this is one of the best presentations that I've seen in awhile. 12:29 The slides are just amazing and probably apply to something that 12:34 you're working on at this point in time. >>Probably. >>Probably. 12:37 Anyway that's about all we have for this week. 12:41 Nick, who are you on Twitter? 12:43 I am @nickrp. >>And I am @jseifer. 12:44 For more information on anything we talked about 12:47 check out our show notes at youtube.com/gotreehouse 12:49 or search for us on iTunes at The Treehouse Show. 12:52 And—of course—if you'd like to see more videos like this one 12:55 about web design, web development, mobile, business, and so much more 12:58 be sure to check us out at teamtreehouse.com. 13:02 Thanks so much for watching, and we'll see you next week. 13:05 [radar noises] 13:08

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

Sign up