Category: markboulton-co-uk


As of a couple of weeks ago, Mark Boulton Design -- together with Content Strategist, Relly Annett-Baker of Supernice Studios -- have been tasked with redesigning CERN's public-facing website, and the organisation's intranet. Most importantly, we're helping CERN tell the right story. We're helping the scientists and researchers at CERN (all thirty thousand of them) do their job better by providing better organisation of their internal online tools. We're also helping with a branding project to make sure the brand is represented cohesively across the many thousands of user websites.

It's a dream project. Seriously.

The European Organisation for Nuclear Research is based in a hap-hazard collection of buildings just outside of Geneva, Switzerland. In French, The European Organisation for Nuclear Research is known as Organisation Européenne pour la Recherche Nucléaire, or just simply CERN. Yes. That CERN.

Just after the second world war, several scientists from a bunch of countries (the so-called Founding Member States) got together to form an organisation to progress nuclear research. Over the years, many other countries joined the founding member states with a view to moving beyond study of the nucleus of an atom to that of high-energy particle physics.

The birth of the web

In 1989, Tim Berners-Lee was working at CERN and needed a simple way for sharing information between researchers. The very first website created using this system is still online. Incidently, have a look at the markup (semantically, it's as clean as a whistle). CERN is where the web was born. And I'm a web designer. And CERN is where it was born. Talk about geek-dream come true.

CERN's culture

CERN is a collaboration. A culture of sharing, debate, discussion. We need to work in and amongst that community. We need to get to know them, how they work, how they think, who has a loud voice, who is influential, who are the key drivers of change. And so the list goes on. As such, we'll be approaching this project openly. We'll be working with the community in CERN rather than providing them with something.

I'll be speaking at CERN in September about Designing for Community, and sharing some of my thoughts about designing for two very different open source communities. There will be tales of woe, intrigue, victory – but above all – a story of how, together, people make amazing things.

Our Job

It may just be likely that in the near future an announcement will come out of CERN that will fundamentally change our understanding of the universe. That's an important story to tell. Not only that, but it's an important story for CERN to tell to the right people, in the right way.

We're so excited to have the opportunity to work with some of the smartest people on the planet. To be working on a website that will communicate such rich and valuable stories from recent human scientific endeavours is both exhilarating and terrifying. And, to boot, we'll be working on the project openly within the CERN community of scientists and staff. As I mentioned, the culture of CERN is one that we simply couldn't do the 'designer locks themselves in a room for three months' type of project. We need their help every step of the way, and we'll be sharing our work as we go.

Like I said; terrifying. But, I keep telling myself, if you don't wake up and feel slightly scared about your life, it means you're in a rut. Feeling scared is about risk. And risk is what keeps us moving forward.

Out of the comfort-zone and around a 17 mile collider at nearly the speed of light.

Saying No

Over on the Five Simple Steps blog, Alex Morris (our User Experience Design Director at Mark Boulton Design) has posted a piece on why we don't give away free multi-format books, and why producing good quality eBooks takes time.

Deep within this post is one line that pretty much sums up the ethos behind what we should all be doing as designers and business owners:

Saying no is an important thing for any company that cares about their products.

We say 'no' every day. In fact, more than we say 'yes'. Saying no:

  • is a place to begin constructive discussion
  • gives you the power to retain your integrity
  • generally leads to things being better (products, your sanity, your design work, your clients, your projects)
  • gives you balance in your life

Everybody wants to please other people. Even now, I struggle with saying no. I'm too generous with my time. Too eager to please my family, friends, clients and customers. Everytime I say 'yes', when I'd rather say 'no', is time away from myself. And, if you're like me, time to yourself is what keeps you sane.

So, do yourself a favour. Say no.

A sneaky peek: Codex

Over the past week or so, I've had the absolute pleasure of having a sneaky peek at an upcoming typography journal that promises to blow your mind. Created by typographic tour-de-force, John Boardley – of I Love Typography fame – and my good friend, Carolyn Wood (Editor-in-Chief), Codex is nothing short of incredible. Firstly, let me tell you this: it is stunning. Beautifully crafted; both in prose and design. This is more than a journal, it's a work of art.

Codex spread

Codex drop caps spread

In their own words:

"Codex is a hybrid of magazine and journal. Beautifully designed, visually appealing, an immersive experience with a lively voice, it is also serious about its subject: authoritative, scholarly at times, but not dry in tone. It’s serious, but not stuffy. It loves the people, tools, and type associated with this craft, from the man carving beautiful cherubim into wood blocks in the 1400s to brilliantly formed modern interpretations and departures. It embraces the web and is watchful for the future’s classics."

As a member of the International Society of Typographic Designers, I receive their journal on an annual basis. The content is engaging, deeply respectful of the craft, its roots and future direction. If there's one criticism I have, is that the journal has yet to provide me with any worthwhile content about typography on the web. Typography is a craft that permeates so many design disciplines, and there needs to be a regularly published journal that covers that breadth. Codex promises to do that, and so much more. I for one can't wait.

The website opens tomorrow for pre-orders. Do yourself a favour, order one.

Welcome Nathan and Colin

I don't often talk about work on this blog, but today is the exception. We're enjoying a particularly busy time at Mark Boulton Design. We're working on some great projects for some fantastically great clients – from major global sport and news organisations, to open source content management systems. We're so busy, in fact, we need more people. In February this year, we advertised for a designer and an Apprentice web designer. We got a lot of interest in both positions which is great.

Welcome Nathan

Nathan Ford wrote to me a couple of weeks after advertising the position. Nathan currently works at Unit Interactive, alongside none other than Andy Rutledge. Andy and I have exchanged emails over the years. I read his blog, he reads mine. We both started small design studios at around about the same time. I've got a lot of time for Andy, and knew straight away that anyone who's been working for him for three years will be something pretty special.

As it happens, I've known of Nathan for a while too. I've read articles he's published, follow him on Dribbble and Twitter. I like what he has to say and the work he produces. We're also thrilled he's taking the opportunity to move to the UK with his wife and work with us in South Wales.

Exciting times ahead, and I can't wait. Welcome Nathan!

Welcome Colin

When we announced the Apprenticeship position at Mark Boulton Design, it caused a bit of a ripple in our small industry. Fed up with the idea of internships, we wanted to commit to someone. We wanted to educate throughout a fixed two year contract, where the apprentice would be working on real projects from day one. Projects that matter to us. Projects that we hope will matter to them.

Well, from the that first tweet, we got a lot of responses. In fact, we had about 50 from as far away as Alice Springs in Australia, and as close as Cardiff.

In the end – and it was a very close thing – Colin Kersley got the job. Here's a photograph of one of his 'hand-written application':

He's smart, funny, creative, hungry, and a damn good illustrator. We're very happy to have him on board. Welcome Colin!

With Colin and Nathan starting at Mark Boulton Design I'm fulfilling a bit of a dream that I had for the company when I first started. We're growing a team of some of the best talent the industry has to offer, and also committing and giving back to the local community.

The Making of Tron: Legacy

I've not seen the film yet, but judging from this short video, it looks visually stunning:

The Making of Tron: Legacy from Michael Keane on Vimeo.

Five Simple Workshops

A couple of weeks ago, the small indie publisher I'm a co-founder of announced some workshops we're running in January 2011. Three days of intensely practical learning in London.

Five Simple Workshops

This is your chance to go beyond the books of Donna Spencer's 'A Practical Guide to Information Architecture' with a full day workshop, or Brian Suda's 'Designing with Data' for a half day of visualising data.

Upcoming authors, Leisa Reichelt and Relly Annett-Baker will also be running half-day workshops on 'Strategic UX' and 'Words and pictures: Copy and the design process' respectively.

Oh, and I'll be airing some of the material from my new upcoming book on Grid Systems in another half day workshop.

If you fancy coming make sure you book now before the Early Bird tickets run out.

New design

Last week, I spent a productive week near Lagos, Portugal, finishing my upcoming book. As part of this book, I've spent time working on a canon of page construction for websites –- a set of guidelines for aesthetically pleasing layouts -- and this blog design is built using those rules.

What's wrong with the previous design?

Nothing. As a design exercise -- using just Georgia and emulating letterpress books –- it was a good one. The drop caps that I had commissioned where great (and not going to waste, incidently. I have other plans for those). But, the single page homepage view was restrictive. It was forcing me into writing articles rather than blog posts as every post had to be worthy of just one page. A multiple view of blog posts just didn't work with the design. All of this added up to a redesign. Plus, the opportunity to tie it into some of the thinking i've been doing with book was too much of an opportunity.

A case for design exploration

This blog is a place for me to experiment. For me to post things I like, or want to reference. To write about all manner of stuff that interests me. Over the past couple of years, my blog hasn't felt my own, to a degree. It's felt like I've been writing for an audience, posting stuff for others rather than myself. That's arse-backwards. A blog should be about personal expression. The moment you start thinking, and writing, to please others then it's a bind; it feels less like a personal exercise and more of a job. That's what happened, and actually, that leads me onto the next point...

What no comments?

Nope. No comments. I think, by and large, the time has past whereby comment threads provide useful discourse. Twitter's now the place where people directly talk to me. I may turn comments on for the odd post, but they'll mostly be off.


I did toy with the idea of ditching Wordpress altogether and heading over to Tumblr as the software modelled pretty much exactly how I wanted to start blogging again. But after a period of trying to fathom out the best approach, I thought I'd stick with Wordpress and use Feedwordpress to pull in my Delicious bookmarks. This means, as I'm browsing, I can quickly fire off a link to Delicious, tag it, add a description and it'll appear here.

So, that's about it. Nothing spectacular. A touch of responsive design thrown in, the outstanding HTML5 Boilerplate, Elliot's Starkers theme and a wee bit of Typekit. It's probably bust in a few places, and it's just bare bones in others. But, it's start.

Zeroing the desk

I've been meaning to redesign my blog for a little while. Not because I don't like the previous design (far from it, in fact), but because I need a place of design expression, not just a place of written expression. This blog is my place to do what I like just for the sake of it. Last week, Brendan Dawes inspired me to zero my desk - a term used to describe what a sound engineer does to the mixing desk at the end of the day. Everything goes to neutral. That's what I'm doing.

Normal service will be resumed in the 'morning'.

On defining UX

Well, what a week that was. Off the back of a wonderful dConstruct came a timely discussion (either well-timed, or ill-timed depending on your point of view) between Ryan Carson and the UX community (rebuttals from Andy Budd and Cennydd Bowles).

As usual, it's polarised opinion. But now - a few days later - more thoughtful discussion is beginning to take place.

It all started with one tweet:

UX Professional' is a bullshit job title. It's just a way to over-charge naive clients. All web designers should be UX pros

Admittedly, I think Ryan's timing was a little off given Clearleft had just advertised they were looking to hire a Senior UX Designer. That said, this discussion does continue to bubble up the surface every now and then. Last year, I tweeted:

Since when did good web design suddenly get called 'UX'? Everywhere I look now, good UI design is called 'UX', good type = 'UX', Colour? UX.

Jeremy followed it up stating why he doesn't care about UX:

If someone claims to be a web designer but isn’t considering the user experience, they are deluding themselves. UX, like accessibility, should be a given, not a differentiating factor. And that’s why I don’t care about UX.

I think this is what Ryan was getting at. In fact, it was confirmed in an update to a post over at Think Vitamin:

I still strongly believe that if the lead web designer on a project needs someone who specializes in UX because they don’t have a good understanding of solid UX principles, then they shouldn’t call themselves a web designer. Web Design and UX are not two separate disciplines, and UX is not something you add to a project because you have a large budget.

I don't agree with the first bit. I fall in that category of designer; I work with UX professionals every day. Researchers, Information Architects, Interaction & UX Designers. And I get UX. I work with other people to provide a better service to my clients. I'm not an information architect. And, if you've ever worked with a good one, on a project that required it, then you'd probably agree with me. Understanding the principles of something can in no way replace an experienced professional.

To me, this is a discussion of semantics. Let me explain my point of view.

UX is a few things:

  • It's an overarching principle and practice of web design. ie. you should design for your user's experience and that should just be part of what you do.
  • It's a profession. Information architects, interaction designers, researchers, academics. They are all UX professionals and not necessarily involved in the broad process, but are a cog in the machine.
  • A buzzword. Like many things that started out new in this industry, the practitioners promote it, differentiate themselves, this gains traction with clients and then the term is popularised and diluted. As Cennydd says, this worries some people as it undermines their value and expertise. Incidently, as I recall, this happened to 'graphic design' in the 80's, 'web design' in the late 90's and now it's happening to UX. In some industries, it's why professional bodies are put in place. To ensure a level of professional association with a term given to both someone's job and an industry.

What we're seeing is a maturing of a term that represents different things. It represents something different for our clients, to the web industry as a whole and to the subset of professionals who have been practicing user experience design for the past 20 years.

Just like the debate about whether designers should be able to write HTML, this discussion is just not as black and white as everyone is making out. There's a whole lot of grey in there.

Something's afoot

I've just updated to Wordpress 3.0 without a problem (which was nice, and actually made a nice change). Why? Well, things are a changing here. I've got itchy feet and all this talk of responsive web design has got me all excited about possibilities again.

Stay tuned.

Designing for the Web. On the Web.

Last week, after a lot of thought and a heap of work, we released my book, Designing for the Web, online. For free. It was only published a year ago, so why release it so soon? Well, I tried to answer it several times in 140 characters, but it's never enough is it?

There seems to be a history - with a few notable exceptions - of publishing book content online only after it has lost its relevancy, recency, or often, both. As an author, this bothers me; particularly for a book about web design. However, as a small publisher I can of course understand why this is the case. When the book no longer pulls in large sale numbers, or more importantly, when it is deemed 'out of date', or 'no longer as relevant as it once was', then the motivation for publishing online, for free, is to get a firm grip of the Long Tail in search of new sales. Makes sense.

But I want my book to be relevant. I wanted to increase the reach, and lower the barriers to one sector of the industry that is underserved by this business model: students.

I get a lot of email from students asking for education discounts, advice, tips on how to get into the industry and a plethora of other subjects. But the largest complaint we've had on Designing for the Web is the cost for students. I remember being a student (and 15 years ago in the UK, students had it easier than they do now). I remember being handed a book list as long as my arm on my first week in University. My first thought: how the hell am I going to afford this? Then you're forced to prioritise on a list you know nothing about. Which books do you buy, when you could buy food? Or beer? It's a tough choice.

We pride ourselves on creating a beautiful, substantial products for Five Simple Steps. It's why other authors have asked to write with us. We're not prepared to compromise on that quality to lower costs for a broader reach; there are plenty of other publishers who do that. We're focussed on creating a great physical product and a PDF version that is equally considered. When you're buying our books, you buy the whole experience, not just the words.

Anyway, where was I? Oh yes, the online version. So, the idea was that we'd launch the book online to serve that audience who prefers to read their content online, or those who arguably were most in need of this book, but had hard decisions to make on how they spend their money. I wanted to retain the relevance and recency of the content. I just wanted to give a bit back. Maybe all this working in Open Source is getting to me.

It's worth noting that we might not be doing this for every title, as it's very much an Author's decision. In that respect, this is a little unique as I'm both Publisher and Author. I'll be posting another post this week about the upcoming titles we have planned for the next 12 months. Some very exciting titles planned (including the rather late Grid Systems title of my own).

A Pumpkin Mask

For all those, like me, who lack some serious knife skills when it comes to creating a scary pumpkin face for the impending Halloween festivities tomorrow, here's a simple mask you can download, print out and stick on a pumpkin. It's an .eps file, so you should just be able to open it in any image viewer and scale it to the size of your pumpkin. I'm informed that one size does not fit all.


Thanks must go to my brother's mate, Gaz Wrafter, who quickly got this together for us. Thanks Gaz!

Oh, and watch your fingers!

Designing for the Web workshops

Exciting day today. We're pleased to announce a series of Designing for the Web workshops in London, Manchester and Glasgow during November and December, 2009. And, they're a snip at £325.

Spend a day with me, and nineteen like-minded individuals as we trawl the depths of practical, applicable design theory. We'll cover all manner of exciting things like ideas & research, typography, colour theory, layout and compositional tools and techniques and rounding off with a site clinic and Q&A.

Oh, and they'll be tea and biscuits too.

Design in Open Source

Since August last year, together with Leisa Reichelt, I've been involved in working with the Drupal community. Firstly, on the redesign of, and more recently, overhauling the user experience of the software itself. All of which was done openly, and in close partnership with the Drupal community. Recently, the question of the practice of good design (and by design, I mean the kind of design I do, not software design) has once again arisen in the open source community. From Linux to Mozilla, Drupal to Wordpress, this is a question that keeps bubbling to the surface.

I've only recently been involved in open source through the Drupal project although I've been a member of many communities online, going back to 1995 or so, but none so passionate as the Drupal community. Honestly, it astounds me--almost daily--of the dedication and commitment many of the members of this community show to their project. But that's the positive side. It's understandable, then, with so much passion flying around, that there are frequent heated debates. I've had my fair share of these over the past year. One debate, admittedly instigated by me, happened on Thursday and has, once again, created ripples in the Drupal pond.

The Spark

It all started last Thursday morning. At Mark Boulton Design, we're finally getting around to redesigning the studio site, and we're using Drupal to do it. The whole team is hard at work, but probably none more so than our developer, Tim. As you do, first thing in the morning I was checking out the work been done to date and, typically, I was viewing source. Having been an advocate for Web Standards for so long, the semantic structure of a document matters to me. I didn't like what I saw, and I knew the cause: the html generated out of the box by a module called 'Views'. And, as you do when you're frustrated, I vented. On Twitter.

This was the code I was venting about:

<div class="views-row views-row-2 views-row-even">
<span class="views-field-title">
<a href="#">This is the titlea>
<div class="views-field-teaser">
<div class="field-content">Example teaser content in here...div>

This is the code automatically generated by views and it apparently looks this way because it has to cope with many different uses. If you ignore the classes for one second, I would have obviously preferred the html to look a little something like this for a header and a teaser.

<div class="views-row views-row-2 views-row-even">

<a href="#" >This is the titlea>

Example teaser content in here...


I was a little too soon to vent about this in relation to Views. It seems this argument/discussion has been going on for a long time. Everybody is bored with it. There are reasons the markup looks this way. And, as with all of Drupal, if you have the chops, you can override it all anyway. Some people thought I was attacking Earl Miles, the creator of Views. I wasn't (and hopefully that is now cleared up). My initial venting added fuel to the fire of a long-running debate that is still going pretty strong today: a wider discussion of design, and particularly the existence, and participation of, designers in the Drupal community.

Designers vs Developers

For a long, long time now, there has been friction between designers and developers. Back in heady days of the dot com boom, when I was working in a company in London, that division was strong and apparent. Over the years though, as designers working in this industry have moved beyond trying to make the web look, and behave, like print, this division has become much more grey. I'd say, in the past three or four years, I've personally not felt any division at all. Not until I started work on d7ux.

Drupal 7 is the fruit of developer labour. And lots of it. For a designer to even enter the fray requires trust on behalf of the developer community. And buckets of the stuff. As one developer put it:

You've come into our front room, and, while we were making a cup of tea, you moved all the furniture around. Not only that, but you redecorated, changed the carpet, and removed all of our belongings.

When you put it like this, it's no wonder Leisa and I have been subject to some hostility along the way.

On the back of our little fracas last week, Earl penned a considered response as to why he thinks there is a division in the Drupal community between designers and developers. He starts off by stating this observation:

In software, the roles of the designer and the developer are tiered. The developer writes the code and ultimately gets a piece of functionality, whatever it is, to work. In fact, the services of a designer are never required to make this code work. The fact that the services of a designer is a really good idea doesn't really come into this.

He goes on:

The converse, however, is not true. If a designer desires a particular piece of functionality, the services of a developer are required.

In any open source community that exists to further the development of a software product, this is of course, true. So, with that in mind, and a proposed source of designer/developer friction. What can we do about it? Is it possible to overcome this less-than-symbiotic relationship? I'm not sure it is, to be honest.

Participating vs Contributing

There are a couple of propositions that are regularly thrown at me as a designer working on and d7ux. The first is: 'Ah, but that won't work with contributed modules'. I call this the contrib grenade. It's normally thrown in when someone doesn't agree with your design direction and they're using the power of 'contribution' - the very life blood of open source - as ammunition for their argument. The second is: 'It's a do-ocrasy. Either contribute, or get out of the way.' And, in there lies the problem. At least as far as I see it.

Designers can currently participate, but not contribute, to the Drupal community.

Drupal is a software project. Like many other open source software projects, in order to contribute you have to understand the following:

  • Usually the software language the thing is written in. In Drupal's case, PHP.
  • The other software associated with the project. Eg. CVS.
  • The process of contribution. In Drupal's case, the Issue Queue.

To contribute, developers scratch their own itch. For designers to contribute, we have to find the same itchy developer, that has the same itch. The chances of this happening is pretty slim. To participate is different. Currently, in addition to my contributory work (which, I might add, is because I'm in a unique position), I participate. I'm sometimes in IRC. I've attended two Drupal conferences and will be at my third, in Paris, next week. This is participation. It's discussion. But, not contribution. In this do-ocrasy, I'm not doing. Because I can't. Because I don't know PHP, I don't know how to use CVS, and I don't think the Issue Queue sits well with the design process.

That's just my take. At the moment. But what about open source as a whole. What about other designers?

Back in January of 2008, Chris Messina wrote:

... I’d go so far as to wager that “open source design” is an oxymoron. Design is far too personal, and too subjective, to be given over to the whims and outrageous fancies of anyone with eyeballs in their head.

He goes on to say:

... Call me elitist in this one aspect, but with all due respect to code artistes, it’s quite clear whether a function computes or not; the same quantifiable measures simply do not exist for design and that critical lack of objective review means that design is a form of Art, and its execution should be treated as such.

Not sure I agree on that last point. But the art vs design argument is one I don't want to get into here. But I do agree with the first statement. At least for any aspect of visual design.

Great design requires a singular vision.

Now, when I say design, I mean the kind of design I do. Graphic design, Interaction design - all under the banner of UX. Web design. I think design requires a singular vision that can only really exist in a closed system. A system of control. A system where decisions and solutions are protected from dilution. It's no coincidence that many design classics are the result of the single vision of one individual. Of course, I include teams in this. Teams of designers can produce stunning work, but usually only under the instruction and guidance of a senior figure, with a vision. An art director. A creative director. Commercially, we're the fall guys if the design goes bad.

So, where does this leave us with open systems like open source?

Well, it leaves us as it has for years. In a place where good design, and good designers, are craved by many in the open source community. It leaves designers wanting to be involved but lacking the skills to do so. It leaves designers who have dipped our toe in the water wanting more, but clashing with the community as we grow in numbers. In my opinion, it leaves open source software lacking design vision. But, most importantly to me, it leaves this particular designer feeling a little sad.

Is there any way forward? I think so, yes.

For Drupal at least, I think there should be a team responsible for safe-guarding the user experience. Currently, that is, in part, done by the Drupal Usability team. They do a grand job, but I feel are lacking in one or two crucial areas. For one, they are all 'insiders'. Drupal needs people from outside of the walled garden to provide perspective. Secondly, Drupal needs more visual designers. Not 'themers' (the Drupal word for front end developers), but designers who can know their way around UI conventions, but also know how to set Palatino.

And with that, I'm going to stop writing. The next few years are an exciting time to be involved in this particular corner of the web.

New shoes

I last redesigned my blog in 2006. Three years ago! I've looked at redesigning it for about two years now, so what got in the way?

Well, we've been buzzing around working on all sorts of other projects at Mark Boulton Design, and that's kept me busy. It's been quite a journey and, rather than just writing a plain 'ol blog post about this, I thought it would be fun if I shared it all with you in this interview with my friend Carolyn Wood.

CW: Let's talk about the status of 5 Simple Steps. I had an early, advisory role in the birth of your book, before the writing really got going. The next thing I knew, you'd become a publishing house. Share the juicy details with us! It's all very easy, right? ;)

MB: Yes. Piece of cake. Actually, I remember from those very early conversations we had, you mentioned the difficulties I could face when writing the book. I think I went through each one of them in turn: blind panic, sleepless nights, writer's block, more panic, too much to do... the list goes on. It was back in 2006, and I really, really needed some help just getting off the ground with it. I had five popular blog posts but wanted to make them into something more substantial. I had left the BBC, started my own business, Emma and I had our daughter, and we were in the midst of having builders add an extension on our house.

All of that conspired against me a little. The dream of writing a book became somewhat of a foggy, festering cloud in the back of my mind. That's exactly why I needed someone to help me take those first steps. It was like someone learning to ride a bike. They're never perfect at first. They fall over, graze their knees. Do it again. Before you know it, they're off leaving you standing and waving. But without those first encouraging words and helping hand from you, they'd still be walking about instead of riding. And that's just what happened.

CW: So, I waved you on and you dug in and really started writing.

MB: Yes, suddenly the project had momentum. I was inspired to write, but I was increasingly interested in seeing if this one book could become more, and the Five Simple Steps imprint was born. We (Mark Boulton Design) hired a designer with a strong editorial and publishing background who spent three months designing, typesetting, and producing the final book. As I wrote, we also started to do pretty much everything else in-house from editing and proofreading to distribution (both electronic and traditional fulfilment). We were driven to get it done and out there.

We have fairly big plans for Five Simple Steps. During production of Designing for the Web and talking with other publishers, we discovered not only a gap in the market for books that provide clear, practical design guidance, but also an opportunity to publish and market books differently. Book distribution in the UK is basically controlled by two huge distributors. To be on their catalogue, you must have multiple titles, operate a minimum stock level in their warehouses, accept that they won't pay you for 60 days, and so forth. This makes it quite impossible to be a small publisher and have your books sold in Borders or Waterstones in the UK. We learned that distributors only pay publishers about half the cover price of the book—sometimes less! That means margins—once you factor in production, shipping, and storage costs—are massively squeezed before you've even started. The industry's system is broken for the small, independent publisher. So, we took things into our own hands. We're learning as we go. Publishing itself is a creative process for us, too. We're professional, but we're indie publishers, too. We plan to be very flexible, perhaps even having a 'crewing' model for each book, bringing in a little help from different people outside of the team for each book, depending on its subject. We'll see—we haven't planned it all out yet. We've primarily used Twitter to announce offers, launch dates, etc. This was so successful that on the first day of the PDF launch, we sold over 1000 in 48 hours—but the server crashed, causing PayPal problems that took days to sort out! The printed book is only available as a limited edition (for now). We won't print endless supplies of these, as we just can't justify sitting on large amounts of stock, especially if we add more titles. Print on demand might be an option at some point. The process is exciting, complicated, scary, and rewarding, all at the same time. I heartily recommend that if you have an idea for a book, and have the people around to help you realise it—as well as an eager audience—there is little reason to go to a 'normal' publisher. CW: Our lives intersected again at the beginning of the open source/open design Drupal project, when I worked on the style guides. I admit I felt fortunate to be off in the corner in a limited role. You've been in the thick of things. What is the status of that project? Tell us: Is designing in the open more or less painful than sticking a fork in your eye? MB: Designing in the open is more painful than sticking a fork in your eye, but it's also more productive and rewarding! Mark Boulton Design, Leisa Reichelt, and you were initially asked to work on aspects of the redesign of, and Phase One of that project was completed last December. August to December were probably the most challenging months of my career. After our usual period of discovery, we launched headlong into a twelve-week iterative schedule with prototype releases, user testing, and evaluation, and a new design released every week. It was a killer schedule, but with that pace came great engagement from the Drupal community. During Phase One we'd done broad brushstrokes in terms of design, information architecture, branding, etc. CW: What happens in Phase Two? I wish you the best with that! There's still much to be done: the copywriting and also more UX work—specifically documentation and many social aspects of the site. We simply ran out of time on most of this. However, as with Phase One, the majority of the work will be completed by the community, in the community. The biggest challenge has been to become comfortable with the fact that what we produce will be scrutinised, deconstructed, modified, and remodelled, all for the greater good. I'm still getting used to it! CW:What prompted the complete redesign of your blog and your decisions along the way? MB: Three years is a bloody long time in web design and in the personal growth of a designer. While I wanted the blog to be a reflection of the current quality of my work, I was even happier to break free from what people usually expect of me and create something that more accurately represents who I am as a designer.
The catalyst came from a 'company away day' in Fonmon Castle—just down the coast from our studio in South Wales—during a daylong workshop in the castle's library. Adorning the walls were rows and rows of musty, seventeenth-century books. I resisted temptation for an hour or two, but  finally caved and started snapping shots of the most wonderful, letterpress-printed books. After that day, the blog design quickly took shape. I started the process with a simple but challenging constraint: What can I do with Georgia? Just Georgia. With all the talk of font-embedding, I could have used one of the middleware products cropping up, such as Fontdeck or Typekit, along with some great custom typefaces. But, I wanted to really get to know Georgia—as well as I know Helvetica. So far, Georgia hasn't disappointed. It's a wonderful typeface. Generalising here, serif typefaces have more character than sans serif typefaces. Yet, Georgia manages to mold itself really well to the content.,, this site all use Georgia, but appear very different due to the varying weights and styles. I also wanted a different grid, a greater focus on writing, and a simpler layout designed for reading. Perhaps the biggest change isn't the design but the move from ExpressionEngine to WordPress. I've used EE since 2005, continue to use it almost weekly, and still recommend it to clients for certain projects. I'm an advocate for using the best tool for the job. Whilst EE is a very competent blogging engine, lately I've felt it (and Drupal, as well) much more suited to content-managed websites for clients. If you have a blog, Wordpress is pretty hard to beat; it was the best tool for this job. That said, the redevelopment of this site hasn't been without its difficulties. Having used EE for so many years, I was used to its template-based theming approach, designed to neatly fit with a standards-based designer's mental models. HTML templates can be simply slotted into place. PHP is extracted and replaced with a simple tagging language to hook in the site's dynamic data.  Wordpress and Drupal could do with having a look at the strength of this because, to be honest, I feel a lot of designers will take one glance at the PHP in their theming systems and run a mile. EE still has this in the bag, in my opinion. CW: Please give us a peek at the next book and other MBD projects. MB: It's a busy time for us; here's a taste:
  • We're working with some exciting clients. We're designing an app based on Adobe Air for a leading film studio. I can't talk about some work, but we're heads-down on projects like arts council-funded web apps and a major redesign for an ethics organisation.
  • The Drupal 7 UX project is drawing to a close, and it's been a fascinating seven months' work. Drupal has great potential and I'm excited to help shape its future from a UX perspective and dedicated to continuing my involvement with the community.
  • We're publishing two more titles this year. Designing Grid Systems will be available this autumn, and Designing the Invisible later this year, possibly early next. I've wanted to write the first one since 2006. I have tons of material to challenge current thinking in the web design community about subjects like grid systems, their appropriate use, and the advisability of using 16-column grids for website layouts.
  • We're ramping up to run probably three workshops in three cities in the UK in November and December. They'll be based on the book: practical design advice that people can immediately apply to their work.
  • I'll be doing more speaking too, which I love. I'll speak at the wonderful Web Directions South in Sydney, Australia in October on font embedding and CSS. In November, I'm speaking in Belfast at the Build Conference.
CW: Your wife Emma is now part of MBD. Is it difficult to have a normal home life? When you both drag yourselves in the door, who makes dinner? MB: That last question is probably the biggest issue of each day! Seriously though, Emma and I have received great advice on successfully working together. It's been such a pleasure—she's a smart cookie. She keeps my feet on the ground when I go off on one of my dreamy 'let's do this!' ideas. With seven years in a strategic role at the BBC, she has a real vision for where our studio should be heading. But, let's face it, Emma has always been part of the company; it's just that now she sits in the same room as me.

Designing for the Web: Summer Sale!

Just a quick post to say that we're having a sale! Designing for the Web will be available for the rest of August for up to 50% off (whilst stocks last).

Designing for the Web: Paperback available 14th April

Just a quick note. The paperback of my book, Designing for the Web, is available on the 14th April at 12pm GMT. That’s tomorrow. I have 1500 copies all ready to go, and these will be available on a first come, first serve basis.

If I sell out, I may just get another print run done. We’ll see.

Twitter didn’t eat my blogging, 2007 did

Like a few other people, I’ve found myself into 2008 already and not posted my ‘end of year’ post. I don’t think it’s laziness, although it could be. I’m pretty sure I’ve not run out of things to say. Is it a lack of time? Probably. I certainly don’t have as much time as I did twelve months ago. But, that’s like everyone right? Why has blogging slowed right down then? Sorry, let me rephrase that, why has web design blogging slowed right down? Specifically, why has mine slowed to a crawl?

Molly thinks Twitter did it. Well, I’m the only person who doesn’t use Twitter. I used Pownce for a while, but then that bored me. I dip in and out of Facebook, but I’m tired of all the pokes, headbutts and slamdunks. So, who’s the culprit?

A full plate

Personally, I’ve got an increasing amount on my plate. The business is going extremely well. We’re expanding, new clients coming on board and as such, there’s a lot more to do - from admin and project management to actually get my teeth stuck into designing.

Then there’s a big personal project Emma and I have been working on for the past few months. We’re building an extension on our house. Not personally you understand, we have a builder, but the time it takes to liase with our architect (which isn’t so bad as it happens to be my Dad) through to making sure the building is on track, is something I personally didn’t bargain for. We’ve got another 2.5 months to go on this project and it will extend out house by about 40% more living space, which will be great and it brings us onto our next project.

Mini me

Emma and I are having a baby in April (which is why I won’t be attending SXSW this year). I’ve thought long and hard about whether I should write about it here - as you never know what could happen - but we’ve told our friends, colleagues and family a while ago, so I thought I’d mention it. Mother and bump are doing extremely well at the moment, and we’re both very excited about the next year.

So, it really is like Grand Designs at the moment (a property development TV show in the UK where the partner always seems to be pregnant). We’ve got a deadline looming and a house to build. Which brings me onto the housebuilding process itself.

Building a house is EXACTLY like building a website

I’ve found it fascinating. My Dad is an Architect, so I’ve grown up with a healthy interest in buildings, architecture and the like. My brother and I spent many a Saturday morning holding a three meter high ruler whilst my Dad took levels on a wreck of a building site. Therefore, the I don’t find the process particularly problematic. It does help having my Architect at the end of a phone though.

What amazes me about the building process, particularly residential development, is the level of difference between what is on a plan compared to what the builder produces. Nowadays, plans are produced in CAD packages and plotted on high resolution plotters. They’re accurate, and to scale, to the nearest millimeter. Then the builder gets hold of it and it is somewhat interpreted rather than followed. I’m amazed at how much is just kind of worked out as they go along. Luckily, we have a great builder. He’s approachable and happy to talk over any small question or problem I have. We should count ourselves lucky.

The parallels between building a house and building a website continue to make me smile. No-matter how much we like to plan, measure, specify, you will always end up with some degree of bodging on a project. I see this all the time on site at the house. But, as my Dad said, there’s nothing wrong with bodging if it solves the problem. No, it might not be as specified. It might not be the ideal way to do it. But, you know, sometimes you just need to get the job done and move on.

Writing a book is bloody time-consuming

I’ve been writing this book for over a year now. It’s over a year late and I’m not too happy about it. yes, I know I should try and finish it before the baby’s due, or the extension is finished, and I’m really, really trying. I have a fantastic editor, Carolyn Wood, but I do feel sorry for her. She doing a fantastic job of both editing my cobbled together thoughts and scribbles, and kicking me in the arse. We’re getting there with it, but it’s slow going and that’s entirely down to me.

There’s talk of the book being produced in print—initially a run of about a 1000. It will be full colour, hardback and distributed from the UK. As such, it won’t be cheap I’m afraid, but I’m hoping it will be worth the price. More details on that on the run up to the launch.

I’ve been writing for a couple of other publications recently as well: A List Apart, .net magazine and 24ways. I’m always thrilled to be asked, but it doesn’t half take a long time to come up with something that readers may find interesting.

On to 2008

This has turned out to be a somewhat forward-looking post. 2008 has already got off to a brisk pace. Mark Boulton Design continues to pick up exciting contracts for varied clients. I still love every day and don’t regret the decision to go freelance over eighteen months ago. I did a bit of speaking last year, but as we’re due a new arrival in April, I won’t be doing any this year that require any amount of time away from home. It’s a shame, as I do enjoy it, but next year I’ll have plenty to talk about I’m sure.

This year, I’m finishing the book. Oh yes I am.

I’m not going snowboarding, which is a killer.

I’m going to enroll in a boxing gym. Probably.

That’s about it really. As you can see, Twitter didn’t eat my blogging last year, I did a pretty good job of that myself. Maybe this year I’ll sort that out. Or maybe I won’t. We’ll see.

And the winner is…

Me. As I registered the name ‘Mark Boulton Design’ over six months ago, technically, I am the winner. Hurray!

However, to show I’m not a tight Northern bugger, I’ve decided to award the prize to the runner up (he says, stuffing his face with humble-pie)

Congratulations Chris Gibbons, whose suggestion—point12—was top of the list for most of the week. There’s one iPod shuffle in the colour of your choosing on its way to you.

Once again, thanks for all the suggestions. If anything, it made me realise my original choice wasn’t so bad after all.

A naming competition

Anyone who has ever been in a band will know how difficult naming the band can be. It is no different for a new business.

I find naming incredibly difficult. It really isn’t one of my strong points.

Unfortunately though, next Thursday, I have to register myself as a new company name and I’m completely devoid of inspiration. So, I thought I’d hold a competition to find me a good name. Lazy? yes, I suppose. Thing is, I’m totally stacked with finishing off the book and a mountain of client work. Sitting here with a blank piece of paper (after thinking of names) for about an hour now has not been a productive use of my time.

For the past six months, I’ve been trading as Mark Boulton Design. Well, soon, there are going to be more of us and I’m a little nervous about my name being so associated with the business name. It could be a good thing, but it could also be a very bad thing.

What’s in it for us Mark?

An iPod Shuffle for the winner. Can’t say fairer than that.

Some boring rules and criteria

I’m a graphic designer and run a UI and graphic design business. If you’ve been reading my blog, you will know what kind of designer I am and what I’m all about. So, a name like ‘Purple Dog’ may not be appropriate. I’m after something simple and memorable that might, or might not, be related to the service I offer.

  • Sensible names only please.
  • A url. or .com would be good.
  • Not an existing company

Pop the names in the comments

Post your suggestions here (along with url suggestions if you fancy).

The competition will close on the 15th February (9am UK time) and a winner will be announced shortly after that.

In the meantime, I’ll be going back to my blank sheet of paper

All is good on the DV

This post is more for me than you. If I’m seeing it, then your seeing it and that means the move to the new server and DNS pain was, hopefully rather painless. I’ll delete this post once all the dns stuff has resolved it self.

Off the Grid

Well, after only a month or so on being on Media Temple’s new Grid server, I’m off. Why? Well, in addition to continuing connectivity issues MT are charging for GPU overage. Since they can’t give me more details as to why I’m going over to the tune of about £30 every month (so I can attempt to reduce it right?), then I’ve got myself one of their nice new DV dedicated machines (with a little help and guidance from Andy and Steve).

As a result, this site (and the fivesimplesteps site) and my email will be going through the usual DNS pain over the next couple of days. Fingers crossed it all sorts itself out. See you on the other side.

Moving over to a new Grid Server

Well, it had to happen sooner or later. In the past two years, I’ve been reasonable happy with Dreamhost, but now, as a business, I need a hosting package which is a little more robust and scalable. I also want good support. This is where Dreamhost is, to be honest, totally crap for a UK business. Therefore, yesterday, I opted to move all my domains over to the new Grid Server package at Media Temple.

Why do that?

Well, like I said, the support at Dreamhost is pretty sub-standard for business hosting in the UK. If there’s a big problem, I’d like to pick up the phone and speak to someone about it. Also, scalability. After being Dugg a couple of times this past few months, I’ve really noticed a few problems with speed at DH (not to mention two days of down time as a result of my domain having too much throttling).

Things may be a little screwy for a while

I’m now undertaking the grim task of moving everything: email, databases, files etc. etc. before I change the DNS. I’m doing it one domain at a time, but will be the first. So, things may be a little weird for a while until I get things up and running, but there again, they might be just fine if all goes to plan.

Back to Green (for now)

Following my month of supporting breast cancer, this site is now green again. If you’re reading this in an RSS reader, then you probably don’t give two hoots. However, if you’re reading this in a browser, then kindly dump your cache and refresh otherwise things may look a little odd.

It’s been nice being pink for the month I must admit. So much so that I’m considering a slight colour change more often. I may even put you, my readers, in charge via a little stylesheet switcher (user preferences? heaven forbid). Although I’ll probably end up tossing this thought on my steaming pile of unfinished, festering ‘things to do’. Like I haven’t got enough to do with a new business, a book to finish, a web-app to finish…

Pink for October

I’m a little late for this one, but I’ve now managed to go Pink for October in support of National Breast Cancer Awareness month. At the moment, NBCM is a US based thing, although a pink month was done by Cancer Research UK a while ago. Anyway, the point is, breast cancer awareness shouldn’t be limited by country.

If you don’t know much about breast cancer, please take this opportunity to go and read a little about it, and consider a small donation.

The normal green service will be resumed in November. Although, I am quite liking the pink. Maybe a touch of brown as well…

I was Dugg, er, Digged, or something

Apologies for the down-time over the past 24 hours. I was Dugg (or is it Digged?), and felt the Effect.

Dreamhost, who took over 24 hours to even acknowledge my support request (seriously bad form fellas), have removed the throttling from my domain which resulted in the 503 errors. Everything is, fingers crossed, working OK now. Thanks for your patience.

Sorting my workflow out, part two

Printed estimateLast week, I mentioned I was slowly drowning in a thickening quagmire of paperwork—estimates, invoices, contracts and things. I took it upon myself to design and build a system which would help sort me out, thanks to a bit of inspiration from Stan and the boys at 37signals. A week later and this little application is working rather well, even if I do say so myself. 

Filling in the gaps

When I posted last week, I’d got together the basic requirements and workflow. Just to recap:



  • List all current and closed jobs
  • Each job must have a job number, client, associated estimates and invoices
  • Create, edit and store all estimates. Give them a status of Pending, Approved and Rejected.
  • Ability to print estimates and invoices using a well designed print stylesheet
  • Saving off PDF?s using the same print stylesheet
  • Create, edit and store all invoices. Give them a status of Paid, Part-paid and Unpaid

By Tuesday I’d pretty much got together the bare-bones. Then with a little help from Expression Engine I applied some edit forms, so now I can add and edit Estimates, Invoices and Jobs, all from within the browser rather than having to go to the Expression Engine control panel. All good.

Here’s a few grabs of where I’m up to at the moment:



  • Dashboard
  • Jobs
  • All invoices
  • New invoice
  • Invoice detail
  • Edit estimate
  • Estimate detail
  • Printed estimate

Designing with Print Styles

The detail page for displaying the Estimates and Invoices proved to be a little tricky. First off, I wanted to emulate my design for paper Invoices and Estimates, secondly, as I wanted to save these invoices as a PDF for emailing to clients and also printing, the print stylesheets for this template had to essentially create the layout for the PDF.

In April, I wrote about applying print styles to a web page and touched on using CSS to design for print. Then, it was a fairly simple prospect; designing a newspaper layout to run on A4. One column. No fuss. My Estimate/Invoice layout is a different kettle of fish altogether.

For starters, there’s a four column grid. Secondly, there’s a extensive use of white space and Rules of varying thickness. Also, there’s a subtle, but important typographic hiearchy going on. I set myself the challenge of recreating this design, which is essentially an Indesign layout for A4, using the existing markup for the template and CSS. This is the first time I’ve done this in anger. Using CSS to layout a design for print.

Bodging with absolute positioning

The web-based template display of the detail Estimate/Invoice page uses floats to produce the layout. This proved to be pretty tricky for reproducing this design for print. The solution took a little of getting my head around.

What I did was to start thinking about the elements of content as square boxes in Indesign. Start thinking about print stylesheets as print design. I had to forget about certain browser quirks of CSS (yes, I was designing this just for me, on a browser of my own choice.).

I used position: absolute; on most elements, giving them the width, height and position as I would a box in Indesign. Using margins and padding defined in mm, coupled with this allowed me to, with a lot of trial and error, position the elements and pretty much exactly reproduce my letterhead and Estimate design.

Granted, it’s a bit of a bodge, but it works and fits my needs.

Room for development

It was incredibly time-consuming but the implications of designing a system this way, for me, are pretty fantastic. I now have an database with all my jobs in there. It produces a web based system for to keep track of stuff, but more importantly, it produces Estimates and Invoices which mirror the print design I spent a lot of time initially producing. You can probably sense I’m quite excited about this. Designing for print using CSS is something that has possible for ages, but it’s something that is just not given enough attention.

I’d like to see this kind of technique applied to corporate intranets for example. When printing an a page, there’s no reason why the corporate design guidelines couldn’t be applied to the content to the same level of sophistication as a DTP package.

More for the App

There’s a bit more to do with this little application. It’d be great to have an emailing facility in there to email the invoices/estimates directly to the client. Currently, I have to save off the PDF and manually attach it to an email. To be able to track which client had been emailed and what was said would be a good thing I think. Also, the print styles need to be applied to all the other templates. Jason mentioned in the comments on my last post that he used his system to work out tax. It might be good if this system could also do this for.

I could go on. But I won’t. I’ve got enough to do.

A bit of a realign

Maybe it’s something about spring or maybe it’s the 48 hours I spent on a plane recently, but I thought it was about time I spruced this site up. Actually, the main reason goes back to @media last year when Jeremy included in his presentation a javascript image gallery. It kind of spiralled, totally out of control, from there really.

There’s quite a few changes. I’ve gone for a wider, more flexible four column grid, which I use in more configurations than the previous site. Typography wise, I’ve ditched Helvetica in favour of a serif, in this case Georgia. There’s also a logotype. I hope you agree, more of an evolution from the previous design.

One thing I am excited about in this new design is actually the new piece in my portfolio: The International Baccalaureate Organization’s Online Curriculum Centre and Workshop Resource Centre. Bit of a mouthful, but this was a fantastic project to work on. From April to January last year, I worked with the IBO to produce web standards based templates for these great applications.

Anyway, after a couple of weeks being unable to post due to replication issues, it’s nice to be back!

What happened to the design?

Like Jon, I’m a little late with this one.

Today is CSS Naked Day, a very cool idea by Dustin Diaz, whereby you remove your CSS to show the lovely semantic XHTML markup beneath.

Parting company from 9rules

{title}Yesterday, 9rules and I parted company. It was a good relationship while it lasted, but an increased workload and the subsequent tipping of scales has meant that I can't give back to the Network what I once could. 9rules deserves more than I could give it, so I'm bowing out.

Thanks to Paul and all the 9rules members for a creating a cracking community.

A couple of minor changes

I've made a couple of changes 'round these parts'. New 'of interest' links (which means you'll need to re-subscribe), a photo gallery and a new Live Search. (ly) interesting

First off, I've now moved my 'Of Interest' links over to rather than them being handled in EE. This is nothing against Yoshi's superb Linklist Module. I was finding though, over time, that it was a bit of a headache to update all the archive sections. So, everything in now in The previous 'Of Interest' feed doesn't work (in fact, did it ever work?) but you can get all the latest by subscribing to my feed.

What took me so long to come round to Not sure really. Cocoalicious had a lot to do with it, as did having a machine in work that I could install it on (which happened this week). The EE Magpie plugin, which is used to pull in the RSS data, does have a bit of a clitch in it though which means that sometimes you may only see 4 instead of 7 links on the page. I'm doing my best nagging to try and get it fixed.

Photo gallery

Why am I not using Flickr like everyone else? Well, EE ships with a bloody good gallery module and since I've already paid for that I may as well use it right?

There's not much up there at the moment and it will mostly stay as personal stuff for friends and family so don't be expecting any masterpieces on the photography front — you won't find them. Have a look if you fancy though.

Live search

This one's been knocking around for about a year now, but I never got round to finishing it off.

Pretty straight forward stuff. See the little search icon in the top left? Click it, then search. That's it.

A few points though before I get slammed for a shoddy job. 1. It's not finished yet. And 2. I'm not sure I even like it yet, so it may go.

Please dump your cache and refresh. I've made a bunch of changes that will look pig ugly if you don't.

2005 has been quite a year

What a year. What. A. Year.

From launching this site, being ill and getting to meet so many new friends - it's been eventful that's for sure.

I don't really know where to start, so much stuff has happened but I'll try and be brief.

2005: Early on

The year started off with the launch of version5 of this website, the primary driver being the new version of Expression Engine and my new found enthusiasm for this publishing software.

Within a month or so it was great to see this site on Stylegala and CSS Vault and I was invited to part of the 9rules Network. I wrote a couple of articles in the first few months, one of them for Design In Flight and from there things pretty much snowballed.

2005: The Middle

During early summer, Emma and I celebrated our first wedding anniversary with a trip to Rome which was fantastic - we even saw the Pope! On our return I spent a couple of days in London at the @media conference. It was great to finally meet some of the people whose blogs I've been reading for a couple of years.

After coming back from @media things went downhill. I lost over a stone in weight and was really quite ill. After a few of hours in hospital, I was diagnosed with an Inflammatory Bowel Disease called Ulcerative Colitis. I'll have it for the rest of my life and have to take daily medication to try and keep it in check. It could have been worse though and since August I've been pretty well.

It was during this time I wrote two series of articles which have proved to be the most popular on this site. Five Simple Steps to better typography and Five Simple Steps to designing grid systems.

2005: The last four months

Things have been really hectic in the latter part of 2005. I've had my largest freelance project coming to a close, and what with juggling that, a full time job and trying to be a husband, i've had my work cut out.

I made it down to the Carson Workshop with Andy and Molly, which was superb (write-up is here). Following that I went on holiday, nearly learnt to dive and sprained my wrist.

Some lists

Here's some lists for you:

Notable mentions

These range from the people who continue to inspire me to those who continually bring a smile to my face. Without them, 2005 would have been slightly less inspiring and not as funny.

  • Khoi Vinh: Daily inspiration from Khoi. Smart writer, even smarter designer.
  • All of the Britpack, but a special mention to Andy, Jon, Colly and John.
  • Molly: I've only met Molly once, but in that short time you can't believe how inspiring she was.
  • Jason Santa Maria: For being a designer first, and then someone called Stan...
  • Kitta: Nothing quite like an Aussie wit.
  • Andrew: For continually entertaining me.

Stuff that I couldn't get by without in 2005

  • Tea
  • My new car
  • My Wife and family
  • Prednisolone and Colazide

On a lighter note

Highlights from in 2005

2006 promises to be a biggy

2006 promises to be quite a year already.

Em and I are off to Australia for three weeks in April for a friends wedding amongst other things. I'll be speaking at SXSWi '06 with Jason, Khoi and Toni and also for those lovely Australians at Port 80. Add to that a couple of big personal projects in the first half of the year, the day job and continuing to be the loving husband I am :).

