1. 10/6/2015Page 1 Web Site Design Modified by Linda Kenney April 6, 2008

2. 10/6/2015Page 2 Learn the basics about copyright law and the Web. Learn the fundamentals of Web page design. Learning Objectives

3. 10/6/2015Page 3 You already know how to add absolute URLs, relative links, mail links, and internal links using named anchors to your Web pages how to add pictures and colors to a Web page how to use tables how to publish a Web page about browser-safe colors

4. 10/6/2015Page 4 It’s very easy to capture content (text, images, video/audio files) from the Web. These same items can just as easily be placed onto your Web page. Everything you see/hear over the Internet is copyrighted, whether it explicitly says so or not! Technically speaking, you can use content from other sources only when you have explicit permission to do so. Copyright Basics

5. 10/6/2015Page 5 Content from public domain sites is available for use. Some sites grant explicit permission to use their content, as long as it is not used in a commercial product. Most everything from a government Web site is in the public domain. Always acknowledge the source of any copied material on your Web page. Copyright Basics (cont.)

6. 10/6/2015Page 6 Consult Appendix D for further information about copyright law. Copyright Basics (cont.)

7. 10/6/2015Page 7 Copyright Basics (cont.) Authors and inventors have exclusive right to their respective writing and discoveries for a limited time. Usually during their lifetime; heirs may extend the copyright for another 70 years. A copyright protects the creator’s economic interest and the integrity of the work.

8. 10/6/2015Page 8 Possible copyright statements: Permission is granted to freely copy this document in electronic form or in print as long as you’re not selling it. On the WWW you must link here rather than put it on your own page. This work may be redistributed freely, in whole or in part, but cannot be sold or used for profit or as part of a product or service that is sold for profit. NOTE: You still must identify the author, source, and publisher (if there is one).

9. 10/6/2015Page 9 Copyright Basics (cont.) To reference another web page, make a link to it. Do not copy the entire page onto your server. Do NOT, however, link directly to images. This is known as deep linking. –What should you do instead? Do not alter downloaded images.

10. 10/6/2015Page 10 Fair Use Guidelines See page 858 - 859

11. 10/6/2015Page 11 Think about the theme or purpose of your Web page. –What about the target audience? Think about what you want to place on your page, and the source of the material you will use. Ensure that your content is consistent with your theme. Planning Your Web Page

12. 10/6/2015Page 12 Then consider the organization of this content. Create a storyboard. The storyboard shows the layout of the material you plan to place on your Web page. Planning Your Web Page (cont.)

13. 10/6/2015Page 13 Planning Your Web Page (cont.)

14. 10/6/2015Page 14 Web Site Organization Hierarchical Linear Random (sometimes called Web Organization)

15. 10/6/2015Page 15 Hierarchical Organization Characterized by a clearly defined home page with links to major site sections Often used for commercial and corporate web sites

16. 10/6/2015Page 16 Hierarchical -- Too Shallow Be careful that the organization is not too shallow. –This provides too many choices and could result in a confusing and less usable web site

17. 10/6/2015Page 17 Hierarchical -- Too Deep Be careful that the organization is not too deep. –This results in many “clicks” needed to drill down to the needed page. –User Interface “Three Click Rule” A web page visitor should be able to get from any page on your site to any other page on your site with a maximum of three hyperlinks.

18. 10/6/2015Page 18 See http://memory.loc.gov/ammem/gmdhtml/gmdhome.html What are good points? What are some problems?

19. 10/6/2015Page 19 Linear Organization Used when the purpose of a site or series of pages on a site is to provide a tutorial, tour, or presentation that needs to be viewed in a sequential fashion.

20. 10/6/2015Page 20 Linear Organization Example http://echoecho.com/javascript.htm

21. 10/6/2015Page 21 Random Organization Sometimes called “Web” Organization Utilized when there is no clear path through the site May be used with artistic or concept sites Generally not used for commercial web sites.

22. 10/6/2015Page 22 Random Organization example http://www.leoburnett.ca/

23. 10/6/2015Page 23 Design Principles Repetition –Repeat visual elements throughout design. Contrast –Add visual excitement and draw attention. Proximity –Group related items. Alignment –Align elements to create visual unity.

24. 10/6/2015Page 24 Web Site Navigation Best Practices Make your site easy to navigate –Provide clearly labeled navigation in the same location on each page. –Most common – across top or down left side Another option is “breadcrumb” navigation Examples: http://usability.about.com/od/aboutusability/p/Breadcrumbs.htm

25. 10/6/2015Page 25 Web Site Navigation Best Practices (cont.) Types of Navigation –Graphics-based –Text-based –Interactive Navigation Technologies DHTML Java Applet Flash

26. 10/6/2015Page 26 See http://www.dot.gov/ What are good points? What are some problems?

27. 10/6/2015Page 27 See http://www.usdoj.gov/ Note contrasting links for current page.

28. 10/6/2015Page 28 Web Site Navigation Best Practices (cont.) Accessibility Tip –When graphics, DHTML, a Java Applet, or Flash is used for the main navigation of a web site, provide clear text-based links on the bottom of each page.

29. 10/6/2015Page 29 A table can be used to create a graphical navigation bar. Insert each section into a single row table with zero border, spacing, and padding. Convert each image section into a link. Creating a Graphical Navigation Bar

