Variables in The Web Design Environment

Hong Kong Baptist University
Week 2
Web Design
18/01/2010
Dr. Tony Chun-Kuen WONG

Coordinator
(
BBA(Hons) ) Information System
y Management
g Major
j
BBA(Hons) Information Systems and e-Business Management Concentration
Department of Finance and Decision Sciences
School of Business
Variables in the Web Design Environment
Objectives
Describe the current state of HTML
Transition from HTML to XHTML
Use good coding practices
Describe browser compatibility issues
Design for connection speed differences
Code for multiple screen resolutions
Address operating system issues
HTML: Then and Now
HTML (1989) is an application of the Standard Generalized

Markup Language
Intended to represent simple document structure
Uses hypertext to link related topics
Designed for use over the Internet
Th Web
The W b has
h outgrown
t the
th capabilities
biliti off HTML
The need and the standards are handled by the World Wide
Web Consortium (W3C)
( )
HTML as a Markup
p Language
g g
A markup language is a structured language that lets you

identify common sections of a document such as headings,
paragraphs,
h and d lilists
An HTML file includes text and HTML markup elements
The browser interprets the HTML markup elements and displays
the results, hiding the actual markup tags from the user
FirstPage.htm (created by FrontPage 2003)
<html>
<head>
<meta http-equiv="Content-Type"
http equiv="Content Type" content="text/html; charset=big5">
<title>What is HTML ?</title>
</head>
<body>
<h1>What is HTML?</h1>
<p>HTML is a markup language
language, a structured language that lets you identify
common sections of a document such as headings, paragraphs, and lists. An
HTML file includes text and HTML markup (or element) tags that identify
these sections. The HTML markup tags indicate how the document sections
appear in a browser.
browser
</p>
</body>
/html
</html>
HTML as a Markup Language
HTML is an open, non-proprietary, cross-platform compatible

language
HTML is not a What You See Is What You Get (WYSIWYG)
layout tool
HTML was intended only to express logical document structure,
not display characteristics and style
Chapter 1
The Need for Style Sheets
Style sheets let you separate display information from content

S
Separating
ti didisplay
l iinformation
f ti llets
t you repurpose your content
t t
for multiple destinations

Cascading Style Sheets

Cascading Style Sheets (CSS) is a powerful display language for HTML
CSS lets yyou state style
y rules in an external style
y sheet that is linked to
every page on a Web site
CSS lets you easily control the display characteristics of your Web site
N
Newer b
browsers offer
ff more complete
l t CSS supportt
Example
p
Html format
<font
font color
color=“blue”><h1
blue h1 align=“center”>Type
align center Type your Heading here</h1></font>
here /h1 /font
Using a CSS rule

h1 {color: blue; text
text-align:
align: center;}
XHTML: The Future of HTML
XHTML (1.0 version, 2002) is a reformulation of HTML 4.01

(1999) iin XML
Brings data-handling benefits of XML to HTML
Style sheets are required
Stricter syntax rules
XML: An Open Standard

XML is the Extensible Markup Language
XML is a meta-language (meta means about); not a language itself, but a language that lets you
describe other languages
XML describes data, not presentation
XML allows better access to data
XML lends itself to customized information
Example
<poem>
<title> Psalm 23 </title>
<stanza>
<line> The Lord is my shepherd, I shall not be in want .</line>
<li > He
<line> H makesk me lilie d
down iin green pastures,
t h
he lleads
d me b beside
id quiet
i t waters,
t </li >
</line>
<line> he restores my soul. He guides me in paths of righteousness for his name’s sake.</line>
<line> Even though I walk through the valley of the shadow of death, I will fear no veil, for you are with
me; your rod and your staff, they comfort me.</line>
<line>You pprepare
p a table before me in the ppresence of my y enemies. You anoint my y head with oil;; my
y
cup overflows /line>
<line>Surely goodness and love will follow me all the day of my life, and I will dwell in the house of the
LORD forever </line>
</stanza>
</poem>
XML Syntax Rules
Documents must be well-formed

Elements must nest symmetrically and correctly
XML is case-sensitive
End tags are required
Empty elements are signified by a closing slash
Attribute values must be quoted
How Browsers Affect Your Work
One of the g
greatest challenges
g facing g HTML authors is
designing pages that display properly in multiple browsers
Every b
E browser contains
t i a program called
ll d a parser that
th t
interprets the markup tags in an HTML file and displays the
results in the canvas area of the browser interface

Solving the Browser Dilemma
To ensure the greatest compatibilities of your web pages across

p browsers,, follow these g
multiple guidelines
Follow w3C standards

