(ebook - pdf) basics of good web page design
TRANSCRIPT
Basics of Good Web Page Design May 2000
1basics of good web design.ppt
Notes
Basics of Good Web Page Design
Revised May 2000
Basics of Good Web Page Design May 2000
2basics of good web design.ppt
Notes
What is a Web page?
◆ A document available on the World WideWeb that is created using HTML (HypertextMarkup Language) and viewed with anInternet browser (Netscape or InternetExplorer). It can contain text, graphics,links and other multimedia components.
◆ A Web page can be made up of one orseveral separate documents.
A Web page is usually a collection of documents that make up aWeb site.
A home page is usually the main or cover page of a Web documentthat contains an index or table of contents to the rest of thedocument.
Basics of Good Web Page Design May 2000
3basics of good web design.ppt
Notes
What makes a good Webpage?
◆ Using the right combination of text,graphics, links and multimedia.
◆ Making the page accessible and useful to asmany users as possible.
◆ Sounds easy, doesn’t it?
Basics of Good Web Page Design May 2000
4basics of good web design.ppt
Notes
The First Steps
◆ Content, Content, Content
◆ Design
◆ Storyboard
◆ Author
◆ Test
You will notice that there is much to be done before an HTML editoris used. Taking the time to plan your page well in the beginning willsave you a great deal of headaches later on.
Basics of Good Web Page Design May 2000
5basics of good web design.ppt
Notes
Content Rules
◆ Content is the single most important aspectof any Web page.
◆ Content must be well organized, engaging,and contain useful, valid links to other Webresources.
◆ Content will guide many aspects of thedesign of the page.
Basics of Good Web Page Design May 2000
6basics of good web design.ppt
Notes
What are you are trying tosay?
◆ Who is your audience?
◆ What is the intent of your document . . .◆ to inform?
◆ to educate?
◆ to persuade?
◆ to question?
◆ Create an outline of your content.
Basics of Good Web Page Design May 2000
7basics of good web design.ppt
Notes
Design Considerations
◆ Navigational Flow
◆ Graphics
◆ Text
◆ Use of Color
◆ Backgrounds
◆ Multimedia
Not all users have GUI (graphical user interface) browsers. Manyare still using text only browsers.
Keep this in mind as you design your page. Try to provide a textonly version of your page.
At the very least, provide alternative text for every one of yourgraphics.
Basics of Good Web Page Design May 2000
8basics of good web design.ppt
Notes
Navigational Flow
◆ Content dictates this step.
◆ Three main choices:◆ Hierarchy or Tree
◆ Linear
◆ Hot List
◆ Create a flowchart showing the relationshipamong your pages.
Basics of Good Web Page Design May 2000
9basics of good web design.ppt
Notes
Hierarchy or Tree
◆ Most widely used and easy to navigateflow.
◆ Your content outline givesyou a built-in flowchart.
◆ Information progresses from most generalto most detailed.
◆ Provides multiple paths for multipleaudiences.
Basics of Good Web Page Design May 2000
10basics of good web design.ppt
Notes
Hierarchy or Tree Structure
Home Page
Always include links at the top and bottom ofeach page back to your home page.
Basics of Good Web Page Design May 2000
11basics of good web design.ppt
Notes
Linear
◆ Moves in progression from the first page tothe last, like a book.
◆ Works well when content presents a seriesof steps or follows a process from start tofinish.
Basics of Good Web Page Design May 2000
12basics of good web design.ppt
Notes
Linear Structure
Home Page
This structure offers a good place to use linksfor previous page, next page and top of page.Of course, we will always include a link backto the home page.
Basics of Good Web Page Design May 2000
13basics of good web design.ppt
Notes
Hot List
◆ All links are included on a main home page.
◆ For complex pages, include a flowchart orimage that shows the organization of theentire document on the orientation page foryour site.
Basics of Good Web Page Design May 2000
14basics of good web design.ppt
Notes
Hot List Structure
Home Page
What you do
Who you are
Personal history
Your family
Hobbies
Sports
Favorite links
Basics of Good Web Page Design May 2000
15basics of good web design.ppt
Notes
The Home Page
◆ Each of the previous structures makes use ofa home page, the beginning page ofyour Web site. It should contain:◆ A clearly defined index or table of contents.
◆ Navigational buttons or links to other parts ofthe document.
◆ A footer portion.
Basics of Good Web Page Design May 2000
16basics of good web design.ppt
Notes
Jumping Around◆ Your home page needs to answer these questions:
◆ Who is this?
◆ What kind of content is it?
◆ Where is it located?
◆ Why does it exist?
◆ How do you find the content?
◆ Try to limit to three screens of information per page.
◆ Your users should not have to make more thanthree jumps to find the information they arelooking for.
Basics of Good Web Page Design May 2000
17basics of good web design.ppt
Notes
The Footer
◆ The footer portion of a Web page containsimportant information about youand/or your organization:◆ Author’s name, company, phone number, e-mail and/or
mailing address
◆ Page owner’s name, phone number, e-mail and/ormailing address
◆ Legal disclaimer and/or official seal
◆ Last revised date, copyright notice, URL of page
◆ E-mail contact link
Basics of Good Web Page Design May 2000
18basics of good web design.ppt
Notes
Graphics
◆ Use graphics sparingly◆ They should enhance text, not distract from it.
◆ Keep image size small◆ For larger images, use thumbnails that link to a
larger image. Be sure to include file size in the textdescription of the graphic.
◆ Keep image file size small.
◆ Use compressed .gifs and .jpgs.
◆ Use fewer colors when creating graphics.
Basics of Good Web Page Design May 2000
19basics of good web design.ppt
Notes
Text
◆ Plenty of white space◆ Don’t use too much text
◆ Use short, well-written paragraphs
◆ Use moderate size headings consistently
◆ Use emphasized text sparingly
◆ Split long pages (more than five screens oftext or links) into multiple pages
◆ Always proofread and check spelling
Basics of Good Web Page Design May 2000
20basics of good web design.ppt
Notes
Copyright Issues
◆ All HTML documents on the Web arepublished and should be considered the sameas print publications.
◆ Copyrights apply to the Internet. Go to theCopyright Office Homepage for information: http://lcweb.loc.gov/copyright
◆ Be aware of your organization’s policies forWeb publishing.
Basics of Good Web Page Design May 2000
21basics of good web design.ppt
Notes
Use of Color
◆ Keep colors simple - not too many
◆ Not everyone can even see colors
◆ Not every user’s system can support colorsas you author them
◆ Don’t use different shades of the same color
◆ Remember that color is a personalpreference
Basics of Good Web Page Design May 2000
22basics of good web design.ppt
Notes
Backgrounds
◆ Keep it simple
◆ Graphic backgrounds add more downloadtime to the page and can detract fromyour text, making it hard to see and read
◆ Color backgrounds can also make text hard toread
◆ Backgrounds can clash with text andgraphic colors
Basics of Good Web Page Design May 2000
23basics of good web design.ppt
Notes
Other Multimedia
◆ Sounds, Animation, Movies◆ Always give users a choice to take advantage of
these options. Provide as much information aspossible in the text description of each item.
◆ File format◆ File size
◆ Possible download time
◆ Plug-in needed
◆ Not everyone will be able to take advantage ofthese features
Basics of Good Web Page Design May 2000
24basics of good web design.ppt
Notes
Storyboard
◆ Once your flowchart is created and otherdesign elements determined, create adetailed sketch of the contents of each page.
◆ All text, each graphic, every link, allnavigational buttons
◆ Create both a graphic version and atext only version
Basics of Good Web Page Design May 2000
25basics of good web design.ppt
Notes
Author
◆ Create pages in HTML from yourstoryboard
◆ Use the editor of your choice
◆ Use standard HTML, not browser-specific
◆ Be sure to check your spelling
◆ Test pages in a browser as you go◆ Find HTML 3.2 standards at:
http://www.htmlhelp.com/reference/wilbur
Find HTML 3.2 standards at:
http://www.htmlhelp.com/reference/wilbur/
Basics of Good Web Page Design May 2000
26basics of good web design.ppt
Notes
Test
◆ Testing as you go is part of the authoringprocess, but more testing remains
◆ Test pages with different browsers
◆ Use online validation checkers for syntaxchecking, link checking, etc.◆ For links to validators go to:
http://www.htmlhelp.com/links/validators.htm
For links to validators go to:
http://www.htmlhelp.com/links/validators.htm
Basics of Good Web Page Design May 2000
27basics of good web design.ppt
Notes
Design for Everyone
◆ Meet Bobby, the Web-based program designed byCAST (Center for Applied Special Technology) tohelp developers evaluate how well their Web pages meet guidelines fordisability access.
◆ Find Bobby at: http://www.cast.org/bobby/
◆ Some users might use text only browsers, soprovide a text only version of your page.
◆ Use alternative text descriptions for each of yourgraphics.
Basics of Good Web Page Design May 2000
28basics of good web design.ppt
Notes
Common HTML Tags
Basics of Good Web Page Design May 2000
29basics of good web design.ppt
Notes
NetscapePresentationof CommonHTML Tags
Basics of Good Web Page Design May 2000
30basics of good web design.ppt
Notes
Remember to view your pageswith as many browsers as
possible.
Why?. . .
Basics of Good Web Page Design May 2000
31basics of good web design.ppt
Notes
Basics of Good Web Page Design May 2000
32basics of good web design.ppt
Notes
Basics of Good Web Page Design May 2000
33basics of good web design.ppt
Notes
Basics of Good Web Page Design May 2000
34basics of good web design.ppt
Notes
Basics of Good Web Page Design May 2000
35basics of good web design.ppt
Notes
Tricks of the Trade
◆ Use the browser’s built-in “View Source”option to study the way others have usedHTML commands to create certain effects.
◆ If you see something you want to use,contact the author of the page and ask for permission.
◆ Be sure to honor copyright laws.
Basics of Good Web Page Design May 2000
36basics of good web design.ppt
Notes
Bad Design
◆ http://www.useit.com/alertbox/9605.html
◆ http://www.webpagesthatsuck.com
Basics of Good Web Page Design May 2000
37basics of good web design.ppt
Notes
Some Good Examples
◆ http://www.ims.columbia.k12.mo.us/
◆ http://oseda.missouri.edu/schoolweb/
◆ http://services.dese.state.mo.us/
◆ http://www.virtualflorist.com/
◆ http://www.gsh.org/