Replacing headings with images 3

[Dweezel]

I've just watched a video tutorial that showed several different methods for replacing headings (h1,h2 tags e.t.c.) with images. I'd like to do this as I'm keen to use a stylised font for some of the headings in a site I'm working on. One method uses css positioning to push the heading a few thousand pixels off the side of the viewable page and puts and image in its place.

The reason for wanting to keep the heading tags there at all of course is for search engine purposes. But I was wondering, would search engines interpret a heading tag that is outside the viewable area as an attempt to trick my way to a higher ranking?

The video tutorial was from Lynda.com which has a very good reputation, and the guy giving the tutorial made no mention of any possible SEO pitfalls. But these methods seemed a bit risky to me?

Can anyone offer any advice?

 

[feherke]

Hi

I think there is no design on CSS Zen Garden where at least one heading is not replaced with image.

Being quite common for professionals, I suppose it is not considered keyword flooding by search engines. Anyway, better SEO answers in forum828.

Feherke.

http://rootshell.be/~feherke/

 

[Dweezel]

Thanks for the reply feherke. I saw the SEO forum but it's rather dead so I thought I'd have a go in here. Do you use image replacement techniques yourself? If you do, do you do the css positioning off to the side?

Cheers.

 

[monksnake]

Why do you need to push the heading off to the side??

I'm lost on that.


<.

 

[Dweezel]

Just one option. Do you use a different method monksnake?

 

[monksnake]

You can apply a style to the heading such as this

h1 {
   background:url(./exc-error-icon.gif) top left no-repeat;
   width:20px;
   height:20px;
}

if you specify the width and height, you don't have any need to shift any content off the screen cause you don't have to put any content inside the header tag.

You can test this with a small pic of your own, just put an empty header tag in the HTML.

<.

 

[Vragabond]

monksnake, the problem is not providing space for the background image, it is providing alternative content for browsers who cannot render css. In the first example the text (that image represents) is shown to the client and in your example client gets a blank heading. It is quite clear which of the two is more useful.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[monksnake]

Yeah. MY METHOD.... j/k

I see, good point Vrag.

I always assume CSS support.

<.

 

[ChrisHirst]

http://alistapart.com/articles/fir/

http://www.highrankings.com/forum/index.php?showtopic=18299

Chris.

Indifference will be the downfall of mankind, but who cares?
Woo Hoo! the cobblers kids get new shoes.
People Counting Systems

So long, and thanks for all the fish.

 

[ChrisHunt]

Don't bother with images - here's a brilliant solution which uses Javascript and Flash to replace headings on the fly, using whatever font you like -

http://www.mikeindustries.com/sifr/

. It's totally accessible too.

As an example, I've got it running at

http://www.casaisobela.com/

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[feherke]

Hi

Do you use image replacement techniques yourself?

To answer your question, no, I do not use it. Does not properly fit my document design theory.

Feherke.

http://rootshell.be/~feherke/

 

[Dweezel]

Don't bother with images - here's a brilliant solution which uses Javascript and Flash to replace headings on the fly, using whatever font you like -

http://www.mikeindustries.com/sifr/

. It's totally accessible too.

As an example, I've got it running at

http://www.casaisobela.com/

Now that is class!

Thanks Chris

 

[jstreich]

How about something like:

@media screen
{
  .heading
  {
     /*image stuff here*/
  }
  
  .hide
  {
    display: none;
  }
}

@media print
{
  .heading
  {
    /*no image stuff*/
  }

  .hide
  {
    display: block;
    /* font stuff here */
  }
}

@media aural, speech
{
  .heading
  {
     /*nothing special*/
  }

  .heading
  {
    speak: normal;
    /* up volume or lower pirch or something if you want
       may want to pause after also... */
  }
}

<h1 class="heading"><span class="hide">Heading</span></h1>

Or:

<h1><img src="..." alt="..." class="header" /></h1>

JavaScript and Flash? For titles? What if someone is on dial-up... That method would take forever to load... wouldn't it?

[plug=shameless]

http://game-master.us/phpx-3.4.0/

[/plug]

 

[feherke]

Hi

JavaScript and Flash? For titles? What if someone is on dial-up... That method would take forever to load... wouldn't it?

You are right, is like shooting a sparrow with a cannon.
But while the size of files needed for that effect ( sifr.js 10361 + sifr-addons.js 1894 + csdchalk.swf 23157 = 35412 bytes ) is less than the size of decoration images ( outside1.jpg 33604 + surfer.jpg 32947 + calma1.jpg 70786 = 137337 bytes ), I would say for a modem user not the titles will be the problem.

And I can only admire how gracefully it degrades. I expacted that it will detect the presence of Flash plug-in and will try to draw the titles with Flash and will just fail because the Flash blocker. But seems that it somehow detects the failure of the Flash and restores the original title. Ok, it flickers abit but still impresses me.

Feherke.

http://rootshell.be/~feherke/

 

[ChrisHunt]

How about something like...

That should work, though user agent support of [tt]@media[/tt] commands is not always as good as we'd like. There's also the overhead of having to type in the extra <span> and create an image for each title.

JavaScript and Flash? For titles?

Well, it might seem like overkill - and it would be if I was suggesting you go away and write something - but this is a ready-made component you can just plug straight into your pages.

What if someone is on dial-up...

They download 30K of flash and JS files. Once. They get cached after they've visited the first page, so it's pretty efficient. On an images-as-titles site, they have to download the image for each new title - which could be several per page.

The main benefit - IMO - is ease of use. I upload the files, I add a little markup to my page template, and it's done. All the <h1>s, <h2>s (and whatever other elements I choose) are rendered in my chosen font. I don't have to think about it. I don't have to add extra markup to the headings. I don't have to create an image for each heading I write. If they ever sort out a way of specifying custom fonts reliably through CSS, I can remove the sifr markup as easily as I added it.

It's not for all cases. If you want to use really fancy graphical effects in your titles, if you need really fine-grain control of their appearance, if there's only a handful of them to do - use images instead.

On the other hand, sifr is a godsend for situations like blogs - where you've got lots of headings being generated all the time and it would be a royal pain to have to fire up a graphics program every time you write a new post.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd