new adfam websites

2 new microsites have just been launched for Adfam, the UK charity supporting familes facing drugs/alchohol problems. One site is to support parents, and the other for partners. Hicksdesign designed the site templates using XHTML and CSS, and London-based company Clarity provided the content management system using asp.net.

This is important for me as this is the first commercial site that I’ve built completely web standards and no tables. My personal site was the first time I had used (and got to grips with) the methodologies of XHTML and CSS, and I was keen to use them on future sites that I created. This was project was ideal.

The sites were designed in a bit of a hurry – just over a week from flat jpeg mock-ups to final site templates with images and CSS. First, flat mock-ups were created in Fireworks. As well as an easy place to fiddle and experiment, this allowed me to use a frame for each page I was designing, and have all common navigation/logo elements on a shared layer. If I modified the nav on one page, it updated throughout. Each frame was labelled (e.g ‘homepage’) and when the layouts were all ready I exported with the option of ‘frames to files’. The frame label becomes the filename, and Fireworks will automatically replace any spaces you’ve used with an underscore, ready for the web. This is often how I create images for elements like titles, and makes updates and changes easier to find and execute.

Once the design was agreed, these layouts were then converted into XHTML and CSS. The Fireworks slice tool was used to isolate areas on the designs that needed to be images – titles, special bullets etc. I keep a basic site template which has a folder structure, an index XHTML page with doctype, blank meta tags etc. It also has commonly used snippets of css, javascripts and php. This gives me a good basis to start working on, and saves trying to find the same old bits of code.

The 2 microsites are almost identical. Using CSS to control the design meant that resources could be shared and easily updated. Elements such as the option of ‘hiding the logo’, enabling users to be less conspicuous. This is just a stylesheet switcher, and re-uses all the css already used in the site, and just adds a line over-riding the background-image attribute of the logo DIV, removing the logo. It also uses a lot of CSS Image-replacement, including rollovers with pixys no-preload method. Why use such new techniques on a commercial site? Well they work, they allow the page to be more accessible, and they cut down on code. I’m currently writing an article on how to use css image rollovers on horizontal menus, as I’ve been getting a lot of questions about that.

The coding side was all done in BBEdit, but my recent discovery of skEdit means I’ll be using that in future.

Inevitably, when these templates are handed over, the content of the site isn’t final. At the very last minute, elements are changed or removed, occasionally to the detriment of the design or the code. Please – no ‘this page doesn’t validate’ reports on this one – little things like uppercase tags will creep in. This isn’t ideal, but it is the real world. Unlike my personal site, I don’t have the luxury of making adjustments ‘mid-flight’.

What I didn’t foresee were the problems this caused with the content management system. It contains its own rendering engine, which hasn’t got the rendering capabilities of a modern browser. Therefore anyone using the CMS couldn’t see the styles when they were applied to new text. It required a leap of faith on the part of the client that everything would look OK in the browser. Fortunately, both Clarity and Adfam were pleased with the benefits of a css driven site.

Tags: design, hicksdesign