1 / 60

Tools and Tips for Graphics in Local Government Web Sites

Tools and Tips for Graphics in Local Government Web Sites. Local Government Webmasters Meeting January 22, 2004 -- Seattle, Washington Quinn Robinson Web Services Specialist, MRSC. A Walk Down Memory Lane.

Gideon
Download Presentation

Tools and Tips for Graphics in Local Government Web Sites

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Tools and Tips for Graphics in Local Government Web Sites Local Government Webmasters Meeting January 22, 2004 -- Seattle, Washington Quinn RobinsonWeb Services Specialist, MRSC

  2. A Walk Down Memory Lane • Tim Berners-Lee and the World Wide Web • 1993: Mosaic, the first modern web browser • The founding of Netscape Inc. • Case study of Web site graphics: • The White House web site:www.whitehouse.gov

  3. Overview • Goals of Web Site Graphics • Tools of the Trade • File Formats and Information • Optimizing Images for the Web • Text and Typography • Advanced Techniques • Common Things to Avoid

  4. Goals of Web Site Graphics

  5. Goals of Web Site Graphics • Providing visitors with a pleasing Web browsing experience • Helping users navigate the site to find what they are looking for • Promoting your organization through branding and identity • Last but not least… Goals >Tools > Files > Optimization > Text > Advanced > Avoid >

  6. Goals of Web Site Graphics • Avoiding a place in the Web Site hall of shame on www.websitesthatsuck.com Goals >Tools > Files > Optimization > Text > Advanced > Avoid >

  7. Providing visitors with a pleasing Web browsing experience • Aesthetics • Consistency • Visual communication • Make visitor want to return to site Goals >Tools > Files > Optimization > Text > Advanced > Avoid >

  8. Helping visitors navigate the site to find what they are looking for • Link to homepage • Site navigation • Icons and buttons • File formats identification (PDF, DOC, PPT, etc.) • Plug-in download links (Windows Media Player, RealPlayer, Quicktime, Flash, etc.) • Email addresses (optional graphic so that a visitor scanning the page can find email address fast) Goals >Tools > Files > Optimization > Text > Advanced > Avoid >

  9. Strong visual identity Target Stores, Toyota, Why not the public sector? Official sites should look official, not busy: http://www.mhpd.net/ Reflection of the personality of the community http://www.ci.redmond.wa.us/ Promoting your organization through branding and identity Goals >Tools > Files > Optimization > Text > Advanced > Avoid >

  10. Tools of the Trade

  11. Tools of the Trade • Professional graphic design tools and applications • Other popular image manipulation programs (under $150) • Choosing what is best for you and your organization Goals >Tools > Files > Optimization > Text > Advanced > Avoid >

  12. Professional graphic design tools and applications • Bitmap graphics • Adobe Photoshop • Macromedia Fireworks • Vector graphics • Adobe Illustrator • Macromedia Freehand • (Others) Goals >Tools > Files > Optimization > Text > Advanced > Avoid >

  13. Other popular image manipulation programs (under $150) • Bitmap graphics • Microsoft Paint • Microsoft Photo Editor (bundled with Office) • Adobe Photoshop Elements • JASC Paintshop Pro • GIMP (GNU Image Manipulation Program) • Vector Graphics • Corel Draw • (Others) Goals >Tools > Files > Optimization > Text > Advanced > Avoid >

  14. GIMP

  15. Choosing what is best for you and your organization • Price and budget • Features and options • Web and print (or combination of both) • Ease of use • Important note: • Sometimes decent image manipulation software is bundled with scanners and digital cameras Goals >Tools > Files > Optimization > Text > Advanced > Avoid >

  16. File Formats and Information

  17. File Formats and Information • Using JPEG images • Using GIF images • A note on PNG and BMP images • Other types of graphics found on the Web Goals >Tools > Files > Optimization > Text > Advanced > Avoid >

  18. Using JPEG images • Uses • Outdoor photography • Physical facilities and buildings • City/County Council members • Strengths • Millions of colors means good photographs, decent compression • Weaknesses • Not suitable for text • Image Adjustment • Brightness, Contrast, Levels, Color Goals >Tools > Files > Optimization > Text > Advanced > Avoid >

  19. Using GIF images • Uses • City/County logos • Site navigation buttons • Strengths • 256 colors maximum means small file size • Can be transparent • Supports animation • Weaknesses • Poor photographic reproduction Goals >Tools > Files > Optimization > Text > Advanced > Avoid >

  20. A note on PNG and BMP images • Uses • Strengths • BMP is a bitmap, good color quality • PNG supports transparency, animation, and millions of colors (GIF only can show 256 colors) • Weaknesses • BMP not optimized for the Web, slow download times • PNG not supported in older browsers • Etc Goals >Tools > Files > Optimization > Text > Advanced > Avoid >

  21. Other types of graphics found on the Web • Flash graphic images • http://www.yahoo.com/ • Java applet graphic images • http://hr.dop.wa.gov/statejobs/jobs.htm • Not commonly used Goals >Tools > Files > Optimization > Text > Advanced > Avoid >

  22. Optimizing Images for the Web

  23. Optimizing Images for the Web • Resizing and compression • Slicing larger images into smaller images • Calculating and speeding up page load speeds Goals >Tools > Files > Optimization > Text > Advanced > Avoid >

  24. Optimizing Images for the Web • The need for optimization • Resizing and compression • Slicing larger images into smaller images • Calculating page load speeds Goals >Tools > Files > Optimization > Text > Advanced > Avoid >

  25. The need for optimization • There are many things that affect the speed your pages load: • Server speed • HTML code quality (nested tables slow pages down, not specifying height and widths slows page rendering) • User connection speed • However, the single greatest determinant is file size. The greatest way to reduce your overall file size is to reduce the file size of your graphics. Optimization is the process of saving your images for the Web. Goals >Tools > Files > Optimization > Text > Advanced > Avoid >

  26. Resizing and compression • Keeping the aspect ratio • GIF files • Dithering • Interlacing • Palettes and colors • JPEG files • Quality • Optimization • Digital photography Goals >Tools > Files > Optimization > Text > Advanced > Avoid >

  27. Slicing larger images into smaller images • Loading speed of graphics • Interlaced GIF files Goals >Tools > Files > Optimization > Text > Advanced > Avoid >

  28. Calculating page load speeds • Modem vs. broadband users • Support all users • Third-party speed testing tools • Internet Explorer Tools • Calculate page load speed and speed up pages: • http://www.masternewmedia.org/2002/02/28/how_to_calculate_and_speedup_the_download_time_of_your_web_site.htm • http://www.netmechanic.com/news/vol4/load_no19.htm Goals >Tools > Files > Optimization > Text > Advanced > Avoid >

  29. Text and Typography

  30. Text and Typography • Choosing professional-looking fonts • Creating graphics containing text • File formats • Accessibility Goals >Tools > Files > Optimization > Text > Advanced > Avoid >

  31. Choosing professional-looking fonts • Use sans-serif fonts (Verdana, Arial, etc) for headlines and titles • Use readable type for main text • Ensure font harmony throughout the site Goals >Tools > Files > Optimization > Text > Advanced > Avoid >

  32. Creating graphics containing text • Anti-aliasing • Leading (optional) • Kerning (optional) Goals >Tools > Files > Optimization > Text > Advanced > Avoid >

  33. File formats • Use GIF format for text graphics • JPEG graphics don’t do text graphics well Goals >Tools > Files > Optimization > Text > Advanced > Avoid >

  34. Accessibility • Insert an alt attribute to images that contain text or other information. • <img src="mrsclogo.gif" height="80" width="300" border="0" alt="MRSC Logo"> • Place an empty alt attribute in images used for placement or are otherwise useless: • <img src="pixel.gif" border="0" height="1" width="1" alt=""> • Source: Jeff Witzel, University of Washington Goals >Tools > Files > Optimization > Text > Advanced > Avoid >

  35. Advanced Techniques

  36. Advanced Techniques • Creating JavaScript button or image rollover graphics • Providing visitors with a text-only version of the site in addition to graphical version Goals >Tools > Files > Optimization > Text > Advanced > Avoid >

  37. Creating JavaScript button or image rollovers • Demonstration • Using font tools Goals >Tools > Files > Optimization > Text > Advanced > Avoid >

  38. Providing visitors with a text-only and a graphical version of the site • Demonstration • http://www.courts.wa.gov Goals >Tools > Files > Optimization > Text > Advanced > Avoid >

  39. Common Things to Avoid

  40. Common Things to Avoid • Scrolling text, marquees, and animations • Overly long download times • Gratuitous image maps • Accessibility problems • Oversized, unoptimized graphics • Splash screens • Meaningless graphics • Poor use of color • Lack of white space Goals >Tools > Files > Optimization > Text > Advanced > Avoid >

More Related