Hong Kong Baptist University

Week 2 Web Design 18/01/2010

Dr. Tony Chun-Kuen WONG Coordinator ( ) y g j BBA(Hons) Information System Management Major BBA(Hons) Information Systems and e-Business Management Concentration Department of Finance and Decision Sciences School of Business

Hong Kong Baptist University

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

Hong Kong Baptist University

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 The W b h Th Web has outgrown the capabilities of HTML t th biliti f The need and the standards are handled by the World Wide Web Consortium (W3C) ( )

Hong Kong Baptist University

HTML as a Markup Language p g g

A markup language is a structured language that lets you identify common sections of a document such as headings, paragraphs, and li h d lists 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

Hong Kong Baptist University

FirstPage.htm (created by FrontPage 2003)
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=big5"> http equiv="Content Type" <title>What is HTML ?</title> </head> <body> <h1>What is HTML?</h1> <p>HTML is a markup language a structured language that lets you identify language, 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>

Hong Kong Baptist University

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

Hong Kong Baptist University
Chapter 1

The Need for Style Sheets

Style sheets let you separate display information from content Separating di l i f S ti display information l t you repurpose your content ti lets t t for multiple destinations

Hong Kong Baptist University

Hong Kong Baptist University

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

Hong Kong Baptist University

XHTML: The Future of HTML
XHTML (1.0 version, 2002) is a reformulation of HTML 4.01 (1999) i XML in Brings data-handling benefits of XML to HTML Style sheets are required Stricter syntax rules

Hong Kong Baptist University

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> <line> He <li > H makes me li d k lie down i green pastures, h l d me b id quiet waters, </li > in t he leads beside i t t </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> p p presence of my enemies. You anoint my head with oil; my y y ; y <line>You prepare a table before me in the p 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>

Hong Kong Baptist University

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

Hong Kong Baptist University

How Browsers Affect Your Work

One of the greatest challenges facing HTML authors is g g g designing pages that display properly in multiple browsers Every b E browser contains a program called a parser th t t i ll d that interprets the markup tags in an HTML file and displays the results in the canvas area of the browser interface

Hong Kong Baptist University

Hong Kong Baptist University

Solving the Browser Dilemma
To ensure the greatest compatibilities of your web pages across p , guidelines multiple browsers, follow these g
Follow w3C standards Validate your code Know your audience Test your work in multiple browsers

Hong Kong Baptist University

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) 800 x 600 (old), (old), 1024 x 768 current User screen resolution is a factor over which you have no control

Hong Kong Baptist University

Fixed Resolution Design

As the screen resolution changes, the content remains aligned to the left side of the page

Hong Kong Baptist University

Hong Kong Baptist University

Hong Kong Baptist University

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

Hong Kong Baptist University

Hong Kong Baptist University

Hong Kong Baptist University

Bandwidth Concerns
It will still be awhile before most computer users have fast access to the Web 21% of American households have access through regular g g telephone line Hong K H Kong ( (more than 78.6% using b ddb d > 1 5M) almost th 78 6% i broaddband, 1.5M), l t every household can use broadband to access internet

Hong Kong Baptist University

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 p g page to load The size and number of graphics on your Web pages influence the th speed at which your pages di l d t hi h display

Hong Kong Baptist University

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/

Hong Kong Baptist University

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

Hong Kong Baptist University

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

Hong Kong Baptist University

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

Hong Kong Baptist University

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

Hong Kong Baptist University

Hong Kong Baptist University

Hong Kong Baptist University

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

Hong Kong Baptist University

Hong Kong Baptist University

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

Hong Kong Baptist University

Hong Kong Baptist University

Hong Kong Baptist University

Create Smooth Transitions
Plan to create a unified look Reinforce the identifying elements Avoid A id random, j i changes i f d jarring h in format t

Hong Kong Baptist University

Hong Kong Baptist University

Hong Kong Baptist University

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

Hong Kong Baptist University

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

Hong Kong Baptist University

Hong Kong Baptist University

Hong Kong Baptist University

Hong Kong Baptist University

Hong Kong Baptist University

Hong Kong Baptist University

Hong Kong Baptist University

Hong Kong Baptist University

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

Hong Kong Baptist University

Hong Kong Baptist University

Hong Kong Baptist University

Hong Kong Baptist University

Hong Kong Baptist University

Hong Kong Baptist University

Hong Kong Baptist University

Hong Kong Baptist University

Hong Kong Baptist University

Hong Kong Baptist University

Hong Kong Baptist University

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/)

Hong Kong Baptist University

Hong Kong Baptist University

Hong Kong Baptist University

Hong Kong Baptist University

Hong Kong Baptist University

Hong Kong Baptist University

Hong Kong Baptist University

Hong Kong Baptist University

Hong Kong Baptist University

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

Hong Kong Baptist University

Hong Kong Baptist University

Hong Kong Baptist University

Hong Kong Baptist University

Hong Kong Baptist University

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.

Hong Kong Baptist University

Summary

Design a unified look for your site. Create templates for your site 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 Provide enough linking. links for the user to create their own path through your information.

Hong Kong Baptist University

Summary

• •

Use the ALT attribute on all graphics Plan for users who graphics. 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