new adfam websites

12 Oct 2003

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

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.

Recent Posts

Using the iPad Pro as my main computer

07 Jan 2019

Hicks' top albums of 2018

22 Dec 2018

Hicks Studio Clearout!

17 Dec 2018

New Identity for iHasco

13 Nov 2018

Leigh and Jon did Inktober

01 Nov 2018

We are Oxvik

15 Oct 2018

The Hicks Logowall

05 Oct 2018

Hiding Away

16 Sep 2018

Biro sketch of Lauzerte

23 Aug 2018

Instagram Hickstagram

  • 13 Jan 2019

  • 05 Jan 2019

    Just tried the Vegan Sausage Roll from Greggs. Really good - nicer than the meat one, and the thought of Piers Morgan frothing at the mouth makes it even tastier

  • 30 Dec 2018

    Blackbird studies #ipadpro #procreate

  • 27 Dec 2018

    My special egg plinth from @maanthh. You have to say the name in the style of Matt Berry in the IT Crowd ✊

  • 26 Dec 2018

    This is my Pencil. There are many like it, but this one is mine. #applepencil

  • 25 Dec 2018

    Christmas reading 🤗

  • 24 Dec 2018

    Hope you all have a very Happy Christmas folks! 🎄🎉🍸

  • 22 Dec 2018

    The moon tonight was full and large. Taken through a spotting scope with iPhone, hence a bit blurry

  • 21 Dec 2018

    It’s that time, here are my top 9 albums of 2019! 7 - Beach House Columbus (Original Motion Picture Soundtrack) - Hammock The Appearances - Ester Drang The Art of Pretending to Swim - Villagers Twenty Two in Blue - Sunflower Bean In Transit - The Amazing Vide Noir - Lord Huron Marauder - Interpol The Great Untold - Scott Matthews

  • 20 Dec 2018

    Another new music genre

Contact us

Call Jon on +44 (0)7917 391536, email or tweet @hicksdesign.

Alternatively, pop in for tea and cake at the studio…

Wenrisc House
Meadow Court
Witney, OX28 6ER
United Kingdom