The new layout

I made the new design for my site a long time ago. It's quite dated already, and I still need to do a good deal of tweaking and adding usability and navigational improvements. I have a lot to learn about Movable Type's layout system and how to get everything formatted exactly how I want it. Originally I used a very complex set of nested tables in order to get the site to lay out correctly, and by correctly, I mean under perfect conditions. If you looked at it with the right browser and it had the right amount of content and the window was the right size and solar activity was low. So at some point I decided to adapt the design to use Cascading Style Sheets (CSS) to simplify things.

Well CSS is an interesting system meant to help abstract the information from the presentation. It's a pretty good system, but it conforms very much with the idea that HTML is not paper. What I mean is that HTML was never intended to be used to make sites that look the way you may have intended, it give the client (your browser) the power to render the site in any fashion that suits it, as long as it presents that information. It's easier to run with an arm full of angry eel's than it is to make a website look the way you may want it too. You need to make lot's of compromises, spend frustrating nights getting different browsers to work with the design only to have it all break once you start putting content into the templates.

After spending a great deal of time studying the work at the CSS Zen Garden and trying to forget all of my experience with ridiculous table manipulation, I finally got the results you see here. Actually that's not true, as I had to create templates with lot's of embedded Movable Type code in order to make it work with this new Blog software.

What have I learned? Well, one thing is that the use of high speed connections have made the use of large images far more palatable. In my old table designs I used images as efficiently as posable, stretching 2 pixel X 1 pixel images over large areas, using table background colors, anything to save a couple bytes of bandwidth. These days you use a couple large images, and CSS positioning to get the same effect. CSS doesn't do miracles, HTML blocks still like to grow and shrink and do all kinds of random and inexplicable nonsense. But tables suck really bad too.

The other benefit of CSS is that it is more accessible, in that Web browsers designed for the blind have a much easier time of rendering the content. I'm sure that's a comfort to all of the people who lost their vision from browsing my last site design...

Posted on February 7, 2005 1:54 AM


Comments

Yeah, your bandwidth is greatly reduced. I am sure these pages will load faster on dailup. The Kofahls have cable broadband now but whatever. Ironic now that CSS support is good that need for bandwidth reduction isn't as strong now as it used to be.I'm really curious about how you got Movable Type to run here but you can take that into e-mail.

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)


February 7, 2005