Saturday, April 28, 2007

Submission Guidelines

A. Jacksonian of Dumb Looks Still Free has been kind enough to write some submission technical guidelines. This is in reference to the first two submissions i-support-democracy-in-iraq-graphic-1 and second i-support-democracy-in-iraq-graphic-2. So here goes:

They are both *not* bad, but suffer scaling problems for side-bar use. For main or header graphics they are lovely, but for sidebars the rule of thumb is: must scale to 150 pixels wide. The '150 rule' is a good one for making side-bar graphics and a real PITA... custom blogs, of course, can do larger with 180 pixels to 200 pixels wide being not too bad for larger displays, but on 800 x 600 displays 150 pixels eats up a quarter of the width... which is about the maximum for being able to read the other 3/4 comfortably. Larger displays do not suffer that, as much, and 1024 x 768 should be the new minimum in a few years, once the majority of older displays are obsoleted from use. I put them up at the bottom of my side-bar at DLSF.

One of the ways I have gotten *around* that limitation, as seen in The Jacksonian Party Webring graphic, which adheres to the 150 pixel rule, is the vertical dimension. In actuality there is no real reasonable limit to that, but the magic ratio of 3:2 still holds, although the webring graphic I personally found a bit more pleasing at 200 x 150 pixels. Some of the very oldest blogs that remain on old templates for pre-800 x 600 days would balk at that (640 x 480) as it eats up way too much vertical space... luckily there are very, very few of those left. Personally I have a 1600 x 1200 monitor, so I can work with multiple sizings and such.

So at that scale of 150-180 pixels having legible type and good contrast is a must. I get around some of the sizing problems in my Reject the UN logo, which I wanted as I detest flashy stuff as it distracts the reader. There are more than a few sidebars that are double width and chock-a-block with blinking gifs that cause me to hit the Escape key immediately so as to stop them. The Reject logo is a minimalist in design and the bottom text, due to that, had to be legible. I played around a *lot* with colors and yellow/black made good legibility with the semi-military type font. At 150 pixels both graphics suffer due to pixelization. The hand written type font suffers more, although that is one damned fine piece of work! To my eye it is somewhat legible at 180 pixels. For a blog or website header graphic it is nearly perfect at full size as is the static one.

When first putting up the Jamil Hussein graphic, at 150 it suffered badly from that very same problem, even with large type in proportion to the image size. The image contrast for the military template text font, is less than the Reject logo, and suffers for that. But it was intended as a post-header graphic, not a side-bar graphic.

For the main page, I would actually use the animated gif as democracy is a *process* and that must be reinforced. I can't think of a blog that has an animated header graphic, right off hand, and most people prefer something staid when arriving at a web site. If you haven't read anything by useability guru Jakob Nielsen, he is one of the foremost people on how people take in visual information on the web (as opposed to Tufte who sticks with more static based work):

A good sidebar graphic must: 1) scale well to 150 pixels in width, 2) not break the 3:2 visual rule and less is better, 3) have good contrast for legibility of type, 4) if animated keep it slow and ease in transitions unless shock value is what the graphic and group is about. Both are lacking at 1 and 3, but do well on 2 and, for the gif, 4. It does not flash and distract, but still gets the message across... if you could only read it.

Detail for big, legibility for small.

There you have it!

Yes, this was yet another area that was an area of expertise for me while in my active career...

No comments: