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

The Hicks Logowall

05 Oct 2018

Hiding Away

16 Sep 2018

Biro sketch of Lauzerte

23 Aug 2018

Firefox Identity Project

21 Aug 2018

It’s just fashion

26 Jun 2018

The Symbol Sourcebook

08 Jun 2018

Differences between Icon and Logo Design on This is HCD Podcast

10 Apr 2018

Twelve South PencilSnap

01 Apr 2018

The Infinite Canvas

09 Feb 2018

Instagram Hickstagram

  • 22 Oct 2018

    Inktober Day 22. Well, @hicksmade left me with a toughie to follow. Here’s my attempt at Dali taking his pet anteater for a walk. #inktober #inktober2018 #leighandjondoinktober #dali

  • 21 Oct 2018

    Inktober Day 21, another bird (sorry @hicksmade)! This is the Snipe that I watched from the hide at Rusty Common on Friday. Lovely birds with beaks that defy the body they’re attached to. #inktober #inktober2018 #leighandjondoinktober #snipe

  • 21 Oct 2018

    Common Darter Dragonfly

  • 20 Oct 2018

    Inktober Day 20: quick doodle without planning in pencil or looking at reference, which is usually a bad idea. Your turn @hicksmade! #inktober #inktober2018 #leighandjondoinktober

  • 20 Oct 2018

    Morning dog walk. Even the wheelie bins looked good in this light

  • 20 Oct 2018

    Inktober Day 19. Following @hicksmade’s marshmallows with more marshmallows 🤪 #inktober #inktober2018 #leighandjondoinktober #ghostbusters #staypuft

  • 18 Oct 2018

    Inktober Day 18. When @hicksmade did a prawn I was sure she was setting me up to do cocktails! #inktober #inktober2018 #leighandjondoinktober #cocktails

  • 18 Oct 2018

  • 18 Oct 2018

  • 18 Oct 2018

    Inktober day 17 . @hicksmade’s pen led me onto squid and their ink shooting abilities. I also found out that a part of the squids anatomy is called a ‘pen’. #inktober #inktober2018 #ink #leighandjondoinktober

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