Oh, and I'm doing my best to stay fit and healthy as well.

A big thank you to everyone who reads, comments and contributes to this site. I really wouldn't be doing it if it wasn't for you. Soppy eh? Have a merry Christmas and a happy New Year.

Right, is that the kettle I can smell? I'm off, tea beckons. See you in 2006!

Carson Workshops - CSS for Designers

Here I am, sat on a train, stuffed full of Sushi awaiting the train to finally pull away so I can start my long trip home (about four hours depending on which signal's decide to fail). After buying my 12inch iBook in July, this is the first time I've used it in a truly mobile capacity and so far it's going well. Anyway, I'm not going to go about sushi, trains or laptops in this post. Today, I had the great pleasure of attending the 'CSS for Designers' workshop hosted by Carson Workshops in London. What a day it was.

I've sat here for a good ten minutes now thinking where to start on describing today, so I'll just start at the beginning.

Carson workshops

Carson Workshops is a UK based company doing really great things. Ryan and Gillian's combined talents are managing to get the most talented and inspirational speakers from around the world over to the UK, as well as events in the States, to give day long workshops to the industry.

Like a lot of web professionals (do I fall within the bracket Andy? Molly? I'd like to think so :)), I try to attend as many conferences as I can in the web industry, such as @media, SXSW, unfortunately I couldn't make it to dConstruct, but I was there in spirit. These conferences are generally very good. The wide variety of speakers give informed presentations on a plethora of material. However, these panels and presentations rarely last more than an hour, and from my experience, there's only so much you can gain from them. Workshops, such as the one attended today, are a very different beast all together.

The Workshop

Today's workshop - CSS for Designers - had Molly Holzschlag and and our very own Andy Clarke at the helm.

I've met Andy before in person, very briefly, at @media in London in June and found his presentation very inspirational from a designer's perspective. Andy talks the same language as me. Japanese. No, seriously, Andy's design talents are but the tip of a Web Standards trifle. I mean, Iceburg. The guy just really, really knows his stuff. Not only all the creative design stuff, but also how to implement it using web standards. The most important thing, however, is Andy can explain this stuff in a language designers can understand. No mean feat. The same can be said about his co-presenter, Molly.

It was great to finally meet Molly. If there's one person in the web industry who embodies the passion that first got me interested in this medium, then that's Molly. The thing that got me about Molly, as she was presenting throughout the day, was the incredible depth of her knowledge. Like Andy, she really, really knows her stuff but in a slightly different way, from a different background. The two of them working together throughout a whole day worked very well indeed. A great double act. Not quite Morecombe and Wise though, more like Cannon and Ball :)

Ok, that's enough back-slapping (the troll's will be queueing up otherwise). What I'm getting at is, if you get the change to go to a workshop like this or listen to either of these guys speak, then do it.

