tools and tips for graphics in local government web sites
Download
Skip this Video
Download Presentation
Tools and Tips for Graphics in Local Government Web Sites

Loading in 2 Seconds...

play fullscreen
1 / 60

Integrating graphics into your Web site - PowerPoint PPT Presentation


  • 262 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Integrating graphics into your Web site' - Gideon


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
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 RobinsonWeb Services Specialist, MRSC

a walk down memory lane
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
overview
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
goals of web site graphics12
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 >

goals of web site graphics13
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 >

providing visitors with a pleasing web browsing experience
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 >

helping visitors navigate the site to find what they are looking for
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 >

promoting your organization through branding and identity
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 >

tools of the trade19
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 >

professional graphic design tools and applications
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 >

other popular image manipulation programs under 150
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 >

choosing what is best for you and your organization
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 >

file formats and information27
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 >

using jpeg images
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 >

using gif images
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 >

a note on png and bmp images
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 >

other types of graphics found on the web
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 >

optimizing images for the web33
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 >

optimizing images for the web34
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 >

the need for optimization
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 >

resizing and compression
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 >

slicing larger images into smaller images
Slicing larger images into smaller images
  • Loading speed of graphics
  • Interlaced GIF files

Goals >Tools > Files > Optimization > Text > Advanced > Avoid >

calculating page load speeds
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 >

text and typography40
Text and Typography
  • Choosing professional-looking fonts
  • Creating graphics containing text
  • File formats
  • Accessibility

Goals >Tools > Files > Optimization > Text > Advanced > Avoid >

choosing professional looking fonts
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 >

creating graphics containing text
Creating graphics containing text
  • Anti-aliasing
  • Leading (optional)
  • Kerning (optional)

Goals >Tools > Files > Optimization > Text > Advanced > Avoid >

file formats
File formats
  • Use GIF format for text graphics
  • JPEG graphics don’t do text graphics well

Goals >Tools > Files > Optimization > Text > Advanced > Avoid >

accessibility
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 >

advanced techniques46
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 >

creating javascript button or image rollovers
Creating JavaScript button or image rollovers
  • Demonstration
    • Using font tools

Goals >Tools > Files > Optimization > Text > Advanced > Avoid >

providing visitors with a text only and a graphical version of the site
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 >

common things to avoid50
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 >

scrolling text marquees and animations
Scrolling text, marquees, and animations
  • Take attention away from the content
  • Marquees not supported in all browsers (thank goodness!)
  • Animations that loop make screen readers malfunction
  • Not professional

Goals >Tools > Files > Optimization > Text > Advanced > Avoid >

overly long download times
Overly long download times
  • Images take longer to download than text
  • Jakob Nielsen, web usability consultant, said that "Every Web usability study I have conducted since 1994 has shown the same thing...fast response times are the most important design criterion for web pages."

Goals >Tools > Files > Optimization > Text > Advanced > Avoid >

gratuitous image maps
Gratuitous image maps
  • Present link information in another format if possible
  • If you must use an image map, use client-side image maps only
  • Make your site accessible by specifying alt attributes for all image map elements
    • <map name="usemap"><area coords="550,1,585,18" href="index.html" alt="Home" /></map>
  • Source: Jeff Witzel, University of Washington

Goals >Tools > Files > Optimization > Text > Advanced > Avoid >

accessibility problems
Accessibility problems
  • Images are very commonly used to make very stylish text, navigation panels, etc.
  • Some feel this is in violation of accessibility guidelines
  • Images don\'t scale with textual elements
  • Advanced CSS techniques allow for much better looking text than we were capable of before
  • Google can\'t index an image full of text
  • Use images wisely and carefully
  • Avoid using fully-graphical authoring suites
  • Source: Jeff Witzel, University of Washington

Goals >Tools > Files > Optimization > Text > Advanced > Avoid >

oversized unoptimized graphics
Oversized, unoptimized graphics
  • Slow down page load speed
  • People would rather leave than wait

Goals >Tools > Files > Optimization > Text > Advanced > Avoid >

splash screens
Splash screens
  • Redundant
  • A better idea is a homepage that is different than second level pages
    • Home page:http://www.planningpaw.org
    • Second level page:http://www.planningpaw.org/links.htm

Goals >Tools > Files > Optimization > Text > Advanced > Avoid >

meaningless graphics
Meaningless graphics
  • Is that graphic really necessary?
  • Could you communicate in another way?

Goals >Tools > Files > Optimization > Text > Advanced > Avoid >

poor use of color
Poor use of color
  • To avoid this, use the following guidelines:
    • All color should be high-contrast. (Very light text on very dark background, or vice-versa.)
    • Use background images sparingly as they detract from the contrast of the text
    • If a background image were to be disabled by the user, make certain your text is still visible
    • Do not use color alone to convey information. If you use color, also include symbols or other distinctions
    • Source: Jeff Witzel, University of Washington
lack of white space
Lack of white space
  • White space helps the visitor understand the site
  • Gives emphasis to other items

Goals >Tools > Files > Optimization > Text > Advanced > Avoid >

conclusion
Conclusion
  • Start with the goal in mind
  • Choose the tools that work best for you
  • Use appropriate file formats in your sites
  • Optimize your images for the web
  • Use the GIF format for text and use anti-aliasing where appropriate
  • Experiment with advanced techniques
  • Avoid some of the common pitfalls in Web page and graphic design

Goals >Tools > Files > Optimization > Text > Advanced > Avoid >

ad