DAY 9: Cascading Style Sheet Design

If you haven’t completed day 8 of the SEO course, you can review: DAY 8: Sculpting Your Site Structure before starting this post.

“A picture must possess a real power to generate light and I’ve been conscious of expressing myself through light or rather in light.”

- Henri Matisse -

Developing a SEO friendly framework

Although more related to web design than SEO, it is important for you to understand some basics of HTML and other related languages if you really want to improve your SEO work.

Whether you are going to implement the changes yourself or get a competent web designer to put your site together, the information we are going to discuss today will have a tremendous impact on your on-page SEO.

What Are Cascading Style Sheets?

Cascading Style Sheets (CSS) is a fairly new method of formatting and styling the content of your pages.

Traditional HTML pages where quite limited in what you could personalize on page and how you could customize and style your design.

All to this has changed with the introduction of CSS; you can now
customize as many elements of your content as you wish!

Not only CSS allows for much nicer web designs, it also allows much neater code as search engines don’t read cascading style sheets.

CSS are the best method to show ethically one thing to the search engines, and another one for the human visitors, this way you have an optimized page both for the search engines and your visitors!

How Cascading Style Sheets Work?

I’m not here to teach you how to program in CSS, that’s not the objective of this lesson, but nonetheless, I just want to show you with illustrations what I mean.

A traditional old HTML page would look like this:

Cascading Style Sheets work differently; instead consider each styling information as a new “layer” that you apply on top of the previous one:

While the search engines will see the basic non styled page (as above) containing all what they need to know, the visitors will be greeted with a pleasant layout and overall design.

Faster Loading Of Your Page

There are many reasons as to why CSS allows your pages to load faster, if you want to read more about that, I invite you to read my older post SEO Help about Cascading Style Sheets and HTML Tables.

But basically, the fact of having shorter neater code makes a lot of difference by itself.

Not only that, but having images loading as a styling sheet instead of inline content (except for your image links) remove all their unnecessary cluttering code work out of your pages, and doesn’t require your browser to load the images first, as they will be applied later through styling.

Here’s the non styled version of my header, what the search engine crawlers see and index:

Now, here’s the styled version of my header that you visitors see:

Optimal Positioning Of Your Content

All the previous elements I talked about are important because the less junk code the search engines spiders have to go through; the easier it is for them to identify what is important in your page.

Spiders are not very smart and thus only read from top to bottom; with the understanding that the more a content is placed towards the top, the more important it is, and the more it is placed towards the bottom, the less important it is too.

Here’s a traditional Table based layout

At first sight, nothing particularly wrong with this right?

However everything changes when you toggle to Code view. I will spare you the details, but basically this is the order in which the search engines spiders read and evaluate the content of your pages:

As you can see, for the search engines, the content of this page is classified as follows:

• Most Important – My Page Header
• Important – My Sidebar
• Not so Important – Menu
• Not Important – My Content
• Least Important – My Page Footer

In order to have the table to read in the order we want, the page would have to look like this:

That may work for the search engines, but certainly not for your visitors!

This is where the real beauty of CSS comes; you can not only edit and design styles in colors and images, but also in positioning!

That’s right, CSS allows you to decide the order in which the search engines are going to read the content of your pages, as well as allow your visitors to enjoy a great web design!

As you can see, in outside appearance, both the table design and the CSS design look exactly identical.

However once you look at their source code, this is where the magic unravels itself!

Now your CSS code structure tells the search engines:

• Most Important – My Content
• Important – Menu
• Not so Important – My Header
• Not Important – My Sidebar
• Least Important – My Page Footer

Exercise

Map out a potential site layout that you think would be interesting for you, and define in which order you’d like each block to appear.

If you have knowledge about CSS yourself, you’ll then be able to implement such changes yourself, if not, you’ll have to make sure that your web designer follows your instructions as he develop your site.

Again, another reason not to rush by getting your site built too soon, knowing this from the start will save you huge amount of time in not having to modify over and over your template, as well saving you tremendous money and stress with the web design firm you hired to do the job.

If you still have questions, don’t hesitate to share your thoughts online about this lesson below.