nemoorange.com

Grid, Rhythm, and Secrets

Redesigning this site has been one of the more enjoyable aspects of keeping a spot on the Internet. The design, layout, and organization of nemoorange.com are always a work in progress. I’m constantly tweaking style tid-bits in the CSS, or revising the Textpattern forms. With the latest revision of the site, I’d like point a couple items that would have otherwise gone unnoticed.

Gridlocked

I finally revised the layout so it adheres to a grid. Grid layouts are the current hot topic in web design. See GridLayouts.com for a brief history of the subject. While I’m not completely sold on the wholistic benefits of keeping to a grid. It all feels a bit too inside-baseball. I imagine that the only people who appreciate grid layouts are designers who know what grid layouts are. Much like how the only people that care about Yngwie Malmsteen solos are novice guitarists. Regardless, employing a grid layout throughout my site posed a sort of puzzle. And since nerds love puzzles, I had to make an attempt to pull it off.

The grid I use consists of 4 columns, 210px wide, with 20px gutters. Four columns might not completely constitute a full-fledged grid-layout, but it can be split again, to make for a 8 column, 95px wide, 20px gutters. Apart from the words and daily section, the grid is all over this site.

Tricky Y Axis

The second component of the layout is the use of veritcal rhythm. Again, this achievement seemed to be aimed at the typophiles. The only reward is that text on two different columns line up. I originally put this in the CSS when I re-hauled the stylesheet back in October. Once the margins and padding are all kosher, the only difficult part is cropping images correctly to keep with rhythm. This site uses 20px line-height.

In order to keep myself honest, I’ve got a background image hidden in the CSS I can flick on and off to see if everything lines up.

New wing now open to the public

Both layout elements easily meshed with designing the new sections. I first had to tackle a dedicate page for the new moon section. I began the project without a dedicated page to collect all the entries, so I knew I had to get around to designing it. Once finished, that page provided the template I would repeat throughout the other sections.

The movies and words sections were both pet projects started up months ago, originally for my eyes only. Two secret sections now brought out in the open. I’ve always kept my movie ticket stubs. Organizing them into a web page wasn’t really hard, just a bit tedious.

As for the words, I remember my 8th grade English teacher first proposing the idea of keeping a word list. At the time, I thought it was a cool idea, but I saw no facility in keeping one for myself. Reading for pleasure was a foreign concept to me until college. Now, I’ve found that keeping this list has been one of my favorite aspects of maintaining my own site. If I had to write down those words on a list, I think I would have lost it by now. Or more likely, lost interest.

Back to tumble

The main page now has a proper tumblelog again under latest . This a perfect exhibit of the utility of the Textpattern CMS. Content in different sections can all be easily collected in one meta-section. Pulling it off requires a bunch of different if-statements. Looking into the source, you’ll see a lot of white space, where those if-statements should be.

That’s all for now. See you again in three months, for the next re-design!