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.

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.

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

This is the first 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 II Writing Logical HTML Code
Part III Images and Text-Only Browsers

Today I’m going to show you how to download and install the Lynx web browser on an Intel based Mac, but first I should explain why it’s important to optimize a site for a text-only browser.

A text-only web browser will only show what’s in the HTML of a page. It won’t show JavaScript, Flash, images, or even CSS. So, if your HTML isn’t well organized your site won’t make any sense in a text-only browser. This is significant because text-only browsers closely mimic the way search engine spiders read your site. If your most important keywords are contained in images, JavaScript, or Flash, or they aren’t placed near the top of your HTML code, then you’re going to have SEO problems. In short, if your site reads well in a text-only browser, it will also read well to a search engine spider.

Believe it or not there are people out there who use text-only browsers to surf the net. There are others who use conventional browsers, but without Flash plug-ins, or with JavaScript and images disabled. There is no reason to leave these potential users behind when, with a few simple techniques, you can include them and still use all the latest features and toys. A text-only browser is one of the tools you can use to maintain this backwards compatibility.

But before you can use this tool you have to get it from the hardware store and add it to your toolbox.

Lynx is the most commonly used text-only web browser. It was developed at the University of Kansas as a campus wide information system. In the beginning it had its own hypertext language, but later adopted standard HTML conventions. Today it can be used on any system that supports a command line interface. Because Intel based Macs are built on Unix, and provide access to a command line interface through Terminal, they can easily be made to run Lynx.

If you are running Mac OS X 10.5.1 ‘Leopard’ you can get a free download of the latest version of Lynx for Mac at the Apple website. If you are running an older version of OS X you can find a version of Lynx for your system at the GNU Mac OS X Public Archive.

Once you have downloaded the program double click on the mounted disk image to access the files. Once you open the disk image this is what you will see:

The first thing we have to do is set up the Unix command line terminal to run Lynx. Find Terminal in Applications --> Utilities and open it.

If your day-to-day account doesn’t have administrator privileges, then first login to Terminal with an admin account, then drag the install.command icon into the Terminal window. Next, make a folder called ‘Lynx’ in your Applications folder and drag all of the other files from the disk image into it. Whenever you want to use Lynx just double click on the Lynx.command icon. You have now installed Lynx.

There are just a few more things to clear up before we finish. First, you might want to make the terminal window bigger to reduce unnecessary scrolling. Click on ‘Terminal’ in the options menu and choose ‘Window Settings’ in the drop down menu. In the dialog box choose ‘Window,’ and set the dimensions to whatever works best on your screen. Click ‘Use Settings as Defaults’ and close the dialog. The next time you open Lynx it will open a window the size you chose.

Another thing to keep in mind is that this installation process will open Lynx by default whenever you open a Terminal shell. If you want to use Terminal for another purpose you will have to quit Lynx and then login again. Press Q to quit Lynx, and then choose ‘New Command’ from the 'File' drop down menu. Type ‘login,’ and hit enter. A new Terminal window will open. Enter your username and password and you are off to the races.

That’s all for today. In Part II I will present some tips for creating logical and well-organized HTML code that will look good in a text-only browser.

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.