CSS Design, Optimization, and Your Website

For those unfamiliar with web site design, coding, and layout it may come as a bit of a surprise to learn that there is more than one way to go about planning your site's structure. But before we get into the nitty gritty about modern web site design, let me begin by going over a tiny bit of Internet history...

Check us out! View our portfolio

HTML - The Early Years

When the web was taking it's first steps out of the primordial ooze, it was intended to serve as a purely educational method for those "in the know" to communicate with each other about such subjects as advanced string theory, particle fission, and of course who was going to win the SuperBowl.

As the Internet advanced, people realized the benefits this technology could provide the American people as a whole (read:capitalism). However, the text and random image placement of the early websites of the 90's were not "up to snuff" for modern print marketing methods which had since been proven successful with the populace. Thus, tables which had been previously used to display tabular information were converted in order to display graphics and text with an intended design layout. This method, while effective, added an immense amount of HTML source code, which in turn forces search engines to weed through the junk to get your information.

Modern Day Web Design

Stylesheet based design (or CSS-design) allows minimal code to be placed into the document's source or presentation directives. This means search engines, such as Google, can find your product with less work thus making your site "preferred" over others which may provide the same service. In addition, CSS-based design is not confined by the complicated grid structure of table based layout, thereby providing the graphic artist of your site (me!!!) with the flexibility to create a design that will help your organization sell its product. CSS provides the means to separate the content from the presentation.

Getting Technical

So you're saying to yourself, "That all sounds great, but what does it all mean?" I'm glad you asked. Let me provide a brief example of what this means to your browser, your customer's desired search engine, and most importantly to your sales.

Below are two examples of images with text. Imagine this as a banner on your site with the name of your business and background graphics.

Example

Example

Table Based Layout

The example above on the left is composed using a typical table-based layout using an image file. The HTML code will appear as shown below:

<table>
    <tr>
        <td>
        <img src="pix/htmlexample.jpg" width="190" height="60" border="0" alt="Example"/>
        </td>
    </tr>
</table>

Let's look at this more closely. If you were to get your cursor and highlight the left image, you'll find that the entire block is highlighted. This happens because the entire image is being selected. Thus, your browser and search engine do not read the word "example", but instead only know there is an image. Search engines have no way of determining what the image looks like or what it is showing the viewer - perhaps an image of flying pigs.

In this particular instance the image file is named bluebox.jpg, a phrase that is not descriptive regarding the text display. This image, however, does have an alt tag, helping define what is seen. Basically, an alt tag is a manner of displaying information that would help to describe the image to engines. However, it is still not optimal, as years of web developers exploiting this feature have caused many search engines to give the alt information a deprecated importance with regards to site content. For more information on alt tags, please visit Images and Alt Tags.

Stylesheet Based Layout

Now let's look at the above example on the right. By appearance, the two seem to be identical, but upon further inspection you'll see that this is far from the truth. First off, let's look at what this looks like in HTML.

<div id='cssexample'>
    <p>Example</p>
</div>

The first thing you should notice is that it is comprised of far fewer lines of HTML gobbledy-gook than the first. Thus, search engines will get to the meat of the matter far sooner. Now grab your cursor and try to highlight the second box. You'll find that the image behind the text is just that, behind the TEXT. If you can highlight the word EXAMPLE, that means that search engines can read the word example. Replace EXAMPLE with YOUR PRODUCT and you may understand how important this can be to you and your business.

Oh, and in case you're wondering, "How the heck did that image get there then?" Well, the secret is in the ID. The ID allows the separate stylesheet to know how to effectively partition your content from your design, a boon to search engines and screen readers, which allow those with disabilities to navigate your web pages with ease not often found on the Internet.

Accessibility and Why You Need It

Before I finish, I would be remiss in not mentioning the importance of 508-compliance and general accessibility for your website. In 1998, the United States Congress amended the Rehabilitation Act to require federal agencies to make their websites accessible to those with various disabilities. In order to achieve this, web site code must be created so that a machine called a screen reader could scan the HTML code and read aloud the pertinent information to the user.

Now, I am aware that if you're reading this and none of it sounds familiar, you are most likely not a federal agency. Some of you may even be thinking that you don't care if your website is not accessible to everyone. The important thing to remember then is that Google does care. Immensely. And, as the mother of all search engines, if Google cares, you should care.

I hope this article has been informative in your decision concerning site design.

Posted by:
Dan Govea
Graphic Designer








Occasionally, we add educational or interesting articles like this one to our site. If you are interested in learning more about effective website marketing and design, please subscribe to our mailing list seen to the left below our menu.

 

Magnetic Card Swipe Parsing

By Dawn Green, October 13, 2010
A step-by-step tutorial on how to parse data from a USB card reader in PHP using preg_match.
Read the Tutorial

Services

Website Design Shouldn't Hurt! We specialize in web development from database programming to design. Painless web development and handholding is the core of our business. You go about your work, and we'll quietly help grow your business alongside you.