30. 10/6/2015Page 30 More Web Site Navigation Best Practices Use a Table of Contents (with links to other parts of the page) for long pages. (for example, the class web sites page -- http://pubpages.unh.edu/~ltv6/cs403/resource/web.html http://pubpages.unh.edu/~ltv6/cs403/resource/web.html Consider breaking long pages into multiple shorter pages. Large sites may benefit from a site map or site search feature. http://www.conferences.unh.edu/sitemap.html

31. 10/6/2015Page 31 See http://www.starbucks.com/

32. 10/6/2015Page 32 Web Page Design Load Time Watch the load time of your pages. Try to limit web page document and associated media to under 60K on the home page and 100K on other pages. Why should your home page be smaller than the other pages?

33. 10/6/2015Page 33 Web Page Design Target Audience Design for your target audience. –Appropriate reading level of text –Appropriate use of color –Appropriate use of animation

34. 10/6/2015Page 34 Web Page Design Colors & Animation Use colors and animation that appeal to your target audience. –Kids What? –College students What? –Older users What? –Everyone: Good contrast between background and text Avoid animation if it makes the page load too slowly.

35. 10/6/2015Page 35 Web Page Design Browser Compatibility Web pages do NOT look the same in all the major browsers Test with current and recent versions of: –Internet Explorer –Firefox, Mozilla –Opera –Mac versions Design to look best in one browser and degrade gracefully (look OK) in others

36. 10/6/2015Page 36 Web Page Design Screen Resolution Test at various screen resolutions –Most widely used: 1024x768 and 800x600 Design to look good at various screen resolutions

37. 10/6/2015Page 37 Web Page Design More Best Practices Page layout design Text design Graphic design Accessibility considerations

38. 10/6/2015Page 38 Web Page Design Page Layout Place the most important information "above the fold“ (the area before the user scrolls). Use adequate "white" or blank space. Avoid horizontal scrolling. Use an interesting page layout.

39. 10/6/2015Page 39 Page Layout (cont.) This is usable, but a little boring. See the next slide for improvements in page layout.

40. 10/6/2015Page 40 Page Layout (cont.) Better Columns make the page more interesting and it’s easier to read this way.

41. 10/6/2015Page 41 Page Layout (cont.) Best Columns of different widths interspersed with graphics and headings create the most interesting, easy to read page.

42. 10/6/2015Page 42 Page Layout Design Techniques --Ice Design –AKA rigid or fixed design –Fixed-width, usually at left margin –Examples: –http://www.shire.net/learnwebdesign/index.htmlhttp://www.shire.net/learnwebdesign/index.html –http://www.w3schools.com/http://www.w3schools.com/

43. 10/6/2015Page 43 Page Layout Design Techniques -- Jello Design –Page content typically centered and often configured with a table of percentage width. –Even margins on both sides. –Examples: http://www.officemax.com/ http://www.pbs.org/ http://www.cnn.com/ http://www.ebay.com/

44. 10/6/2015Page 44 Page Layout Design Techniques -- Liquid Design –Page expands to fill the browser at all resolutions. Often configured with a table width of 100% –New Trend: Use CSS to configure liquid design page layout. –Examples: http://www.illinois.gov/tech/ http://www.digital-web.com/

45. 10/6/2015Page 45 Basic Elements –Descriptive title (Keep it short but accurate.) –Include your name and contact info (e-mail) –Show the creation/modification date –Use pictures to highlight and emphasize the purpose of the page. –Provide navigational content if multiple pages are used. Important Web Page “Requirements” (1)

46. 10/6/2015Page 46 Design & Organization Recommendations –Put the most interesting/important info at the top of the page. –Keep the image files small and few. Use thumbnail image links to full size images if there are many. –Add alternate text to your images. Not all the Web page visitors are sighted. The alternate text will clue them in about the purpose of the picture. –Use browser-safe colors. Non-standard colors may appear differently on other systems. Important Web Page “Requirements” (2)

47. 10/6/2015Page 47 Design & Organization Recommendations –Use the default fonts. Specialty fonts may not be installed on the viewer’s computer - so an alternate font will be used, potentially affecting the impact of your page. –Use only a few fonts. The display may become too “busy”. –Use a style sheet. Separate display info from content. This simplifies cosmetic changes. –Use subtitles and headings to break up content. Important Web Page “Requirements” (3)

48. 10/6/2015Page 48 Design & Organization Recommendations –Use the spell checker! TextPad vs. Notepad –Preview/test your page. Nothing is more frustrating than a Web page that is incomplete because the author failed to fix display issues. –Write, view and test all Web pages before installing them on a Web server. –Make sure you test them again once you have uploaded them to your server. Important Web Page “Requirements” (4)

49. 10/6/2015Page 49 Important Web Page “Requirements” (5) Keep download times short. Make your pages portable! (Use relative links!)

50. 10/6/2015Page 50 Check your work. Validate. http://validator.w3.orghttp://validator.w3.org

51. 10/6/2015Page 51 Remember the three C’s of Web page design: –quality Content –reader Convenience –artistic Composition. A Web Site Construction Checklist

52. 10/6/2015Page 52 Best Practices Checklist Table 7.1 in Web Developer & Design Foundations with XHTML, (p. 303-305) http://terrymorris.net/bestpractices Page Layout Browser Compatibility Navigation Color and Graphics Multimedia Content Presentation Functionality Accessibility

53. 10/6/2015Page 53 Information from Web 101,Third Edition, by Wendy G. Lehnert & Richard L. Kopec (Addison Wesley) Web Developer & Design Foundations with XHTML, Third Edition, by Terry Felke-Morris (Addison Wesley)