Hi Kay, Apologies for the long rave below...
The most detailed article on image replacement options is Dave Shea's image replacement page: http://www.mezzoblue.com/tests/revised-image-replacement/ However, all of these image replacement methods have serious downsides that should be explained to designers before they jump on them as a solution. 1. image scaling People with vision impairment (which is a surprisingly large percentage of the general population) are not able to scale an image up in the same way that they can with HTML text (excluding Opera's full page zoom). 2. images turned off As mentioned, people browsing with images turned off may not see any heading, which is the worst of all outcomes. 3. "display: none" Some image replacement method (including FIR) have been shown to be completely unusable for screen readers. Basically anything that is hidden using display: none is also hidden for a large percentage of screen readers. The Lindsay method is better than most in this area as it doesn't really hide the content, just shrinks it and tucks it away :) 4. user style sheets Mark Stanton has mentioned this in the past but it is worth bringing up again. There are three types of style sheets interacting on any web page - browser style sheets, user style sheets and author style sheets (the ones you develop). A user can set their hn styles to a size and colour and also assign "!important". This has more weight and will therefore over-ride any author rules. This could affect any of the "shrink and tucked away" methods. 5. maintenance An image is much harder to adjust or replace at a later date than html text - a vital point on a large website. 6. speed Every image on the page adds download time. A CSS style applied to a standard hn tag will be cached and used throughout the site. The size differences can be significant - especially on bigger sites. 7. search engines This argument is a little harder to justify as some image replacement method are still based around hn tags - as far as Google is concerned they are still standard hn content. However, image replacement methods that do not use hn's as a basis are completely missing any semantic meaning. 8. "content" in a css file John Allsopp (one of the original CSS guru's) explains this better than I can... He says "If it is bad to put presentation on the page, how much worse is it to put presentation inside the CSS file? It is fundamentally unsound." Finally a late afternoon rant (which should be seen as opinion - not fact)... There are times when images for text could be considered critical - page headers, logos, logotypes and main page banners. However, there are many times when this is not the case. The argument for using images for multiple subheadings on a page (keep in mind we re not talking about major banners or branding here) sometimes comes down to a lack of understanding about the web (as well as a lack of understanding about large site maintenance). Some web designers are stuck in a "print mentality". I was stuck in this mindset for years. It took years of Peter arguing with me till the message got through - the web is not print! Designers with this mindset see their role as controlling an overall visual styles into all levels of a website. They do not understand that the web is bigger that the 5 main browsers or what you see on your own desktop. The web includes devices like screen readers, braille readers, printers, fridges, mobile phones/hand helds, normal browsers and text browsers. This will increasingly become part of the web experience as new web devices come onto the market. On many of these devices, graphic subheadings mean nothing. It can even be argued that content is accessed more often on some sites via RSS/Atom/XML feeds than using the usual HTML pages. In these instances, the visual style of the content is not included at all - making content accessible to the widest range of users and devices is the key. Headings that are produced using HTML text combined with CSS are the ultimate web solution as they are infinitely flexible, can be styled to suit particular devices and are completely accessible to any device. Rather than fighting against the limitations of the web, designers should be embracing these limitations and working within them. There are numerous examples where designers have produced staggeringly good websites while working within these limitations. One quick example (by Anton - a WSG member) of HTML text that has been heavily styled to achieve a graphic result is here : http://standardice.com/experimental/magazines.html Time to do some designer convertin' :) Russ > > Hi, > > I've been lurking here for a while, but seeing Russ's excellent > presentation at the meeting before MXDU has encouraged me to be more > active. I'm the appointed "Standards/QA Nazi" in my workplace, as well > as being in charge of search engine marketing for our clients. Oh, and > I'm supposedly also the senior ColdFusion developer, not that there's a > lot of time left for that! > > I'm trying to put together a list of resources for our graphic designers > on styling heading tags - h1, h2 etc. Basically, they want to use > images for everything, and I want them to use styled text instead. I'd > like to show them the range of fonts that they can quite safely use as > well as some awesome-looking examples of styled headings, to make them > stop whinging. I have the visibone font survey[1] already - does anyone > know of any other resources or great examples? > > Thanks! > > Kay. > > [1] Visibone font survey: http://www.visibone.com/font/FontResults.html > ***************************************************** The discussion list for http://webstandardsgroup.org/ *****************************************************
