Atomised: the Web Design Co-operative

The Project

So, we did think twice before we included our own site but to be honest we were quite chuffed with it and thought we'd like to tell you about some of the technologies that went into it. The site began back in June when we formed Atomised. We first of all had to conceive of a brand that defined what we stand for. After going through some stinking names including Macmillan, Albrock & Faichney, Faichney, Macmillan & Albrock, <and yeh you guessed it>, Albrock, Faichney & etc etc, Badgers Paws & The Alamo we chose Atomised. Why? Well it encapsulates what we stand for and where we think the web is at.

We began site back in August. Al began designing the wireframes for the site in Adobe Fireworks using traditional principles of graphic design by focusing on ensuring the text and both horizontal and vertical divisions retain a consistent line-height with appropriate 'whitespace'. The site design integrates traditonal graphic design grid theory with 'the golden rule' to create a design that is consistent, flexible, repeatable and designed with readability and usability in mind.

Once the design was finalised Al and Morgan began the process of converting the design into 100% validating XHTML 1.0 Strict and efficient semantic CSS 2.1. We utilised the CSS Sprites technique on the navigation and implemented a complete css system to recreate as efficiently as possible the grid. All the CSS measurements were calculated in ems to ensure the correct line-height was preserved.

With Morgan taking over the bulk of the CSS and taking the static site to completion (including the onerous task of making the site compatible with the strictly non-standards compliant internet explorer 6) Al was free to begin integrating the Content Management System. For our own cms we chose to build it using the XML/XSLT based IDE Symphony. It is PHP and XSLT based and allows the manipulation of data in XML with a logical information architecture. The site has been optimised to the Yahoo Developer YSlow! criteria for speed and efficiency. We integrated sIFR for accessible image replacement, Last.FM & Twitter feeds handled via XSLT manipulation of RSS and Javascript.