Tuesday Jan 02, 2007

How this Blog Design was Created

I decided to go the total web-standards-nerd route in creating this blog design. Semantic HTML, source-order, accessibility, and unobtrusive JavaScript were all factors from the outset.

The first thing I did was to customize the "Basic" theme. This gave me a starting point. I removed all presentational information, starting with the CSS code. Then I went through the HTML and removed presentational hints. For example, layout tables, <center> tags, &nbsp; characters, etc. Even things like class="left-bar" had to go. "Left" is too presentational, and I relaced it with "sidebar," since it might be argued that "sidebar" is a semantic hint. (Yes, that's how much of a nerd I am.) Fortunately there wasn't much presentation baked into the HTML to start with, because most Roller themes are pretty good about separating content and style.

Next to go was JavaScript. I had just removed the presentational layer, and now it was time to remove the behavioral layer. These layers would be added back in later via external files, once the HTML-only blog was proved working.

Wherever possible, I made the HTML as semantic as possible; selecting and organizing tags elements by meaning and structure. Source-order sensibilities were used, placing more important things higher in the source code. Headings/sections were arranged such that if you removed all but the headings (<h1> - <h6>) you'd get an outline of the page. <p> was used to contain all logical fragments of text. <div> was used to delimit sections. <ul> was used to build lists. It turns out, semantic HTML is really pretty brainless and straightforward, once you yank out presentational noise.

Once the blog was purified, it was boring-looking, but usable. No columns, just black Times New Roman text that strung all the way across the browser screen on a white background, with blue hyperlinks. It was nekkid! Time for some clothes. An empty CSS file was <link>ed to the blog, which I began populating, resulting in the current design.

As you may know, it's easy to do CSS design in Firefox, Opera and Safari, all of which understand and render CSS beautifully. But then you inevitably have to do battle with IE. Most designers approach the IE problem by peppering their CSS file with hacks. Hacks are oddly structured CSS commands that, due to IE bugs, either can't be understood by IE or can only be understood by IE. Instead of doing this, I used conditional comments to load corrective stylesheets into just IE. Conditional comments are an IE-only feature that look like regular HTML <!-- --> comments to real HTML parsers, but have special meaning to IE. This way, I was able to quarantine IE-specific bigfixes to a couple small, IE-specific files.

Friday Dec 15, 2006

Blog Redesign!

I've redesigned my weblog. I've always wanted to do it, but Roller's templating and theme system was too daunting. It's easy to tamper with the HTML your blog generates, but as a web designer by trade, I wanted total control over the HTML, CSS and JavaScript. Alas, lots of HTML-generation happens deep within Roller-specific Velocimacros that you have no obvious control over. So, if you really want control, you have to get intimate with Roller. You have to have its babies and cook it three square meals a day, and not complain when it doesn't want to cuddle. Gritting my teeth, that's what I finally did, and this is our love child.

Monday Aug 02, 2004

Unintended Consequences

I recently posted to my blog, and (in a blinding flash of intelligence) set the date so the post would appear sometime the next workday. The Law of Unintended Consequences of course kicked in, and several fun things proceeded to happen. First, the post utterly vanished into limbo. This in turn prevented me from seeing what it would have looked like had I managed to get the thing to appear online, which (evidently) can be different from what it looks like in preview mode. Then, as the server clock ticked past the date set in the blog posting, everything magically appeared to the world. I was by this time off on other adventures blissfully unaware of anything blog-related, and so naturally the system chose this occasion to chew the post up and spit it out as a bunch of unreadable textual fragments interspersed with unclosed HTML tags and about ten screens worth of horizontal scrolling. That morning as I sat down with a hot cup of coffee to read my email I noticed new comments on my blog and quickly became aware of the problem. I fixed the problems and proceeded to post this followup explaining what happened, and as I was submitting Firefox chose that time to crash. Fortunately I had (in another blinding flash of intelligence) done a COPY of the textual content of my post just as a safeguard. Unfortunately the crash wiped my COPY buffer, so this is the second time I have typed this (minus this bit of course). I also have had to tamper with the publish dates of these postings to get them to appear in the regular list of recent postings on Sun's blog homepage. During all this time my coffee released most of its heat into the air of my office, kicking the ambient temperature up a tenth of a degree and affecting thermal convection currents in the building. I have no doubt this chain of consequences will continue to proceed infinitely beyond my ability to perceive, drastically affecting hurricane patterns in southeast Asia and ultimately the course of world politics, but it's more or less out of my hands now.


My name is Greg Reimer and I'm a web technologist for the Sun.COM web design team.


« June 2016