elley web graphics

Information about elley web graphics

Published on June 16, 2007

Author: Mahugani

Source: authorstream.com

Content

Getting Maximum Impact from Your Web-Based Graphics:  Getting Maximum Impact from Your Web-Based Graphics Frank Elley [email protected] Today’s Agenda:  Today’s Agenda This is a basic session for writers who are just getting involved in web-based authoring and think GIF may be peanut butter. Topics include: The Right Stuff The Changing Landscape An Alphabet Soup of File Formats Let Me Out of the Box! The focus is informational, though there are a few demos. Relax and don’t scribble so furiously. Examples and scripts are at: http://www.behindthecurtain.com/lasvegas2005 F I R S T T H I N G S F I R S T The Right Stuff:  The Right Stuff Make Your Manager Spend a Little Money on Hardware and Software. You’re Worth It. Good Tools and Good Habits:  Good Tools and Good Habits Invest in good tools: Photoshop if you can afford it, Paint Shop Pro otherwise. Work on two monitors or one great big ole monitor. Crank up your monitor color quality to 'High' or 'Highest.' Save all originals in the native format of Paint Shop Pro or Photoshop and save copies as GIF, JPEG, etc. T H E R I G H T S T U F F The Changing Landscape:  The Changing Landscape Sometimes, Change Is Progress (How Billions of Dollars in Consumer Hardware Upgrades Have Finally Made Your Life Easier.) The Browser Wars Are Just Skirmishes:  The Browser Wars Are Just Skirmishes Stats vary depending on the source, but this is typical of the browser versions now in use: 1. Internet Explorer 6.x 81% 2. Internet Explorer 5.x 8% 3. Mozilla / Firefox 6% 4. Unknown 1% 5. Safari 1% 6. Netscape 7.x 1% 7. Opera x.x 1% Bottom Line: No more painful testing in version 4 of IE or Netscape. (CSS, especially Level 2, remains problematic.) FireFox is growing in popularity but still a niche player. Source: http://www.thecounter.com/stats/2005/February/browser.php T H E C H A N G I N G L A N D S C A P E The Browser-Safe Colors Are Dead:  The Browser-Safe Colors Are Dead Again, stats vary, but this is typical for color depth of web surfers’ monitors: Highest: 32 bit 69% Medium: 16 bit, 65K colors 23% High: 24 bit, 16M colors 5% Low: 8 bit, 256 colors 1% Bottom Line: No more obsessing about color palettes and browser-safe colors. Source: http://www.thecounter.com/stats/2005/February/colors.php T H E C H A N G I N G L A N D S C A P E OK, So Resolution Is One Exception:  OK, So Resolution Is One Exception Lower-resolution viewing is still hanging in there: 1024x768 54% 800x600 28% 1280x1024 10% Bottom line: Designing for a maximum 800 x 600 presentation is still a good thing. (And may be for a long time, possibly forever.) Source: http://www.thecounter.com/stats/2005/February/res.php T H E C H A N G I N G L A N D S C A P E The Real Bottom Line:  The Real Bottom Line The average web visitor: Uses Internet Explorer 6. Has a 32-bit color monitor. Sets resolution at 1024 x 768. However! Statistics vary significantly (though not wildly) depending on the source. The story may be different for your customers on your site. Ask your webmaster for your site’s stats. T H E C H A N G I N G L A N D S C A P E An Alphabet Soup of File Formats:  An Alphabet Soup of File Formats Choosey Web Authors Choose GIF. The Irony of Web Graphics:  F I L E F O R M A T S The Irony of Web Graphics Drawings (a.k.a. vectors) are the most efficient and ‘lightweight’ of graphics formats. Paintings (a.k.a. bitmaps), though inefficient and ‘heavy,’ are nonetheless easy for web browsers to display. Flash is very popular but mostly used for tutorials and demos, not work-a-day user assistance. Scaleable Vector Graphics (SVG) is not a consumer-ready solution. Bottom line: Clunky bitmap graphics remain the universal language of web graphics. Two Basic Flavors Fit Most Needs:  F I L E F O R M A T S Two Basic Flavors Fit Most Needs Graphics Interchange Format (.GIF) Different parts of the format are owned and licensed by CompuServe and Unisys. Joint Photographic Experts Group (.JPG) An open standard, though not one set by the World Wide Web Consortium (W3C). What they have in common: They are highly complementary formats that cover your full range of graphic needs. They enjoy universal support by the major web browsers. Aren’t You Forgetting Ping, uh, PNG:  Aren’t You Forgetting Ping, uh, PNG Portable Network Graphics (.PNG): An open standard set by the W3C. 'Loss-less' format combining features of both GIFs and JPEGs. Offers advanced 8-bit transparency (and other nifty features). Over-hyped but still useful. Transparency support is still spotty: Windows: Netscape 6, Opera 6, Mozilla and FireFox support transparency; Internet Explorer 6 has issues. See: http://www.libpng.org/pub/png/pngapbr.html http://www.alistapart.com/articles/pngopacity/ Mac: Internet Explorer 5+, Netscape 6+, Opera 5, Mozilla 1 and Firefox support transparency. F I L E F O R M A T S Use GIFs for Simple Illustrations:  F I L E F O R M A T S Use GIFs for Simple Illustrations Ideally suited for graphics that feature large areas of flat color. For tech writers, that means: screenshots! Best for any image consisting mostly of simple shapes, type, and flat color. Fundamentally a 256-color (8-bit) format. Also provides transparency and animation. Use JPEGs for Photographic Detail:  F I L E F O R M A T S Use JPEGs for Photographic Detail Ideally suited for photographs or illustrations that feature complex patterns (such as gradients or blends). Fundamentally a true-color (24-bit) format. No transparency, no animation. The Real Difference: Compression:  F I L E F O R M A T S The Real Difference: Compression The two formats differ in the way they preserve bandwidth by compressing image color information for the smallest possible size. GIF compression is 'lossless' – it preserves exact color information. But: You get only 256 colors. JPEG compression is 'lossy' – it discards some color information so you can have a full-color image. The higher the compression, the lower the image quality. When you save a JPEG, graphics programs ask you to make a trade-off between file size and image quality. This is from Photoshop. Compression Sets In:  F I L E F O R M A T S Compression Sets In Neither format is inherently better than the other. When you choose the right format for any particular image, you get the smallest file size and the best quality. Two 217 x 140-pixel examples: 8-bit BMP: 32 K 8-bit BMP: 32 K Web-safe GIF: 3 K Web-safe GIF: 15 K JPEG Max Quality: 19 K JPEG Max Quality: 19 K JPEG High Quality 14 K JPEG High Quality: 14 K JPEG Medium Quality: 11 K JPEG Medium Quality: 11 K Good Formats, Bad Choices:  Good Formats, Bad Choices The Fuzzy Screenshot Nightmare: a screenshot saved as a JPEG. Compression artifacts disfigure what should be flat areas of color. The Grainy Photograph Disaster: a photo saved as a GIF. There just aren’t enough colors to represent the photo realistically. F I L E F O R M A T S JPEGs: Best Practices:  F I L E F O R M A T S JPEGs: Best Practices Never open and resave a JPEG. Instead, keep your original in a nonlossy format, such as BMP or the native Paint Shop Pro or Photoshop format. Save copies as needed. Don’t let the concept of lossy compression intimidate you. A medium compression setting of 5 on a 10-point scale produces small sizes without noticeable distortion. Given the high-bandwidth era we now live in, time spent optimizing JPEGs may not be well spent. Find a setting that works for you and stick with it. GIFs: Choosing Colors:  GIFs: Choosing Colors Although web-safe colors aren’t an issue, you must still choose color options when saving GIFs. Screenshots: choose an optimized palette option. Concept illustrations with small number of flat colors: for consistent quality, make sure colors are exactly the same from illustration to illustration and just choose an optimized palette option. In Paint Shop Pro, don’t use the GIF Optimizer (too fussy). Use Image andgt; Decrease Color Depth andgt; 256 Colors. Avoid the Standard/Web-safe palette. (See next slide for Reduction Method options.) F I L E F O R M A T S Should I Dither GIFs? (I Can’t Decide.):  Should I Dither GIFs? (I Can’t Decide.) Dithering: A technique graphics programs use to approximate a color by using patterns of similar colors. Occurs when you force a graphic to a specific palette, or the image has more than 256 colors. Using optimized palettes eliminates the need for dithering in most cases. Experiment on your first few graphics. Zoom in to see if they developed measles. Occasionally, dithering produces slightly better results with images that have many subtle variations of a particular hue. If nothing looks good, the image may be a candidate for JPEG instead. F I L E F O R M A T S You want to avoid screenshots with measles – extreme dithering that occurs when your force your graphics program to try to reproduce a color that’s not in the target palette. Edge Cases: Scaled Screenshots:  F I L E F O R M A T S Edge Cases: Scaled Screenshots Since scaled screenshots are often fuzzy, should they be saved as JPEGs instead of GIFs? Usually, no. Even most scaled screenshots are still smaller and better quality when saved as GIFs. GIF: 13,819 bytes JPEG at medium compression: 21,732 bytes Screenshot reduced by 60% and then saved as GIF and JPEG. Let Me Out of the Box!:  Let Me Out of the Box! Simple Presentation Techniques that Can Add Value Without Causing Headaches. Learning to Think Outside the Box. Why Is Web-Based Help So Static?:  Why Is Web-Based Help So Static? Some sites provide splendid user assistance. But most web-based help looks like print doc: columns of text with a few embedded, static screenshots. Reasons are many. Here are just a few: Appropriateness: Users focused on tasks aren’t in a mood to manipulate interactive interfaces. Resources: Just not enough time to ‘go the extra mile.’ Practicality: Single-sourced doc is optimized for print, then converted for web. Tools: Interactivity is still time-consuming to develop and maintain. Energy: Many who innovated early burned out later. Effectiveness: The traditional approach works! T H I N K I N G O U T S I D E T H E B O X The Continual Challenge: Real Estate:  The Continual Challenge: Real Estate Fitting screenshots and illustrations into a web page has many challenges: Monitor resolution is increasing, but readers’ eyes have not been similarly upgraded. Some audiences cling to 800 x 600 resolution. Fixed-width design is growing in popularity. User interfaces are growing more complex. How do you document a screen inside a space much smaller than the screen itself? T H I N K I N G O U T S I D E T H E B O X Popups: Tried-and-True:  Popups: Tried-and-True Click a thumbnail to open a larger version screenshot in a new window. Pros: Easy to do, very safe. Cons: ‘Naked’ screenshot has no explanation unless you draw captions onto the image. Full browser window takes up lots of real estate. Full toolbar at top is just wasted real estate. Notice white gap around screenshot; the browser adds an internal margin. The window has no title – just the file name. T H I N K I N G O U T S I D E T H E B O X Minimize the Popup, Maximize the Value:  Minimize the Popup, Maximize the Value Use JavaScript to target a server-side page that accepts parameters (image URL, title, caption) and displays the larger image in a slimmed-down window. Link can still popup new window if JavaScript is disabled. Pros: Easy to maintain; works for 1 or 1000 screenshots. Notice the window has a real title in the title bar, and a caption appears under the screenshot, which now fits snugly in the window. T H I N K I N G O U T S I D E T H E B O X How It Works:  How It Works andlt;a href='admin.jpg' target='_blank' onClick='popup(1,'screenshots.asp? image=admin.jpgandamp;width=579andamp;height=395andamp; title=Centrify Administrator Consoleandamp; caption=The DirectControl Administrator Console gives … Unix/Linux user accounts.' ,579,470); return false;'andgt; andlt;img src='admin_tn.jpg' width='300' height='205' class='screenshot' /andgt;andlt;/aandgt; Enables the link to work even if JavaScript is disabled or an error occurs. Underlined text shows how the JavaScript function calls a server-side script with information (like file name) about the screenshot. T H I N K I N G O U T S I D E T H E B O X Display a Larger Shot in Same Window:  Display a Larger Shot in Same Window Remember to provide navigation back to the previous page. Click a thumbnail and the larger screenshot is displayed in the same window. Pros: Easy to do, easy to annotate the screenshot. Cons: Potentially confusing unless you remember to provide round-trip navigation back to the previous topic. T H I N K I N G O U T S I D E T H E B O X Use CSS Positioning and JavaScript:  Use CSS Positioning and JavaScript Through precise positioning and show/hiding elements on screen, you can create advanced projects. Here: Clicking a link shows or hides a series of tutorial images. Pros: Can fit multiple images in compact space. Cons: Can be time-consuming to develop and maintain. Clicking the graphic number shows the related screenshot. This project also has a timer that runs once and shows each screenshot in succession after a brief pause. T H I N K I N G O U T S I D E T H E B O X Look in Other Disciplines for Inspiration:  Look in Other Disciplines for Inspiration Clicking the vertical list of thumbnails displays the full-size image on the left. The text below also updates. Imagine a series of toolbar icons that, when clicked, displays an illustration of their use and steps on how to use them. Source: dukefarms.org Interesting ideas are easy to find if you stray outside your usual discipline. Surf, explore, think, enjoy. T H I N K I N G O U T S I D E T H E B O X Respect the Limits of the Technology:  Respect the Limits of the Technology Consider not only how long it will take to develop a CSS / JavaScript project, but also what it takes to maintain it. Allow extra time for testing your target browsers. ‘Design to Fail’ – ensure something reasonable happens in older browsers or for visitors who disable JavaScript. Don’t be pushed into delivering advanced interactivity without the right tools, timeline and management support. Flash is the tool of choice for projects that go beyond simple JavaScript. Don’t be afraid to get your feet wet. If you can’t swing it yourself, partner with other departments such Marketing – their budget, your talent. T H I N K I N G O U T S I D E T H E B O X Thank You!:  Thank You! Please remember to fill in those surveys! Feel free to contact me at: [email protected] (Please put 'WinWriters' in the subject line so I don’t mistake you for a spammer.)

