Warning: Geek talk ahead.
THE GOAL:
A few weeks ago, I decided I wanted to learn the other way of web design: CSS (Cascading Style Sheets). It’s not as easy as laying out a table in a visual editor and requires some basic math. Additionally, there are a slew of browser incompatibilities as standards are put into place.
In order to get my head around this, I decided I needed a project—things just work better with a concrete goal.
I’ve long since wanted to be able to organize my journal.
THE HOW:
Sadly, LiveJournal does not use style sheets to lay out pages with CSS, instead some custom jive they’ve written (amendment: in reference to their new S2 style system).
Experiments failed as I attempted to understand syntax. I had to learn DOCTYPEs and XHTML in addition to CSS. Really basic things, but until you address them, things will look wrong or not work entirely.
I exported everything from LJ and used a Backup Toolkit to translate entries into XML. Sadly, comments are not currently exported.
I decided to go with TypePad as a place to host my experiment. It’s a weblog service, similar to LiveJournal, but offers an engine to allow all this design tomfoolery, along with other features that are kinda cool: automated lists for books and music that link up with Amazon Associates, organized archives, and categories.
Some mildly cool things: There are no tables or javascript. Everything is laid out with div tags and positioned. Rollovers are created using lists and hover effects with styles. All those navigation items along the top and catgegory icons along the side are stored in two images with every state. See what I mean.
HELPFUL LINKS:
- CSS : A Guide for the Unglued – a nice compendium of links to introduce the concepts behind all this web standards stuff.
- CSS Zen Garden – a great way to understand the concept of separating content from design. Each design on this site is controlled by an external style sheet.
- CSS Image Rollovers – on A List Apart
- What’s a DOCTYPE? – another article from A List Apart
THE WHY (well, part of it):
Categories are of great interest to me. I think online journals and weblogs suffer from a few major flaws. The most glaring is that they are hard to navigate. Once content expires from the “front” page (or friends list), it seems to get buried. There’s no easy way to browse, save for going back and back and back. Calendar views offer limited benefit, even with subjects listed.
THE RESULT:
(you’re there)
ISSUES:
- It has a "me too" vibe that CSS designs seem to suffer from these days. This is hopefully only temporary as I refine visual elements.
- I have not tested pages in every browser. If you find any big glitches, drop a comment or an email.
- The search field does not work as Google has yet to index the site.
- I haven’t figured out an icon for Ho-Hum. Nostalgia, misc, and pondersome are lame.
ASIDES:
- Going through entries and assigning categories is a task itself. It revealed patterns. I realized, I read more than I let on. I should pull excerpts from things. This notion began when Nayland mentioned the Commonplace Book.
- I don’t cook enough.
- I have really great friends and family.
- I don’t write much about sports, therefore an icon was not warranted. The football helmet featured above will likely never get used. I also don’t write about TV very much, but that doesn’t bother me.
Lastly, no, I’m not leaving LiveJournal. The LiveJournal community is super-dooper good. The privacy features and threaded comments are unique to LJ. I’ll cross post, and keep tinkering.
POSTNOTE:
There’s still lots of work to be done. As any given category gets to be too long, the problem of how to navigate comes back into play. Excerpts and/or thumbnails would be prudent.