Upload
anonymous-zkralwo
View
216
Download
0
Embed Size (px)
DESCRIPTION
sad
Citation preview
XPXPXPXPXP
Chapter 2
Developing a Basic Web Site
XPXPXPXPXPObjectives
• Learn how to storyboard various Web site structures• Create links among documents in a Web site• Understand relative and absolute folder paths• Mark a location with the id attribute• Create a link to an id
New Perspectives on HTML and XHTML, Comprehensive 2
XPXPXPXPXPObjectives
• Understand URLs• Link to a site on the Web• Link to an FTP site• Link to an e-mail address• Work with hypertext attributes• Work with metadata• Introduction to Web Usability Design• Create effective link
New Perspectives on HTML and XHTML, Comprehensive 3
XPXPXPXPXP2.1 Web Page Structures
• A storyboard is a diagram of a Web site’s structure, showing all the pages in the site and indicating how they are linked together
• It is important to storyboard your Web site before you start creating your pages in order to determine which structure works best for the type of information the site contains
• A well-designed structure can ensure that users will be able to navigate the site without getting lost or missing important information
New Perspectives on HTML and XHTML, Comprehensive 4
XPXPXPXPXP2.1.1 Linear Structures
• In a linear structure, each page is linked with the pages that follow and precede it in an ordered chain
• Linear structure works best for Web pages with a clearly defined order
• In an augmented linear structure, each page contains an additional link back to an opening page
New Perspectives on HTML and XHTML, Comprehensive 5
XPXPXPXPXP2.1.1 Linear Structures
New Perspectives on HTML and XHTML, Comprehensive 6
A linear structure
An augmented linear structure
XPXPXPXPXP2.1.2 Hierarchical Structures
• In the hierarchical structure, the pages are linked going from the home page down to more specific pages
• Users can easily move from general to specific and back again
• Within this structure, a user can move quickly to a specific scene within the page, bypassing the need to move through each scene in the play
New Perspectives on HTML and XHTML, Comprehensive 7
XPXPXPXPXP2.1.2 Hierarchical Structures
New Perspectives on HTML and XHTML, Comprehensive 8
XPXPXPXPXP2.1.3 Mixed Structures
• As Web sites become larger and more complex, you often need to use a combination of several different structures
• The overall form can be hierarchical, allowing the user to move from general to specific; however, the links also allow users to move through the site in a linear fashion
• A site index is a page containing an outline of the entire site and its contents
New Perspectives on HTML and XHTML, Comprehensive 9
XPXPXPXPXP2.1.3 Mixed Structures
New Perspectives on HTML and XHTML, Comprehensive 10
XPXPXPXPXPWeb Site with No Coherent Structure
• Unstructured web site can be difficult and frustrating to use
New Perspectives on HTML and XHTML, Comprehensive 11
XPXPXPXPXP2.1.4 Protected Structures
• Sections of most commercial Web sites are off-limits except to subscribers and registered customers
New Perspectives on HTML and XHTML, Comprehensive 12
XPXPXPXPXP2.2 Working with Links
A web page contains hypertext links or items that you could select to view another topic and document.
This often called the link’s destination. Link can point to:
Another section in the same document Different document A different Web page A variety of other Web objects
XPXPXPXPXP2.3 Creating a Hypertext Link
New Perspectives on HTML and XHTML, Comprehensive 14
XPXPXPXPXP2.3.1 Linking to a Document
• To link to a page, you specify the name of the file using the href attribute of the <a> tag
• Filenames are case sensitive on some operating systems, including the UNIX and Macintosh, but not on others
• The current standard is to use lowercase filenames for all files on a Website and to avoid special characters such as blanks and slashes
• You should also keep filenames short to avoid typing errors
New Perspectives on HTML and XHTML, Comprehensive 15
XPXPXPXPXP2.3.1 Linking to a Document
New Perspectives on HTML and XHTML, Comprehensive 16
Hands-on Trying 1: hometxt.htm ,glossary.htm, tipstxt.htm (open them with Expression Web)
Hands-on Trying 1: hometxt.htm ,glossary.htm, tipstxt.htm (open them with Expression Web)
XPXPXPXPXP2.4 Specifying a Folder Path (Linking to Documents in Others Folders)
New Perspectives on HTML and XHTML, Comprehensive 17
•To create a link to a file located in a different folder than the current document, you must specify the file’s location, or path
XPXPXPXPXP2.4.1 Absolute Pathnames
• An absolute path specifies a file’s precise location within a computer’s entire folder structure
New Perspectives on HTML and XHTML, Comprehensive 18
XPXPXPXPXP• A sample folder tree / absolute path: Figure 2.7
An absolute path specifies a file’s precise location within a computer’s entire folder structure
XPXPXPXPXP2.4.2 Relative Pathnames
• A relative path specifies a file’s location in relation to the location of the current document
New Perspectives on HTML and XHTML, Comprehensive 20
XPXPXPXPXP• A sample folder tree / relative path: Current document is in tips folder
•If the file is in the same location as the current document, you do not have to specify the folder name•If the file is in a subfolder of the current document, you have to include the name of the subfolder.•If you want to go one level up the folder tree, you start the relative path with a double period (..) and then provide the name of the file.•To specify a different folder on the same level, known as a sibling folder, you move up the folder tree using the double period (..) and then down the tree using the name of the sibling folder.
XPXPXPXPXP2.4.3 Changing the Base
• The base element is useful when a document is moved to a new folder. Rather than rewriting all of the relative paths to reflect the document’s new location, the base element can redirect browsers to the document’s old location, allowing any relative paths to be resolved
• The base element is useful when you want to create a copy of a single page from a large Web site on another Web server
New Perspectives on HTML and XHTML, Comprehensive 22
XPXPXPXPXP2.5 Link to Locations Within Documents
• Link to locations within same document• Link to locations within different documents
New Perspectives on HTML and XHTML, Comprehensive 23
XPXPXPXPXP2.5.1 Link to Locations Within Same Document
A) Mark that location• To jump to a specific location within a document, you
first need to mark that location• One way to identify elements in an HTML document
is to use the id attribute• Id names must be unique• Id names are not case sensitive <h2 id ="A">A</h2>
Or <h2><a name="A">A</a></h2> (old code)
New Perspectives on HTML and XHTML, Comprehensive 24
XPXPXPXPXP<h2><a name=“A”>A</a></h2> (old code)Hands-on Trying 2a: open glossary.htm , mark the location (link’s destination)Hands-on Trying 2a: open glossary.htm , mark the location (link’s destination)
XPXPXPXPXP
B) create a link • To create a link within a document, you enclose the
content that you want to format as a link in an <a> tag, and use the href attribute to identify the link target
• A link’s content is not limited to text• Generally, a link should not contain any block-level
elements <a href="#A">A</a>
New Perspectives on HTML and XHTML, Comprehensive 26
Hands-on Trying 2b: Open glossary.htm , create links within a documentHands-on Trying 2b: Open glossary.htm , create links within a document
XPXPXPXPXP2.5.2 Link to Locations Within Different Documents
• To create a link to a specific location in another file, enter the code<a href="reference#id">content</a>
where reference is a reference to an HTML or XHTML file and id is the id of an element marked within that file
New Perspectives on HTML and XHTML, Comprehensive 27
Hands-on Trying 3a: Open glossary.htm , mark the location
<dt id="aperture"><b>Aperture</b></dt>:
<dt id="exposure"><b>Exposure</b></dt>:
<dt id="f-stop"><b>F-stop</b></dt>:
<dt id="flash_mode"><b>Flash Mode</b></dt>:
<dt id="focal_length"><b>Focal Length</b></dt>:
Hands-on Trying 3a: Open glossary.htm , mark the location
<dt id="aperture"><b>Aperture</b></dt>:
<dt id="exposure"><b>Exposure</b></dt>:
<dt id="f-stop"><b>F-stop</b></dt>:
<dt id="flash_mode"><b>Flash Mode</b></dt>:
<dt id="focal_length"><b>Focal Length</b></dt>:
XPXPXPXPXP
New Perspectives on HTML and XHTML, Comprehensive 28
Hands-on Trying 3b: Open glossary.htm , mark the locationopen home.htm , create links to specific locations in another file,
Hands-on Trying 3b: Open glossary.htm , mark the locationopen home.htm , create links to specific locations in another file,
XPXPXPXPXP2.6 Working with Linked Images and Image Maps• A standard practice on the Web is to turn the Web
site’s logo into a hypertext link pointing to the home page
• To mark an inline images as a hypertext link <a href="reference"><img src="file“ alt="text" /></a>
Demo 1
New Perspectives on HTML and XHTML, Comprehensive 29
XPXPXPXPXP2.6.1 Introducing Image Maps
• HTML also allows you to divide an image into different zones, or hotspots, each linked to a different destination
• A hotspot is a defined area of the image that acts as a hypertext link. When a user clicks within a hotspot, the hyperlink is activated.
• There are two types of image maps: server-side image maps and client-side image maps.
New Perspectives on HTML and XHTML, Comprehensive 30
XPXPXPXPXP
New Perspectives on HTML and XHTML, Comprehensive 31
XPXPXPXPXP2.6.2 Client-Side Image Maps
• A client-side image map is inserted in an image map into the HTML file
• The browser locally processes the image map• Because all of the processing is done locally, you can
easily test Web pages• More responsive than server-side maps• The browser’s status bar displays the target of each
hotspot. • Older browsers do not support client-side images
New Perspectives on HTML and XHTML, Comprehensive 32
XPXPXPXPXP
• To define these hotspots, you create an image map that matches a specified region of the inline image to a specific destination.
• Use the syntax of the map element to create a client –side image map
<map name=“map” id=“map”>hotspots
</map>• map is the name of the map and hotspots are the
locations of the hotspots within map.
New Perspectives on HTML and XHTML, Comprehensive 33
XPXPXPXPXP2.6.3 Defining Hotspots
• Define a hotspot using two properties:
– Its location in the image– Its shape
• Syntax of the hotspot element:<area shape=“shape” coords=“coordinates”
href=“url” alt=“text” />
New Perspectives on HTML and XHTML, Comprehensive 34
XPXPXPXPXP
Creating a Rectangular Hotspot• Two points define a rectangular hotspot:
– the upper-left corner– the lower-right corner
• A sample code for a rectangular hotspot is:<area shape="rect" coords="168, 110, 225, 145" href="tips.htm" alt="Tips" />– Coordinates are entered as a series of four numbers separated by
commas– HTML expects that the first two numbers represent the coordinates for
the upper-left corner of the rectangle, and the second two numbers indicate the location of the lower-right corner
– The hotspot is a hypertext link to tips.htm
New Perspectives on HTML and XHTML, Comprehensive 35
XPXPXPXPXP
Creating a Circular Hotspot• A circular hotspot is defined by the location of its
center and its radius• A sample code for a circular hotspot is:
<area shape="circle" coords="82, 78, 80"
href="home.htm" alt="Home" />
– Coordinates are (82, 78), and it has a radius of 80 pixels– The hotspot is a hypertext link to karts.htm
New Perspectives on HTML and XHTML, Comprehensive 36
XPXPXPXPXP
Creating a Polygonal Hotspot• To create a polygonal hotspot, you enter the
coordinates for each vertex in the shape• A sample code for a polygonal hotspot is:
<area shape=“polygon” coords=“13,60,13,270,370,270,370,225,230,225, 230,60” href=“rides.htm”>
– Coordinates are for each vertex in the shape– The hotspot is a hypertext link to rides.htm
New Perspectives on HTML and XHTML, Comprehensive 37
XPXPXPXPXP
Creating a Default Hotspot• <area shape="default" coords="0, 0, x, y" … />
where x is the width of the inline image in pixels and y is the image’s height
• Any spot that is not covered by another hotspot will activate the default hotspot link
<area href="pearlake.jpg" shape="default" coords="2, 5, 777, 163">
New Perspectives on HTML and XHTML, Comprehensive 38
XPXPXPXPXP2.6.4 Applying an Image Map
New Perspectives on HTML and XHTML, Comprehensive 39
Hands-on Trying 4: open home.htm , create image map and hotspots , applying an image map
Hands-on Trying 4: open home.htm , create image map and hotspots , applying an image map
XPXPXPXPXP2.6.5 Server-Side Image Maps
• In a server-side image map, the image map is stored on the Web server
• Server-side image maps are supported by most graphical browsers
• Server-side image maps can be slow to operate• The browser’s status bar does not display the target
of each hotspot
New Perspectives on HTML and XHTML, Comprehensive 40
XPXPXPXPXP2.7 Linking to Resources on the Internet
• To create a link to a resource on the Internet, you need to know its URL
• A Uniform Resource Locator (URL) specifies the precise location of a resource on the Internet
• A protocol is a set of rules defining how information is exchanged between two resources
New Perspectives on HTML and XHTML, Comprehensive 41
XPXPXPXPXP
• Your Web browser communicates with Web servers using the Hypertext Transfer Protocol (HTTP)
• The URLs for all Web pages must start with the scheme “http”
• Other Internet resources use different protocols and have different scheme names
New Perspectives on HTML and XHTML, Comprehensive 42
XPXPXPXPXP
New Perspectives on HTML and XHTML, Comprehensive 43
XPXPXPXPXP2.7.1 Linking to a Web Site
New Perspectives on HTML and XHTML, Comprehensive 44
A sample URL for a Web page
XPXPXPXPXP
• If a URL includes no path, then it indicates the topmost folder in the server’s directory tree
• If a URL does not specify a filename, the server searches for the default home page
• The server name portion of the URL is also called the domain name
• The top level, called an extension, indicates the general audience supported by the Web server<a href="http://www.apogeephoto.com">Apogee Photo</a>
New Perspectives on HTML and XHTML, Comprehensive 45
XPXPXPXPXP
New Perspectives on HTML and XHTML, Comprehensive 46
Hands-on Trying 5: open tips.htm , create links to Web sitesHands-on Trying 5: open tips.htm , create links to Web sites
XPXPXPXPXP2.7.2 Linking to FTP Servers
• FTP servers are another method of storing and sharing files on the Internet
• FTP servers transfer information using a communications protocol called File Transfer Protocol, or FTP for short
• An FTP server requires each user to enter a password and a username to access its files
New Perspectives on HTML and XHTML, Comprehensive 47
XPXPXPXPXP2.7.3 Linking to FTP Servers
New Perspectives on HTML and XHTML, Comprehensive 48
XPXPXPXPXP2.7.4 Linking to an E-Mail Address• Many Web sites use e-mail to allow users to
communicate with a site’s owner, sales representative, or technical support staff
• You can turn an e-mail address into a hypertext link, so that when a user clicks on an address, the browser starts an e-mail program and automatically inserts the address into the “To” field of the new outgoing message
New Perspectives on HTML and XHTML, Comprehensive 49
XPXPXPXPXP
• The mailto protocol also allows you to add information to the e-mail, including the subject line and the text of the message– mailto:address?header1=value1&header2=value2& ...
– mailto:ghayward@camshotscom?Subject=Test&Body=This%20is%20a%20test%20message
• To preserve information about blank spaces, URLs use escape characters– Demo2
New Perspectives on HTML and XHTML, Comprehensive 50
Hands-on Trying 6: open home.htm , create links to email address<a href="mailto:[email protected]?subject=CAMshots%20Message"> contact me</a>
Hands-on Trying 6: open home.htm , create links to email address<a href="mailto:[email protected]?subject=CAMshots%20Message"> contact me</a>
XPXPXPXPXP
New Perspectives on HTML and XHTML, Comprehensive 51
XPXPXPXPXP
• If you need to include an e-mail address in your Web page, you can take a few steps to reduce problems with spam:– Replace all e-mail addresses in your page with inline
images of those addresses– Write a program in a language JavaScript to scramble any
e-mail address in the HTML code– Replace the characters of the e-mail address with character
codes– Replace characters with words in your Web page’s text
New Perspectives on HTML and XHTML, Comprehensive 52
XPXPXPXPXP2.7.5 Working with Hypertext Attribute
New Perspectives on HTML and XHTML, Comprehensive 53
• HTML provides several attributes to control the behavior and appearance of your links
• You can force a document to appear in a secondary window or tab by adding the target attribute to the tag <a> tag
XPXPXPXPXP
New Perspectives on HTML and XHTML, Comprehensive 54
Hands-on Trying 7: open tips.htm , specify a link target.<dt>☞ <a href="http://www.apogeephoto.com" target="new">Apogee Photo</a></dt>
Hands-on Trying 7: open tips.htm , specify a link target.<dt>☞ <a href="http://www.apogeephoto.com" target="new">Apogee Photo</a></dt>
XPXPXPXPXP
• If you want to provide additional information to your users, you can provide a tooltip to your links
• A tooltip is a descriptive text that appears whenever a user positions the mouse pointer over a link
New Perspectives on HTML and XHTML, Comprehensive 55
XPXPXPXPXP
New Perspectives on HTML and XHTML, Comprehensive 56
Hands-on Trying 8: open home.htm , create tooltip<a href="gloss.htm" title="Study photo terminology in the CAMshots glossary"> [ Glossary ]</a>
Hands-on Trying 8: open home.htm , create tooltip<a href="gloss.htm" title="Study photo terminology in the CAMshots glossary"> [ Glossary ]</a>
XPXPXPXPXP2.8 Using the Link Element• Another way to add a link to your document is to add a link element to
the document’s head• Link elements are intended only for the browser’s use• Link elements have primarily been used to link style sheets• Because no single list of relationship names is widely accepted, you
must check with each browser’s documentation to find out what relationship names it supports
<link rel=“top" href="home.htm"> <link rel="help" href="tips.htm"><link rel="glossary" href="gloss.htm">
New Perspectives on HTML and XHTML, Comprehensive 57
XPXPXPXPXP
XPXPXPXPXP2.9 Working with Metadata
• Web authors often turn to companies that specialize in making sites appear more prominently in search engines
• Information about the site is called metadata• Add metadata to your Web pages by adding a meta
element to the head section of the document
New Perspectives on HTML and XHTML, Comprehensive 59
<meta name="text" content="text" scheme="text" http-equiv="text" />
XPXPXPXPXP
• In recent years, search engines have become more sophisticated in evaluating Web sites– The meta element has decreased in importance, but it is
still used by search engines when adding a site to their indexes
New Perspectives on HTML and XHTML, Comprehensive 60
XPXPXPXPXP
New Perspectives on HTML and XHTML, Comprehensive 61
XPXPXPXPXP
• You can add commands to this communication stream between the Web server and Web browser with the meta element’s http-equiv attribute– Force the Web browser to refresh the Web page at timed intervals<meta http-equiv="refresh" content="60" />
– Redirect the browser from the current document to a new document<meta http-equiv="refresh" content="5;url=www.camshots.com" />
– Specify the character set<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
New Perspectives on HTML and XHTML, Comprehensive 62
XPXPXPXPXP
Hands-on Trying 8: open home.htm , create metadata<meta name="author" content="your name" http-equiv="refresh" content="60" /><meta name="description" content="A site for sharing information on digital photography and cameras" /><meta name="keywords" content="photography, cameras, digital imaging" />
Hands-on Trying 8: open home.htm , create metadata<meta name="author" content="your name" http-equiv="refresh" content="60" /><meta name="description" content="A site for sharing information on digital photography and cameras" /><meta name="keywords" content="photography, cameras, digital imaging" />
XPXPXPXPXP2.10 Creating Effective Links• Storyboarding• Easy navigation with link to home page and a page containing site
index• Avoid using “Click here” in links• Never place 2 links adjacent to one another. Separate them with text,
spaces or symbol.• Use lowercase filenames for all document
XPXPXPXPXP
• Avoid long pages unless necessary. Break up a long page to different sections. Include links throughout the page that users can click to jump to the top of the page.
• Use anchor if internal document must link with older browsers
XPXPXPXPXP2.11 Phases of Planning and Designing Web
Phase1:Preparation (A)Research and idea generation • Main Goal:
1. Define the user. 2. Define information the users need and want. 3. Define presenter’s objective. 4. Define the potential information to be used: ideas, facts,
images, prices and so on.
New Perspectives on HTML and XHTML, Comprehensive 66
XPXPXPXPXP
• End product of idea generation are: – The definition of expected information content for each
group of users. – A statement of what the Web Presentation will do. – A list of information sources.
• Key Roles in idea generation: – They know the possible users. – Know the information that most likely wanted by users. – Know the availability of information to be put on site.
New Perspectives on HTML and XHTML, Comprehensive 67
XPXPXPXPXP
(B)Information decomposition and structuring • Question: What contribute to a well-organized site? AND How to achieve
it? • Answer: Task of the designer to perform information decomposition (Step
1) and structuring (Step 2). • Decomposition:
– It is the process of separating something into smaller parts or pieces. – Decomposition in Web Presentation Concepts: separate the
information identified during the research and idea generation into chunks information objects.
• Structuring: – Create an information object map to satisfy the presenters and the
users. – Designer’s Task.
New Perspectives on HTML and XHTML, Comprehensive 68
XPXPXPXPXP
Phase2: Design • Text analysis and composition
– Text Analysis: • The development of text statement that most clearly convey the
intended message of each information object.
– Text Composition: • All objects with complete text are rearranged, and regrouped to
achieve effectiveness, affectiveness and navigational efficiency.
New Perspectives on HTML and XHTML, Comprehensive 69
XPXPXPXPXP
• Linkage analysis and composition – Linkage Analysis:
• Define hyperlinks for information objects and are threaded to each other.
• Reevaluated to avoid affecting its original information content and misinterpretation.
– Linkage Composition: • Phrasing links and incorporates them. • Apply suitable color to links.
New Perspectives on HTML and XHTML, Comprehensive 70
XPXPXPXPXP
• Multimedia analysis and composition – Multimedia:
• Text, graphics, sound, animation, video, or other media combined into a single production or presentation.
– Multimedia Analysis: • Decide appropriate multimedia. • End product: a list of potential multimedia selections.
– Multimedia Composition: • Select, create, install, and integrate multimedia in the Web
presentation.
– End product of multimedia analysis and composition is a complete, up-to-date, multimedia web presentation.
New Perspectives on HTML and XHTML, Comprehensive 71
XPXPXPXPXP
Phase3: Maintenance and Continuous Improvement • Reasons for maintenance and continuous
improvement – Reasons:
• Information could be out-dated. • Visions changes when experience grows. • Competitions between competing organizations. • New technologies inventions.
• If no improvement over Web site’s look, technology, content and navigational techniques resulted losing a lot of users.
New Perspectives on HTML and XHTML, Comprehensive 72
XPXPXPXPXP2.11.1Key roles involved in supporting a site• Involves presenters, information stewards and designers. • Presenters:
– Direct & Funding. – Determine a Web strategy. – Decide the extent of electronic commerce on the Web.
• Information Stewards & Designers: – Same area of responsibility – Steward è Web content, monitor pages relating to the business
function for which they are responsible. – Designer è implementing changes recommended by presenters and
information stewards.
New Perspectives on HTML and XHTML, Comprehensive 73
XPXPXPXPXP
• New Key Role è Webmaster/operations manager: – Primary user contact and his email posted on the site. – Responsibility includes:
• Forwarding mail from users to appropriate parties. Example: customer service or sales.
• Evaluating technologies beneficial to the Web site. • Recommending upgrades to phone service, operating systems, hardware
and software as necessary.
New Perspectives on HTML and XHTML, Comprehensive 74
XPXPXPXPXP2.11.2 Strategies used for technology surveillance • Performed for the purpose of identifying news technologies to improve
Web presentation. • To determine whether or not using the new technology will improve the
existing system’s performance or better achieve the site’s overall objectives.
• It is the ongoing observation and evaluation of new technologies from the time they are announced until they are mature enough to be incorporated into a Web presentation.
• Surveillance includes: – Reading magazines. – Visiting E-zines (electronic magazines). – Attending trade show. – Talking with vendors. – Discussing developments with other people in other organizations.
New Perspectives on HTML and XHTML, Comprehensive 75
XPXPXPXPXP2.12 Introduction to Web Usability Design• Areas
–Page Design–Content Design –Site Design
XPXPXPXPXP2.12.1 Page Design• A careful, systematic approach to page design can
simplify navigation, reduce user errors, and make it easier for readers to take advantage of the information and features of the site.
• The spatial organization of graphics and text on the Web page can engage readers.
• With graphic impact, direct their attention and prioritize the information they see
XPXPXPXPXP
• Dense text documents are hard to read, particularly on the low-resolution screens.
• Without the visual impact of shape, color, and contrast, pages are uninteresting and will not motivate the viewer.
• Highly graphical pages risk disappointing the user by offering a poor balance of visual sensation, text information, and interactive hypermedia links.
XPXPXPXPXP2.12.2 Content Design• Be VERY concise – write 50% less text than you would on paper.• Write for SCANNABILITY – no long paragraphs, use subheads and bullet lists• Use HYPERTEXT LINKS to break up lengthy information across separate pages.• Readability research shows that:
– Reading from a computer screen is 25% slower than from paper.– Prolonged reading from a screen is unpleasant.– Tips:
• Write 50% less text than for a print publication.
XPXPXPXPXP
• Scannability shows that:
– 80% of web users don't read they scan for keywords, headings, bullets and links.
– Tips:
• Structure texts with 2/3 levels of headings.
• Use indentation to show structure & heading
• Use highlighting – italic, bold and colored text, but NOT underlining because of the confusion with links.
• Use bullet lists or numbered lists.
XPXPXPXPXP2.12.3 Site Design
• The design of the site will determine its organizational framework.
• The overall organization of the site will have the impact on the users’ experience.
• At this stage you will make the tactical design decisions about what your audience wants from you, what you wish to say, and how to arrange the content to best meet your audience's needs.
XPXPXPXPXP
• The fundamental organizing principle in Web site design is meeting users' needs.
• Many organizations and businesses make the mistake of using their Web sites primarily to describe their administrative organization, and only secondarily do they offer the services, products, and information the average user is seeking.
• Most readers won't care how your company or department is organized and will be put off if such inside information is all your site appears to offer.
XPXPXPXPXP
• Talk to the people who make up your target audience, put yourself in their shoes, and make the items and services they want the most prominent items on the home page.
• Web site's should have:– A user-centered design.– Straightforward architecture (logical relationships between pages).– Easy to understand, consistently c navigational controls.– Offer consistency of layout and textual and graphical style.
XPXPXPXPXP2.13 Issues in Web Page Design
Latency & Responsiveness • There is a factor of different users having different connection speeds. It can range
from a low-speed 56K modem connection to a high-speed broadband connection. • The single most important page design issue is download time. Page download and
rendering speed is a big factor in usability. • Rules of thumb:
– a 0.1 sec response time limit is needed for the user to feel in real time control. – a 1 sec response limit is needed if user's flow of thought is to remain uninterrupted. – There is a 10 sec limit for keeping user's attention focused on the dialogue. – Real world times will be 2 to 3 fold the optimal time.
• Tips: – Minimize the number of graphics. – Keep graphics small. Crop them if possible. – Reduce the color depth or increase compression. – Use tables with colored backgrounds to structure pages. – Warn users if a link goes to a page bigger than 50K.
New Perspectives on HTML and XHTML, Comprehensive 84
XPXPXPXPXP
Media file size • Perhaps the most powerful aspect of computing technology is the ability to
combine text, graphics, sounds, and moving images in meaningful ways. • The promise of multimedia has been slow to reach the Web because of bandwidth
limitations, but each day brings new solutions. Although there are numerous methods for creating Web multimedia, we recommend using stable technology that works for the great majority of client machines.
• Multimedia places high demands on the network, the computer, and the user. The challenge thus lies in preparing files that are small enough to be accessible to the broadest possible audience yet are of sufficient quality to be worth the effort.
• To balance quality against accessibility you'll need to understand both the characteristics of different media formats and the limitations of delivering media in a networked environment, and you must be ready to compromise.
New Perspectives on HTML and XHTML, Comprehensive 85
XPXPXPXPXP
Resolution • Although Web pages and conventional print documents share many
graphic, functional, and editorial similarities, the computer screen, not the printed page, is the primary delivery site for Web-based information, and the computer screen is very different from the printed page.
• Computer screens are typically smaller than most opened books or magazines.
• A common mistake in Web design is spreading the width of page graphics beyond the area most viewers can see on their seventeen- or nineteen-inch display screens:
New Perspectives on HTML and XHTML, Comprehensive 86
XPXPXPXPXP
Graphic safe areas • The "safe area" for Web page graphics is determined by two factors: the minimum screen
size in common use and the width of paper used to print Web pages. • Most display screens used in academia and business are seventeen to nineteen inches
(forty-three to forty-eight centimeters) in size, and most are set to display an 800 x 600-pixel screen.
• Web page graphics that exceed the width dimension of the most common display screens look amateurish and will inconvenience many readers by forcing them to scroll both horizontally and vertically to see the full page layout. It's bad enough to have to scroll in one (vertical) direction; having to scroll in two directions is intolerable.
• The graphic safe area dimensions for printing layouts and for page layouts designed to use the maximum width of 800 x 600 screens are shown below:
• Graphic "safe area" dimensions for layouts designed to print well: – Maximum width = 560 pixels – Maximum height = 410 pixels (visible without scrolling)
• Graphic "safe area" dimensions for layouts designed for 800 x 600 screens: – Maximum width = 760 pixels – Maximum height = 410 pixels (visible without scrolling)
New Perspectives on HTML and XHTML, Comprehensive 87
XPXPXPXPXPChapter Summary
• Create a Web site with several linked pages• Storyboarding and complex Web structures• Creating Web pages linked together• Links to locations within documents and from another
document• Create links to sites and to non-Web locations• Different hypertext attributes• Meta element• Introduction to Web Usability Design• Create effective link
New Perspectives on HTML and XHTML, Comprehensive 88
XPXPXPXPXP
End of Chapter 2
Developing a Basic Web Site