This is the second 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 III Images and Text-Only Browsers

Today I'm going to show you a few strategies to arrange your HTML code so that it can be easily understood in a text-only browser. This means putting the elements of your page in a logical order within the HTML, so that they will still make sense when all the styling and images are stripped away by a text-only browser.

But, this is not just for the benefit of those few people who use text-only browsers, it can also improve your site's search engine optimization. Most search engines give higher priority to the keywords that appear highest to the top of the page. If your site is optimized to read well in a text-only browser then all of the keyword rich main content of your page will be near the top of the HTML code where the spiders want it.

One common style for web pages is the two column layout with the main content to the right of a smaller column with secondary information, such as links or ads.

The code for this layout is:

and the html:

But, when we put this into a text-only browser the CSS is thrown out and we see:

The less important left column appears at the top of the page. This can be confusing for readers using text-only browsers, and it can skew how search engine spiders register the keywords on your site.

The simplest way to avoid this problem is to move the left column to the right of the main column. Just move the everything from <div id='left'> to </div> in the HTML code so it is between the last and second last </div> on the page. In the CSS file add 'float:left;' after #main, and change 'float:left; ' to 'float:right; ' after #left. You'll also have to adjust the margins of #left to make keep the space between the columns.

But, there's no reason to sacrifice the design of your page when there is an easy way to keep that secondary div on the left, and have it appear lower in the HTML code. You just have to swap the float commands in #left and #main within the CSS file:

So there you have it, two simple methods for using a two column layout, while keeping the HTML in logical order. CSS allows you to place different elements of a page wherever you want regardless of where they appear in the HTML code. But, it is a good idea to maintain a logical structure in your HTML so it will be understandable in a text-only browser, and achieve better keyword targeting. Once you get into the habit you will find that it will also make you pages much easier to edit and maintain.

In Part III I'll discuss how to deal with images when optimizing your site for text-only browsers.

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.

Today’s tutorial is all about how to create a transparent background on an image using GIMP. You might have heard of a certain other fancy and expensive photo editing program. It can get the job down as well, but I’m going to use GIMP because I love open source software. You can find more information about GIMP, and download it for free at http://www.gimp.org/.

Images with transparency are useful in web design because they save you from editing your image every time you want to change the colours of your site. The background colour will simply shine through the transparent portions of your image. They also let you use gradients and allow more subtle transitions between the colours on your site.

First, open the image in Gimp and select the foreground of your image. The most accurate method is to use the paths tool to painstakingly trace around the edges of the foreground.

Today I’m feeling lazy, so I’m going to use the fuzzy select tool, but for a ‘real’ page I would take the time and do it right.

Once you have a satisfactory selection, press Control-C, or use the drop down menu to copy your selection.

Next make a new layer. Make sure that the transparency button is selected in the new layer dialogue.

Make sure the new layer is selected and press Control-V, or use the drop down menu to paste your selection.

Now select the floating selection in the layers palette, and click on the anchor to attach it to the new layer.

You can now delete the background layer, and you are left with your foreground on a transparent background.

Save the image as a png file and make sure to check interlacing in the save as dialogue.

Now we’ll just change the css code we wrote last week to point to the new png file:

Which will give us:

It looks just like it did last week, but what if we change the background colour?

Viola!

Note: Internet Explorer 6.0-

Version’s of Microsoft Internet Explorer earlier than 7.0 don’t have native support for transparent png’s. They have a tendency to turn transparent pixel’s into ugly tones of grey and black. Here’s a quick workaround.

You can use conditional comments to give alternate instructions to specific versions of Internet Explorer. These comments will be ignored by other browsers, so they make a powerful tool for working around Internet Explorer’s many quirks.

The following code will display the text between the<p> </p> tags only in IE 6.0 or earlier:

There are plenty of other conditional codes, and you can read all about them on Peter-Paul Koch’s site.

But, in this case we want to tell Internet Explorer to use jpg’s, or gif’s, which it can handle, instead of the png’s, which it can’t. Put the following code between the <head> </head> tags on your page.

This will create an inline style-sheet that is only visable to early versions of Internet Explorer, and will override the instructions given in the external style-sheet. Just don't forget to put the images where you tell the code to look for them, and edit them whenever you change the colour scheme of your site.

This is the simplest way to work around this problem, but it’s also possible to convince IE to display transparent png’s correctly using Microsoft’s proprietary AlphaImageLoader filter. If you choose this route you may have to make some tradeoffs with the fluidity of your design, but there are open source scripts that can help you take advantage of this tool:

Angus Turnbull’s, IEPNGFIX
Drew McLellen’s, SuperSleight

I’m still working on the design and usability review of my open source web directory project. 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.

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.