Balancing Design and Function for SEO

Posted by on September 12, 2010 at 6:41 am.

Eye Candy vs. Search Engine Placement

I was having an interesting conversation this morning with a client.  She is a talented author and designer.  Which puts her in the “Creative” category of personalities.

I love creative and imaginative people.  They add color and texture to our world.  In the world of online marketing there needs to be a balance between form and function.  It is what I call:  The Eye Candy vs. SEO conundrum.

Often the artsy look is at the expense of solid code and navigation practices.  The guiding principle for a developer in creating this balance has to be:

If it can’t be found it doesn’t matter how pretty it is.

The search engines have to be able to navigate the site and add your content to their index. It is that simple. I can’t tell you how many times I’ve had a small business owner say to me “I’m not getting any traffic to my site”. I have found a couple of instances where the site had plenty of content, but there was only one page in the google index. Why? because of the way the site code provided navigation.

Putting the site navigation in a flash module or javascript drop down menu means the search engines can’t crawl your site and find all the content.

Using images with words in the image is another way to make a site “pretty” but the search engines can’t read words in a graphic.  This is the one worst issue in the balance between eye candy and SEO.  Making it pretty to the eye by putting fancy fonts and colors in a graphic and then slicing those graphic into the code so it looks pretty to the eye.

Creating Balance Between Form and Function

There are new tools available to designers that are currently being tested and included in the new browser standards.  HTML5, CSS3  and @Font-Face are tools making it possible to do things in design that are functional and encoded in a way that search engines can crawl (read) the site.

CSS3 Drop Shadows, Rounded Corners, Gradient Fills

All of these functions that once had to be done with graphic which take time to load can now be done in style sheets.  Why is this important.  Because graphics take time to load.  Style sheets render the effect in the viewers browser.  The difference, SPEED.  Rendering in the browser means a site loads much faster.

@Font-Face  Fancy Fonts

Designers love Fancy Fonts.  They like all those pretty curves and long descenders.  Up to now we had to put those fonts in graphics to display them.  Why, because in the past in order for a browser to display a font it had to be loaded on the views computer.  Most people don’t have a lot of fonts on their computer so designers put those fancy fonts in graphics so they would display on all computers, in all browsers.  But has we stated earlier, Search Engines can’t read the text in those graphics.

Now with @font-face technology designer can load a font onto the site server and call that font from there.  This means that if a viewer doesn’t have the font face on their computer the browser will load it from the site.  Everyone can now see those fancy fonts and search engines can read them.  @font-face creates a Win/Win for everyone.

Your site has to be more than pretty.  It has to be functional.  When picking a developer you should ask about how they will develop the site.  Do they incorporate CSS3 and @Font-face fonts in their design?

You want and need a designer that will balance form and function.  Design and SEO.  Yes, you can have both, don’t settle for eye candy.  Remember the guiding principle:

If it can’t be found it doesn’t matter how pretty it is.

Leave a Reply