Image replacement & worries
RSL (29 pencils) | Sun, 2005-06-26 14:36I've been looking [lurking] around the web, checking out what method[s] other designers are using for CSS image replacement. There's all these different scenarios that seem to fail. Like the old "Images off/CSS on" routine which, however rare it may be, could completely leave a user clueless where to go next if your links are all replaced images.
I'm setting out to develop websites for visual artists, so it's not a big concern there. If you're browsing an art site with images off... You're really confused anyhow. But I wonder how big of a concern this really is. A lot of really nice CSS designs [by designers we all love and respect] are navigationally kaput when you turn off the images, so is it really such a big deal? I wonder if we can't expect that a user who has turned off his images might not be smart enough to figure out that's why a site looks a little wonky.
What's you guys' [and gals'] take?
Commenting on this Forum topic is closed.
I think if your content is mainly visual there is no point surfing it with images off. So, you can safely design your site in a way that it will break if somebody turns the images off.
most people don't know how to turn off imgaes anyway...
my blog: http://blog.one-waymedia.com
my work: http://www.one-waymedia.com
on both your points. My roomie, who is completely tech-ignorant [and whom I lovingly call the CompuTard™], said that if he had turned off his images and came upon a site that looked wonky or empty the first thing he'd think is "I need to turn on my images". But, seriously, I don't think he'd even know how to turn them off.
Could use the "title" HTML attribute to those elements (should be standards complaint) ... that would still require massive patience ...
A simple workaround would be to place text links at the bottom of the page.
... An ugly hack would be to make those image-replaced areas "position: absolute" (with no left and top declaration) and have them float above another layer that has the text version ... seriously ugly requirements. You could also add a line in the site disclaimer that says "this site is designed for image browsers and with image display turned on". If all else fails, just add a line at the end of the page that says "Please surf with images turned on!!" LOL ... hey that could actually be added as an image "alt" text ... ... this requirement can cause major stress.
of ideas you've got there. I'd forgotten all about the practice of putting a quick links summary down there near the footer. Hmm... Possibilities... But the title attribute would only work when the links were "mouseovered" and they're not visible without images, so it's kind of blind luck even finding them.
On the "Please surf with images on" tip, I actually put that in some replaced text in a footer of a design I'm playing with.
Using it as alternate text doesn't sound like a bad idea at first, since a lot of decorative images will have empty 'alt' tags anyways. Still, images can take time to load, someone could see that alt message there and kind of go "huh? did this site detect I have images turned ofF, what deos this mean?" It will just make things a little more confusing (also what will blind users using voice browsers think of those?).
After sleeping on it, my 0.02 cent conclusion are:
1. People who surf with images turned of, (should) know what they are in for.
2. If you as a web developer have doubts about the image replacement technique and your audiences ability to browse your site (most important), maybe best just stay away from the technique. The beauty of text is how fast it can be visible to the web surfer. Of course I am thinking safe and practicle rather than cutting edge.
I felt guilty about the ideas I posted, so did a search for "Fahrner Image Replacement", found some articles ...
"The original technique (FIR) described in the body of this article is no longer recommended for use, as it makes the hidden text completely inaccessible for certain screen readers. Instead, see one of the alternative techniques mentioned at the end of the article ... "
http://www.stopdesign.com/articles/replace_text/
(http://wellstyled.com/css-replace-text-by-image.html)
Facts and Opinion About Fahrner Image Replacement
http://www.alistapart.com/articles/fir
In defense of
http://www.digital-web.com/articles/in_defense_of_fahrner_image_replacement/
Passerby's link to FIR is the best solution I believe.. Its what I would use if I ever made a graphical navigation, and I've seen some people use it VERY nicely in the Zen Garden. Plus it translates to different browsers well to my knowledge...Of course the work-arounds are what I'm talking about.
Out of all the IR methodologies, it's the one sure to fail in screen readers [which, granted, is not a huge deal on a visually-oriented site]. I use Phark and Gilder/Levin image replacement. They both are accessible to screen readers [a plus], both are rather easy markup on the CSS side. Phark would be my first choice, but it's the one that fails under the "images off/CSS on" conditions and [under conditions no one is quite sure of] it can sometimes fail in IE5/win [but not 5.5]. Gilder/Levin is a little weirder in its markup, but works with the images/CSS dilemma.
There's always sIFR as well, but it's got its own baby issues.
I actually find that sIFR is pretty smooth. Don't expect it to work in stuff like IEmac or anything but for the most part I like it. To my knowledge though sIFR only does Font replacement and won't use normal images right?
Those two other options look good though, I've been looking for a replacement to FIR-based.