Site Redesign

Sorry folks, no blog entry this weekend. Instead I'll talk a little bit about the site's redesign and what I tried to accomplish. I wanted to do three things in specific: I wanted to reacquaint myself with Inkscape, build a custom theme for Drupal that was more reflective of my artistic non-tastes, and I really wanted to integrate social media more strongly than it had previously been.

Inkscape is a worthwhile design tool

If you're unfamiliar with Inkscape, it's a vector based illustration package available for free on Mac, Windows, and Linux. Its functionality is comparabile to Illustrator or CorelDraw but nowhere near as feature-full. Inkscape on its own doesn't supply all of the needed functionality to export your website as bitmaps, but it does provide an easy to work with environment that lets you rapidly prototype designs.

To create this site in Inkscape I created a new project that was 960 pixels wide and 2000 pixels tall. Then I divided that work space into three columns of 320 pixels each. There's something called the rule of thirds that makes thirds sexy, so divvying up the work space into thirds makes portioning sizes for visual appeal much easier. I made liberal use of the guidelines and snap to grid features, and was content with the default color palette.

As amazing as it was, the only graphic I needed to export from Inkscape was the red gradients shown in the headers and footer. The large majority of the site is composed of plain old html styled with CSS.

Building a new Drupal theme

I called this theme "Royal Pain", partly because of the regal choice of colors, but partly because of the typically painful process of meticulously theming every individual component.

Zen, or Ninesixty?

I've been toying with moving to the NineSixty grid layout system, and I gave it a good shot at first, but I quickly found the NineSixty framework to be more of a hindrance than a boon. While I really like the concept of grid based theming I've found that Zen is infinitely easier to work with. Zen is better documented and does not contain any CSS that gets in your way, where as NineSixty was not as well documented and contained padding on certain containers by default.

Better Social Media integration

I did two things to try and catch better social media participation. The first thing I did was add some "follow" badges to the header. They're non intrusive but familiar enough that anyone who would be interested in them will instantly recognize what they are and what they do.

I also hacked together a voting bar that stays fixed on the left hand side of the page. I've seen this technique used on other websites and I decided I'd like to try it myself. There's a darkside to the way these things need to be positioned, namely that if the browser window gets too small it can be pushed off screen. To counter this I wrote a little bit of Javascript that will cause the badges to reposition themselves if the screen is too narrow to fit them. This works well so far, but still has some issues to work out for mobile devices.

I'm hoping everyone is more inclined to give me social media lovings now.

Font Squirrel font packs rock

If you haven't tried font squirrel for web fonts yet, I highly recommend giving it a go. You can download free fonts that will load up in your favorite graphics editor, then they make it easy to embed those fonts right in your web pages. The ability to do this has been around for years but it's becoming a more mainstream option than using images for headers.