Related presentations


Other presentations created by Mahugani

Exploring the Deep Web
12. 03. 2008
0 views

Exploring the Deep Web

Moving Mountains
02. 10. 2007
0 views

Moving Mountains

dustbowl
10. 10. 2007
0 views

dustbowl

The Internet China
12. 10. 2007
0 views

The Internet China

shen 1
12. 10. 2007
0 views

shen 1

Triumph of Bolshevism
12. 10. 2007
0 views

Triumph of Bolshevism

Kukovecz
15. 10. 2007
0 views

Kukovecz

09 Panama s ppt
22. 10. 2007
0 views

09 Panama s ppt

Common By Product Feeds
04. 10. 2007
0 views

Common By Product Feeds

Dissertation Writing comms ug
27. 11. 2007
0 views

Dissertation Writing comms ug

TT
27. 11. 2007
0 views

TT

black holes v2
28. 11. 2007
0 views

black holes v2

Production of Calla Lily
07. 12. 2007
0 views

Production of Calla Lily

Water Track 8 7 15 051
07. 11. 2007
0 views

Water Track 8 7 15 051

PVC Toronto talk
16. 11. 2007
0 views

PVC Toronto talk

2022lecture2
19. 11. 2007
0 views

2022lecture2

Robertson
03. 10. 2007
0 views

