1. Preparing the Elements Gathering and PreparingText, Numbers and Images Linda C. Morosko, 2008 The Web Wizard’s Guide to Web Design, James G. Lengel

2. Numbers A couple of standards: Spell out numbers up to nine (one, two, three…) Use numerals for 10 and above Use comma separators (1,000) Or country specific format When using spreadsheets (MS-Excel): Keep labels short Eliminate blank rows and columns Save as tab-delimited text file Linda C. Morosko, 2008 The Web Wizard’s Guide to Web Design, James G. Lengel

3. Preparing Numbers Numbers are generally displayed in : Tables Graphs Charts Combination of the three Linda C. Morosko, 2008 The Web Wizard’s Guide to Web Design, James G. Lengel

4. Preparing Numbers Tables Best for items that need to be referenced and looked up individually Graphs A picture’s worth a thousand words Great for showing trends over time, comparisons, distributions Save graphs as images and then place them on a page Linda C. Morosko, 2008 The Web Wizard’s Guide to Web Design, James G. Lengel

5. Preparing Images Most sites contain images Could be as small as a company logo Banner ads across the top of the screen News photos Linda C. Morosko, 2008 The Web Wizard’s Guide to Web Design, James G. Lengel

6. Preparing Images Image sources: Adobe Illustrator – save the file as an Encapsulated Postscript file (.eps) Photographs - they would need to be scanned (.jpg) Pencil Sketches - they would need to be scanned (.jpg) Illustration from the company’s website Pictures from the company’s brochures/catalogs Videotape – extract pictures Photo of the company’s headquarters – on a sunny day Any photo requested by the company Linda C. Morosko, 2008 The Web Wizard’s Guide to Web Design, James G. Lengel

7. Preparing Images Scanning Use a flatbed scanner to digitize: Photos Sketches Illustrations Books Magazines Small objects Linda C. Morosko, 2008 The Web Wizard’s Guide to Web Design, James G. Lengel

8. Preparing Images Photography Tips Light Brightly lit subjects photograph better Indirect lighting Tight: Fill frame with subject Small groups Sight: Avoid distracting backgrounds Write: Don’t photograph text Uptight: Candid vs. posed Linda C. Morosko, 2008 The Web Wizard’s Guide to Web Design, James G. Lengel

9. Preparing Images Web File Formats: GIF – Graphics Interchange Format Non-photographic images Lossless Images with lines and areas of solid color Important to retain the lines of the image, the color is secondary Think logos and clip-art Only stores 8 bits pixel (256 colors) Technically, must pay royalties when using GIF Linda C. Morosko, 2008 The Web Wizard’s Guide to Web Design, James G. Lengel

10. Preparing Images Web File Formats: JPG – Joint Photographics Experts Group Photographs Use when color is more important than the lines of the image Lossy technique - Decompressed image not same as original Exploits human vision characteristics Small changes in brightness more easily perceived than small changes in color Trade image size for image quality Stores 24 bits per pixel (16 million color) Linda C. Morosko, 2008 The Web Wizard’s Guide to Web Design, James G. Lengel

11. Preparing Images Web File Formats: PNG – Portable Network Graphics Designed to replace the older and simpler GIF format Has great compression features (makes smaller file sizes) Has strong transparency options Lossless Supports 48-bit true color Format readable by all apps the same Linda C. Morosko, 2008 The Web Wizard’s Guide to Web Design, James G. Lengel

12. Compression Definition: The image files do not contain ALL of the color and brightness information for each pixel in the image. Files are smaller than if uncompressed An uncompressed 320 x 240 pixel image: Contains 225,000 bytes uncompressed Takes 33 seconds over 56K to download Compressed 27,000 bytes compressed 3 seconds over 56K Linda C. Morosko, 2008 The Web Wizard’s Guide to Web Design, James G. Lengel

13. Compression Lossless compression algorithm Reduce file size with no loss in image quality Generally, do not compress to as small a file as a lossy method When image quality is valued above file size, lossless algorithms are typically chosen. Linda C. Morosko, 2008 The Web Wizard’s Guide to Web Design, James G. Lengel

14. Compression Lossy compression algorithm Take advantage of the inherent limitations of the human eye and discard information that cannot be seen. Most lossy compression algorithms allow for variable levels of quality (compression) and as these levels are increased, file size is reduced. At the highest compression levels, image deterioration becomes noticeable. This deterioration is known as compression artifacting. Use when color is more important than detail Linda C. Morosko, 2008 The Web Wizard’s Guide to Web Design, James G. Lengel

15. Preparing Images Thumbnails Smaller versions of full picture Use on main page to lessen page load Use them as links to a larger picture Linda C. Morosko, 2008 The Web Wizard’s Guide to Web Design, James G. Lengel

16. Ownership, Permission and Copyright Issues Copyright You MUST identify author of every element used No one can publish on the Web anything belonging to anyone else without their permission No copyright registration or notice is required Authors own their work automatically Registration is a good idea for settling legal claims “Fair use” exception – students in class settings, completing work seen only by a teacher and classmates, may use copyright works without permission US Copyright Office: http://www.copyright.gov/ Linda C. Morosko, 2008 The Web Wizard’s Guide to Web Design, James G. Lengel

17. Resources Linda C. Morosko, 2008 The Web Wizard’s Guide to Web Design, James G. Lengel Writing for the Web http://www.useit.com/papers/webwriting/ Web Style Guide http://webstyleguide.com/graphics/index.html