My Biggest Design Mistake… Ever!

Posted by lisa

February 8, 2008

CSS I’ve created at least 10 different sites over the past 10 years, but none of them have been developed better than my latest Site Build It! site, flat-stomach-exercises.com.

Now, I’m not talking about the the design and look and feel of the site. I’m talking about the way in which it was coded.

The entire design is controlled by CSS (cascading style sheets) and SSI (server side includes).

I know, I know… more intimidating acronyms that could confuse the heck out of you… ;)

I’ll try to keep it simple so bear with me, OK?

CSS & Includes

CSS allows you to control large aspects of your site’s design and layout with one file. So if you want to change the color of your hyperlinks, you’d update your CSS file and your entire site will reflect the change.

Include files generally contain content that is repeated throughout the site (left nav, footer, etc.). So instead of updating every page when you want to change your left nav, you update the file that includes your left nav. And every page on your site references that one file.

With the combination of CSS and includes, I can update any aspect of my entire site (width of site, hyperlink colors, left navigation text, header image, font face and size, border colors, header styles, bullet styles, footer etc. by updating the corresponding files… instead of opening each page individually.

I’ve used CSS before with other sites but only for certain things like hyperlinks, font styles, colors, etc. But I’d never used it for an entire layout. Thanks to Dreamweaver I was able to really unleash the power of CSS completely without becoming inundated with confusing code.

You won’t believe this, but the entire coding layout of my Flat Stomach site is simply this…

<html>
<body>
<div id=”top”> (My header)
<div id=”leftnav”> (My left nav)
<div id=”sidebar”> (My right nav)
<div id=”content”> (My main content)
<div id=”footer”> (My footer)
</body>
</html>

That’s the coding shell for my entire site. Then I use a style sheet (CSS) to define how the layout should look in each of those 4 ID sections (The “content” section is obviously different on every page so you wouldn’t include that one).

So any time I want to update any of those sections, I don’t open the content pages, I open the one CSS file and/or the includes.

Of course, if you view the source of my site, you’ll still see all the scary-looking code, but the browser combines and displays the code from the CSS and include files. (So it really looks like I’m a big time programmer, right?)

However, when I’m updating a particular section of my site, I only open the corresponding file (leftnav, footer, etc.).

So if you give one gift to yourself this year, learn CSS. Grab a copy of Dreamweaver CS3 and go to your local bookstore and get a reference book. I bought Dreamweaver CS3 For Dummies.

No really, I did. People do actually buy those “dummy” books. :)

You’ll be amazed at what CSS can do for your site. And when you realize you can update your entire site’s design and layout in about 20 minutes, you’ll understand why it’s worth it.

So What’s My Biggest Design Mistake?

Clearly it was not using CSS sooner. The thought of learning more coding overwhelmed me for so long that I kept putting it off. But it really helps to have a good Web editor to help you muddle through it.

Thanks to Dreamweaver, I didn’t have to really become more proficient as a programmer, I just had to become more proficient with using the program.

For some of you reading this, CSS is probably old news. Even though it wasn’t new to me either, I hadn’t unlocked its full potential.

But mark my words… I will never design a site without CSS again.

You shouldn’t either.

Web Design

If you enjoyed this post, please Stumble it!. Feel free to leave a comment or subscribe to my RSS feed and receive future articles delivered to your feed reader.