As I was saying earlier, a workshop format is very different from a conference. In a conference format you only get a snapshot of the presenter's work, on a subject they choose, in a format and structure which may not be totally up to them. How much can you really gain from this format in practical terms? Yes, they're great for inspiration, for steering you in the right direction, but generally they lack specific detail and the opportunity to ask very specific questions in the context of a project you may be working on. The workshop format changes all of this.

This was a full day workshop, from 9am until 6pm with reasonable breaks for lunch and coffee. So, it was a long day to sit in front of a projector and listen to two people talk about the same subject. Or so you may think. In reality, it wasn't like this at all. With some nicely designed slides, a user-friendly agenda (meaning it wasn't all design in the morning and theory in the afternoon) and regular swapping over by Molly and Andy it made the day go really quickly.

When I first arrived, Molly and Andy both expressed a concern to me that I'd know a lot of stuff that they'd go through throughout the day. This was not the case at all. Regardless of your experience level, you should consider attending one of this workshops. I learnt tons of stuff that I'd either skimmed over, couldn't be bothered learning fully, or got by by other means. One of these examples was Molly's examples of Relative and Absolute positioning. I'd sort of understood them for a while, but never used them because I'd always used floats. During the presentation a little light bulb went on in my head. 'Hello there', I said, 'Now I get it. This looks really cool!'. In fact, that happened quite a few times throughout the day.

