// 29.Oct.2009

About the Redesign of the Home Page

The paint has now dried on the redesign of the Urban Mainframe's home-page. The celebrations have begun to diminish and normality is being restored. As the dust settles, I thought I'd write a little about the thought processes behind the design. I'd also like to document a few of the little tricks I've employed (because I'm ever so proud of them).

Despite trying various tweaks and reshuffles of the previous version of the home-page, I was never totally happy with it. Looking back, I think I tried to convey way too much information on that page, which made it look terribly cluttered. It simply didn't "feel" right to me. The problem was that I had no idea of how to remodel it, no inspiration.

Inspiration

So it came to pass that, one fine day, I happened across the rather tongue-twistingly entitled article, "Easy-To-Use, Tunable, Custom Grayscale Function for Dynamic Image Conversion Using PHP and the GD Graphics Library," on the Ars Informatica website and I was extremely impressed with the results of their AI_grayscale() function (so impressed that I blogged about it at the time). I experimented with the code, processing about a dozen images though the algorithm, and I absolutely loved the results. I knew I had to get that code employed on the Urban Mainframe, but where? My first thought was to have the thumbnails I'd used within the previous design rendered in grayscale, perhaps with a colour hover transition. But a trial run, while successful, was disappointing - the grayscale thumbnails were simply too small to really illustrate how great the output of the AI_grayscale() function could be. I needed to use larger images… suddenly, I had the inspiration for a new home-page!

I fired up Photoshop and prepared a design mock-up for the front page. This is the part of the process that I find the most difficult and time-consuming of all. The simple truth is that I am a programmer, that's my craft, it's what I'm good at. I'm not a graphic designer, nor am I a Photoshop whizz. I can get by and that's about the best that can said. Anyway, I ended up with the following:

Elements of the Home Page

The menu bar and footer would be carried over from the previous design. Not only are they required to maintain consistency with the interior pages but, and perhaps more importantly, I'm happy with them - they're elements that I didn't think I needed to change too much.

The home page is dominated by the "teaser" for the most recent weblog post. The design of this was ripped off from inspired by the "Pro" section of Apple's website. It consists of a large image, themed for the article, along with the title and a brief summary text. The title is rendered in a gorgeous Helvetica-like font (District Thin) using the Cufón text replacement system. I took care to control the appearance of this so as to avoid the dreaded FOUC. The whole teaser area is a clickable link through to the corresponding article.

Below the principle teaser there are four further mini-teasers for the next most recent weblog posts. Here is where the results of the AI_grayscale() function put in an appearance, and don't the results look good?

Once I'd written the XHTML and CSS for this page I got an itch. "Wouldn't it be great," I thought, "if the grayscale images transitioned to colour on mouseover?" (Yes, I know, I'm not very original.)

I knew that the easiest and arguably the most efficient way to achieve this would be to use a process that I believe was introduced by Dave Shea way back in 2004, a technique he named CSS Sprites. With the CSS Sprite procedure, my teaser image would actually be two images in one - the AI_grayscale() image and its colour counterpart seamlessly stitched together, one atop the other. This image would deployed as a background image to a container, then a couple of CSS rules would control the position of the background image to bring one or the other version into view. This means, of course, that I can just as easily present the effect in reverse — start with the colour image and transition to grayscale on mouseover — simply by swapping the initial and transition coordinates.

Indeed, I tried it out — as the screen capture below illustrates — but I liked the overall effect less this way. Again, the page "felt" noisy. I found that, depending on the sequence of images, the mini-teasers could actually detract from the principle if its colours were muted and theirs were saturated, as is illustrated by the screen capture below.

The Clever Bits

You might not have noticed, but in many cases the front page images are distinct from the articles they correspond to. They don't necessarily appear again in the content of that article. So where do they come from? These images are attached to their parent posts but they're not inserted into the post content. I've written a little PHP function, called from within my front page loop, which retrieves these images then performs any further processing that's required.

The function first tries to retrieve an image from a post's gallery that has an Order value of "1". If that fails — because there is no such image for example — it then tries to extract the first image that's embedded within the post itself. If there isn't one, then a default image is displayed.

My code then calls on PHP's getimagesize() function to get the dimensions of the image. These are subsequently used to calculate the other dimensions that are needed for the principle teaser.

There's also a little bit of processing of the text for both the title and description of the principle teaser. The program inserts a non-breaking space between the last two words of both, so as to ensure that the text will be displayed without orphans. Then a "weight measurement" of the title is taken to determine whether or not it should be displayed left-aligned or centrally within its container. This purpose of this is to keep the text aesthetically balanced and to do so automatically, so that I don't have to think about the front page too much when I compose my post titles.

The processing for the four mini-teasers (the quad) is virtually identical except that there is no weight balancing of the titles — they are always displayed centrally in their containers, regardless of their weight — and no description is retrieved.

The Image Director

The quad is also subject to some additional image processing. Each image is cropped to equalise its x-y dimensions and then scaled down to 232 pixels on each axis. Then a copy is created and the AI_grayscale() algorithm is applied to it. Finally, the two images (grayscale and colour) are stitched together to produce the CSS Sprite.

I wrote a standalone PHP program to handle all this image processing. This program, which I have called "Image Director", produces these images on-the-fly via the GD Graphics Library. It also incorporates a sophisticated caching system for the images it generates, so that they can be served directly on subsequent requests without a processing overhead. Image Director has a few other tricks up its sleeve too (I'm such a tease!) — all of which are handy to have in your website's imaging arsenal. I'll be releasing this program under a GPL license shortly (when I've cleaned up the code and properly documented it) so watch this space.

Last Revision: November 1st, 2009 at 02:43


3 Comments for “About the Redesign of the Home Page”

  1. Well I, for one, absolutely love the new redesign.

  2. That’s really great Kevin. I must admit it, I’m really happy with it. I think this one will probably stay awhile.

  3. I love the “continue reading” button. It’s like a very clear call-to-action element.