Some (very) simple tips
It’s been a while since I did a tutorial. Doing tutorials takes a lot more time than regular articles, that’s one reason. A constant nagging voice in my head saying “They know all that, you are not telling them anything new” is another.
Of course I am both right and wrong on the last one. Most things I write about are not rocket science. And me aiming to be accessible and casting a wide net with this blog doesn’t help. But I am surprised on a nearly daily basis by what people I run into do not know. I meet designers totally unaware of the possibility of fluid design, for example. Or programmers to whom HTML should be simple given the magic they do with PHP, but who are totally unaware of anything beyond the basics.
So, since after the success of my last article (The layout must die) I want some more time to think about the sequel (Websites do not exist) I figured I’d start with a series of tips and hints. Nothing worthy of full tutorials, but useful enough to pass on.
Fluid design and misbehaving images
When you design a fluid website there are some problems you run into, mostly to do with the fact that not all components of a website want to be fluid. Images for a background for example, or a header image. (Those large image-headers above sites should die, too, by the way.)
Obviously it is best to rethink your way of designing to work with those issues rather than against them, but if you have to there are some tricks.
A fluid background image
This really only works with vector graphics although I have had some decent results with bitmaps. The trick is simple: Open your image in Illustrator and use the export as Flash option. Then put the image in a DIV which you give width: 100%; height: 100%; and z-index: 1. Now layer the rest of your site on top using positioning and z-index. Of course you could use this to create a moving background, but there are very few valid design reasons to do so. However, I have seen some very subtle colour-shift effects, which were quite nice.
Better results in Flash
I see a lot of Flash sites with grainy graphics. This is a shame since one of the nicest, if the major redeeming factor, of Flash is that it stays crisp and sharp no matter how you scale it. Assuming, of course, you do it right.
The problem is that designers often combine bitmaps with vector when creating Flash movies. Especially designers used working for print then get things completely wrong. They will layer their images in Photoshop because that’s what they are used to, and then export the whole to be used in Flash. By the time their images hit the Flash program, they have been treated to Photoshop’s curious propensity for bitmapping whatever you feed it. Even when you expressly tell Photoshop to retain the vector data, it will often still screw up. The solution is simple: Export your vector images as Flash directly from Illustrator and import those to your Flash Library, compile in Flash, not Photoshop.
You’ll see a notable difference in crispness. Try it.
Better anti-aliassing for buttons
Another issue is with .png and (shudder) .gif not really producing nice results if you don’t know what to anti-alias them against, as with a fluid design where the relative position of your image versus the background is a big unknown. Again, this works best with vector images, but exporting as .swf is your friend, again. Now you could use actionscript to make the buttons work, but far better would be to layer a true anchor on top using positioning, an anchor element displayed as ‘block’ and z-index.
This preserves the functionality for those who can’t use flash for whatever reason.
A truly interesting background
Something only fluid designs can do is to make your background truly interesting. Look at http://www.defcon0.com/rick. This site (work in progress) uses several layers with PNG’s with alpha transparency layered on top of each other. By using positioning the images are made to stay where they are relative to their containing block. In other words: If the block grows, the images move with it, creating an effect like a background changing with the site.
If you can’t avoid anti-aliassing
Sometimes you really need to use transparency against a variable background and can’t effectively anti-alias. (Because you’ll get ‘haloes’.) This trick gives very mixed results, but it might save you in a pinch.
Save your image with a matte of about 30% gray. (Play around with this for best results, depending also on the background. Lighter for brighter colours, darker for darker. If you have a predominant colour, choosing that one might help, too.)
Save your image again, turning matte off completely. Open up your matte-d image and using an eraser brush of one pixel remove the brightest of the matte pixels. Then select the “burn” tool and subtly darken the rest. You are working by eye here, so play around and save all your iterations.
Now, layer both images on top of each other using z-index and give the matte-d image a transparency of about 30% to 50%. Again, play around for best effect. The top image might benefit from some transparency as well, depending on your situation.
The darkening and the transparency combined now “fake” your anti-aliassing for you while the top image ensures that the actual image still appears 100% visible.
Avoid using image map
Image maps can be done accessibly but it’s tricky and far from ideal. So, if you can avoid it, do so. You could probably arrive at this trick by reading the above and turning on your “creative” plugin, but I’m going to write it out anyway because one rule of accessibility is to never assume the presence of plugins.
If your image map involves buttons of some sort: Export your image, with buttons, flattened. If not, simply skip this step. For crisper text-buttons you might want to export your buttons directly from Illustrator or CorelDraw (You do build text buttons in a Vector package, right?) as PNG. A rule of thumb is that text and images with “hard” edges look better as PNG while photographs and images with many shades of colour look better as JPEG. Now, either place your links (the anchors) in your HTML with their text or add the images, your call. Don’t forget an alt-descriptor and consider using a UL/OL list. (More about this later)
Now display your links as block, giving them suitable dimensions and position them on top of your hotspots on the image.
Simple, no?
In fact: When I use an image I often do this simply to anticipate users’ clicking behaviour. For example: I’m building a site for an Olympic sports team, which features a large image of them in action. There are several ways to get at their bio in the regular navigation, but you know people will try to hover the image anyway. So I added two clickable areas. Just a little extra service.
Use lists effectively
Lists of links are a major stumbling block for the non-sighted. Imagine having someone reading a list of bus stops to you. You only need to know which is your stop, but you don’t know how long the list is so you have to wait it out… annoying, right? Well, screenreaders will pause on an UL or OL and read out “List, X items” where X is the number of items in the list. Putting your links inside an UL or OL therefore really helps the non-sighted user navigate.
Navigation menu’s and lists of links should be inside an UL list. (Unordered list.) But for the non-sighted it’s also quite useful to add numbering of the links. It helps them remember where items in the menu are. If your site structure and code allows you should consider using an OL (Ordered List) instead. Obviously this complicates your life if you want to hide the resulting numbering from the sighted users but it can be done using clever coding and layering. Most of the CSS won’t differ from an OL, but you’ll be doing the non-sighted an immense service.
Now, there are issues with numbered lists; anecdotal evidence and limited testing suggests that screenreaders handle them differently. It is therefore better to simply write your numbering out in your links. Whether this works for you depends on your CMS amongst others. (You don’t want to change long lists of links by hand each time a menu item changes.) However; hiding them could be as simple as “margin: -1em;”.
No Comments yet.