Realignment / redesign

As I mentioned while ago I am publishing realignment walk-trough. This is more of the realignment rather than redesign but I could be wrong. Regardless the term, new layout differs slightly from the previous version, but his more of the evolution rather than revolution - two columns, same colour scheme.

Layout

As a layout base, I used 24-unit grid system from 960.gs. I've been doing some experiments with grids and this has become my favourite one - it gives more flexibility. Within 24 unit version, each unit is 30 pixels wide and the gutter is 10 pixels wide, so layout fits in 950 pixels. I also made some modifications and extended the padding on the outer edges from 5 to 10 pixels.

It was good opportunity to do some experiments with the arrangement of the columns and the content. Main content column spreads across 17 columns, while the narrow one (on the right-hand side) uses 6 units. There is one unit gap between columns to give some extra spacing between them.

The layout of entries is inspired by Josef Muller-Brockmann's work - date uses 3 units while heading and content use 13 units. There is another one unit gap for extra spacing. There is also new feature - layout switch, that puts date above the heading and expands the content the left using additional 3 units. Again, there is a one unit gap, so the content doesn't fall into the edges.

Other visual changes

From the visual point of view, logo has been altered. I decided to change font and use it across the website (logo, headings and navigation), so new font had to come with web variants. After some tries I picked font Colaborate that can be downloaded form fontsquirrel.com.
Main column with entries incorporates more changes. There are new types of entries:

• features - whole body text is displayed (without comments)
• note - acts as a quick entry with different background and limited amount of characters
• short - only title appears

Front-end development

Front-end is still based on XHTML 1.0, JavaScript (jQuery) and CSS 2.1. There are some areas where goodness of CSS3 (rounded corners, shadows) and HTML5 (data attributes) is used. I decided to replace old font embedding (based on sIFR) with @font-face. As mentioned above, there is a new mechanism responsible for layout switching. It is based on JavaScript (simple class switching) and uses cookie to store information about selected layout (even after website revisit).

Back-end development

Back-end for the UI has been rewritten using asp.net MVC3. The reasons for that are:

• separations of concerns (you can find good explanation here)
• control over the HTML output
• no ViewState and better performance
• neat and SEO-friendly URLs
• better maintenance

This image shows pretty good reason why I switched from WebForms. It is ViewState - it is huge and image doesn't even show its full size.

Overall I am quite satisfied with the final result of the re-work. There is one downside which is related to the UI and fonts - Windows (XP and Vista) doesn't render fonts as smooth as Mac OS X.

Tags: design grid mvc layout font