Now that we've built our website, it's time to test our work.

There are many different ways to test a website, so we'll

start out simple and work our way up to more complex ideas.

Here's the site that we've created so far.

First, we should test our visuals to make sure

that they stand up in a few different situations.

I'm going to take a screenshot of our website.

And on my Mac, I can just hit Command+Shift+4, and

then a spacebar to just take a screenshot of current window.

On a PC, you can of course use the PrtScr button.

And now, I'm going to open this up in Photoshop.

If you don't have Photoshop, just about any image editing tool will do.

You could even use a basic photo editor

for these tests.

So, I'm going to hit Cmd+O on my Mac to bring up the Open dialog box.

And my screenshot will be saved to the desktop.

I'll open that up, and here we have the screenshot of our site.

Now first, I'm going to make our website black and white.

So I'm just going to add a filter here that says hue and saturation.

And I'm gonna set the saturation to zero to make our website black and white.

You'll notice that when the colors are desaturated,

some of the details look a little bit different.

I'm going to enlarge the site a little bit so we can see it better here.

This test helps us not only check

for contrast between values, but it also ensures

we're creating a website that will be visible

to people with various degrees of color blindness.

If the site still looks good in grayscale, or black and

white like this, then we'll know that we're pretty safe.

So, we can still make out all of the various navigation items.

We can still see the header, and we can still read the captions.

There're some lower areas of contrast here in some artwork, but there's

not much we can do about that, so this should be fine.

The important thing to look for is to make sure you have strong contrast,

especially around text and other important items on the screen.

Next, let's do another test where we flip our website upside down.

So I'm just going to rotate our image 180 degrees.

And this allows us to check the visual composition of our website.

What we're looking for here is balance.

We don't want one side of our site to feel heavier than the

other with more contrasting color.

We've gone for a fairly symmetrical design here, and

I'll zoom out so we can see all of it.

So, the symmetry here has paid off.

It looks pretty good.

But in cases where you may have many columns

and asymmetrical page elements, this test is more important.

Now, let's undo that.

And I'm going to blur our web site.

So let's blur it until we can just barely make out the text.

There we go.

This allows us to examine design issues that we may not have seen before.

In particular, we want to look at the color saturation.

By blurring this site quite a lot, we can see

that the arrangement of portfolio elements is actually quite nice.

There are some darker pieces and some lighter pieces, but the

arrangement of them here is good, because we don't have two

pieces next to each other with similar colors.

They can stand on their own.

Additionally, the header has some color, but

it doesn't overwhelm the work that's on display.

Lastly, if we apply slightly less blur. So I'll undo that and

add some blur back in. We can examine the legibility

of the text. So I'll just add a small amount of

blur. And this will help you get some idea as to

how people with some partial vision impairments might see your site.

This design actually isn't the best in this case.

But the important part are the images, and those are nice and big.

So I think

it's good enough, and the navigation is also visible as well.

We've looked at a couple of different ways to test the aesthetics of

our website, but now we should make sure our HTML and CSS is valid.

The W3C, or Worldwide Web Consortium, is the organization that

sets the standards for HTML, CSS, and many other languages.

We can test our code using W3C validation services

to make sure that matches the specification.

Let's try it out.

First, inside of my workspace, I'm going to go to index.html and

select all of it using Cmd+A on my Mac, or Ctrl+A if you're on Windows.

And them I'm going to copy it. Next, I'm going to go to another website

at validator.w3.org. And you can see there are a

few ways to validate your HTML. We can validate by URI or URL.

You can validate by file upload, so we could upload our HTML file.

Or you can validate by direct input.

But we're just going to paste in our code directly and validate

by direct input. So let's do that.

We'll paste in our code, and when we

click the Check button, it'll take just a moment.

And you can see that our site comes up

valid, it says this document was successfully checked as HTML5.

The result is passed and it has two warnings.

These small warnings here

are nothing to be concerned with.

In an upcoming lesson, we'll learn how to resolve

more serious validation issues, should you come across them.

Similarly, we can validate our CSS.

So let's go back to our work space, and for the purposes of this example,

let's just copy all of main.css. And we'll go

to another website at

jigsaw.w3.org/css-validator.

Then once again, we just paste via direct

input. So there's all my CSS, and I can click the

Check button, and it says congratulations, no errors

were found. This document validates as CSS level 3.

We've checked our designs and we've checked our code for validity,

but there's nothing quite like checking on real devices and browsers.

If the screen is large, it displays the wider

version of our site, like on desktops and notebooks.

This wider version will also be shown on tablets.

If it's

smaller, it will respond and display the small version.

Here's what it looks like on a mobile phone.

Some companies will actually have a device testing suite

to see how their code works on many hardware devices.

However, this can be very expensive.

If you can't find devices to test on through your company or

through friends, the next best thing is to use a screenshot service.

One service that will take these screenshots for you is called

BrowserStack, and it's available at browserstack.com.

This is a paid service with a few different products, but you

can try it out by signing up and using the free trial.

If you've signed up for BrowserStack, or after you sign

up for a free trial, you'll come to a screen

that looks something like this.

BrowserStack allows us to tunnel through to our local computer,

but that's a bit beyond the scope of this lesson.

It's much easier to put in a public URL, and

then select the browsers that you want to test on.

So, I'm going to go over to my work

space and get the preview URL, and then test this

public URL.

I'm going to test this on a more recent version of Windows, Windows 8.1.

And I'm gonna test in Internet Explorer 11.

Let's see what that looks like.

We'll learn how to upload our website soon.

But for the purposes of this example,

we're just going to use our workspaces URL.

Now here, I'm actually looking at a live preview of what our website

looks like on Internet Explorer 11 on Windows 8.1.

However, if I'd like to just generate some screenshots

and I don't actually need to interact with the page,

we can click on Screenshots here, and then I can enter my URL once again.

So let's go ahead and grab that, and paste it in here.

And here, I have 20 browsers selected by default.

That's a lot of browsers.

Let's go ahead and generate the screenshots.

These screenshots will take a few minutes to

process, but as they start to finish up,

you can see each one, and click on

the ones where you might see problems occurring.

So this is Windows 7, and using Internet Explorer 8.

And it looks like we have something

strange going on with the navigation there.

Not really sure what the problem is there, but it looks

like most other browsers are displaying it just fine.

So, think it might just be an issue with IE 7 and IE 8.

However, those are very old versions of Internet Explorer,

and IE 9, 10, and 11 have been released since.

So I'm not going to worry about those two browsers,

because at this point, most people aren't really using them anymore.

We can even look at mobile phones using BrowserStack,

so here's an iPad Mini, an iPhone 4S, the Google

Nexus 7, iPhone 5, iPad third generation, and so on.

So if we click on one of these, we can see

what our website looks like on an iPhone 4S in portrait mode.

Here's what our website looks like on an iPad Mini.

Overall, it looks like our site is coming across

just fine, and I don't think we really

need to make any adjustments at this point.

The important thing to remember when testing a website is

that no matter how hard you try, it's almost impossible

to make a website look exactly the same on every

single screen resolution, every single device, and every single web browser.

The goal is to get as close to perfection as

possible while expending the least amount of effort to get there.

There are going to be some differences

that simply aren't worth the trouble of fixing.

At times, you'll have to accept that your website looks good enough.

Whether that's because it's entirely too much effort to fix,

or because it's technically impossible

on a particular hardware software combination.

The best you can do is to try your best.