Assignment 8: Work through Chapter 5, continue CSS

Read and work your way through Chapter 5. You might be able to skim the first half of this, but towards the end it picks up the bubble under site again.

Keep working on your CSS side project (I think everyone chose their wikipedia article). See how far you can push yourself and your design. Use the CSS Zen Garden for inspiration. Find some web pages on here that you like, or any that make you wonder “how did they do that?” I would like the class to hold CSS Zen Garden as a benchmark for the sites they design in this class. There are many styles, from simple to complex, so I hope everyone can find something that appeals to them. Also, it is perfectly acceptable, especially as students, to download the HTML, CSS and images of the Zen Garden web pages to study, recycle, tailor or whatever – deconstructing web pages like these can be a great way to learn.

If you can’t figure out what they did, don’t hesitate to ask me – I can email a demo or do a quick screen cast while you are on break. Then try and bring those techniques into your own design. Even if you just do a Photoshop or InDesign mockup of what you want your Great Depression site to look like, I might be able to show you how to build it as a demo for the class.

Review of Chapter 5

This chapter discusses the basics of images for the web and CSS backgrounds. It has some useful info, but mostly talks a lot about basic image editing which most of you should already know how to do.

• In case it’s not clear, web graphics need to be 72 dpi. However, whenever you have text-as-image or line art like logos, the retina displays on the iPhone 4+ and the iPad actually need 326 dpi to display the text or line art “sharp.” Photographs that are 72 dpi seem to look okay on Apple devices. Note: I have not had time to do much research or experiment with this, It may be possible to use a lower dpi for Apple devices to keep your image file sizes small. If you learn anything, let me know.
• Mind your alt tags on <img> elements. It’s good for both accessibility (for disabled users) and SEO (Search Engine Optimization). Just a simple few words to one sentence description is all you need. I also recommend setting the width and the height of the image’s actual size (then you can override with CSS).
• For image types, .GIF is kind of deprecated, so I wouldn’t put much emphasis on that. Use .JPGs for photographs. Use .PNG for logos and anything that has mostly solid, flat colors or something that needs to be really sharp. If you have type on a photographic image, just use your best judgement.
• In Photoshop, remember to use File -> Save for Web and Devices to create your web graphics.

Here is a demo of CSS backgrounds and PNG transparency. See if you are savvy enough to extract the images and dissect the code. If you need help, just let me know.