Thoughts on Design

I was putting together a list of resources that I regularly use for someone, and I thought it might be helpful for someone else.

Firefox Resources

• Web Developer - I use this for all purpose testing. Extremely helpful when checking CSS, but also good with images, forms, and other HTML elements.
• Firefox Accessibility Extension - I use this for evaluating 508 compliance on web sites and other HTML documents
• IE View - Lets you switch from Firefox to IE in a click. No need to find the page again in IE, just open your current Firefox page in IE.
• FoxView Let’s you open your current IE page in Firefox
• OperaViewOpens your current Firefox page in Opera
• IE TabOpens IE within a Firefox tab
• LinkChecker - Name says it all
• MeasureIt For finding dimensions of online content or space
• ColorZilla - Find the exact color you’re seeing in the browser.
• HTML Validator - A great validation tool for testing web pages.
• Fangs Screen Reader Emulator - Emulates a screen reader for testing 508 compliance and other usability factors.
• Split Browser - Open two pages in the same window.
• FireShot - A superb screenshot tool.
• Other hepful, non-design related extensions
  • All-in-One Gestures - Makes browsing easier.
  • Sage RSS Reader - A very nice RSS reader
  • Scribefire - Design as a blogging tool, it’s also helpful for just collecting links.

Resources for Internet Explorer

• Internet Explorer Developer Toolbar - There’s probably other useful IE resources, but that’s the only one I know.

Opera Browser - A resource all by itself. If you’re not familiar with it, it’s another high quality browser that’s useful to test pages in.

A List Apart has a great article on How to Size Text in CSS.

In this article, we will reconcile the designer’s requirement for accuracy with the user’s need to resize text on demand, arriving at a best practice that satisfies designers and users and works across browsers and platforms.

How can you ask for anything more than that?

What type of image should I use online, JPG, GIF, or PNG? Simple question, but the obvious reply is another question. How are you going to use the image? One of my favorite quotations is Horatio Greenough’s “form follows function”. The function of an image should control the image’s file type. A few things to consider:

• Is it a large image?
• Is it a photograph, logo, line drawing, or simple graphic?
• Are there file size requirements?
• What color profile is required?
• Do you need to match image colors with any other object on the site?
• Are there subtle gradations of color?
• Are there large blocks of a single solid color
• Is transparency required?

Once these questions are answered, the file type required is much easier to determine. Some tasks can be accomplished by all three common web image file types, others by only one or two. The need for subtle color transitions for instance would rule out GIFs, while the need for transparency would rule out JPG. If you need both of those things together, a PNG file is the only real option. Look at the function required, and use that to control the file type choice.

JPG files are the best web solution for photographs, images with subtle variations of color, and images with large blocks of a single solid color. They also compress well, allowing for larger images to still have reasonable load times. They do not however, allow for transparency. This format also uses lossy compression, which means compression of the file causes loss of detail. The more compression, the more loss.

GIF files are very good for logos, allow transparency, and use a non-lossy form of compression. They also allow for animation of images. The downside of this is that they only allow for 256 colors, so color matching can be awkward. Due to the color limitations, GIFs also do not reflect subtle gradations of color well.

PNG files are a nice compromise between the two. They allow transparency, and can use up to 24-bit color. This allows them to use both the subtle color range of of the JPG, and the transparency of the GIF. In practice, I’ve actually had more luck with using PNGs for transparency than GIFs. Just as PNGs are better at subtle color gradations than GIFs, they also seem to be better at subtle gradations of transparency.

The key here is to look at the purpose of the image. File type follows function. 

Someone has posted an image of what HTML code should look like. Well done.

h/t PhotoShop, Illustrator, and Web Design Resources.

Derek Powazek has posted an article about How to Shoot Events. Very nice. I’ve done a fair bit of photography, enough to know how well his suggestions work at least. I’ve seen the most benefit myself from number 3, “Be Confident”. A confident photographer, who looks even vaguely professional, can go just about anywhere. Everyone assumes that you belong.

POSH - Plain Old Semantic HTML

POSH, in case you haven’t heard of it already, is short for “Plain Old Semantic HTML”, and is obviously much quicker and easier to say than “valid, semantic, accessible, well-structured HTML”. Unfortunately POSH -semantic markup - is also something most people building websites or creating content for the Web have yet to discover.

It’s nice to hear that I’m not the only one that sees quality semantic HTML as a viable web design solution. There are flashier solutions, but well written HTML with good CSS is hard to beat from a reliability point of view. When it comes to web solutions that are 508 compliant, there’s nothing better.

I love trying new things, using new technology, but there are places for that. For instance, newer technology can be incorporated into an otherwise POSH site. It’s not necessary to completely throw your site into the every new technology that comes along.

One trend in recent years has been to make all Flash sites. Nothing wrong with Flash, it has some impressive potential, but a lot of the flash sites I see have very low usability. They’re pretty, they’re creative, some of them I’d consider works of art. They’re not however, a viable alternative to most of the work I do.

Usability and 508 compliance may not be exciting, but when a client or employer wants it, the best course of action is to make it POSH.