Polish4:44 with Nick Pettit
In this chapter, we'll review some things we can do to further polish and improve the project that we've built. We'll learn a few performance tips and take a look at browser compatibility.
[?music?] 0:00 [Polish] 0:02 [Nick Pettit] We've spent a lot of time improving this layout, 0:05 but there's still a few more things that we could do if we wanted to improve it further. 0:09 So for example, we're using quite a few box shadows here, 0:14 and box shadows are actually pretty harsh on the browser in terms of rendering. 0:18 When the browser has to composite a whole bunch of box shadows on top of one another, 0:24 the frame rates can start to get really low 0:29 and we could get a smoother transition if we just dropped all of the box shadows altogether 0:31 or if we just decreased the blur radius, 0:40 so let's go ahead and switch over to our text editor. 0:43 Right here, we have a few box shadows, and what you would want to do 0:47 is maybe cut down this blur radius from 15 to something like 5, 0:51 and we can save that out and go back and refresh the page. 0:56 We might not see a huge performance improvement; 1:00 the frame rates do look a little bit smoother. 1:04 Of course, that does come at the expense of a much smaller blur radius 1:06 on this shadow, and I don't think that looks quite as good 1:09 and it's not really worth the extra frames, 1:14 so we'll go ahead and just change that back to 15. 1:16 That's really a call that you have to make yourself, 1:19 and as a general rule, just try not to use too many box shadows. 1:21 Another thing that we could do to improve this page 1:26 is we could calculate the width and height of the staging area 1:29 so that any image that we enlarge will be centered on the page. 1:34 Right now, we're just setting its absolute position to 0 and 200, 1:39 but we could do a much better job of dynamically centering them using jQuery, 1:44 so let's go ahead and switch over to the HTML and I'll show you what I mean. 1:50 We'll go ahead and copy and paste a whole bunch of these photos here, 1:54 so we'll just go ahead and copy all 8 of them, actually, 2:00 and we'll paste them in, 2:04 and when we switch over to Google Chrome and refresh, 2:06 you can see that our gallery has a lot more pictures in it, albeit duplicates. 2:09 But when we click on one of these down at the bottom, 2:14 you can see it's going all the way up to the top of the page. 2:17 That's not really very good, 2:21 but like I said, that could pretty easily be fixed with some jQuery. 2:24 So we'll go ahead and remove those and refresh the page, 2:28 and we're back to normal. 2:32 Yet another thing we could do to improve this layout 2:34 is make it work on mobile devices. 2:37 Right now, it looks pretty good on a tablet device or a smaller mobile device, 2:40 but with a little bit of modification, we could use CSS3 media queries 2:45 and responsive web design so that when the width of the page decreases, 2:49 we can adjust the design dynamically so that it better suits the device 2:55 that it's being displayed on. 2:58 And of course, one thing that we have not really fully addressed yet 3:00 is cross-browser support. 3:04 We've tried this out in Chrome, and usually when you try something out in Chrome, 3:06 you can be pretty confident that it's going to look exactly the same in Safari, 3:10 so we don't really need to test that because they are both webkit-based browsers, 3:14 and we also tested this in Firefox and we saw that it looks pretty good there. 3:20 We haven't really done any testing in Opera, 3:24 but Opera is a pretty good browser so we can be confident 3:27 that all these things are going to work 3:30 as long as we add the -o vendor prefix just like we have -moz and -webkit. 3:33 However, the last browser that we haven't really tested in is, of course, Internet Explorer, 3:38 so let's go ahead and switch over to Internet Explorer 8. 3:43 As you can see, it actually still looks pretty good. 3:48 We're losing a couple of things here, like the rounded corners, 3:51 the multi-column layout, and of course, when we click on these images, 3:56 it's not going to have a nice, smooth transition with a rotation. 4:01 However, it still looks pretty good, 4:05 and the interactivity is still intact and that's really the important thing here. 4:10 When you click on a photo, it gets larger 4:14 and you can see the photo at full size 4:17 and you can still read all the text. 4:20 When you're using CSS3 features that are still in draft form, 4:23 it's a good idea to test in other browsers 4:27 to make sure that your site degrades gracefully. 4:29 By now, you should know quite a bit more about CSS3 than when we started. 4:32 Working with an evolving standard can sometimes be challenging, 4:36 but the benefits of using CSS3 are well worth the effort. 4:40
You need to sign up for Treehouse in order to download course files.Sign up