1. Web Design, 2 nd Edition

2. Chapter 2: Web Publishing Fundamentals2 Chapter Objectives  Explain the advantages of Web publishing  Demonstrate currency in Web pages  Compare Web publishing to print publishing  Understand how to use basic design principles to create successful Web pages and Web sites  Understand the effects of balance and proximity of Web page elements

3. Chapter 2: Web Publishing Fundamentals3 Chapter Objectives  Describe the importance of contrast and focus on a Web page  Recognize the impact of unity within a Web site  Explain and apply specific attributes for writing effective Web content  Recognize the characteristics of easily read Web pages  Apply the inverted pyramid style of writing

4. Chapter 2: Web Publishing Fundamentals4 Chapter Objectives  Differentiate between paragraph format and chunked format  Describe the impact of color on Web pages and understand RGB color  Differentiate among primary, secondary, complementary, warm, and cool colors  Discuss the legal, ethical, technical, and special needs issues in Web site development

5. Chapter 2: Web Publishing Fundamentals5 Advantages of Web Publishing  Web publishing offers distinct advantages over print –Timely content –Connectivity –Reduced production costs –Rapid and economical delivery

6. Chapter 2: Web Publishing Fundamentals6 Timely Content  Web sites can be updated continuously, while print publications are only as current as their date of publication  To keep visitors on your site, always supply timely, changing material

7. Chapter 2: Web Publishing Fundamentals7 Timely Content

8. Chapter 2: Web Publishing Fundamentals8 Connectivity  Web pages offer the opportunity of connecting with the audience  Two main ways to interact and gather information: –E-mail link –Forms  Be sure to use e-mail to customers sparingly so as to avoid the impression of “spam”  Build simple and convenient ways for your users to connect with you

9. Chapter 2: Web Publishing Fundamentals9 Connectivity

10. Chapter 2: Web Publishing Fundamentals10 Reduced Production Costs  Web publishing is more cost effective than print  Colorful designs, photographs, and text can be included in a Web page for considerably less cost  Don’t forget to consider file size, space limitations, and load time

11. Chapter 2: Web Publishing Fundamentals11 Rapid and Economical Delivery  Distributing information via the Web can be much faster and less expensive  With the same immediacy and cost, the Web can reach both global and local audiences  Consider the Web when the need exists for economical and rapid distribution of information

12. Chapter 2: Web Publishing Fundamentals12 Basic Design Principles  Three things to consider when designing a successful Web publication that will leave a distinct impression: –Balance and Proximity –Contrast and Focus –Unity

13. Chapter 2: Web Publishing Fundamentals13 Balance and Proximity  Arrange Web elements symmetrically (centered and balanced) to suggest a conservative, safe, peaceful atmosphere –Avoid too much symmetry  Arrange Web elements asymmetrically (off balance) to create a fun, energetic mood

14. Chapter 2: Web Publishing Fundamentals14 Balance and Proximity SymmetricalAsymmetrical

15. Chapter 2: Web Publishing Fundamentals15 Balance and Proximity  Proximity (closeness) is closely associated with balance  Elements that have a relationship should be placed close to each other  White space can help define proximity and organize Web page elements –not always white in color

16. Chapter 2: Web Publishing Fundamentals16 Balance and Proximity Notice text is close to image

17. Chapter 2: Web Publishing Fundamentals17 Balance and Proximity Notice appropriate use of white space

18. Chapter 2: Web Publishing Fundamentals18 Contrast and Focus  Contrast is a mix of elements to stimulate attention  By varying the size of Web page elements, you can establish a visual hierarchy of information that will show your visitors which elements are most important

19. Chapter 2: Web Publishing Fundamentals19 Contrast and Focus  Focus is the center of interest or activity  A Web page needs a focal point –This is where you want your visitors to focus their attention  Create Web pages with contrast to elicit awareness and establish a focal point

20. Chapter 2: Web Publishing Fundamentals20 Contrast and Focus

21. Chapter 2: Web Publishing Fundamentals21 Unity  Web pages and Web sites need unity, a sense of oneness  Create unity with consistency and repetition across your Web pages  Examples: –Logo –Font –Colors –Tag line (motto)

22. Chapter 2: Web Publishing Fundamentals22 Unity

23. Chapter 2: Web Publishing Fundamentals23 Unity  Focusing on alignment will ensure that your Web pages have a consistent, structured presentation –Alignment is the arrangement of objects in fixed or predetermined positions  Generate a sense of unity or oneness by utilizing consistent alignment, a common graphic theme, and a common color theme

24. Chapter 2: Web Publishing Fundamentals24 Unity

25. Chapter 2: Web Publishing Fundamentals25 Unity

26. Chapter 2: Web Publishing Fundamentals26 Writing for the Web  The Web audience typically looks for information that is: –Accurate –Easily Read –Understandable –Comprehensive and Concise

27. Chapter 2: Web Publishing Fundamentals27 Writing for the Web  Accuracy –Confirm the accuracy of your material with a reliable source –Indicate the date of the last update to your Web site (even if content wasn’t changed) –Be sure to avoid spelling and grammar errors as they challenge your Web site’s credability

28. Chapter 2: Web Publishing Fundamentals28 Writing for the Web  Easily Readable –Make information easy to scan –Use headings, subheads, lists, and highlighted sections –Begin each paragraph with a topic sentence

29. Chapter 2: Web Publishing Fundamentals29 Writing for the Web  Suggestions to assist readability –Use 12-point font for body –Avoid typing in all uppercase and avoid underline –Use a sans serif type font –Use plain or subtle backgrounds –Be cautious regarding humor

