One of the most mundane tasks a web programmer or designer faces is the creation of (many) buttons. It is a tedious task.
If we have the original PSD, we must then resize it, typeset a new button, save it, and then reference it from our anchor.
And this all assumes we have the original artwork. Many of us don’t. Most of us have suffered this plight. And this just makes it even more tedious.
On top of all this, as we all know, search engines cannot index the text in buttons that we painstakingly made.
Frankly, I got bored of creating buttons like this every day at work; I’m a programmer not a designer after all, and the product of my frustration is a basic PHP class that generates simple buttons based on a template. The template consists of a left-image, a right-image, and a tile image for everything in between.
This obviates the need to make most buttons, but what about SEO?
Some of you might remember the article posted by Stewart Rosenberger regarding dynamic text. He applied Javascript and PHP together to dynamically change h1’s to graphics. In a nutshell, Javascript walks the document hierarchy, looks for a specified selector (ex. h1.foo), and replaces it with a image queried from the webserver.
e.g.
Wacky Widgets
becomes:
Kudos to Stewart for coming up with this fantastic idea. I have applied some of the same techniques to an automatically generated button.
e.g.
Camera repair
(<a href='http://www.camerarepair.com'>Camera repair</a>)
becomes:
This has the desirable effect of making button creation almost like standard markup. Simply by applying a class to our anchor tag, we have a custom fabricated button. No trips to Photoshop, no font guessing. No aggravation.
It also has some interesting SEO implications. These graphical buttons will not plague keyword relevance. SE’s should reference the anchor text as is. So, not only does this method provide a convenient solution to a mundane task, but it also enhances your site’s search engine friendliness. So people looking for wacky widgets or camera repair, might just find your site first.
Please see the bottom of this page for a link to source code, and an example implementation. The code is well commented for those interested in the inner workings, but if you’re not interested, just follow the examples.
If you have any questions, I can be reached at jsirovic@rustybrick.com.
Acknowlegements:
Stewart Rosenberger – Dynamic Text Replacement
http://www.alistapart.com/articles/dynatext/
Source code and installation instructions are available here: http://www.rustybrick.com/magic-button-info.php
Jaimie Sirovich is a web developer at RustyBrick, Inc. He specializes in developing database driven Web sites that are search engine friendly & optimized from the ground up.
