I’m trying to recapture the looks Dave’s Picks have had over the years. Unfortunately, since I haven’t maintained archives of all the various looks, I’ve had to reconstruct some of these based on my best memory. But it should still be informative and useful, since I’m going to try and explain they thinking behind why I went with each look.
The early history
The early look was spare and simple. Navigation was on either the top or bottom of the page (or both for a while), depending on what felt better to me at the time. The idea was to make the pages as simple as possible so they’d render more or less correctly in any browser, no matter how brain-damaged. It worked, but the results weren’t very appealing visually. The pages did render fast though, since there were no tables to slow things down.
The pages were completely rendered in Frontier, so each page was rendered to an HTML file that stood on its own. I never did completely get away from this look with the pages I had hosted on best.com, even after I’d transitioned all the new stuff to davespicks.com, so until December 2001, that served as an archive of the old look.
First sites on davespicks.com
When I first started up davespicks.com, I went for a new look. I had more flexibility, since I was controlling the server, and I eventually started working with server-side includes.
The left side of the page had major links to other stuff I’ve put on the web (similar to what’s down the right side today), while the right hand side contained a listing of all of the archives I had available. Since I didn’t have a search hooked up, this was about the only way to search the archives.
The benefit of this was that there was an easy way to find all the site navigation. The downside was that the main text in the middle of the page got narrower than I liked, especially since I usually view my web-pages with a relatively large font. Also, since the main text was narrower, it tended to be very long and take forever to scroll to the bottom.
This look was done using tables, and the pages were also relatively slow to load. I specified the width of the columns (using percentages, so the tables would still scale to fit the size of your browser window), but that didn’t speed things up as much as I would have liked.
Both the left and right side navigation lists were stored in separate files on the server and included using server side includes in Apache, which meant that I could edit it once and all pages would change. This was a lot handier than having to re-render an entire site using Frontier, and it made me happy.
Adding PHP and CSS
When I added PHP to my server and started writing scripts in it, I managed to get a search engine hooked up relatively quickly. That meant that I could get rid of the extra column of pointers to the archives and add the search box to the major links. This meant a two-column look, and I (very) briefly kept the major navigation on the left of the page. But after a short time, I decided this distracted me from reading things easily, so I moved the navigation to the right side of the page.
The right-hand navigation still lived in a separate file, and was pulled into each page by server side includes.
An unexpected benefit of going to two-columns was that I found I could completely drop the use of tables in laying out the page, and by using CSS, I could get a two-column look that would load in a reasonable amount of time. The problem was (and still is) that in Mac IE 5.x, for some reason the text that’s in the left column initially loads where the right column should be, and it looks a little funny while it’s loading.
When my website on best.com went away in December of 2001, I decided to pull all that content into the Dave’s Picks site. Doing so meant editing a lot of web-pages. I could automate most of it using "search and replace" in BBEdit, but there was still a lot of manual tweaking I had to do.
My solution was to tweak like crazy for a couple weeks and write a system that would pull simplified HTML out of a file, slam it into a template and display that. This meant I could finally get rid of the two include files I’d kept around for the past couple years. There’s a master template for the entire site, and any request is run through some PHP (using the technique described in How to Succeed with URLs, which is pretty darned cool). That script goes looking for an exisiting file. If it’s found, it gets fed through the template and send to you. If the file isn’t found, an error page is generated, and the reqeust for the missing file is logged so I can fix broken internal links or send notices to external folks with broken links to update them.
The only problem with this is that the search engine I was using wants to generate complete pages for you, rather than having its output included in another page, so as we move from 2001 to 2002, the search engine is broken. I’m working on a replacement system that I’ll be able to control a little better, but there hasn’t been anything I could just drop in so I find myself having to write more PHP code to make it all work together.
Finally, once I’d gotten it all working, I decided I was tired of the old yellow look, and switched everything over to using a gray. I’m not sure why that’s the color I went with, but it’s fairly neutral and stays out of my way. As an added bonus, the same gray that serves as the background for the page also works well to highlight the dates for each entry. I’d feel pretty smart if I’d planned that instead of stumbling into it. Ditto for it working well with the Amazon Honor System picture: didn’t plan it, but it worked out pretty well, I think.
Setting a font
On July 21, 2003, I set a font in the CSS for the site. After much noodling around, I decided I like Gill Sans enough to use it for the default font here. It’ll fall back to Trebuchet MS or whatever sans-serif font you want if you don’t have that. I think I like the look better, and Gill Sans is one of the fonts built into Mac OS X, so some of my readers will already have it.
Simplifying the CSS
Beginning in late 2003 (at the same time as I was extremely busy buying a house), I started working on a redesign that wouln’t be a big change, but would do a few subtle things to spiff up the look of the site. I started with the code from Two Columns - Right Menu and hacked it about a bit to fit my needs better.
I’m relatively happy with the result. Gone are the lines separating the various pieces of each page, and instead, I use background colors that separates the main content from the elements that make up the rest of the page.
But changing the look required rewriting some PHP code, as it was hard-coded to use lists for the various days that make the blog portion of the site. In the end, the result is a look that’s new, but also some cleaned up code that drives the site, and some simpler CSS defining the look of the site. It’s not to the point that it could be skinned like the CSS Zen Garden, but I think I’m closer to that point.