Link to the website: http://www.gavingough.com/
This is a photographer’s portfolio site, and on the upper left corner there is a logo with the photographer’s signature that guide viewers to the main page.
Image replacement is one of the most basic techniques I would want to include in my future web design. Besides the benefits of having a logo to represent myself or my “brand,” I think image replacement technique helps make the website more customized and improve viewers’ impression on the overall design. According to some of my research, image replacement technique also makes the site search engine friendly. In this case, although the logo is an image, but the search engine could still detect the photographer’s name because it was included in the coding.
And it’s quite simple to accomplish this design.
First, we need to let the search engine know the logo is an important item in the site by putting real text into our HTML. We need to link the logo to the home page too, so the HTML for this logo looks like this:
<a href=”http://www.gavingough.com/” title=”Gavin Gough” rel=”home”>
<img src=”http://www.gavingough.com/wp-content/uploads//2013/05/GG-logo-website1.png” alt=”Gavin Gough” />
Then in the CSS stylesheet, we use CSS to replace the text with an image with the width and height of the image:
border-bottom: 7px solid #2D2D2D;
With this technique, we are not only able to replace text with image, but also allow search engine to detect the information implied by the image/logo/brand.