Rands My Holiday Break

Rands V3 Notes

The main motivation for updating the site was really a nit. The right sidebar looked liked crap on Safari and when I started tinkering with the HTML, I discovered my table-based layout was just not up to snuff.

“Standards”, I thought, “XHTML and CSS. That’s the ticket.”

Random notes from the experience:

Let me first suggest that site redesign is not something that you can do in your spare time unless web design is your chosen profession. The reworking on the site had been on my to do list since October, but it wasn’t until late December when I had any sort of time to focus.

The original nuts and bolts came from sites out there which provided handy templates for common weblog layouts. In a brief search this morning, I was unable to discern which site I actually used, but there are lots out there and they’re doing a fine, fine job.

Given the presence of the template, I figured most of my work would be fine-tuning look and feel rather than hacking on XHTML. This is a common (and dangerous) Incrementalist assessment which occurs during a project, it’s the “looks good, ship it” call which is made well before the project is remotely close to being done. Normally, you’ve got QA to tell you you’re insane, but when it’s just me, I’ve got absolute veto power over the voices in my head, so we blindly proceeded with fine-tuning.

I embraced a lot of CSS during the last revision of the site, but hardly enough. My adoption of XHTML Transitional and CSS (plus usage of templates within Movabletype) made prototype of ideas really stupidly easy. When I did run into some rendering problems in other browsers, simply validating my prototype solved a lot of rendering problems which resulted from my inability to correctly close tags.

Now before the design gurus of the world start jumping up and down proclaiming standards goodness, a brief sidebar. Once I started moving the site over to my templating scheme in Movabletype, I discovered a problem. On pages with very little content in the center , the footer on my page overwrote the right column. “Surely, this is a result of blindly adopting someone else’s template,” I think, “Surely, this is easily overcome.”

Wrong.

After multiple hours of tweaking, tinkering, and pulling my hair out, I broke down and looked to Google for sympathy. Turns out my relatively simple design exposes a significant issue in CSS which, simply put, is that good footers are hard. You need to assume that one column is going to be the longest or else you start to get overlaps. People who know a lot more about this stuff than I have been bitching about this for some time. Many alternatives have been proposed and I’ve tried a lot and consistently found the results to not meet the requirements.

Bummer.

(Note: If you think you have a layout which works, I’d be more than happy to prove you wrong. Two columns — either can be longer than the other — footer at the bottom — always.)

Fortunately for me, I am an Incrementist with only minor Completionist tendencies, so I was able to overcome this after only a half day of screaming at my monitor. The resultant hack was a dollop of transparent gifs to push things around at the right time… which smells a lot like a table-based layout to me.

Once I had the site up, I had to go through each article and see how it looks. This process turned out to be an expensive operation as I hadn’t accounted for various tags I’d infrequently used such as lists, blockquotes, and others. I really wish I’d done some type of style guide beforehand so I could make and see all my design decisions early on rather than when the site was live.

Checking the layout against other platforms and other browsers yielded a couple of puzzling frustrations in the form of a significant bug using floats in Internet Explorer 6. There are a couple more problems I’ve found with cursory testing against IE6/PC that leads me to believe their support of standards is good, not great.

Lastly, I am pleased with my use of CSS. The more I looked at live samples from various respected design weblogs, the more I respected the simple flexibility of CSS. I took pleasure in cleaning up my original generous usage of custom DIVs in favor of replacements of existing, more readable, tags. There’s more work to do here, but it’s a good start.

[Update 1/11/04]: It looks like A List Apart might solve my column insanity issues.

