Work

Some of my past projects with a little commentary about each. Most of this work is from the last four years. Where possible I’ve linked to the original site otherwise, I’ve linked to my server where I have a copy.

@media 2008

I’ll be presenting a talk at @media about our experiences at the Guardian relating to css and making work reliably and keeping maintainable.

Working at the Guardian

Since January 2007 I’ve been working full time at Guardian unlimited. I also freelance occasionally at songkick.com where I do client side development and encourage good practice.

I have continued the work I started as a freelancer working on the travel site. We have since launched our new network front, Business, Money, Environment, UK news, World news, Politics, Science and Technology sections in the new design and cms.

While much of my work until march last year was focused on writing the templets and making the pages as accessible and standards compliant as possible. After that as the team grew from two to seven and soon to nine most of what I now do is strategic. Deciding which way to solve problems when to try new strategies and what we need to revisit.

One of the things I first noticed about the structure of tha pages as they were being designed was if they were not articles (comment, reporting and commercial) they were lists of suggested articles. So one of the defining aspects of the markup is extensive use of lists. Using lists to chunk page content rather than using hundreds of div tags is not something I’ve seen in many other pages, I may not be looking in the correct place, but, I think this might be a small innovation.

Naturally the separation presentation from content is not perfect. Bits of markup were added to give hooks for the css often this took the form of nested lists, so to achieve a two column layout I would use a list with two li tags each containing a sub list of article trails. Those trails each having there own hierarchy of headings and paragraphs. Added to this we tried whenever possible to express meaning or intent when choosing class and id names, although it turns out naming is hard.

Using lots of lists is not without problems. Even after you remove the browsers default styling there are still browser bugs to cope with. Notably Internet Explorer seems to have particular problems with lists, less so in version seven but still not great (combine that with ie’s quirky way of doing floats and things do get interesting). Firefox also has some problems with lists but they are minor by comparison. Another problem with using extensive nesting while trying not to go mad with class names is ie six’s lack of support for some of the more useful css selectors. This weakness means that when you look at code you will see a lots of class="first", class="last" and class="col".

Nesting is a fundamental concept in html and as such it being a source of pain seems odd. If I create a list of lists I’d expect it to work — and at the most basic level it does. But when you choose to style these lists inside lists it all goes a bit to pot. You see ie (alright ie 6 and older siblings) only supports the descendant selector and not the child selector. As a result if if say — ul.trail li — I’m stuck because now that styling affects all the nested lis too. There are ways of dealing with this, the two most obvious, are use more class names and set the descendants descendant. Nether of these options is particularly appealing, all the same we did both.

So now what? So now we have a very solid (mostly semantic) html base with css for layout that scales well. Our css is starting to get to the point where it gives the new look and feel reliably and our vocabulary of class names allows us to create variations on the new look rapidly, and interestingly robustly, working cross browser with only a minimum of fuss.

The use of css means, contrary to what many commenters seem to have assumed, our site works quite well on mobile devices. Not that I’ve checked all of them, but, I have checked on Blackberry, Sony Erricson and Nokia phones, only a small subset, but in those and in Opera mini the page does work well.

Freelance Work

I am now working at the Guardian we have just launched the new Guardian Travel site.

I was working at DLKW none of the work is live yet so I can’t really discuss it needless to say the emphasis was on accessible usable standards based design.

Over the last few months I’ve been working on a site for a business local to me Inchgreen marine services. I really enjoyed working on the site especially as it gave me a chance to do the design as well as the implementation of the site, not something I get to do very often at the moment. I tried using some javascript to do the rounded corners on the page, not sure if it is the best approach, but, it is more maintainable than putting in all the extra mark-up required to do it with out js. It also uncovered another bug in Internet explorer which has caused me some headaches. All in I’m pleased with the site.

I’ve been working at Victoria Real. Prior to that I worked on the Type 45 web site at wheel:. There is more information about that work on my stuff page.

I worked at Poke between August and November 2005 and I’ve worked on some interesting projects. I did a fair chunk on the orange entertainment site, although the bulk of the work on the css was already done. I also worked on a small site for SAB Miller which is not up yet so I can’t really discuss it yet, which is a shame as I am very pleased with the work I did on it.

The other bit of code was on the new yahoo digging site (the site is no more so no link). It was fun putting it together and I think I got some nice little ideas in place. It is also the first site I have done in a long time which uses javascript. In keeping with the unobtrusive javascript idea all the scripts are strictly separated from the content, and degrade gracefully if js is turned off. I’m still learning, but this approach has real appeal to me and is motivating me to learn more about javascript, for the first time in a very long while.

On Rio Tinto my brief was to move their table based layout to a css layout and to improve the accessibility of the site. I was contracted to view. The final result is much simplified xhtml with semantic mark-up.

Just recently I finished wendysmith.co.uk. The site needed to present the artist work in a sympathetic manner and be easy to maintain. I designed the site and wrote the php, html, and css.

Working as a freelance contractor for wheel:. The work was developing html and css for three clients: BT, Ernest Jones and H Samuel. The most important work I have done was on the new Unilever design.

Rio Tinto accessibility work required rewriting the html to remove the table layout, remove any javascript driven links and making the page work with keyboard navigation and screen readers. I also replaced the flash main navigation with some sucker-fish drop downs which when combined with the secondary navigation meant that the site works without flash, javascript and with images turned off.

The BT work was coding css for the new look on the BT small & medium business pages.

The Ernest Jones work was updating and adding products to their standard templates as was the H Samuel work. This mostly required changing or creating graphics and adapting their css to the new look. Unfortunately, I can’t point individual pages as they are a moving target. The last thing I worked on was the Bridget Jones promotion.

On Unilever I wrote most of the css and many of the html mock-ups. Obviously on a project this size many people are involved so I was just a small cog in the system. That said, I am very proud of the work I did on the Unilever css. Have a look at the site.

Training for Life

At Training for Life I worked on web design and development. The sites I worked on were usually for charities and small to medium businesses. My role was lead css and html developer as well as doing php development.

The largest piece of work I did was developing an intranet application for the NHS Confederation. It was implemented in php with mySQL as the database back end. If you are interested in looking at it please contact me so I can give you a url and a user name and password to view a demonstration installation.

Opportunities Child I wrote the asp that connected to the access database for the site’s content. I also wrote the css. Again the layout is pure css.

Urban Inclusion we developed the design from their existing branding. I implemented the design, wrote most of the css and did the accessibility work. All the layout and rollovers are done in css.

16 Hoxton Square & Hoxton Apprentice were developed for Training for Life as they are one of the partners in the scheme. On this I did quality control and cross browser testing.

DCT

At dct I did two things, I taught long term unemployed people computer applications, html and css and I maintained dct’s intranet.

From the teaching I learnt just how counterintuitive most computer applications are and saw the impact of poor design on people. It also gave me a ready pool of volunteers to use for testing designs (it can be quite humbling).