30. Chapter 2: Web Publishing Fundamentals30 Writing for the Web  Understandability –Write your copy in the inverted pyramid style Conclusion: Who, what, when, where, why Details Background info

31. Chapter 2: Web Publishing Fundamentals31 Writing for the Web  Comprehensive and Concise –Web users prefer not to read long passages of text on-screen –Use chunked format instead of paragraph format –Consider using hyperlinks for additional information, such as historical backgrounds –Format hyperlinks so that the linked page will appear in a new browser window (to keep visitors in contact with your home page)

32. Chapter 2: Web Publishing Fundamentals32 Writing for the Web  Paragraph format vs. Chunked format

33. Chapter 2: Web Publishing Fundamentals33 Color and the Web  Color is a powerful design tool  Improper use of color can detract from a Web page’s appearance –Excessive use –Inappropriate use –Lack of basic comprehension of how monitors project color

34. Chapter 2: Web Publishing Fundamentals34 Impact of Color  Color enhances your Web site’s purpose and personality  Observe how others effectively use color  Warm colors (yellow, orange, red) are associated with activity and power  Cool colors (green, blue, violet) suggest tranquility and detachment  Certain colors have come to symbolize particular qualities (white – purity, purple – royalty)  No absolute correct/incorrect choices

35. Chapter 2: Web Publishing Fundamentals35 Impact of Color

36. Chapter 2: Web Publishing Fundamentals36 RGB System  Monitors project color using an RGB System –Combines red, green, and blue light –Levels of intensity are measured from 0 – 255 (total of 256 levels for each color = 16.7 million total colors) –PCs and MACs share 216 of the 256 color intensities (known as the Web-safe palette) –Not all monitors can display all colors, depending on “bit” setting of monitors

37. Chapter 2: Web Publishing Fundamentals37 RGB System  Enter color using hexadecimal system –Example: FF6699

38. Chapter 2: Web Publishing Fundamentals38 RGB Color If an illustration includes colors in addition to the browser-safe palette is viewed with an 8-bit monitor, the browser will substitute colors that come close to the proposed colors Colors outside of the Web-safe palette may appear dithered – spotty and uneven.

39. Chapter 2: Web Publishing Fundamentals39 Noteworthy Issues Regarding Web Development  Successful Web publishing includes recognizing the following issues: –Technical –Legal and ethical considerations –Universal access

40. Chapter 2: Web Publishing Fundamentals40 Technical Issues  Bandwidth is the quantity of data that can be transmitted in a specific time frame –Influenced by speed of the user’s and the ISP’s/OSP’s connections, the amount of traffic, and size of the Web page  Keep file sizes to a minimum –Adobe Photoshop (and other photo editing programs) can decrease image file size –Consider using thumbnails (miniature versions of pictures that link to larger photos)  Differences among browsers ( Graphical vs. Non-graphical display) – may need to use the ALT tag

41. Chapter 2: Web Publishing Fundamentals41 Technical Issues  A Web page also will display differently depending on monitor’s resolution setting –Resolution = the measure of sharpness and clarity –Examples: 800 x 600, 1280 x 1024 –Measured in pixels (pixel - a single point in an electronic image) –Page elements display differently at different resolutions (users may have to scroll more if resolution is set low; horizontal scrolling is a no-no!) –Use percentages (relative width) instead of pixels (fixed width) to define width of elements

42. Chapter 2: Web Publishing Fundamentals42 Legal and Ethical Considerations  Copyright - the ownership of intellectual property –Easy to acquire images from the Web (but don’t use copyrighted ones) –Published and unpublished works are protected by copyright (even if they are not registered with the US Copyright Office) –Make sure the material on your Web site is free of copyright restrictions –Obtain written permission from the owner to use any copyrighted material –Protect your work by copyrighting your material –Example of notation: © 2008 Gore’s Computing

43. Chapter 2: Web Publishing Fundamentals43 Legal and Ethical Issues  Privacy and Security –Visitors are concerned with the legitimate use of their information Examples: Social security numbers, credit card numbers, bank account numbers –Include a privacy statement on your Web site that explains how the submitted data will be used –E-commerce sites use encryption/decryption Secure Sockets Layer (SSL) –https://

44. Chapter 2: Web Publishing Fundamentals44 Legal and Ethical Issues

45. Chapter 2: Web Publishing Fundamentals45 Universal Access  Accessibility –Consider access by visitors with special needs W3C’s Web Accessibility Initiative (WAI) –Utilize resources and tools to make your Web pages more accessible to people with special needs

46. Chapter 2: Web Publishing Fundamentals46 Chapter Summary  Explain the advantages of Web publishing  Demonstrate currency in Web pages  Compare Web publishing to print publishing  Understand how to use basic design principles to create successful Web pages and Web sites  Understand the effects of balance and proximity of Web page elements

47. Chapter 2: Web Publishing Fundamentals47 Chapter Summary  Describe the importance of contrast and focus on a Web page  Recognize the impact of unity within a Web site  Explain and apply specific attributes for writing effective Web content  Recognize the characteristics of easily read Web pages  Apply the inverted pyramid style of writing

48. Chapter 2: Web Publishing Fundamentals48 Chapter Summary  Differentiate between paragraph format and chunked format  Describe the impact of color on Web pages and understand RGB color  Differentiate among primary, secondary, complementary, warm, and cool colors  Discuss the legal, ethical, technical, and special needs issues in Web site development

49. Web Design, 2 nd Edition