18 Responses

  1. Ok, giving this template a whirl… fingers are crossed.

  2. Yeah- that layout-o-matic one seems to work mightily as well.

    As it turns out, that “edit/redisplay” thing in OmniWeb is actually really cool in situations such as this: it means you don’t need to download anything to play with it.

  3. The template Chris provided looks promising. It does meet the any column can be longest requirement, but I’m having difficulty getting it to replicate RandsInRepose nuances… in particular, my two columns are fixed, but the header/footer is set at width: 100% — resize the window and see how my navigation toys stay to the right.

    As I’ve started to tweak the supplied templates geometry… everything has gone goofy. Lots going on in this template…

  4. It sounds like you and I had pretty much the same design experience. My problem is that I detest having my tools or chosen technologies dictate what I can and can’t do.

    The good news about being a stubborn idiot is that before I give up, I do as much research as humanly possible. This has the added benefit of teaching me all sorts of things related to whatever the core problem is. Generally speaking, this is how I attack learning new stuff…. push until it breaks and then figure out why it’s broken.

    I will now go figure out why the cookies are busted. Good catch.

  5. Cookies fixed. Thanks Chris #2.

  6. At the risk of making myself look more foolhardy than usual, I must offer a link to something I happened upon a while ago. http://www.redmelon.net/tstme/3cols2/

    I don’t remember how I happened upon it, nor have I dissected the code to test how well it stands up to real-world application, but it would seem that it largely fits the criteria… the footer remains at the foot regardless which column is the longest and it mostly validates (one silly and avoidable error in the XHTML, another in the CSS), so I’d be interested to see if it does in fact stack up to its claims.

    Is anybody in the mood to test it out?

  7. [Si]dragon 21 years ago

    T RANDS, I FEEL YOUR PAIN.

    But…

    What about the CSS Layout-o-matic at http://www.inknoise.com/experimental/layoutomatic.php from Inknoise? I’ve never had any problems with these layouts (even with one div containing more content than the other(s)).

  8. chris 21 years ago

    When I redesigned my site, it took a very long time and many many hours. I was also kind of teaching myself “web standards” with XHTML and CSS and found it was Not Easy.

    I also had the problem with the footer, where I couldn’t get it to work properly, much like you noted. I realized this was a problem inherent in CSS… My solution was to ditch the footer altogether, and place what was to be the text of the “footer” within the sidebar. Not ideal, but I decided the footer (which was to look much like yours) wasn’t worth the headache for me.

    Also, I am convinced floats are bad, because of IE’s bigbig problems w/them. I’ve avoided them entirely. Where you can use something like “float: left;” you can often use “position: absolute; left: 0;”.

    My content will stretch as the screen does (which I like very much), and the sidebar “sticks” to the right side of the screen. I only mention all this because your column layout is pretty similar to mine, thought I could relate.

  9. chris 21 years ago

    also noticed here that the cookies don’t seem to work, I think you are missing some JavaScript…

  10. LMCanteroJr aka Majestic 21 years ago

    One thing I noticed, you omitted the Yahoo News feed. Not that I think you should add it back in, but I did have a question. I have seen Yahoo’s RSS feeds, and unless you do significant tweaking, it looks a lot different then the headline-only links you displayed. However, it appears the links updated automatically. How did you accomplish that? Is there a site where I can learn more?

  11. Yeah, the feeds are currently gone. In my wrestling with the sidebar, I decided to nuke it until things settled downa a bit — TOO MANY VARIABLES TO KEEP TRACK OF.

    The process of getting the feeds installed is terribly simple:

    Use this plugin: http://mt-plugins.org/archives/entry/rss_feed.php

    Plug in this feed: http://rss.news.yahoo.com/rss/mostviewed

    All the Yahoo feeds are here: http://news.yahoo.com/rss

  12. chris 21 years ago

    if there are 326 comments on this entry, this would be #327 😉

  13. chris 21 years ago

    wow now it looks fine, god I should have got a screenshot because now it seems like I am totally on crack

  14. TheNintenGenius 21 years ago

    No, I saw the whole 300-something comments thing the other day. Looked like someone or something with way too much time at their disposal decided to spam the hell out of this place with garbled comments. Knew they’d be gone today.

    Screencapping would’ve been interesting if the posts had had more substance than “grdxlkxcgl paoiguagha gkuadysgkad iueieutogkl bv bklhjadfpoig gadiougewhtkjat.”

    Oh yeah, the new layout is nice.

  15. Most of my job (i wear many hats) is being

    a web programmer. Despite my efforts to be

    a Server/DB Morlock, periodically i’m dragged out

    to be a Layout Eloi. 😉 CSS can be so cool, and so

    irritating: the elation of realizing how many

    grotty nested tables you can ditch, followed by

    the depression of realizing that your beautiful

    and efficient layout renders correctly on exactly

    two of the hojillion web browsers out there.

    FWIW, Eric Meyer’s _Cascading Style Sheets,

    The Definitive Guide_ from o’reilly has been

    pretty nice to me when I’m in the depths of a

    layout battle. (a 2nd edition is due out soon

    I think) I’ve also had a reasonably good time

    reading _Designing with Web Standards_ by

    Jeffery Zeldman (New Riders). [Both available

    cheaply in print form from bookpool.com or

    even cheaper in o’reilly’s terribly handy

    Safari net service.] Zeldman is also involved

    in a website called A List Apart which has a good

    deal of tasty web design tidbits.

    Good luck with your redesign!

  16. alistapart.com, btw, looks like something stripped

    out my anchor tag…

  17. or maybe i’m just being sleep-dep’d and retarded.

    *shrug*

  18. Maybe I need to step away from “grotty nested tables,” but I personally have found it easier to nest the tables rather than learn (yet another) standard to its smallest details. Maybe if I weren’t trying to learn everything at once (CSS, PHP, MySQL, JavaScript, HTML, ASP, JSP, Java, etc, etc), I’d see the advantages of using CSS to do footers.

    Until then, I’m sticking with my nested tables.