1. HTML5 and CSS3 Illustrated
Unit A:
Preparing to Create a Web Site

2. Objectives
Assemble a project plan
Create a storyboard
Implement Web accessibility
standards
Evaluate Web site usability
Manage Web browser compatibility
issues
HTML 5 and CSS 3 - Illustrated Complete 2

3. Objectives (continued)
Practice good file management
Configure your FTP client
Upload Web site files
HTML 5 and CSS 3 - Illustrated Complete 3

4. Assembling a Project Plan
Project plan: document that identifies
aspects of the project
Identify goals and objectives of the
project
 Ask questions to find out customer’s
expectations and goals
HTML 5 and CSS 3 - Illustrated Complete 4

5. Assembling a Project Plan
(continued)
Identify the target audience
 User information: age range, gender
 Technical information: OS, screen
resolution
 User’s needs: reason for visiting Web
site
Identify the type of Web site
 Determine main function of the Web site
 Identify what the Web site should and
should not include
HTML 5 and CSS 3 - Illustrated Complete 5

6. Assembling a Project Plan
(continued)
Develop a budget
 Budget should be included in the project
plan
Create a timeline
 Define timeline for completion of the
project and completion of major
milestones along the way
 Identify who is responsible for each task
in the timeline
HTML 5 and CSS 3 - Illustrated Complete 6

7. Creating a Storyboard
Storyboard: sketch that outlines Web
page components and links between
Web pages
Identify components to include
 Use project plan as basic list
 Add essential design elements suitable
for Web site functionality and target
audience
HTML 5 and CSS 3 - Illustrated Complete 7

8. Creating a Storyboard
(continued)
Sketch layout
 Place Web page elements in a functional
and usable layout
 Progressive design – select one of
multiple layouts or fine tune a theme
 Simple Web sites – a single layout
 Complex Web sites – multiple layouts
suitable for specific pages
HTML 5 and CSS 3 - Illustrated Complete 8

9. Creating a Storyboard
(continued)
Sketch for a main Web page
HTML 5 and CSS 3 - Illustrated Complete 9

10. Creating a Storyboard
(continued)
Map relationship between Web pages
 Crucial when creating navigation system
for the Web site
 Include links between pages in the Web
site as well as external links
HTML 5 and CSS 3 - Illustrated Complete 10

11. Creating a Storyboard
(continued)
Relationship sketch
HTML 5 and CSS 3 - Illustrated Complete 11

12. Implementing Web
Accessibility Standards
User Agents: programs and devices
that interpret Web documents
 Different users use different user agents
to access the Web
Implementing Web accessibility
standards makes a Web page
adaptable to capabilities of different
user agents
HTML 5 and CSS 3 - Illustrated Complete 12

13. Implementing Web Accessibility
Standards (continued)
Web sites should strive to meet
accessibility goals:
 Perceivable: contents of Web page
should be accessible in whatever format
a user is accessing it
 Operable:
• Allows interfacing with the Web page in
different ways
• Allows users to view Web page at their own
pace
• Clearly indicated navigation system
HTML 5 and CSS 3 - Illustrated Complete 13

14. Implementing Web Accessibility
Standards (continued)
Web sites should strive to meet
accessibility goals (continued):
 Understandable:
• Language in which page is written is clearly
indicated, explain specialized vocabulary
• No unexpected changes to the way pages
are displayed when following links
• Forms should identify user errors and allow
users to correct them
 Robust: coded according to Web
standards
HTML 5 and CSS 3 - Illustrated Complete 14

15. Implementing Web Accessibility
Standards (continued)
Web page before and after
accessibility redesign
HTML 5 and CSS 3 - Illustrated Complete 15

16. Evaluating Web Site Usability
Usability: Web site’s ease of use
 Varies between Web sites, even ones
relating to similar topics or actions
 Important in making sure users return to
site
 Designing usable site is easier than
changing existing site to be more usable
HTML 5 and CSS 3 - Illustrated Complete 16

17. Evaluating Web Site
Usability (continued)
Usable Web sites share the following
attributes:
 Consistent and cohesive
• All pages are visually similar
• Page elements appear consistent
• Use elements that are standard in other Web
sites
 Navigable
• Clear how to accomplish desired task
• Page includes links that clearly indicate how
to move to other areas of the Web site
HTML 5 and CSS 3 - Illustrated Complete 17

18. Evaluating Web Site
Usability (continued)
Usable Web sites share the following
attributes (continued):
 Understandable
• Simple and straightforward text
• Avoid technical jargon when not suitable to
target audience
• Limit design to necessary elements – do not
overload the page
HTML 5 and CSS 3 - Illustrated Complete 18

19. Managing Web Browser
Compatibility Issues
Use of different browsers, devices and
browser versions can affect the way a
Web page is displayed
Web designer can take steps to
ensure Web site looks as close as
possible to the original design
 Practice good coding habits
 Test Web site with different user agents
 Validate HTML and CSS code
HTML 5 and CSS 3 - Illustrated Complete 19

20. Practicing Good File
Management
Keep all files for a Web site in a
common location
 As Web site and number of files grows,
keep them organized
Local Root Folder: main directory
where you save files for your Web site
 To avoid errors, use this folder only for
files ready to be published
HTML 5 and CSS 3 - Illustrated Complete 20

21. Configuring Your FTP Client
Files are stored in a Web server to be
accessible on the Web
File Transport Protocol (FTP)
 Method for transferring files between two
networked computers
FTP client: dedicated FTP program
Configure FTP client by providing
connection name, FTP address,
username, and password
HTML 5 and CSS 3 - Illustrated Complete 21

22. Uploading Web Site Files
Files for Web site are uploaded to
Web server once FTP client is
configured
Using FTP client, local directory tree is
on left hand side and remote directory
tree is on right hand side
Through the FTP client, you can make
changes to remote directory tree just
like you would to local directory tree
HTML 5 and CSS 3 - Illustrated Complete 22

23. Summary
Prior planning is a crucial component
in designing a good Web site
When planning a Web site, the
designer must consider the uses of
the site and the target audience
When planning a Web site, steps can
be taken to make the site more
accessible, more usable, and
functional using different user agents
HTML 5 and CSS 3 - Illustrated Complete 23

24. Summary (continued)
Web documents are developed in a
local computer and are transferred to
a Web server for publication
Proper file management is key in
preventing erroneous publication of
Web pages
Documents can be transferred from
the local computer to the Web server
using FTP and FTP clients
HTML 5 and CSS 3 - Illustrated Complete 24