SEO and Web Design – A Few Free Tools To Mend This Tainted Relationship

Web designer, web developer, whatever, I build websites and my best clients are design houses that use me to transform their designs into websites. I consider myself very lucky to be doing as well as I do in my particular neck of that woods. Below are a few tools I have been using on a regular basis to bridge the gap between design and SEO.

I have been a student of SEO for a few years now and as many of you may already know web design and SEO don’t always play well together. Working with designers I find that my knowledge of SEO gives them confidence to promise better performing websites. On the flip side, working out websites from complex, layered PSD files forces me to continually learn more about CSS, PHP, and HTML in order to transfer these designs into standards complaint, search engine friendly markup. Sure, I’ve got a few more gray hairs and have lost sleep trying to figure out how to manage multi-layered, animated, fancy fonted, glistening, gloriously shadowed designs that look OK in IE6 too… but in the long run, the results are truly valuable websites.

The funny thing is that while there are many tools available to help with the really complex things, its usually the little things that are the killers. I find myself fretting over things like a three pixel shadow going down the side of a floated div (that already has a repeat-x background) that has to be vertically flexible. Or a one pixel difference in the vertical position of a wrapper div in IE (one pixel up), Safari/Chrome (one pixel down) and Firefox (perfect). Fortunately I can afford to spend time on these oddities and not go broke thanks to several tools that I find invaluable.

Before I get started, it makes sense to mention what is perhaps the most useful tool of all, the articles and blog entries written by the experts. I follow the infallible advice and updates at SEOMoz.org, I love reading anything from Griz at his arsenal of make money online blogs (though the bear seems to be in hibernaton the last few months), and I am a member of Court and Mark’s keyword academy, a great resource which you can join for $1. Justin Briggs is also a great resource for SEO advice and insights, check out this great article on SEO Tips for Attractive Search Engine Friendly Web Design, a nicely written article on the needs of SEOs and designers and how to find and maintain a middle ground between these two disciplines.

The first tool I’ll mention is jQuery. jQuery is a JavaScript library that has been around for a while. I remember many years ago writing a script to do rollover images, it took me hours to figure out and even though it did work it was rather sloppy. With jQuery I don’t have to write that those types of scripts anymore because it’s already done. Whatever you need your website to do there is most likely a jQuery plugin already built to take care of it. Just write a few lines to call the necessary functions and Voi La. Need a SEO friendly way to replace those Flash animations? Need a simple way to make a drop down menu, or a lightbox, or tooltips, or pretty much any type of graphical functionality? jQuery is your ticket. Need a simple way to cycle through some images or content divs? Check out the jQuery cycle plugin. Its all done and there’s no need to reinvent the wheel.

The second tool would be IETester. When IE7 came out I was very happy to upgrade. Not as happy as when IE5.5 went away and not as happy as I’ll be when MS decides to make a fully complaint browser and destroys all the previous one but… happy none the less. However, this was not as smart a move as I had hoped. At the time many people still used IE6 and now I didn’t have a version on which to check my work. Crap. Fortunately there were places like Browser Shots where I could get a screen-shot of a site in several different browsers to see what I’d done but this was a pain and a bit time consuming. When I first discovered IETester I was skeptical but after installing and using it to check a site, making the necessary adjustments and was done within 10 minutes, I was very happy with this free piece of software.

A third tool I have been using lately is a combination of JavaScript, Flash and ActionScript that is called the Scalable Inman Flash Replacement or sIFR. This makes designers VERY happy because it enables you to use fancy fonts. Back in the day you could use a style @font-face, load the font onto the server, define it’s location then call it whenever you needed it. This however did not sit well with the font foundries. All their work out there up for grabs by anyone capable of viewing the page source code. Besides being a pain to get working in all browsers, @font-face is a no-no now however the foundries seem to be OK with the sIFR method because the font is embedded into a Flash file. I am very interested in the progress of an emerging service called Typekit. This service is not yet available though you can read about their progress at the typekit blog. What they are doing is developing a system through which designers and site owners can purchase a license to use a font. Then, by adding a script, they are able to use that font by loading right from the Typekit server.

I know there are a million and one other tools out there, most of which I haven’t even heard of yet. I am always looking for faster, better ways to do my job so if you know of any other cool web toys please let me know.