Redesign
by Mark Meyer · Posted in: website business
I've been itching to spruce up this website for most of the year and just haven't found the time. It competes with cleaning the garage for the distinction of easiest thing in the world to procrastinate (although a quick peek in my garage will tell you it did not win). Since I didn't want to waste a new year's resolution on the website, I spent a good chunk of December recoding it.
The goals of the new design
Include mobile Devices
While the old site performed well enough, it was beginning to show it's age. It didn't work well on the iPad and iPhone, which my logs tell me is becoming increasingly important. And it wasn't taking advantage of new browser support for HTML5 and CSS3 which can create a better user experience. The new design has a fluid, responsive layout that adjusts to display size. (You can see for yourself by shrinking this window down to a skinny size). It should now work as well on an iPhone as it does on a 24-inch monitor. I've also embraced javascript a little more, although everything should still more or less work without it.Improve readability
Dark backgrounds are nice for images. A dark surround improves perceived contrast and saturation, but dark backgrounds and reversed type are miserable for reading. The dark background on the journal always annoyed me in the previous design, but I liked the way the images looked. It was a difficult choice, but I've ditched the dark gray background to make text a little easier on the eyes and also to lighten up the feel of the site a bit.Services like Typekit finally allow designers to include arbitrary fonts in websites, but anything other than a simple sans-serif face looks like garbage at body sizes on Windows browsers. As impossible as it seems, with 26 years of development and billions of dollars spent, Microsoft still hasn't figured out how to render fonts. As a result you're reading this in tubby, but very readable Verdana rather than something a little sexier. Larger sizes, however, do render pretty well even on Windows, so we get to use Franklin Gothic and the beautiful Athelas italic for some of the headers.