Tools and tips for graphics in local government web sites
Download
1 / 60

Integrating graphics into your Web site - PowerPoint PPT Presentation


  • 262 Views
  • Updated 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 l.jpg

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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg

Strong visual identity looking for

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 trade l.jpg
Tools of the Trade looking for


Tools of the trade19 l.jpg
Tools of the Trade looking for

  • 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 l.jpg
Professional graphic design tools and applications looking for

  • 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 l.jpg
Other popular image manipulation programs (under $150) looking for

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


Slide24 l.jpg

GIMP looking for


Choosing what is best for you and your organization l.jpg
Choosing what is best for you and your organization looking for

  • 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 l.jpg
File Formats and Information looking for

  • 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 l.jpg
Using JPEG images looking for

  • 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 l.jpg
Using GIF images looking for

  • 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 l.jpg
A note on PNG and BMP images looking for

  • 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 l.jpg
Other types of graphics found on the Web looking for

  • 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 l.jpg
Optimizing Images for the Web looking for

  • 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 l.jpg
Optimizing Images for the Web looking for

  • 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 l.jpg
The need for optimization looking for

  • 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 l.jpg
Resizing and compression looking for

  • 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 l.jpg
Slicing larger images into smaller images looking for

  • Loading speed of graphics

  • Interlaced GIF files

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


Calculating page load speeds l.jpg
Calculating page load speeds looking for

  • 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 typography l.jpg
Text and Typography looking for


Text and typography40 l.jpg
Text and Typography looking for

  • Choosing professional-looking fonts

  • Creating graphics containing text

  • File formats

  • Accessibility

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


Choosing professional looking fonts l.jpg
Choosing professional-looking fonts looking for

  • 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 l.jpg
Creating graphics containing text looking for

  • Anti-aliasing

  • Leading (optional)

  • Kerning (optional)

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


File formats l.jpg
File formats looking for

  • Use GIF format for text graphics

  • JPEG graphics don’t do text graphics well

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


Accessibility l.jpg
Accessibility looking for

  • 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 techniques l.jpg
Advanced Techniques looking for


Advanced techniques46 l.jpg
Advanced Techniques looking for

  • 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 l.jpg
Creating JavaScript button or image rollovers looking for

  • Demonstration

    • Using font tools

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


Providing visitors with a text only and a graphical version of the site l.jpg
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 l.jpg
Common Things to Avoid of the site

  • 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 l.jpg
Scrolling text, marquees, and animations of the site

  • 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 l.jpg
Overly long download times of the site

  • 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 l.jpg
Gratuitous image maps of the site

  • 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 l.jpg
Accessibility problems of the site

  • 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 l.jpg
Oversized, unoptimized graphics of the site

  • Slow down page load speed

  • People would rather leave than wait

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


Splash screens l.jpg
Splash screens of the site

  • 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 l.jpg
Meaningless graphics of the site

  • Is that graphic really necessary?

  • Could you communicate in another way?

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


Poor use of color l.jpg
Poor use of color of the site

  • 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 l.jpg
Lack of white space of the site

  • White space helps the visitor understand the site

  • Gives emphasis to other items

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


Conclusion l.jpg
Conclusion of the site

  • 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