Distantly Yours: Web Design and Photos in Bloomington, IN, by Dan Hiester

• Previous Post Not Dead Yet
• Next Post Playing the Angel's Advocate

I can’t believe I ran with my previous design for a whole year. It took me a while to perceive the fact that it was one of the shittiest CSS-driven layouts on the web, but thankfully it exists only in the past, and not in many people’s memories.

New Process

Part of why this layout looks so much better is the fact that I went through a greatly expanded design process with it. I started in May, drawing layout ideas onto notecards as I sat in summer classes, struggling to stay awake. Next, taking a cue from Jon Hicks, I did mockups of my pages in Fireworks, which was a wonderful experience.

In the past, my design phase and production phase were one and the same; I basically relied on trial and error during the coding process. A real designer would yell at me for being lazy.

Fireworks, on the other hand, is a great program for doing website mockups. It has the flexibility of a DTP program, or a vector drawing program, but instead of being made for working with inches, picas, CMYK, etc., Fireworks was built from the ground up for working with the web.

Having never done mockups before, I must say, everyone should do it. It’s so much better to finess a design by dragging things around with your mouse than to go to the code every time you want to move something by x pixels.

Defining the Look

From the beginning, one of the key influences on this design was an article posted by Dave Shea about columns and grids. I think part of what went wrong with the old design is that I was trying to challenge the necessity of column grids in web design, and I failed, miserably.

At first, I had considered going with a design that relied more heavily on color, since this is the web, and color is free. I looked through my copy of Color Index to find a blue color scheme I liked. When I got into the mockups, however, I found that making a layout that was completely blue made the page very relaxing, and it lost the snappy, energetic feel I had in the previous design.

Immediately, I started over again, trying to find a way to borrow from the aesthetic elements of the previous design, but channel them into a layout that didn’t suck. After a few weeks of mocking up, I had a solid roadmap for how the site was going to look.

Bells and Whistles

A number of Textpattern plugins made a number of very nice things possible. This is mostly for friends of mine who know about web design, but don’t read design blogs.

If you have a Gravatar account, you can have a personalized icon appear next to your name when you leave a comment at this site, which I think is pretty cool.

The search interface at this site is thanks to Rob Sable’s wonderful Live Search plugin. His Super Archive plugin will also likely be the basis for my archive pages.

The live comment preview on this site is thanks to a plugin by Nils Hoerrmann. I have to add that his implementation of the Live Search plugin is hands-down the sexiest search interface on the Internet. Go click on the link now and gawk at it in amazement.

To Do:

I launched this site without a working archive page. I came to the conclusion that this was necessary because, uh, I broke a lot of things on my old design by accident. And my old design didn’t have an archive page, either. In an incomplete state, this new version of the site was already much more functional than the old one. That’s how much the old one sucked.

Also on the todo list: go through my HTML markup and clean it up a bit. I relied too heavily on H5 and H6 tags, when I probably should have used DIVs or SPANs to make the markup semantically correct.

The other thing is to figure out how to make “related articles” appear in the sidebar, in my unusual format. The related articles interface in Textpattern just doesn’t give me enough control over appearence. Unfortunately, I was planning on using chh_article_custom, but this plugin seems to be broken on Textpattern 4.01. What I need is some sort of article_custom tag that is context-sensitive to the categories the article was posted in.

Holy Crap, You’re Still Reading?

Well, if you’ve sustained my hubris this long, pat yourself on the back for being totally awesome. If you’re really, really on it, you would have noticed that I forgot to mention anything about the photo browser at all.

If you have any comments about this post, or this design, leave one! That’s what the comments box is there for!