elley web graphics

100 %
0 %
Information about elley web graphics

Published on June 16, 2007

Author: Mahugani



Getting Maximum Impact from Your Web-Based Graphics:  Getting Maximum Impact from Your Web-Based Graphics Frank Elley 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: 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: 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: 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: 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: 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: 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: (Please put 'WinWriters' in the subject line so I don’t mistake you for a spammer.)

Add a comment

Related presentations

Related pages

Schools Offering Video Graphics Certificates in New York

Illustration Web Design & Multimedia Computer ... we rated 1 New York school offering video graphics certificates, and Mildred Elley School Albany is the ...
Read more

Web Design and Multimedia Certificates in Rochester, NY

2015 reviews and ratings of Rochester, NY web design and multimedia schools offering certificates.
Read more

Mildred Elley College Graphics

Information about Mildred Elley College graphics, registering in a technical degree program to develop job skills, and taking free practice tests online.
Read more

Lindsey - Digital Graphics Commercial for Mildred Elley ...

See how the Digital Graphics & Multimedia Design program at Mildred Elley has helped LIndsey create her own commercial. (Please note that this ...
Read more

Mildred Elley College Computer Graphics

Information about Mildred Elley College computer graphics, registering in a technical degree program, and taking free practice tests online. Software ...
Read more

Elizabeth "Elley" Magadia | LinkedIn

Elizabeth "Elley" Magadia. ... Graphics; Multimedia; Illustration; ... She is currently building her portfolio in web design and is able to work in CSS.
Read more

Mildred Elley School- Albany Campus

Mildred Elley's Albany, NY Certificate & Associate Degree programs offer career training for the future, and Lifetime Job Placement Assistance. Click now.
Read more


Kelley Design Co. is celebrating 10 years of business. Click to the right to view a video we created to celebrate this milestone. Thank you to our friends, ...
Read more

Mildred Elley - About | Facebook

Mildred Elley, Albany, New York. 2,220 likes · 34 talking about this. Mildred Elley has been providing quality higher education for over 90 years in the...
Read more