Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Preview
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
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.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[?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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up