Cheat Sheet

Different programs can produce surprisingly divergent results when exporting pictures for the web. For example, for two thumbnail images of book covers I recently posted there was a 3x size difference depending on which program I used. One of the images took 1/3 the space when compressed using Preview.app, the other when using ImageMagick. It's good that I looked at the file sizes before posting, and knew to try another program.

If the image you are compressing is a PNG, try pngcrush. Depending on the image, you can usually save about 15% of the filesize.

• Usability should always win over showing off.
• Never, never, use JavaScript or target to open a new window. If I want a new window, I'll open it manually.
• If you are thinking of creating a popup window, stop to think if you really need it. Most of the time you don't. A notable exception is AJAX calendars.
• If you are thinking of using Flash, stop to think if you really need it. Most of the time you don't. The chances of needing to use Flash are vanishingly small.
• Do not play a video or sound without the user first clicking on a play button. I cannot think of a single time I wanted a media file to automatically start.
• Design your site to look good on any size monitor. It must be usable on 13 inch notebooks, 9 inch netbooks, and iPhones, not just your 22 inch desktop or 17 inch laptop.
• Use proper HTML character codes. A common mistake is to use Windows curved quotes instead of the proper HTML quotes (“”).

See also: To Make a [Good] Web Page; it is dated, but still relevant. Brent Simmons wrote a good post on on the design of a good website that many designers can benefit from reading.

This is a common question with an easy answer: don't.