Page is a not externally linkable
bedlam - 7:42 pm on Feb 18, 2006 (gmt 0)
The basic idea is that I want all of you webmasters to keep your beautifully-designed pages, but I want you to place the decorative elements where they belong--in the stylesheet. Getting non-content images out of web pages The uses of images But there are other uses of images on webpages; whatever your opinions about design on the web, I think you'll agree that none of these types of images are critically important in quite the same way as the categories above:
This post comes out of my comments in another thread [webmasterworld.com] in this forum where I suggested that non-content images should be removed from the HTML markup of a web page. Because some participants in the thread seemed to think I was advocating the complete removal of images, I've decided to expand a bit on the theme here.
Sometimes, images are crucial important parts of the content of webpages. Diagrams on how-to sites, graphs on informational sites, photos of the destination on tourism sites, samples on portfolio site, product images on e-commerce sites are all simply indispensible.*
These are the images that I propose you remove from your pages.
Why would I want to remove images from my pages anyhow?
In fact, this is the wrong question. The question to ask is "why put these non-content images into pages in the first place?" or "Why dilute your content with irrelevant code?"--and the only possible answer is 'to serve the design/branding/CI'. The reasons for not including such images in pages are multiple--and there are many reasons besides accessibility including the possible simplification of site-wide design changes and possible SEO benefits--but I'm going to let the w3c do the talking [w3.org] with respect to the accessibility benefits.
Fine. So what can we do about it?
Two things (which really go hand in hand):
All right, all right, but HOW do we do it?
Here, I'm just going to provide a couple of code samples along with a few references. I've chosen as representative situations a page header with some 'happy suit people' images, and a list with graphical bullets. I'd have included a nav menu, but I couldn't do half as good a job here as has already been done elsewhere [google.com].
Page header
In the olden days, we all used to code page headers this way:
<table width="760" bgcolor="#FFFFFF">
<tr>
<td width="760" height="50">
<img src="images/company_logo.gif" width="200" height="50" alt="Somecompany logo" />
</td>
</tr>
<tr>
<td width="760" height="100">
<img src="images/happy_suit_people.jpg" width="760" height="100" alt="happy suit people" />
</td>
</tr>
</table>
Simple enough, right? But arguably, neither of those images is actually content as such.** If tasked with producing something that visually corresponded to the above I'd do something like this in the markup:
<div id="header">
<b class="company_logo">Somecompany name</b>
</div>
...that's it.*** Besides that, I'd add this to the css file (css shorthand used to demonstrate how compact it can be...):
#header {
/* Standard css, nice and simple: */
width:760px;
height:150px;
background:#ffffff url(images/happy_suit_people.jpg) no-repeat 0 100%;
}
h6.company_logo {
/* For more information about this technique, search for [url=http://www.google.com/search?q=Leahy%2FLangridge+Image+Replacement]Leahy/Langridge+Image+Replacement[/url] */
width:200px;
height:0;
overflow:hidden;
padding-top:50px;
background-color:#ffffff url(images/company_logo.gif) no-repeat background-position:0 0;
}
Again, that's all. This code should produce something visually identical to the table-based header above, but which will degrade, absent css, to a single line of bold text: Somecompany name****
List
Another favourite. I can't describe how often I've come upon a nicely formatted list that's just a huge table with a billion images added as bullets, something like this:
<table>
<tr>
<td><img src="images/list_bullet.gif" width="10" height="20" alt="" /></td><td>Lorem</td>
</tr>
<tr>
<td><img src="images/list_bullet.gif" width="10" height="20" alt="" /></td><td>Ipsum</td>
</tr>
<tr>
<td><img src="images/list_bullet.gif" width="10" height="20" alt="" /></td><td>Dolor</td>
</tr>
</table>
...which is just plain silly. Aside from accessiblilty, it's much more work to type it... We could approach a visually identical list with this markup:
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</ul>
...and this css:
ul {
list-style-type:none;
padding:0;
margin:0 0 1.5em 0;
}
ul li {
padding-left:25px;
background-color:transparent url(images/list_bullet.gif) no-repeat 15px 5px;
}
Again, this list will look very similar to the previous one, but will likely make a lot more sense in a screenreader.
You can have it both ways!
Nobody's suggesting a return to a text-only web--graphics are too important and too darned useful in too many situations for anybody to advocate doing away with them. But there are situations where a pure or nearly-pure text document is infinitely preferable to a giant mass of spacer gifs and pointless list-item bullets. The advantage to pulling the purely decorative stuff out of the markup and placing it in the stylesheet instead is that you can have both without coding an extra byte.
-b
*There are other threads in this forum about how to use html's alt [webmasterworld.com] and longdesc [webmasterworld.com] attributes in the service of accessibility.
**Though we could definitely have a discussion about whether this is or should be true of the logo...here, I'm going to assume it's dispensable--but feel free to change my mind in another thread.
***We could also debate the correct markup of a logo--but not here. I've marked it up in an arguably 'nonsemantic' way here, but added a class for the purpose of more accurately describing the marked-up information.
****Just a note about image replacement techniques in general. I like the 'LIR' sort here, but it's important to make an informed choice about them; it can be tricky to come up with a solution that works in any permutation of both of the following circumstances: a) images are/are not disabled, css is/is not disabled...
[edited by: DrDoc at 9:05 pm (utc) on Feb. 18, 2006]
[edit reason] Added link to thread refered to in this post [/edit]