Recently I asked myself, “If I had to pick 3 things that are most difficult in web design to achieve, and achieve all at once, what would I pick?” I thought about that and decided it really boils down to these three things: ( I may rephrase them later )
- Visually acceptable.
- Quick to load
- Accessible
If I can get all three of these things to match up, then we’re in good shape.
Let me explain briefly about this. At first you might say, “Duh!” Well, here’s how I define them.
Visually Acceptable
I really have 3 sub items that I must, must have in my designs, or must work around somehow as a limitation. Of course, to me it is unsaid, that you should strive for cross-browser compatibility. I am willing to live with a few graphical errors in Safari, because it is still visually acceptable. Such a very small percentage of the visitors use it on my sites. Even Opera, but I noticed that more and more, if it looks good on Firefox, it probably looks very close, if not just like it on Opera. (using fairly recent versions)
- I must always provide a graphically pleasing design that aligns images to the pixel. Having an image that is sliding over a single pixel can look terrible. Though, sometimes, if the bottom right corner of the page has a single pixel issue with colors that are hard to make out, then I don’t fuss too much. But I don’t like it.
- The layout must stretch according to my content. NOT WINDOW SIZE! Unlike all the CSS fans out there, I don’t utilize all CSS layouts because of the limitations in browser standards and the box model. The box model does not allow my dynamic content to stretch out the layout as needed. Liquid CSS layouts are not the same. So I use a hybrid layout, using a single table to wrap, maybe an inner 2 column table for my content, but other than that, it’s all divs. (new blog on just this topic later)
- Image transparencies! UGH! GIFs just don’t look good enough, and Internet Explorer does not support transparent PNG’s. PNG is an awesome image format, and the lack of support by the most widely used browser causes me to design around this limitation.
Quick to load
Do I really need to explain this one? Well, let’s just say, this is where I like CSS more. The more I can load into an external CSS file, the better. I can use them on tables too. But, being able to specify “header art” as a whole, even if it’s a larger image, is faster than loading many smaller images. So, I strive for this always.
Accessible
Yes, this is for those of us who have a hard time with all our graphics, small print, and visual layouts. When I create anything, I like to allow for larger fonts the visitor might adjust to on their browser. This can cripple the graphic layout if not done correctly. Screen readers for the blind, also, must be accounted for. Tables, as far as I can tell, do NOT deter from their use. (maybe I am wrong, and if so, someone please show me.) The section508.gov website is all table based.
To make things more Accessible, I try to have cleaner markup code (more CSS), give resizable fonts, list “title” and “alt” properties in my tags, and provide skip navigation.