Search-Friendly Design: The Magic of Stylesheets

by Jessica Hammer

Optimized, or search engine-friendly, Design is a growing topic for us here at MoreVisibility, and I am glad to have the chance to blog on behalf of our Optimized Design Department! Our crack team of designers and programmers has been assembled to optimize and re-design clients’ sites for greater crawlability, relevance, and of course, beautiful design and functionality. As you would expect there are many aspects of a site that need to be modified to make it SEO friendly, but one of the most critical and difficult components is implementing stylesheets, or CSS.

CSS stands for cascading stylesheets, one of the prettiest names I think that the web development community has ever come up with. CSS was standardized by the W3C in the mid-nineties, but it wasn’t until the current decade that all browsers supported the platform. In recent years, a growing numbers of forward-thinking web developers have been using CSS exclusively to format their sites, with very efficient and beautiful results.

So what does CSS do? CSS is a stylesheet primarily, so as you can imagine, you can use it to format paragraph text, headers, sub-texts, etc. The stylesheet is referenced in each html tag, <p> for paragraph, <h1> for header, so that when you change an element of your <p> tag in the CSS, your text will change throughout the entire site. Online projects have been set up to showcase just how much you can change the look of a site, by simply formatting the stylesheet. CSS Zen Garden (http://www.csszengarden.com/) is one such project, where designers are challenged to just change the .css file, not the html, with amazing results.

But wait, there’s more! In addition to providing you with a consistent and energy-saving website, CSS can be used to format the entire layout of your site, from header images to navigation bars, and from separating columns to making input forms. Through the magic of a <div> tag (division- a catchall “box” that you can resize, stack, nest, and generally manipulate), your site can be built- out entirely using CSS, giving you clean code, table-free layout, and one place to reference your formatting. The amount of code on each page is cut drastically, and gives you a site that search engine spiders find a lot more crawlable.

So why aren’t we all swimming in CSS accessibility? Developers have been slow to adopt CSS, out of comfort with their old methods and the different interpretations with which the browsers read stylesheets. These issues can be remedied by a developer with plenty of CSS experience, who can create a site that looks great, is search-engine friendly by nature, and maintains a consistent look and feel on every browser and every system.

But if you cannot spring for an entire re-design, try implementing CSS for just your fonts, headers and links. You will soon fall in love with its ease and accessibility!

To check out the range of CSS-design possibilities, see CSS Remix (http://www.cssremix.com/), a showcase of the best and most beautiful designs out there. For fun, click on one of the featured sites, and in your browser window, go to View>Source, and marvel at the scarcity of markup! It’s magic! And the engines will love you too!