re: image replacement
5.04.2004
Got into an e-mail discussion with a pal today, and I thought, “Hey, we should be having this discussion on my site.” So here's what we talked about.
Hey amy.
Just looked over your blog, Looks good, the thing about multi-racial actors was especially insightful. Don't you love how marketing strategists use terms like “hot” to describe ethnicities as if it were a pair of jeans (genes?) ? Anyway you gotta tell me how you embedded the font in your headers (see maddenmedia “sample page”).
Good to hear from ya. That header trick is accomplished by an image replacement technique. I'm effectively replacing the text header with an image. You can get the lowdown on various IR techniques here.
Hi Amy!
So I be thinkin'.
What's the benefit of using image replacement?
Ah, you wanna know why you should go through the whole rigamarole in the first place?
Well I be tellin' you.
- Your markup is semantically correct. That is, your headers are in
header tags and not
<img src="">. Which is nice for markup purists, but also relates directly to - Search engines can read it, and give greater weight to keywords in
<h1>,<h2>, etc. Also, - It keeps structure separate from presentation. So, you could give your site a facelift by just changing the CSS and never touching the HTML. Or you can have different stylesheets for different users/media. You know, the whole CSS Zen Garden thing.
Those are the main reasons I can think of. I also think it makes things easier for editing. I mean, you can read the code and tell right away, OK, that's a header. That's why I like it.
oic
<embarrassed>...that's coo....</embarrassed>
I understand the benefits for SEO.
But on the externalized side, is the goal to separate images (that span pages) from the HTML. Greg loved to talk about separating the interface/presentation from the information. Making it possible to re-design or re-format sites without re-entering data. Could one of the goals be dynamically generated CSS files that change sites globally (for some personalized/customized presentation)? Is it (in theory at least) similar to the use of includes?
Don't y'all be embarrassed.
As far as CSS files that change sites globally (for some personalized/customized presentation)
- there are some sites that do that currently. Wired News is the first one that comes to mind. They put a cookie on your machine that will save your preferred font size for the site. Another thing that Wired likes to do is change the primary accent color sitewide. Like today it's hot pink but tomorrow it might be neon green or sky blue. They can change it everyday because it just involves a quick switch of CSS files. Way better than trying to do a global search-and-replace for
everytime we change the header on takemeaway.com (4 times a year).td bgcolor=blahblah
Excuse my rant. In answer to your second question, if your stylesheet is linked to the page via the <link> tag, it's very similar to using server-side includes. The differences are that you're including common styles (presentation) rather than common elements (content & structure), and that it happens client-side.
