This is the third in a series of three tutorials on how to optimize your website for text-only browsers. If you're interested, check out the other tutorials in the series:

Part I Download and Install Lynx on an Intel Mac
Part II Writing Logical HTML Code

In today's tutorial I'm going to show you a few ways to deal with images when optimizing your website for text-only browsers. The basic rule of thumb when dealing with images is to repeat all the essential information from your images as text in the HTML code.

The first thing you should do to optimize your site for text-only browsers is fill in the 'alt' attribute in all your '<img />' tags with a good description of your image. Lynx will display what is in the 'alt' attribute of images as yellow text, and most search engine spiders will include the 'alt' attribute as part of their key-wording algorithms. When you write your 'alt' attributes make sure to include the keywords you want your site associated with, while making it human readable at the same time.

The following code...

looks like this in Lynx.

Many websites use images as titles because they allow more control over the font and appearance of the text. The problem is that these words, which are essential to the meaning and strategy of your site, are invisible to text-only browsers and search engine spiders. While the 'alt' attribute will put the text onto the page it won't give it the emphasis that a title should have. Here are a couple of ways to work around this problem.

The first is to make the image into the background image with plain HTML text over-top. You can find my detailed tutorial on how to do just that here.

A second, but more sneaky, work around is to repeat the title as a header in the HTML but change the text color to match the background of your site. People using a conventional browser will see your customized text in the image, while search engine spiders and users with text-only browsers will see the HTML title. This is a simple solution, however some search engines may be able to detect and penalize this trick. It can also create unnecessary clutter in your code.

It is probably best to simply avoid using images to replace text whenever you can. Unless you have a logo, or trademarked text that is essential to the design and branding of your site, there is usually little need to use fonts and text features that conventional browsers don't support.

I’m still working on the design and usability review of my open source web directory software. I want to give a warm thank you to everyone who has sent me suggestions and advice. But it’s not too late to help me out. If you’re so inclined, take a look at my sample web directory and let me know what you think. I’ll be sure to give you credit when I roll out the new and improved design.

Except where otherwise noted, this content is licensed under a Creative Commons License.

Today I want to share a simple method for displaying text on top of images using CSS and HTML. This technique is useful for a number of reasons. It makes your text visible to people using text-only browsers. It allows you to use heading tags on the text, which will improve your search engine optimization. And it will let you use a single image under text that is customized for many different pages.

So let’s suppose you have a nice picture of a Shimenawa rope from a Shinto shrine in Japan and you want to put the word ‘Yokoso,’which is Japanese for ‘welcome,’ on top of the image.

The HTML code looks like this:

Which puts the text underneath the image like this:

Essentially what we want to do is take the image out of the html code and put it into a CSS file as a background image for the header div, and then place the text div where we want it.

The CSS will look something like this:

And then we have to make a few small changes to the HTML:

Which will put the text clearly over top of the image right in the center of the page:

So there you have it, a simple method for putting text on top of an image using CSS and HTML. Next time I’ll look at a way to use GIMP to further tweak images for the web.

I’m still working on the design and usability review of my sample web directory. I want to give a warm thank you to everyone who has sent me suggestions and advice. But it’s not too late to help me out. If you’re so inclined, take a look at my sample web directory and let me know what you think. I’ll be sure to give you credit when I roll out the new and improved design.

Except where otherwise noted, this content is licensed under a Creative Commons License.