I found this site highlighting some of the web design trends for this year:

http://webdesignledger.com/tips/web-design-trends-for-2010

 

I saw one of the chosen website (no. 13 Intro Boxes): http://www.alessandro-cavallo.de/

 

And as a newbie, I viewed its page source. And the h1 tag is text: Hello my name is Alessandro Cavallo I do web and graphic design

 

Why is it that when you view the image, the above text is actually an image (http://www.alessandro-cavallo.de/images/headlineNameBlue.png) instead of a text?

 

How is this done exactly? Will you not be penalised by google for hiding the text under an image?

The background image http://www.alessandro-cavallo.de/images/headlineNameBlue.png is in the #header .logo div

 

<div class="logo fixPNGBackground">
		<h1>Hello my name is Alessandro Cavallo I do web and graphic design.</h1>
	</div>

 

with the style

#header .logo {
position: absolute;
width: 528px;
height: 63px;
text-indent: 528px;
overflow: hidden;
white-space: nowrap;
top: 100px;
left: 49px;
background: url("../images/headlineNameBlue.png") no-repeat;
}

 

The h1 tag is also inside this .logo div and the style has text-indent: 528px which moves it outside the div so it can't be seen. This is often done where the background image is a link, but it isn't here. The h1 tag was probably hidden rather than deleted so that it is read by search engines like Google which like to read a h1 tag as a hook for site analysis so instead of deleting it when the background image was added, it was decided to move it off-screen.

 

The h1 tag is also inside this .logo div and the style has text-indent: 528px which moves it outside the div so it can't be seen. This is often done where the background image is a link, but it isn't here. The h1 tag was probably hidden rather than deleted so that it is read by search engines like Google which like to read a h1 tag as a hook for site analysis so instead of deleting it when the background image was added, it was decided to move it off-screen.

 

Will you not be penalised by google (seo wise) for doing the above h1 trick?

Will you not be penalised by google (seo wise) for doing the above h1 trick?

 

The opposite actually, part of the reason this trick exists (also accessibility of course).

The opposite actually, part of the reason this trick exists (also accessibility of course).

The trouble here is that google doesn't know when you're hiding text genuinely (you have graphical text to replace it) or whether you're trying to black hat SEO...

 

We're in the middle of a discussion about this here: http://www.webdesignerforum.co.uk/topic/34405-who-wins-the-accessibility-election/

The trouble here is that google doesn't know when you're hiding text genuinely (you have graphical text to replace it) or whether you're trying to black hat SEO...

 

We're in the middle of a discussion about this here: http://www.webdesignerforum.co.uk/topic/34405-who-wins-the-accessibility-election/

 

It's probably best to avoid this.