The personal highlight for me was when Andy was presenting a section and grid design and a slide of my site appeared. Well, if he hadn't of forwarned me, you could've knocked me down with a feather. He even made me stand up, which was nice. I like to think I took this five minutes of fame in my stride to a rather bemused audience who, not surprisingly, had never heard of me.

A fun day had by all

If there's one thing to be said about today's workshop is that it was enlightening, both in terms of day's presentations, but also in the pub afterwards (which is where most of the really useful stuff is normall discussed). Thank you to Ryan and Gillian for hosting a fantastic day. It was great to meet some new people, finally meet Molly and have more than five minutes to talk with Andy. Interesting to note how many people from the BBC were there also. Are we to expect big CSS things from the BBC designers in the future? Well, just maybe.

Well, that's killed an hour. Right I'm off to the buffet car. Stella anyone?

Measuremap, Mint & Google Analytics

All of sudden I find myself with three options for measuring the stats on this site - MeasureMap (although this is still alpha software, so it's not strictly a fair comparison to the others), Mint and most recently Google Analytics.

I've mentioned in the past I have a problem using the stats package offered by Dreamhost with my CMS, Expression Engine. This, I think, is due to my .htaccess rewrites to get rid of EE's default '/index.php/' in the URL.


About four months ago now, I installed Mint (after using Shortstat for some time) and have been, and continue to be, very happy with it. What is missing (purposely I think) from Mint's offering was more detailed stat information. Mint is excellent at what it does—providing a snapshot of your stats—but I'd like to have the option at least of more complicated statistics if I want them.


At first I thought MeasureMap might be the product to do this. MeasureMap is still very much in Beta and it's got some good functionality on the way which will help flesh it out. First impressions are good. A simple UI, offering functionality similar to Mint, but you can delve deeper for more detail. Hopefully MeasureMap will introduce some unique functionality which will entice people to part with their cash. Talking of which, presumably MeasureMap will offer ongoing price plans, similar to 37signals and their range of products rather than Mint's one off, per url, price of $30. This brings me on to Google and their free application, Urchin, er I mean, Analytics.


Google seem to have bought Urchin outright (as you can see from the url redirect). Google Analytics is a bit of a monster stats package, providing all the detail you might want with some nice pie-charts, tables and graphs to boot. If you use Adsense, Analytics also hooks in with this to provide you with ROI statistics and so forth. I haven't really had much time to give Analytics a good looking at because the learning curve seems so steep. If this isn't a complicated product, it looks like one, which is where MeasureMap (even in it's Beta state) and Mint have the edge. Google have the edge because this doesn't cost anything to use, simply chuck some Javascript into your templates and you're away.

That is also a problem though. Javascript is turned off by some people and this type of tracking does nothing to track your RSS feeds. Expression Engine does a fine job of tracking my RSS feeds but only in terms of number of clicks, page impressions, but that's it. So, some kind of RSS tracking functionality would be good in any of these packages.

Like I said, I've been using Mint for months now and that probably won't change. I am giving MeasureMap and Google Analytics a go on this site as well and we'll see how it goes. I'm not comparing them, as I feel they are three different levels of stats application ranging from the simple snapshot (Mint) to the more detailed (Analytics) and something in-between (MeasureMap), but we'll see how it goes.

Feeds now fixed

{title}It seems my RSS feeds for my Of Interest links have been bust since I moved to using Yoshi's excellent Linkslist module. Not Yoshi's fault, just me being a bit careless.

Well, they're fixed now. Here's some direct links to them if you feel that way inclined:

  • Of interest: RSS 1.0, 2.0 and Atom. Updated almost daily with stuff I think's interesting.
  • Journal: RSS 1.0, 2.0 and Atom. Updated when I have something to say.

Refreshing Minty goodness

{title}No, this isn't a shameless plug and No, I'm not getting any 'favours' from Shaun to write about Mint. Here's the thing.

The standard stats package that ships as part of Dreamhost's offering is good enugh, although way too complicated for keeping track of over the days. Now, you have to understand I'm not a referrals nut. Expression Engine has a built in Referrals module which is handy in keeping track of things, but it only gives you limited information. Mint on the other hand is looking very good for my needs.

I bought Mint a couple of hours ago and here's what I think so far...

One of things that bothers me about Expression Engine and my current host, Dreamhost, is that between the two of them I've never managed to get my stats package from working correctly. This is due to me using Mod-rewrite in my htaccess file to get rid of the /index.php/ that Expression Engine has as standard in it's url structure.

How does it look?

Nice. No surprise there really, Shaun is a spot on designer. Only one minor gripe, I had to enlarge the default font size but I think that may be due to my rather high resolution I'm running at work. So, shades of green and a masterclass in legible table design.

How does it work?

Mint tracks a whole bunch of things - Referrals, User Agents, Pages etc. and does it all in one Browser window with some AJAX goodness for refreshing. It was easy to configure, I think I had it downloaded and up and running within 2 minutes. Basically you download it, upload it to your server and then add a line of code to the pages you want to track. Those familiar with Shaun's previous application, Shortstat, will be right at home.

Worth the cash?

I think so, but my stats package has never worked correctly, so a one off payment of $30 is well worth it. Plus, Shaun has built an API, Pepper, which hopefully over the coming months will be used to enhance the offering of Mint.


You can probably gather that my initial thoughts are good. Mint has been hyped a lot over the past few months (maybe too much), but so far, for me anyway, it's exceeding expectation.

More about tagging

Following some interesting discussion about tags I've decided to experiment a little on this site.

Like most designers, I like to keep a list of bookmarks of useful sites and resources. Over the past six months instead of saving these bookmarks in the browser, I've been posting them on this site in my 'Of Interest' section. One thing did bother me though.

Adding content to a bottomless pit, without any meta-tagging, and more importantly any UI to access that meta data, caused problems in terms of trying to find stuff.

Previously this list was just another blog in Expression Engine with a set of custom fields. Now, I could of course used categories to tag these links, which would have worked fine. However, I happened upon the Links List module for Expression Engine which is designed for exactly this. Yoshi has done a sterling job in creating a very flexible EE module with stacks of functionality.

So, what have I done?

Well, I've created a bunch of Links Lists (one for each month) and then migrated the content across from the old blog-list. At first I thought multiple lists might be a bit of a nightmare, but Yoshi's module provides a simple interface to move links from one list to another. Then, each link is given a bunch of keywords which can also be viewed as a list. Oh, and there is a 'tag-cloud', but I don't think I like it.

Why go to all this bother then?

As I said I wanted to organise the 'bookmarks' into more of a navigable structure but I also want to provide access to them from related journal posts. So, if a journal post is given keywords then these can be cross-referenced to the 'Of Interest' links and provide a list of contextual related links for the user (and also for me!).Well, that's the aim anyway.

So, it's a bit of an experiment and I may change it back at some point. Oh, and the RSS 'Of Interest' feeds are bust - I'm currently working to fix them.

Another point is I'm continually amazed by the power of Expression Engine and when combined with well written modules, such as LinksList, it really does blow me away. Right, better get on with some real work now (I was only supposed to spend an hour on this!).

Now with ‘zoom’ layout

It's amazing how productive an afternoon watching a gig can be.

Following Joe Clark's excellent presentation at @media and his equally excellent article at A List Apart, I thought it's about time I did something to address the accessibility options on this site.

So, if you click on 'Accessibility options' on the top left you'll go to a page where you can set a cookie for the new layout.

Just to summarise Joe's points from his presentation in creating a 'zoom' layout (please correct me if this is wrong):

  • Make multicolumn into one column
  • Make small fonts into larger fonts
  • Reorder navigation and content
  • Minimise navigation at the top of the page

I will of course be addressing the point Joe raised in his presentation that low-vision people generally prefer a high contrast (light text on a dark background), which is the version I've added here, but people with certain learning difficulties prefer dark type on a pale background. I will be adding a version of this soon.

Doug Bowman of Stopdesign recently added these two different styles to his site. The zoom layout is available for use and was used as the basis for my high contrast stylesheet.

Also, thanks to Roger Johansson for prompting me to get this done and also providing the code for the cookie.

Like I said, this is very much a 'beta' layout at the moment. There are problems with it and there are problems with the content ordering and stuff, but it's a start and hopefully I'll begin trimming it down over the next few weeks.

Live search ‘public beta’

Update - I've tried to get this to work with the plugin but it just wasn't happening so I've used the original open source javascript with this and hacked away at it to play ball with EE. I've also managed to get an indication of if a search is taking place (a spinny thing). Next, I've got to sort out the styling and make sure the results functionality is working ok.

I've been trying to improve the search function on this site for a while now and after many a sketch I've now come to a conclusion and I thought I'd open it up for ridicule constructive feedback.

My brief to myself for could be broken down like this:

  1. Incorporate a global search which looks like a global search accessible from the same place on every page.
  2. Use a live search type functionality to display results without going to a result page

One of the major problems with trying to incorporate a search box at the top of this design is there is simply no where to put it without ruining the balance and composition which the design currently has. So, if the search box goes up here it needs to be hidden and toggled on and off. The natural position for this toggle is with the rest of the global 'functional' links on the top right.

Clicking this would reveal the search box, you search and get your results. Easy enough.

Of course I have been inspired by Spotlight, and many other blogs which have implemented this functionality and I can really see the benefit. The trouble I had was mainly integrating it with the design.

The bulk of the backend functionality was handled by a plugin for Expression Engine but as it's in beta, it is a little flaky.

Anyway, enough of the chatter. The reason for this post is to ask a favour. Can you please have a look at it, let me know what you think, tell me if it breaks in all the browsers. This will be far more productive than me trying to test it before I roll it out across the site.

Thanks for your help

9Rules Network

{title}I’m proud to announce that is now part of the 9Rules Network, a blog network focussed on content. The 9Rules Network aims to help sites get a wider audience through a “collective” approach with relatively few sites, all of which provide great content.

I’m chuffed that Paul (Scrivens of such sites as Whitespace and CSSVault) and team have accepted my site onto the 9Rules bus for what promises to be a fun ride!

While I’m at it, thanks to everyone who reads and continues to read and comment on this site. I’m hoping as the readership grows, so does the conversation and debate. If you’re new to the site, especially if you’ve come from a 9Rules Network site, then say hi.

“It’s only a green stripe at the top”

After being featured by those lovely people at Stylegala and CSS Vault I thought it might be a an idea to give a bit of a deconstruction of the design here at This post was also prompted by Narayan over at Etherfarm and his great post, "all this fuss over some measly boxes"

So, what I want to deconstruct is the process I went through to come to this design and hopefully give some sort of answer to the title of this post.

Any blog, in my opinion, is a tricky thing to design. Whilst coupling this with the need for a designer to have an online portfolio presence, you begin to find yourself with quite a task on your hands.

I'd bumbled around, designing, redesigning, redesigning whilst drunk only then looking at it in the morning and trashing it (we've all been there right?). This went on, seriously, for about 2 years with no real direction or identity for my site. I then began a blog, mostly as a dumping ground for what i'm thinking so I can look back and go "oh yeah, I thought that once, look how much i've grown" - you know, the usual navel gazing.

Then there's the technical side. I'd used MT for a good 18 months and was happy with it, sort of, until the spam started rolling in. The thing about MT is, it's great for a blog, but not so great for a portfolio. That's where EE stepped in. I'm not going to talk about that here though - i've talked enough about that already.

What i'd like to talk about is the design.

Defining the audience

In my day job, I like to think I have a User Centred approach to the work I do (although i'm beginning to realise the dogmatic aspects of UCD and i'm kind of formulating another, more agile, methodology which all be writing about soon.)

So, I think about Users all the time (I honestly do, i'm not just saying that). With that in mind I was beginning to think about the audience of my site and they fall into four categories - Existing clients, potential clients, Journal readers and random visitors. Designing a site, knowing that much about your audience, really helps clarify your thinking. With that in mind, I needed a site which appears business like and professional for the client half, but personable and friendly for the journal part.

Not all clients are web savvy

This is really important, especially amongst the extremely savvy Web Standards Brigade. A lot of the time, clients are not the most seasoned internet users. They don't really care whether or not the site is delivered using CSS, XHTML, blah, blah. They really are all boring acronyms to most people. What i'm saying is, I really had to think about potential clients and the language they speak - a language of profit and loss, sales and budgets, ROI and deliverables.

It's about Craft

I then approached the design with a clear brief. I know my audience and what i'm trying to say to them, but I need to make sure the design shows what i'm about as a designer. To make sure it embodies my design ethos and displays my application of the craft.

If you've read my Biog, you'll know i'm traditionally schooled in Typographic Design and am a member with of the International Society of Typographic Designers and as such have a self imposed obligation to uphold what the Society stands for. I try to do this will every design I produce.

At the moment I've got a thing about Helvetica. Maybe it's the clean lines, or impersonal perfection which appeals. I don't know, but I think it's got the most perfect lower case "e" of any typeface in history, ever. Anyway, I digress. I decided early on that type would be the walls, floor and ceiling of this particular building. Typography will bind the content together, the structure would be comprised of letters and a delicate heirachy of heading, subheading, captions and body copy, rather than coloured shapes and photography.

I was getting tired of the saturated colours and the heavy, intricate graphics which are proliferating in the web standards scene. There's too much visual noise, way too much. I though "what's the best way of differentiating yourself in this increasingly noisy space?" well, by being quiet.

btw. If anyone wants me to into more detail regarding the grid and typography, let me know and i'll work on it.

Colour as an educated, informed choice

Colour bugs me. How many times has a client asked you to make something a particular colour because they like it? I wanted the colour choice for this site to reflect an educated design choice. Green works for me at the moment, it's not my favourite colour but that's not to say it won't change in the future, it might. But at the moment, i'm fine with it.

To conclude

This isn't a post aimed at people who don't like the design. That's fine, you don't have to. What I hope I addressed was to explain where I was coming from, what my requirements were and what they are likely to be in the future. Designing your own portfolio site as a designer is always incredibly difficult and it takes some willpower to sit on your hands and just live with a design for a good few months - which is just what I intend to do.

Back to Bloglines problems

I got back from a great holiday in Italy on Sunday. Despite there being no snow (which is pretty crucial to snowboarding), we both had a great time and no broken bones this time!

I was informed yesterday by a friend of mine that Bloglines isn’t reading my RSS feeds correctly. Odd, because my RSS reader app is working fine. But doing some digging around on the EE forums it seems that my hosting provider (Dreamhost) doesn’t serve it’s default php files as UTF-8, but in a different format. I’m therefore getting a mismatch on the feeds and Bloglines is unhappy with it.

I’ve tried adding the suggested code to my .htaccess file AddCharset UTF-8 .php but this still isn’t working. It must be something to do with my host as the last entry Bloglines can read is the one just before I changed server.

So, is anyone using Bloglines having the same problem? More importantly, anyone fixed it?

Spam, eggs and chips

Without the eggs or chips. Rubbish. MT Blacklist is just not working well for me. I came in this morning to over 800 comments on the system, true Blacklist caught about 700 of these but still the hit on the server can’t be good.

Life with EE is looking good so far, although I haven’t delved too much into it yet. I discovered some problems with posting comments behind our firewall in work, which is a bit odd.

There’s going to be a new look here at, probably in the new year, once I get EE up and running. It’s going to be a lighter, fresher design and with ditching MT i’m able to go XHTML Strict with the code. It also looks like i’ll be saving about 20% in page weight as well with the new design. The portfolio section has been reworked which such make it a bit more usable. It’s also taking advantage of EE’s excellent category management system with category specific pages now, which are lacking at the moment.

I’ll be posting more about EE as I go along.

Content Management Rethink

I’ve been getting slowly frustrated with MovableType (as you do). First off, there’s Comment Spam. Horrible. Last weekend I ended up with over 1000 comments which I had to delete manually. I shouldn’t have to do that. I also shouldn’t have to impose registering restrictions for the people who want to comment to the site.

But that’s not the main thing.

Update: I’ve made the plunge, more to follow once i’ve fathomed out Expression Engine a little more. Thanks to Simon at Collylogic for his advice.

I’m a designer. This is a designers website. As you’d expect, there’s a portfolio. The thing is, MT makes it pretty difficult to do what I want to do with the portfolio in terms of content and stuff. Also if I want to use some kind of content management for clients of mine I’d like to invest the time in becoming familiar with one CMS platform. Now, MT is blogging software, which isn’t suitable for everything. But, I may have found a solution.

Expression Engine is a commercial product, and at $199, it’s cheap but not free. (although pMachine are offering a $99 offer for people who have been running other publishing solutions for more that six months.)

The great thing about Expression Engine is it seems a lot more flexible. I won’t go into all the details here, but here’s a few which struck a chord with me.

  1. It’s PHP and Dynamic - not flat files
  2. Its template system is XHTML and fully valid allowing CSS to do the layout
  3. It has unlimited custom fields for the data modelling. This is great. It allows completely custom content types.
  4. Customisable backend control panel (a great one for the clients)

So, it all looks very good. I’ve downloaded a demo and working my way through the system. I’m a little bothered that i’ve just invested the time in building this site with MT and by and large it’s working fine. But my main concern is building sites for others, which aren’t blogs. Surely a single framework to do this is the best option?

I’ll let you know how I get on.

Oh, to be spammed!

I’ve never been so badly spammed as the past three days. thankfully MTBlacklist caught most of them - over 2000 in three days! Nightmare. So, if you see the odd comment by Gay Hentai Porn, you can safely say one has escaped me.

New portfolio entries

New portfolio entries in the archive.

BBC Scrum V and BBC Ocean Row is some work from 2003. I thought i’d better start adding the archive stuff before the list just gets too big!

New article

Just posted the first the series of the Grid Articles. The first in the series - Why use a grid? - explains just that. The rest of the grid series:

  1. Why use a grid?
  2. A grid for the printed page
  3. A website grid
  4. A purists view on website grids
  5. Where next?

Any comments about the latest, and upcoming, articles can be posted here.

Ecto version 2 beta

Following a link from Jon Hicks, Ecto 2 beta has been released, in fact i’m posting this entry on it.

I’ve been using Ecto for a while now (ever since it was called Kung Log) to quickly post to this site. Quick, efficient and cheap and intergrates seamlessly with MovableType. In fact I rarely delve in the MT interface on a daily basis as Ecto is installed on my machine at work.

So, what’s changed in version 2? Quite a bit actually. Some of it good, some of it strange.

The overall application is based around two windows, one which shows your entries from different blogs, here you can click to edit existing posts or post new one’s. This then launches a second window which is all the stuff you need for an entry. Not much change between versions here apart from a WYSIAWYG editor which produces some simplistic formatting. The major change is where uploads are concerned. Version 1 had a separate palette for uploading images (several at a time if need be) and they were uploaded independently of the post. In this version uploads are dealt with as an attachment. This works in a similar way to email.

Uploading a file in Ecto 2 public beta

So far so good. Now comes the strange bit.

Once you’ve uploaded (or attached) an image, Ecto includes the code within your post. You then have to click anywhere within that code to edit the attachments options. I found all of this very strange from a UI point of view. This works well however when you’re in the WYSIWYG mode, but not in the code mode.

Editing an images properties in Ecto 2 public beta

There are also some bugs, as expecting in a beta version, which means you have to manually change the dimensions of the image in upload palette, just enough to be annoying.

Overall though a really good improvement to the software, just enough tweaks to make it easier to use, although the file uploading is now a bit odd.

That’ll teach me

Just tried using the dynamic template functionality in MT3.1 and, yes, it broke the About section completely. I’m currently scouring the MT forums to try and fix it. I think MT still thinks it is building a dynamic site, when in fact it’s not. Also, that section has some complex subcategories going on in it, so that could be a problem too. Bugger. Anyone have any suggestions?

Update: Ok, fixed the category archives now and the dynamic publishing is working. Just got to sort out the navigation and the homepage. Discovered a slight glitch in MT’s template management. If you are linking to a template, you have to delete what is there in the editable box, then save and rebuild. That way it references the external template again. Took me ages to fathom this out.

Update 2: Not bothering at this point. Until six Apart resolve some issues with the sub-categories and the complexity of going dynamic, i’m not going to bother having just got this site up and running. I think i’ll carry on with thinking about getting the content ship-shape. D.Keith Robinson has a good write up and he explains the reasons why i’m not bothering very well.

Also featured on …

This site has also been featured on unmatched. Great write up as well.

“Upon viewing this site for the first time, it gave me this feeling. Too bad the feeling was, “damn it, I want that design.” Very few designs do that to me, but when I see one that fits me so well, and looks so good, I get jealous.”

RSS icon?

Help! I can’t seem to get my favicon to appear in NetNewsWire as a lot of other sites do. I’m using the default RSS 1.0 feed from movabletype 3.0 as a template. Any ideas, anyone?

Articles to come

Here’s some articles I was thinking of writing. Let me know if any of these would be of interest…

  • Ten usability tips for normal people - you don’t have to be a guru to have a usable website.
  • The do’s and don’t of labelling.
  • Design a grid- properly.
  • Introduction to proper typography - A dying art, especially on the web. Bridge the gap between traditional book design and cutting edge web standards.
  • Typography - Create subtle relationships between your headers, sub heads, leading, point size and measure.
  • Movable Type - How I build this site in Movabletype.

New site on Stylegala

This site has been put up on Stylegala and is currently number 4 in the voting. Nice one.

Not the best write up i’ve ever had, but the comments back are good and has made me think about altering a couple of things.

  • The write up is right in that the menu is a little old-hat. I think this needs to change. Maybe into tabs. Not sure yet.
  • The design needs some finesse. Some spit and polish. But i’ve got a solid base now on which to add that - I know I won’t be polishing a turd.
  • There are some issues, as highlighted, with navigating within the portfolio section. This section has a linear navigational model rather than multi-level, like the rest of the site. Needs some work to make it more usable I guess. I’ll have a think about that.

The Relaunch

Update: Slight changes to the design, some problems with the old design. Mac Ie stylesheet deleted until I can get it to work properly.

Here it is, my new site.

As you can see a lot of changes have happened. In fact a (near) complete redesign has taken place. Only the journal remains pretty much intact (data wise). Everything else you see is brand spanking new. In fact I can’t quite believe it myself.

A year in the planning and designing and two months in the making. It’s been a great learning experience, even if it’s one I wont be repeating the near future.

I still have tons to do, such as populating the portfolio with old and new work. In the meantime you can still look at the old portfolio here .

A more detailed post will follow this shortly regarding the redesign. Until then, feel free to have a look around.

Snooch goes MT3.0d

Just finished upgrading Snooch to use the Developer Version of Movabletype. There’s ben a lot of discussion on many blog sites I frequent regarding the licencing. Six Apart have now started charging for versions of MT, dependent upon the author base and the amount of blogs. There is still a free version available, which i’m currently using, but all other versions have to be paid for, which is fair enough if you ask me.

MT is cheap as chips compared to other CMS based software. This new version has transended the underground ‘bloggey’ world and into a more mainstream, serious content management system which can be used for commercial applications as well.

A lot of mainstream CMS are trying to catch up with MT in terms of the valid XHTML it produces. A few are getting there (Drupal, Mambo etc) but they are still built around a fairly rigid, object based model. This is the strength of MT. You can make the objects yourself (they are after all just chunks of code.) Because of the new API Six Apart has implemented in this version of MT, the scope for much better plugins is a reality. In fact Six Apart have launched a plug-in competition. Hopefully we’ll see some kind of photo-gallery plugin come out of that rather on relying on rather tedious hacks.

As when I get more news on this, i’ll post it up.

Snooch Phase 2 is looming

It’s been on my mind for a while. It was always part of the plan to include my portfolio and have a more generic section for CV stuff etc. I’m getting pretty familiar with MT now, my CSS knowledge has also increased. So, i’m starting to think about what i’m goign to do with Phase 2.

The site as it stands is a bit to “Bloggy” which I don’t like. It doesn’t show my design skill off very well, and i’m not the most interesting or technically adept author so it falls down there also. I think in terms of the direction of the site, it’s lost it’s way a touch. So, i’m bringing it back to what it should be. A portfolio (true with a journal, articles and resources too, but mostly these will be my benefit)

I’ve made the decision to do this properly again. So, i’ll be starting with mapping the content and structure. Defining Categories and Access Structure as well as cross-site navigation issues. From there i’ll begin wireframing the templates and begin prototyping, once the “white site” is working how I want it to in MT (hopefully version 3 will be up and running by then) I’ll apply the visual design. I’m goign to do my best to get it right with the CSS, or as right as I can in terms of ease of updating, validation etc. I’ll also be making the move over to XHTML Strict to get a handle on that (I think this site is almost there anyway).

So, that’s the plan. But first i’m getting married. I’m hoping to phase the launch over a period of a couple of months, but we’ll cross that particular bridge when I come to it.

Slight addition to the site

I’ve added a “Recent links” linksblog to the right. At the moment this just pulls in a limited RSS from Delicious and at the moment this is the default one for Design. There are many other feeds which you can link to such as Usability, IA, CSS etc. You can set up your own as well, which I will do when I have the time.

Thanks to Jeff Veen for the idea and to Ben Milleare for the implementation

*Amendment* The feed isn’t dynamic. A CRON job is set up to run the perl script every 30 minutes, to get the RSS, to convert it into a txt file and then to display it as an include. that’s how it works.

Small changes to Snooch CSS

Some minor changes to the Snooch CSS to ensure Screen and Print stylesheets are working correctly.

I’ve separated the CSS from Movable Type, so now MT refers to the CSS as a .tmpl file. The Screen stylesheet then imports the standard Snooch stylesheet. The print stylesheet is seperate and will be worked on to ensure printed material from Snooch works optimally for print.

I’ve also centralised the CSS and all “furniture” graphics. These all now reside at a top level and are referred to in the CSS only, not the templates.

Ch… Ch… Changes

Just a few little changes on Snooch today. I’ve finally got round to makig a stylesheet switcher. I toyed with using a php switcher but I only needed something basic to supply a text only alternative. I opted for using a javascript version i’d seen on ALA. It’s an old switcher but it does the job.

And as it’s Christmas soon, i’ve added some snow for that extra christmassy feel. Aw… nice…

The new Snooch - the solution

The solution to the problem.

How I did it and why I did it - the way I did.

So, there was a brief. (there should be a link in “related posts” on the right, if there isn’t there’s still bug testing to do ;-))

First off, there was information architecture. I adopted a UCD approach to the design of this site, thought of my audience and tried to adopt some simple navigational models on which to base the site. Having decided on Movable Type as the engine to drive the publishing, there is a certain amount of navigational stuff associated with Movable Type. Luckily for me, Movable Type is used throughout the world by designers like me, so the navigational models in these types of sites are pretty consistant.

After I.A, came the initial design phase which included a bit of working with the “brand” and taking the snooch design forward. I wanted a simple structure relying on strong type, colour and navigation to carry the content. Work is currently ongoing on the portfolio section, it’s proving a bit tricky.

Once the design was finalised I began building the client side prototype for make sure the css implementation was correct. There are a number of cutting edge css techniques emplyed in the site, and a few planned. The navigation model uses a moving background image within a masked div, using the css box model. Works really well and most importantly it’s markup is semantically correct. Which bring’s me neatly onto the XHTML.

The templates use XHTML and Movable Types tags to build the content. The tags are coded semantically so that if this site was to be read through a PDA or by a screen reader, the order and heirachy with which the document is authored will be retained. Basically, it’s removing nonsensical gubbins from your markup - such as content and presentational stuff.

- XHTML & MT Tags - Client side code.
- CSS - handles design and presentation.
- MT - Handles content.

So, now i’ve got the basics done i’ll be adding the other sections along with some useful functionality (both client side and server side). If you got any suggestions for improving the site, let me know.

Snooch redesign goals

So, why am I redesigning Snooch? Well, a number of reasons.

Site Goals

1. The site must be as usable in nongraphical environments as it is in the latest browsers.

2. Markup must validate against the XHTML 1.0 Transitional spec and must avoid any presentational elements in the code.

3. CSS must validate and be as compact as possible.

4. The site should strive to be seamlessly accessible.

5. The site must deliver a recognised “Snooch” brand evolution.

6. The site should provide a text-only alternative.

7. Text should be easy and pleasurable to read.

8. Navigation must be clear, intuitive and obvious.

9. Information design must be User-Centered in it’s approach.

There are more, but that will do for now.

Snooch redesign underway

I’m just about getting my head round Movable Type for redesigning the snooch site. All preliminaries are done - wireframes, designs, sitemap. Now i’m getting down to the nitty-gritty of build and directory structures.

I’ve just about completed the “Recent” section. This will be the bulk of the site going forward - basically a blog, but with quite a simple, intuitive archiving system. The archive will consist of Monthly, Daily and Category archives, each of which will be contained withinin a dir path eg. daily arhive for 22nd September will be in archives/2003/09/22/ and so on. I’ve got to say with using Movable Type, i’m very impressed with the tags and the flexibility of the system as a whole. Excellent.

Snooch redesign

After almost 3 years of the current design being up, I think it’s time for a change. The site’s changed from just a portfolio site to a site on which my ‘blog’ is published in addition to articles and extended portfolio entries.

In light of this shift towards writing more, and less pretty pictures, I need a system and design in which this can work - currently the site has big holes!

I want the site to also be valid XHTML and CSS, with a complete seperation of design and content throughout. It needs to be indexable from a search engine with URL friendly URL’s, so a CMS which spits out flat files is preferable - Movable Type is the way to go I think.