Robertson

20050922 Crafoord Symposium
29. 08. 2007
0 views

20050922 Crafoord Symposium

field mmr naga
31. 12. 2007
0 views

field mmr naga

Anthony Kelly International
02. 01. 2008
0 views

Anthony Kelly International

fy2004 mfc construction
04. 01. 2008
0 views

fy2004 mfc construction

NASC PresentHanson
08. 08. 2007
0 views

NASC PresentHanson

Nicosia Raymond Pawson
08. 08. 2007
0 views

Nicosia Raymond Pawson

Methamphetamine final10 05
08. 08. 2007
0 views

Methamphetamine final10 05

ppt43
16. 10. 2007
0 views

ppt43

McCarthy Mitchell
29. 08. 2007
0 views

McCarthy Mitchell

Update FutureDirection LRago
22. 10. 2007
0 views

Update FutureDirection LRago

gef 160306
23. 10. 2007
0 views

gef 160306

IT Trends 2005 2010
14. 11. 2007
0 views

IT Trends 2005 2010

rec pond mgnt compressed
07. 01. 2008
0 views

rec pond mgnt compressed

Sci Case II
29. 08. 2007
0 views

Sci Case II

markenklima index q1 2005
05. 01. 2008
0 views

markenklima index q1 2005

yalenov2006
29. 08. 2007
0 views

