This course will be retired on March 24, 2020. We recommend "Introduction to HTML and CSS" for up-to-date content.
Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
Testing is one of the last steps when building a website. It's possible to test both the design and code of a website using a variety of techniques.
Vocabulary
- Cross-Browser - The idea of a website or app working on most popular browsers. Typically during the development of a website, cross-browser testing is conducted to help create a consistent experience regardless of the user's choice of web browser.
Resources
- The W3C Markup Validation Service
- The W3C CSS Validation Service
- BrowserStack - Cross Browser Testing Tool
- Treehouse Blog: 3 Simple Design Tests to Improve Your Aesthetics
Validation Errors
You may encounter validation errors when using the W3C validators. For example, in this project, the vertical pipes in a Google Font URL might cause an error because they're not escaped using HTML entities. It's a good idea to fix as many errors as possible, because more errors can mean increasingly unpredictable cross-browser results.
-
0:00
Now that we've built our website, it's time to test our work.
-
0:03
There are many different ways to test a website, so we'll
-
0:07
start out simple and work our way up to more complex ideas.
-
0:11
Here's the site that we've created so far.
-
0:13
First, we should test our visuals to make sure
-
0:16
that they stand up in a few different situations.
-
0:20
I'm going to take a screenshot of our website.
-
0:25
And on my Mac, I can just hit Command+Shift+4, and
-
0:30
then a spacebar to just take a screenshot of current window.
-
0:36
On a PC, you can of course use the PrtScr button.
-
0:39
And now, I'm going to open this up in Photoshop.
-
0:44
If you don't have Photoshop, just about any image editing tool will do.
-
0:48
You could even use a basic photo editor
-
0:50
for these tests.
-
0:52
So, I'm going to hit Cmd+O on my Mac to bring up the Open dialog box.
-
1:04
And my screenshot will be saved to the desktop.
-
1:09
I'll open that up, and here we have the screenshot of our site.
-
1:15
Now first, I'm going to make our website black and white.
-
1:19
So I'm just going to add a filter here that says hue and saturation.
-
1:26
And I'm gonna set the saturation to zero to make our website black and white.
-
1:32
You'll notice that when the colors are desaturated,
-
1:35
some of the details look a little bit different.
-
1:38
I'm going to enlarge the site a little bit so we can see it better here.
-
1:43
This test helps us not only check
-
1:45
for contrast between values, but it also ensures
-
1:49
we're creating a website that will be visible
-
1:52
to people with various degrees of color blindness.
-
1:56
If the site still looks good in grayscale, or black and
-
2:00
white like this, then we'll know that we're pretty safe.
-
2:04
So, we can still make out all of the various navigation items.
-
2:08
We can still see the header, and we can still read the captions.
-
2:12
There're some lower areas of contrast here in some artwork, but there's
-
2:16
not much we can do about that, so this should be fine.
-
2:21
The important thing to look for is to make sure you have strong contrast,
-
2:26
especially around text and other important items on the screen.
-
2:31
Next, let's do another test where we flip our website upside down.
-
2:37
So I'm just going to rotate our image 180 degrees.
-
2:42
And this allows us to check the visual composition of our website.
-
2:46
What we're looking for here is balance.
-
2:48
We don't want one side of our site to feel heavier than the
-
2:51
other with more contrasting color.
-
2:54
We've gone for a fairly symmetrical design here, and
-
2:58
I'll zoom out so we can see all of it.
-
3:01
So, the symmetry here has paid off.
-
3:04
It looks pretty good.
-
3:06
But in cases where you may have many columns
-
3:10
and asymmetrical page elements, this test is more important.
-
3:15
Now, let's undo that.
-
3:18
And I'm going to blur our web site.
-
3:24
So let's blur it until we can just barely make out the text.
-
3:35
There we go.
-
3:37
This allows us to examine design issues that we may not have seen before.
-
3:42
In particular, we want to look at the color saturation.
-
3:46
By blurring this site quite a lot, we can see
-
3:49
that the arrangement of portfolio elements is actually quite nice.
-
3:53
There are some darker pieces and some lighter pieces, but the
-
3:57
arrangement of them here is good, because we don't have two
-
4:00
pieces next to each other with similar colors.
-
4:03
They can stand on their own.
-
4:05
Additionally, the header has some color, but
-
4:10
it doesn't overwhelm the work that's on display.
-
4:14
Lastly, if we apply slightly less blur. So I'll undo that and
-
4:21
add some blur back in. We can examine the legibility
-
4:26
of the text. So I'll just add a small amount of
-
4:31
blur. And this will help you get some idea as to
-
4:36
how people with some partial vision impairments might see your site.
-
4:42
This design actually isn't the best in this case.
-
4:46
But the important part are the images, and those are nice and big.
-
4:51
So I think
-
4:52
it's good enough, and the navigation is also visible as well.
-
4:56
We've looked at a couple of different ways to test the aesthetics of
-
5:00
our website, but now we should make sure our HTML and CSS is valid.
-
5:05
The W3C, or Worldwide Web Consortium, is the organization that
-
5:09
sets the standards for HTML, CSS, and many other languages.
-
5:14
We can test our code using W3C validation services
-
5:17
to make sure that matches the specification.
-
5:20
Let's try it out.
-
5:21
First, inside of my workspace, I'm going to go to index.html and
-
5:27
select all of it using Cmd+A on my Mac, or Ctrl+A if you're on Windows.
-
5:33
And them I'm going to copy it. Next, I'm going to go to another website
-
5:43
at validator.w3.org. And you can see there are a
-
5:49
few ways to validate your HTML. We can validate by URI or URL.
-
5:56
You can validate by file upload, so we could upload our HTML file.
-
6:01
Or you can validate by direct input.
-
6:04
But we're just going to paste in our code directly and validate
-
6:08
by direct input. So let's do that.
-
6:11
We'll paste in our code, and when we
-
6:13
click the Check button, it'll take just a moment.
-
6:18
And you can see that our site comes up
-
6:21
valid, it says this document was successfully checked as HTML5.
-
6:27
The result is passed and it has two warnings.
-
6:31
These small warnings here
-
6:34
are nothing to be concerned with.
-
6:36
In an upcoming lesson, we'll learn how to resolve
-
6:39
more serious validation issues, should you come across them.
-
6:44
Similarly, we can validate our CSS.
-
6:47
So let's go back to our work space, and for the purposes of this example,
-
6:53
let's just copy all of main.css. And we'll go
-
6:59
to another website at
-
7:03
jigsaw.w3.org/css-validator.
-
7:11
Then once again, we just paste via direct
-
7:15
input. So there's all my CSS, and I can click the
-
7:19
Check button, and it says congratulations, no errors
-
7:24
were found. This document validates as CSS level 3.
-
7:30
We've checked our designs and we've checked our code for validity,
-
7:33
but there's nothing quite like checking on real devices and browsers.
-
7:37
If the screen is large, it displays the wider
-
7:40
version of our site, like on desktops and notebooks.
-
7:45
This wider version will also be shown on tablets.
-
7:49
If it's
-
7:49
smaller, it will respond and display the small version.
-
7:53
Here's what it looks like on a mobile phone.
-
7:56
Some companies will actually have a device testing suite
-
8:00
to see how their code works on many hardware devices.
-
8:04
However, this can be very expensive.
-
8:07
If you can't find devices to test on through your company or
-
8:10
through friends, the next best thing is to use a screenshot service.
-
8:16
One service that will take these screenshots for you is called
-
8:20
BrowserStack, and it's available at browserstack.com.
-
8:27
This is a paid service with a few different products, but you
-
8:31
can try it out by signing up and using the free trial.
-
8:36
If you've signed up for BrowserStack, or after you sign
-
8:39
up for a free trial, you'll come to a screen
-
8:41
that looks something like this.
-
8:43
BrowserStack allows us to tunnel through to our local computer,
-
8:48
but that's a bit beyond the scope of this lesson.
-
8:51
It's much easier to put in a public URL, and
-
8:54
then select the browsers that you want to test on.
-
8:58
So, I'm going to go over to my work
-
9:01
space and get the preview URL, and then test this
-
9:07
public URL.
-
9:09
I'm going to test this on a more recent version of Windows, Windows 8.1.
-
9:14
And I'm gonna test in Internet Explorer 11.
-
9:20
Let's see what that looks like.
-
9:24
We'll learn how to upload our website soon.
-
9:26
But for the purposes of this example,
-
9:28
we're just going to use our workspaces URL.
-
9:32
Now here, I'm actually looking at a live preview of what our website
-
9:37
looks like on Internet Explorer 11 on Windows 8.1.
-
9:42
However, if I'd like to just generate some screenshots
-
9:46
and I don't actually need to interact with the page,
-
9:50
we can click on Screenshots here, and then I can enter my URL once again.
-
9:58
So let's go ahead and grab that, and paste it in here.
-
10:02
And here, I have 20 browsers selected by default.
-
10:07
That's a lot of browsers.
-
10:09
Let's go ahead and generate the screenshots.
-
10:15
These screenshots will take a few minutes to
-
10:17
process, but as they start to finish up,
-
10:20
you can see each one, and click on
-
10:22
the ones where you might see problems occurring.
-
10:25
So this is Windows 7, and using Internet Explorer 8.
-
10:32
And it looks like we have something
-
10:34
strange going on with the navigation there.
-
10:37
Not really sure what the problem is there, but it looks
-
10:40
like most other browsers are displaying it just fine.
-
10:43
So, think it might just be an issue with IE 7 and IE 8.
-
10:47
However, those are very old versions of Internet Explorer,
-
10:51
and IE 9, 10, and 11 have been released since.
-
10:55
So I'm not going to worry about those two browsers,
-
10:58
because at this point, most people aren't really using them anymore.
-
11:02
We can even look at mobile phones using BrowserStack,
-
11:05
so here's an iPad Mini, an iPhone 4S, the Google
-
11:09
Nexus 7, iPhone 5, iPad third generation, and so on.
-
11:15
So if we click on one of these, we can see
-
11:18
what our website looks like on an iPhone 4S in portrait mode.
-
11:23
Here's what our website looks like on an iPad Mini.
-
11:28
Overall, it looks like our site is coming across
-
11:31
just fine, and I don't think we really
-
11:33
need to make any adjustments at this point.
-
11:36
The important thing to remember when testing a website is
-
11:39
that no matter how hard you try, it's almost impossible
-
11:42
to make a website look exactly the same on every
-
11:45
single screen resolution, every single device, and every single web browser.
-
11:50
The goal is to get as close to perfection as
-
11:52
possible while expending the least amount of effort to get there.
-
11:57
There are going to be some differences
-
11:58
that simply aren't worth the trouble of fixing.
-
12:01
At times, you'll have to accept that your website looks good enough.
-
12:05
Whether that's because it's entirely too much effort to fix,
-
12:09
or because it's technically impossible
-
12:12
on a particular hardware software combination.
-
12:15
The best you can do is to try your best.
You need to sign up for Treehouse in order to download course files.
Sign up