Mantis Design Teaser

At my new job we use MantisBT for our bug tracking and project management. Unfortunately despite good functionality the visual side is desperately lacking some love and attention. Tired of looking at the barely styled web app I decided to spruce it up a little bit. A teaser of the new design can be seen above.

UPDATE [18/02/2011]:

The theme is not ready yet, but I finally got round to start implementing it. For anyone interested in the work in progress: Mantis – MyTheme

The whole redesign process has made me swear heavily at the dreaded IE 6 browser many times. I really have to admit I holeheartedly agree with the notion of shooting it dead.

But nevertheless, enjoy the new clean design.

Obviously you do tend to repeat certain pieces of code over and over in a project, but a framework? Behind a word like that usually stands a complex set of predefined elements. Though solid and reliable, these are often not very flexible and not easily modifiable. And the last two features seem to be crucial for projects that involve html and css.

Deciding to Use a Grid System

It all started with the plan to redesign the ThinkSentient website. I whipped up a new, more elegant design. It wasn’t done using a grid or any vertical rhythm (other than going for the “feels good” approach). This lead to the idea of updating the look of the ThinkRobot blog, considering that both websites are intentionally very similar with only a different colour scheme.

The problems started when I was adding the extra pages for blog specific stuff. Unfortunately I have not realized that in Fireworks (CS4) when you move guides on one page they do not affect guides on another, while state changes do. And I found out only after ending up with over 7 pages with guides all over the place. Sigh.

I had no choice, I would need to reorder most of these pages, as one of the side effects of wondering guide lines was a sidebar of different widths. So I said to myself, might as well give that grid thing a try if I have to do all this work over again.

Choosing the Grid System

Personally I decided to go with the 960 Grid System – the 12 column variation. Due to the recent decision of finally ditching designing for 800×600 I wanted a framework that was suited for the 1024×768 resolution, and the wider the better. 960 is a good, easily divisible number, just as the official website claims.

Secondly I preferred something lightweight and easy to tweak, with not too many defaults. 960 combined with Eric Meyer’s CSS Reset Reloaded was the ideal solution for me.

Grid vs Non-Grid

Design Without Grid

[caption class="img2" id="attachment_23" align="alignleft" width="300" caption="Design With Grid"][/caption]

The comparison above should show the slight differences. On the left is the design without a grid and vertical rhythm, while on the right there is the updated version based on 960 grid system and 18px lines. Some parts of the preview might vary, as the grid screenshot is closer to the finished design, however you can definitely see the difference a grid, and especially the introduction of vertical rhythm can make.