a lesson in css – layouts

I’ve been reading obsessively on web design and realized one thing: the site has been designed wrong. Not all wrong, but a lot of wrongs. Things I seemed to have done right, mostly by accident:

  • used css, albeit on a limited basis
  • planned the site structure before starting
  • only one frame in over 140+ pages and that’s because it’s necessary
  • white background, simple color scheme
  • emphasis on content, even if it means a page full of words

Things I haven’t done right:

  • there are tables everywhere
  • css not extensive enough, and why have 3 different stylesheets?
  • too many design elements still in the html
  • fixed widths, heights, font sizes
  • not tested enough on all platform and browsers
  • tables.tables.tables

The message I’ve been getting is, get rid of the tables and separate design from presentation. Which boils down to go learn css and do it NOW. I spent the past 2 months cleaning up the code and fixing the tables, and now I’ve got to start all over again.

I knew enough to use css for formatting, like defining different types of text attributes (font, size, color, bold/italic etc), background and even a little table layout. Well, it’s not that I knew, these were the default css styles that came with Dreamweaver. By looking through other people’s codes (my how useful that View Page Source command is) I figured out how to format links. But that’s about it. So how?

Luckily, I had help. The MT application came with its css, and although it wasn’t what I wanted, it gave me a good place to start from, I mean it’s way easier to change what other people had done rather than start from scratch. I ended up adapting Elise’s stylesheet at Learning Movable Type.

I also borrowed Eric Meyer’s book from the library and surfed around for resources. I’ll list out the resources at a later post.

I took the stylesheet I came up with for quiet thoughts and used it on the homepage. Et voila! Instantly better looking. No longer looking like something hacked together by typing monkeys. Everything in their place. I know exactly where the content area is, where the sidebar goes, how far away from the top margin the banner is. Such control.

Instead of using tables for layout, I use <div> and <span> tags. Every time there is a change in element, put in a new <div> class.

So now the html can concentrate on page structure. The html looks prettier too, I’m listing out block element by block element, remembring that container comes before sidebar in the markup, but that’s the only thing.

So much so that I tend to use the code view more now, leaving design view for checking how the page looks.

Like that new McDonald’s ad says, I’m lovin’ it.