1. The World Wide Web

2. The Web Defined Software application to browse and publish documents Web is a large “sub-set” of Internet Uses xhtml, urls, http to request and send documents over the Internet Browser is the application that serves as interface between users and the Internet

3. Web Browser Features Personal Preferences  Cookies  Disk Cache  Fonts, Colors  Show Images  Home Page Location Bookmarks (aka “Favorites”)  Saves urls of Web pages  Reasons for using: You visit that site frequently You want to save it so you can find it again

4. Web Browser Features (con’t) Plug-ins and Helper Applications  Used to extend the capabilities of browsers since they are not able to handle every file type that exists (or may exist in the future)  Plug-ins are tightly integrated with browser Usually run in browser window Launch quickly  Helper Applications are stand alone Usually launch in their own window May take longer to launch

5. Web Browser Features (con’t) Not all browsers are exactly the same:  MIE – supported marquees and font faces initially; packaged and distributed with other Microsoft products  Netscape – introduced tables and frames; had to download and install  Others: Mozilla, Firefox, Opera, Lynx All browsers do not support the same tags in the same way: e.g., Web pages may look different depending on the browser and platform Some browsers are more “forgiving”

6. Web Publishing Web Presentation: “Collection of associated, hyperlinked Web pages that have some underlying theme” - aka “Web site” Comparison of on-line publishing and traditional “off-line” publishing a) Time spent viewing or reading b) Length of material c) Longevity of material d) How info is accessed e) Where info is accessed f) How info is maintained and updated g) Who is able to publish h) Form and appearance vs. quality

7. Key Elements and Design Considerations Layout  Easy navigation (obvious and logical)  Logical organization  Minimum of scrolling (info fits on 1-2 screens with *no* horizontal scrolling)  Short, descriptive writing  Error-free (no typos, no grammatical errors)  Easy-to-read colors, fonts  Non-distracting background

8. Key Elements and Design Considerations Layout (con’t)  Headers and footers that provide continuity and determine boundaries of Web site  Headers Top of Web page (not contents of tag!) Creates identity Includes some of following:  Title, sub-title  Logo  Navigation aids  Last update info

9. Key Elements and Design Considerations Layout (con’t)  Footer Bottom of Web page Contains info that doesn’t necessarily need to appear at the top:  Navigation aids (even if already at the top, repeat here if reader needs to scroll OR offer “Go To Top” link)  Last update info  Author’s name, mailto link to author  FAQs link, Credits link  Copyright notice - © OR &169;  Any disclaimers  Home link Need this info because there is no preamble

10. Key Elements and Design Considerations Load time – some readers are still using dial-up so don’t over-do graphics Page size:  In most cases, page should not exceed 1 – 2 screens  Longer Web pages are sometimes okay: Good for material that will be printed Easier to maintain (fewer links) Not concerned about losing readers But Can lose navigation aids (readers need to see them to retain them) – repeat nav. aids OR use “Go To Top” links May lose readers

11. Key Elements and Design Considerations Page size (con’t)  Assume minimum screen size in general use today is 800 x 600 (800 pixel wide by 600 pixels high)  Usable space is 681 to 780 pixels wide by 382 to 514 pixels high

12. Key Elements and Design Considerations Page Layout  Line length Determined by reader’s browser window Reading is most comfortable when there are no more than 12 words/line To limit number of words in line:  Use tables without borders  Use CSS margin property  Frames – allows more than 1 Web page to display in your window at a time; use one for site navigation, one for display

13. Key Elements and Design Considerations Page layout (con’t)  Typography – the process of printing with type Use CSS to separate content structure and graphic design:,,... are heading tags and their purpose is to designate a hierarchy of headline importance; human readers and search engines can easily determine info structure is usually too big; is too small Reconcile structural logic and graphic design by using CSS to specify “set all h3 headings in 12-pt Arial bold font”

14. Key Elements and Design Considerations Page layout (con’t)  Typography (con’t) Use upper and lower case for large areas of text – makes it easier to recognize words: Hello World vs. HELLO WORLD http://www.webstyleguide.com/type/case.html Align text (if there is a lot of it) – makes it easier for your readers’ eyes to track back to left side: abc defgh ijk l mno pqrstuv wx yz ab cd efghijk lm no p qrs tu v wxyz abcdefg hi jkl http://www.webstyleguide.com/type/align.html

15. A. Goal Setting  State objective  Define audience  Determine timeframe  Determine scope  How much research is required  Consider maintenance  How many graphics  Money?  Writing quality Web Design

16. B. Produce an Outline  Subject will determine how topic is partitioned  Use various heading tags to impart headline importance (,,..., )  Keep amount of information on each page to approx. 1- 2 screen lengths

17. Web Design C. Determine Navigation  Hyperlinks that allow readers to move thru presentation  Subject determines best arrangement: 1. Circular Supports forward and back Good for step-by-step instructions 2. Exploratory Allows jumping from nearly every page to every other page Image maps work well in exploratory type of organization 3. Hierarchy Limited number of links from top; each succeeding page has a limited number Fanout – max number of links available from any page

18. Web Design D. Coding and Writing  Create pages with links between them (stubs)  Migrate outline to appropriate pages  Insert headers and footers (This creates a “shell”)  Fill in the shells with writing  Add graphics, bells, and whistles

19. Web Design E. Revising  Test hyperlinks, check navigation  Comment code (good to do while you go along)  Ask opinion of others  Review goals  Evaluate graphics  Are pages consistent?  Evaluate writing – check for typos etc.  **Check site with another browser or two!**

20. Registering Web Pages Assume one goal is to have the page viewed by as many people as possible How to be found:  Register your page by filling out on-line form telling search engines about your page(s)  Wait to be found by search engines  Pay to have a business add your link to their site  Ask a non-business related page to add you (if you complement their page)  Pay a company to take care of registering for you for a fee