Validate your code
Know your audience
Test your work in multiple browsers
Coding for Multiple Resolutions

A computer monitor’s screen resolution is the horizontal and
vertical width and height of the computer screen in pixels
The two most common screen resolutions (traditionally

expressed as width x height) are 640 x 480 (old)
(old), 800 x 600
(old), 1024 x 768 current
User screen resolution is a factor over which you have no

control
Fixed Resolution Design
As the screen resolution changes, the content remains aligned

to the left side of the page

Flexible Resolution Design
As the screen resolution changes, the content expands to

accommodate the varying screen width

Bandwidth Concerns
It will still be awhile before most computer users have fast access to
the Web
21% of American households have access through

g regular
g
telephone line
Hong K
H Kong (more
( than
th 78.6%
78 6% using
i b broaddband,
ddb d > 1 1.5M),
5M) almost
l t
every household can use broadband to access internet
Bandwidth Concerns
If your pages download slowly, your users will probably click to
go to another site before they see your content
Most users will simply not wait longer than 20 seconds for a
page
p g to load
The size and number of graphics on your Web pages influence

th speed
the d att which
hi h your pages di
display
l
Testing for Download Times

Test your site at different connection speeds
Test your site as if you were a user visiting for the first time. This
is when users experience the greatest download times.
Clear your cache of the files and images that the browser has
stored
Example : http://www.speakeasy.net/speedtest/
Working with the Cache

The cache is the temporary storage area for Web pages and
images
The browser always tries to load images and files from the
cache
Make use of the cache by reusing images as much as possible

Web Site Design Principles
Objectives
Design
g for the computer
p medium
Create a unified site design
Design
g for the user
Design for the screen
Design for the computer medium

Craft the look and feel
Make your design portable
D i ffor low
Design l b
bandwidth
d idth
Plan for clear presentation and easy access to your
information
Make Your Design Portable

Your Web site design must be portable and accessible across
different browsers (IE, Firefox, Opera, Chime, Safari), operating
systems, and computer platforms
You must always remember to test your work even when you
feel confident of your results

Design for Low Bandwidth

Plan your pages so that they are accessible at a variety of
connection speeds
If your pages download slowly because they contain large,
detailed graphics or complicated animations, your users will
leave before they ever see your content
Design the Unified Site Design

Plan the unifying themes and structures
Create smooth transitions
U a grid
Use id to
t provide
id visual
i l structure
t t
Use active white space

Create Smooth Transitions

Plan to create a unified look
Reinforce the identifying elements
A id random,
Avoid d jjarring
i changes
h i fformatt
in

Use a Grid to Provide Structure

The grid is a conceptual layout device that organizes content
into columns and rows
A grid provides visual consistency
HTML authors use the table elements to build the grid for their
pages
CSS will eventually replace tables for layout
Use Active White Space

Use white space deliberately in your design
Good use of white space guides the reader and defines the
areas of your page
Active white space is an integral part of your design that

structures and separates content




Design for the User

Keep your design efforts centered solely around your
user
Design for interaction
Design for location
Guide the user
user’ss eye
Decide whether the user will read or scan





Design for the User (continue)

Keep a flat hierarchy
Provide plenty of linking options
Provide location information
Use plenty of textual links
Don’t overload the user with too much content
Design for accessibility (www.iproa.org/webcare/),
(www.w3.org/wai/)




Design for the Screen

The computer display is very different from print
print-
based media
The display is landscape-oriented
landscape oriented
Colors and contrasts are different
Computer displays are low-resolution
low resolution devices ?
Reformat paper documents for online display


Summary
• Craft a look and feel and stick with it throughout your site.
Revise and test your interface by paying close attention to
the demands of online display
display.
• Make your design portable, using as low a bandwidth as
possible ?
• Plan for easy access to your information. Don’t let the user
click through more than two or three pages before they get
what they want.
Summary
• Design a unified look for your site.
site Create templates for your
grid structure and apply them consistently.
• Use white space actively as an integral part of your design.
Use text, color, and object placement to guide the user’s
eye.
• Leverage the power of hypertext linking
linking. Provide enough
links for the user to create their own path through your
information.
Summary
• Use the ALT attribute on all graphics
graphics. Plan for users who
can’t or won’t download graphics.
• Design your text for online display
• Know your audience and design pages that suit their needs,
interests, and viewing preferences

Variables in The Web Design Environment

Încărcat de

Informații document

Descriere originală:

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Variables in The Web Design Environment

Încărcat de

Drepturi de autor:

Formate disponibile

Hong Kong Baptist University

Dr. Tony Chun-Kuen WONG

Hong Kong Baptist University