yalenov2006

media 4917
08. 08. 2007
0 views

media 4917

gatorsncrocs
12. 10. 2007
0 views

gatorsncrocs

Eradicating Systemic Poverty
29. 11. 2007
0 views

Eradicating Systemic Poverty

Kennedy obesity 0904
08. 08. 2007
0 views

Kennedy obesity 0904

jsimon santacruz
29. 08. 2007
0 views

jsimon santacruz

9 0568 rusack r
20. 11. 2007
0 views

9 0568 rusack r

soc100ch10Corepwrpt
19. 02. 2008
0 views

soc100ch10Corepwrpt

Edward Albee
24. 02. 2008
0 views

Edward Albee

AFCEA NOVA Breakfast7Sept07v1
06. 03. 2008
0 views

AFCEA NOVA Breakfast7Sept07v1

Lakeside2
26. 03. 2008
0 views

Lakeside2

sHansen
29. 08. 2007
0 views

sHansen

Tectonics Terrestrial Planets2
07. 04. 2008
0 views

Tectonics Terrestrial Planets2

Sept SECC
02. 11. 2007
0 views

Sept SECC

Hercules
28. 03. 2008
0 views

Hercules

deprez presentation 12 1 05
30. 03. 2008
0 views

deprez presentation 12 1 05

