HTML 5 and CSS 3, Illustrated Complete

Unit P:

Testing and Finalizing Your Web Site

Objectives

Prepare to go live with your Web site

Use HTML and CSS debugging tools

Plan usability tests

Perform browser tests

HTML 5 and CSS 3 – Illustrated Complete 2

Objectives (continued)

Measure performance and modeling

changes

Remove unused styles

Tidy your HTML

Publish with a domain name

HTML 5 and CSS 3 – Illustrated Complete 3

Preparing to Go Live with

Your Web Site

Going live: publishing to a Web server

in order to make it available to anyone

with Web access

Process of testing and finalizing may

include:

Publishing to a testing server

Performing browser and usability tests

Checking for errors using Web

development tools

HTML 5 and CSS 3 – Illustrated Complete 4

Preparing to Go Live with

Your Web Site (continued)

A testing server

HTML 5 and CSS 3 – Illustrated Complete 5

Using HTML and CSS

Debugging Tools

Process of fixing errors involves:

Identifying incorrectly displayed element

Checking HTML and/or CSS code

relating to the element

Making changes to code

Refreshing the page in the browser

Debugging tools simplify process

Available for all major browsers

Identify code that needs changing

HTML 5 and CSS 3 – Illustrated Complete 6

Using HTML and CSS

Debugging Tools (continued)

Inspecting a span element

HTML 5 and CSS 3 – Illustrated Complete 7

Planning Usability Tests

Most important judgment for usability

is the site’s users themselves

Important to:

Collect feedback from likely users

Identify questions you want all testers to

answer

Create a script to use consistently

throughout the process

HTML 5 and CSS 3 – Illustrated Complete 8

Planning Usability Tests

(continued)

Completed usability testing plan

HTML 5 and CSS 3 – Illustrated Complete 9

Performing Browser Tests

HTML 5 and CSS 3 – Illustrated Complete 10

Helps ensure : Web pages are not published that display

obvious errors

Pages are not published that don’t work as

expected for some audience members

Majority of users are likely to be using

Windows

Important to ensure Windows system

access for testing

Performing Browser Tests

(continued)

Nonstandard box shadows on Rooms

page

HTML 5 and CSS 3 – Illustrated Complete 11

Measuring Performance and

Modeling Changes

HTML 5 and CSS 3 – Illustrated Complete 12

Optimizing load time

Improves experience of user

Helps avoid users becoming impatient with

site

Popular browsers include tolls for

measuring speed

Chrome and Safari

Extensions can be installed for Firefox

and IE9

Measuring Performance and

Modeling Changes (continued)

HTML 5 and CSS 3 – Illustrated Complete 13

Page loading data in Safari

Removing Unused Styles

HTML 5 and CSS 3 – Illustrated Complete 14

Orphaned styles: style rules based on

selectors that no longer apply to any

elements in the Web page

Removing orphaned styles:

Reduces amount of code to download

Shrinks download time

Makes it easier to work with for

developers for future site work

Removing Unused Styles

(continued)

HTML 5 and CSS 3 – Illustrated Complete 15

Minified CSS code

Tidying Your HTML

HTML 5 and CSS 3 – Illustrated Complete 16

Tidying code:

Standardizing indents and line breaks in

code

Ensuring code conforms to basic rules

Also known as code prettifying

Streamlines HTML code

CSS code can be prettified as well

Tidying Your HTML

(continued)

HTML 5 and CSS 3 – Illustrated Complete 17

Tidied code for rooms.html

Publishing with a Domain

Name

HTML 5 and CSS 3 – Illustrated Complete 18

Multi-step process involving services

by multiple entities

Requires three services

Registrar

• Registrars domain name

Web host

• Makes page available on the Web through

server farm or Web host

DNS host

• Accesses IP address through a DNS

Publishing with a Domain

Name (continued)

HTML 5 and CSS 3 – Illustrated Complete 19

Relationship between registrar, DNS

host, and Web host

Summary

Preparing to go live with a Web site

includes several testing processes and

finalizations

You can use HTML and CSS

debugging tools to aid you in testing

your Web site

It is important to plan and structure

your Web site logically using usability

tests

HTML 5 and CSS 3 – Illustrated Complete 20

Summary (continued)

Browser tests allow you to scrutinize

your site on a variety of browsers

Mobile-specific layouts can be created

Measuring performance and modeling

changes ensures adequate loadability

Removing unused styles cleans your

site up before publishing

HTML 5 and CSS 3 – Illustrated Complete 21

Summary (continued)

You may tidy your HTML by

standardizing your coding

Securing a domain name and using it

is a multi-step process

HTML 5 and CSS 3 – Illustrated Complete 22