HARIPARSAD Ishwarie 2
09. 04. 2008
0 views

HARIPARSAD Ishwarie 2

Beaulieu
10. 04. 2008
0 views

Beaulieu

sings2mw
29. 08. 2007
0 views

sings2mw

molgas twong
29. 08. 2007
0 views

molgas twong

newman1
14. 04. 2008
0 views

newman1

session 25 V2
17. 04. 2008
0 views

session 25 V2

Citel
22. 04. 2008
0 views

Citel

icra02
19. 06. 2007
0 views

icra02

ICHEP 04 Barr Higgs
19. 06. 2007
0 views

ICHEP 04 Barr Higgs

IBERs and e Theses
19. 06. 2007
0 views

IBERs and e Theses

HS P2P Liao
19. 06. 2007
0 views

HS P2P Liao

he b
19. 06. 2007
0 views

he b

HB2004
19. 06. 2007
0 views

HB2004

Hartenstein Oerebro03 pt1
19. 06. 2007
0 views

Hartenstein Oerebro03 pt1

Grid InteropSupport
19. 06. 2007
0 views

Grid InteropSupport

Grid Interop
19. 06. 2007
0 views

Grid Interop

grid 06talk
19. 06. 2007
0 views

grid 06talk

wednesday
29. 08. 2007
0 views

wednesday

comer5e ch08 HO
15. 11. 2007
0 views

comer5e ch08 HO

SAG YinG 9 Jan New
03. 01. 2008
0 views

SAG YinG 9 Jan New

02 Cattle2
26. 11. 2007
0 views

02 Cattle2

Grid Shib uk april05
19. 06. 2007
0 views

Grid Shib uk april05

J Acar
14. 03. 2008
0 views

J Acar

20061130 woodling
30. 12. 2007
0 views

20061130 woodling

ch02exoh
07. 01. 2008
0 views

ch02exoh

Choose your way carefully
03. 10. 2007
0 views

Choose your way carefully

4 vista
16. 06. 2007
0 views

4 vista

33233 11162218 S
16. 06. 2007
0 views

33233 11162218 S

23
16. 06. 2007
0 views

23

2007 tips tricks
16. 06. 2007
0 views

2007 tips tricks

19b
16. 06. 2007
0 views

19b

EPL Membership
16. 06. 2007
0 views

EPL Membership

Entire Gra duation Slideshow
16. 06. 2007
0 views

Entire Gra duation Slideshow

A Loose Confederation
14. 12. 2007
0 views

A Loose Confederation

employee 2004
16. 06. 2007
0 views

employee 2004

Obesity 1
08. 08. 2007
0 views

Obesity 1

Active Kill Disk
19. 06. 2007
0 views

Active Kill Disk

teall cost 3 ch16
24. 02. 2008
0 views

teall cost 3 ch16

CFA05
29. 08. 2007
0 views

CFA05

gemini sab
29. 08. 2007
0 views

gemini sab

NINDS Audience Report
08. 08. 2007
0 views

NINDS Audience Report

mm1
29. 08. 2007
0 views

mm1

ENGD POWERPOINT
16. 06. 2007
0 views

ENGD POWERPOINT

I3C BSML July2002
19. 06. 2007
0 views

I3C BSML July2002

igt 3
04. 03. 2008
0 views

igt 3

MassesofGalaxies
29. 08. 2007
0 views

MassesofGalaxies