For over fifteen years, my blog and Unfinished Business podcast have been popular with website designers and developers.

A memo to product and website designers

With modern CSS properties including Grid, Flexbox, Multi-column, and Shapes, designers have countless opportunities to make diverse, and engaging designs. Sadly, many of us haven’t had the memo which gives us permission to make more interesting work, so I decided to write that memo. Feel free to modify the message for your company or organisation and of course, circulate it to the designers on your team.

My new Inspired Design Decisions series of articles and webinars for Smashing Members

I’ve written plenty of times before about how important it can be to look offline for inspiration to improve the things we make online. Last year, a few friends and I met in London for an inspiring visit to the Photographers Gallery.

Redesigning your product and website for dark mode

If, on the off chance:

You’ll have noticed that I’ve implemented a brand new dark mode version of my website.

Designing for Equfund

For the past few weeks, I’ve been working with Equfund, refreshing their visual identity, redesigning their website, and developing a consistent brand experience for customers across different channels and touch-points.

A new take on creating colour palettes with Sketch

One of my earliest blog entries, all the way back in May 2004, was about a favourite technique for creating colour palettes. It was a technique which I’d used for years, even then. Now I have a new take on creating colour palettes, it’s time to revisit that topic.

Make a brief a platform for creativity

When I was redesigning my website recently I decided on a tongue-in-cheek new footer. Even though the idea behind my help page was tongue-in-cheek, I’m serious about the advice it gives.

Errol, me, and the new Stuff & Nonsense

Looking back, I’ve redesigned this website roughly every three years. Today I’m proud to show you the new Stuff & Nonsense.

Introducing Inspired Guides

Back in January I wrote about why I believe that style guides and component/pattern libraries should be beautiful as well as functional. That to be effective, they must cater for the different needs of creative and technical people by inspiring as well as informing.

Using contenteditable while designing with a browser

While I’m finalising the table of contents for my ‘shot,’ I’ve been thinking about the things that I regularly do when I’m ‘Designing with a Browser’, one of which is using the contenteditable attribute in the templates that I share with clients.

New branding for Code Enigma

Our friends at Code Enigma relaunched their website at DrupalCon in Amsterdam. The launch included the branding we designed for them.

Creating a colour palette inspired by Martin Scorsese’s film Hugo

Over the last few months, we’ve been working with a client on the design of a mobile analytics ‘web app.’ I’ll show more of it when we add it to our portfolio, but because lately one or two people have asked me about how we choose colour palettes, I thought I’d share how we came up with the colours for the Elemez app.

Some early thoughts on Sketch 3

I’m a Fireworks man.

What man, laid on his back counting stars, ever thought about a number?

Spoiler alert: I’m discussing a theme from the first half of the latest series of Mad Men, season 7, but I don’t mention what happens to major characters.

Towards the end of the 1960s, technology had begun to creep into advertising and in ’68, Mad Men’s Sterling Cooper and Partners agency (SC&P) install their first computer, a room-filling, low-humming IBM System/360.

I wrote ‘A different letter to a junior designer’

Last week, Cennydd Bowles wrote his Letter to a Junior Designer. It was widely shared and commented on, but while I enjoyed Cennydd sharing his experience—he is, after-all, an experienced product designer—I felt that his message and tone were profoundly negative.

What we’re left with is just called web design

Jeffrey Zeldman on Evolving Responsive Web Design:

Some commenters want to use initial-capped Responsive Web Design to mean responsive design as Ethan first defined it, and lowercase responsive design to mean an amorphous matrix of exciting and evolving design thinking. Lyza says soon we’ll stop saying Responsive altogether, a conclusion Andy Clarke reached three years ago.

Milton Glaser’s Mad Men season seven poster

The first half of the final series of Mad Men is just over a month away and today AMC released a new poster, designed by none other than Milton Glaser.


Jeremy Keith got a little hardboiled yesterday. I particularly like this paragraph that echoes everything I’ve been saying for years about setting wrong expectations:

Along the same lines

Loz Gray reflects on his eighteen-months working with the Guardian on their responsive site. There is so much experience here to learn from.

An extract from Designing Atoms and Elements

This post is an extract from my chapter in Smashing Book 3, titled ‘Designing Atoms and Elements’ written in March 2012.

Has a client ever said to you:

“I don’t like the design”?

One Step Beyond

I hope you enjoyed yesterday’s new, Madness-inspired home page header. We certainly enjoyed making it.

Complete Madness

I like to think that at Stuff and Nonsense, our house isn’t so much a place to work as it is a house of fun and although we take the work we do very seriously, we don’t take ourselves too seriously at all. We hope that sense of fun comes across on our site and today we’re putting aside our embarrassment, putting on our baggy trousers and unveiling a new header on our home page.

A suggestion for Responsive Design toggle icons

Jordan Moore (who wears rattlesnake skin shoes) on how to give users the option to “Toggle a Responsive Design On and Off”:

Rock Hammer, a curated, responsive project library

If you listen to Unfinished Business, you’ll know that I’m a big, big fan of Hammer For Mac, the app its developers say lets you create HTML builds & templates quicker, more efficiently & more conveniently. Hammer works for us because these days we mostly deliver static HTML and CSS templates, instead of static visuals, and we rarely develop complete sites.

The Web Standards Project’s work is done

I’d always admired the work of, and the people behind the Web Standards Project. What they had achieved in only a few short years in bringing browser vendors and tool authors together behind open standards was nothing short of magnificent, so when I was asked to join the project on March 31st 2005 it was an ambition fulfilled.

Touchy subject

Two great reads this week, on connected subjects:

Two things about the iPad mini

Two things about the iPad mini as I’ve owned one since Friday:


You might think — because all the talk at the moment is about seven inch tablets, in particular the iPad mini vs Google’s Nexus 7 vs Amazon’s Kindle Fire HD — that a seven inch tablet was a seven inch tablet was a… Right? Wrong.

Home screen icons and startup screens

I spent a couple of hours this afternoon upgrading this site’s iOS ‘Add to Home Screen’ icons and startup screen images.

Grippy grabby and those three horizontal lines

Thibaut Sailly added an extra dimension to the three-lines responsive navigation icon discussion by suggesting that the three horizontal lines could represent a gesture.

More about that bloody three lines navigation icon

I’m glad that the three-lines icon I suggested first, back in March is now being established as a sort of standard.

Don’t confuse design testing with device testing

There’s been a lot written about device testing over the last year. Jeremy instigating open device testing labs has rightly generated a lot of column inches like Smashing Magazine’s Establishing An Open Device Lab. However, I think we need to be clear just what we mean by testing.

About those long line lengths

Thank-you to everyone who tweeted and emailed about the site. The reaction was overwhelmingly positive. More than I’d hoped for. And I’d hoped for a lot. Some of the comments came with bugs I need to fix and suggestions for improving the site and its performance overall. I’m really grateful for that. A little bit of follow up from yesterday’s site launch.

We are the mods, we are the mods, we are, we are, we are the mods

If you’re reading this in anything other than a browser, open Chrome, Safari or Firefox (if that’s your thing,) because I’ve designed a new website for Stuff & Nonsense.

Say hello to the new ISO

In the later part of last year, my good friend and colleague David Roessli and I started a new project together — to redesign ISO, the International Organization for Standardization. I wrote about it a little in November 2011.

Paying attention to content hierarchy across screen sizes

I’ve been working on a small travel site over the last few weeks and came across an interesting responsive web design challenge.

We need a standard show navigation icon for responsive web design

You know those responsively designed sites where — on small screens like smartphones — navigation is either hidden or set at the bottom of a layout, then revealed when you click a button? Well, I think we need a standard ‘show navigation’ icon for that button in responsive web design.

Responsive type references

When we’re designing responsively, getting type sizes right can be tricky. On small screens especially, we need to make sure that passages of body text are comfortable to read and that we don’t set headings too large or with too much leading.

Tools like Fireworks and Photoshop can’t cut it for responsive design — they’re bringing a knife to a gun fight — so I needed to find a way to decide on my type sizes before I start using Fireworks or Photoshop.

So I made type reference files and uploaded them to a server (and now to GitHub.) There’s really not much to them. They contain only headings, paragraphs and small text, but of course you could expand them to include any number of different content types if you need to. I open them on all my test phones, e-readers and tablets.

Because different typefaces need different treatments, I made type references for both serif (Georgia) and sans-serif (Helvetica) typefaces. The next time I start a project, I’ll likely hook up one to my Typekit account too, so that I can test my web fonts on real devices before (and during) a design.

I’m sure that smarter people can improve the tools for a technique so I’ve posted my files up to GitHub (whatever that is.)

Responsive type references on GitHub.

The select menu navigation pattern

Brad Frost wrote about Responsive Navigation Patterns, Alexis Fellenius Makrigianni followed up with his thoughts. Both mention a responsive design pattern that was the subject of much debate at this month’s series of Fashionably Flexible Responsive Design Workshops in Australia — transforming a navigation lists into a select menu using scripts like TinyNav.js at small screen sizes.

Designing for ISO

This year’s been one of my busiest for speaking, teaching and designing for clients. You might not be able to tell that though, because when I deconstructed this site a few months ago, my portfolio was one of the things that didn’t find its way back. I’ll rectify that in the new year, but in the meantime I wanted to share some of the projects I’ve been working on, starting with this — a redesign for ISO, the International Organization for Standardization.


After pushing my redesign live yesterday, I’ve been asked a few times about why I pulled respond.js (and with it, CSS3 Media Query support for older versions on Internet Explorer) from the new site.

Expect wonkiness

I’ve been wanting to create a new look for Stuff & Nonsense for a good, long while, but I felt daunted by how much work I imagined there’d be for a redesign. My work diary is so full that I couldn’t see the time I thought I needed, so the site stagnated and over the last few months I couldn’t bear to look at it. Then a few weeks ago, Elliot spontaneously redesigned his site and inspired me to follow suit.

Dig the new breed

Old fashioned causes like that still stand
Gotta rid this prejudice that ties you down
(Ghosts by The Jam)

And your point is?

Compare these.

I don’t care about Responsive Web Design

Since Ethan Marcotte first lit the fire at An Event Apart in Seattle last year and later in that article, we’ve gone crazy about Responsive Web Design. But the more I think about what this means, the more CSS3 Media Queries I write, the more I realise something. I just don’t care about Responsive Web Design. I’ll tell you why.

Hardly your grandmother’s Facebook New User Object fields

Yesterday, something I said on Twitter seems to have resonated. “It takes a court order to get your personal data from Twitter, but just anyone can get it from Facebook.”

Love, love me, do

Ahead of an announcement I’ll be making tomorrow (don’t tell anyone, but it’s about Hardboiled Web Design workshops), I decided to make a little fun of myself.

Video of my Hardboiled Web Design talk from DIBI 2010

If you didn’t get a chance to catch my Hardboiled Web Design talk at a conference this year, your luck just came in. Those fine chaps at CodeWorx have posted a high quality video of the entire talk. I’ll post a text transcript and slides from the talk later this week.

Working on MobiCart

Back in August I started work on a new design for MobiCart, a new mobile e-commerce platform, designing both the front-of-house site and the back-end admin. It was fun, although it lasted only a few weeks.

We’re going looking for Yogi

We just can’t stay off the road. Two years since our last road trip when we drove an RV from Phoenix to Minneapolis, we’re again heading back West and this time we’re Looking for Yogi.

CannyBill redesign goes live

It seems like months ago (it was) when I handed over my design templates for the redesign of CannyBill. Since then, the canny chaps have been working hard to implement the design and @RellyAB has been working her strange magic on their copy. Yesterday the new CannyBill site went live.

I, The Jury

I asked: Web designers are cool, but private detectives are cooler. No argument, but why can’t you be both? The answer? You can.

Could you be a dick?

I’m in the middle of preparing materials for a new book, “Hardboiled Web Design”. To demonstrate CSS3 selectors, transforms and transitions I’m putting together a page in the demonstration site, “It’s Hardboiled”. That’s where you come in.

CannyBill makes Monday morning admin easier

Relly Annett-Baker on first draft copy for CannyBill

Realigning For A Beautiful Web using HTML5, CSS transforms and transitions

Now that our For A Beautiful Web workshops calendar is closed for the year, it was time to push live a redesign of that site with a focus on my new DVDs. This was a chance for me to play, both with HTML5 and CSS transforms and transitions to spice up the interface.

Trimming form fields (repost)

Web forms often ask visitors for non-essential information, but long and complicated forms can hinder a sales or sign-up process. Wouldn’t it be cool to give users the option to hide these optional fields at their own discretion. (This entry was originally posted in 2004 and has been updated in 2009.)

What does browser testing mean today?

Before we send over our design files to the chaps at CannyBill, first a run through of the browsers that we have tested in the new design and some musings about what browser testing actually means today, in the face of an ever more diversified browser and device landscape.

A top down look at the CannyBill redesign

With the first phase of the CannyBill redesign process drawing to a close, I would like to say a huge thank-you to the CannyBill team for encouraging a public, open design process and to everyone who has commented and tweeted their helpful suggestions.

Prices and plans design patterns

When is it the right thing to do not to attempt to reinvent a well established, tried and tested design pattern or convention. This question has come up while I have been designing the CannyBill prices and plans page.

Write now, I’m cooking with Chef-O-Matic

A fascinating look at Relly Annett-Baker‘s process of writing copy for CannyBill and finding its voice.

Advanced CSS Styling and the CannyBill redesign project

It’s not everyday that I get to work with a client that completely gets why it’s important to push the progressive enrichment boundaries by using HTML5 and the kind of advanced CSS styling that I teach at my workshops. Luckily, the CannyBill team do more than get it. I’d like to share a little of the HTML5 and CSS that I’m using for this project.

CannyBill design process, package contents

Liked most of my projects these days, I’m designing the next iteration of front of house site in a browser rather than making static visuals of page layouts. I know I’m in danger of sounding like a broken record, but I genuinely do find the process to be faster and better at scoping ideas and demonstrating them to clients. So I thought I’d share the start of this process and the files that I use.

Designing the CannyBill home page

After two weeks on the CannyBill redesign project (one of which I spent traveling to Chicago for An Event Apart), it time for deep breaths as I talk about my design of the home page for the new CannyBill front of house site and ask for your thoughts and suggestions.

CannyBill redesign peer research

I have to confess that when I’m designing, I often don’t take too much notice of a company’s peers or competitors.

CannyBill open redesign project

While open to the public redesign projects have lately been popularised by Mark Boulton Design‘s work for Drupal and by Happy Cog‘s work for Mozilla, it’s rare to find a commercial company involved in an open project.

Method in my modness (designing Stuff and Nonsense 2009)

It’s here — months in the planning and weeks in the making — the new Stuff and Nonsense. The new design is a continuation of my efforts to blend professional and personal styles into a brand that is as much about my personality and interests as it is about our work.

Designing with @font-face delivery services

With all the buzz around @font-face delivery services such as Typekit, one question remains to be properly answered. How can web designers show concept work to their clients when the fonts they want to use are hosted (and protected)?


I’ve been slowly evolving the design of For A Beautiful Web over the last few months since I relaunched it in April. Back then I stripped it back from its almost universally unpopular first design, then added hints of a future direction on the home page. Now that design has matured and today I launched its sister site at Transcending CSS.

Walls Come Tumbling Down presentation slides and transcript

It’s been one helluva busy, tiring but inspiring week, traveling first to speak at An Event Apart Boston, then, with Jeremy Keith and Jason Santa Maria onto London for @media2009. At both events, I presented Walls Come Tumbling Down. Here are the presentation slides and transcript.

New Internationalist — the last ten days

It’s been ten days since I uploaded the last batch of New Internationalist design files. Since then the team at New Internationalist have had time to live with the templates and make a small number of suggestions and requests that I have implemented over the last couple of days.

For A Beautiful Web DVD cover artwork

While the folks at New Riders work hard on editing the three DVDs that I recorded in February, and I make trouble by asking for tiny changes, I turned my attention to designing the cover artwork.

New Internationalist, resolving remaining issues

Last Monday, I met up with the New Internationalist team to talk about what we had accomplished so far in the redesign and the remaining issues. As he was in the area, we were also joined by my friend and design meeting interloper Dan Rubin.

New Internationalist redesign - entering the final stages

Now is the time, particularly during this open design process, where I get nervous about presenting the design I hope to launch. While I know that there are still aspects left to resolve, I wanted to share my process and thinking behind what I’m showing today.

Struggling with the New Internationalist wordmark

For the last few days I’ve been working on the branding aspects of my New Internationalist redesign and I have to admit that I’m struggling. There is a raging argument going on in my head. Please help me make it stop.

Walls Come Tumbling Down

As I’m putting together Walls Come Tumbling Down, the talk that I am giving this year at @media 2009 London and An Event Apart, I wanted to share some of my notes on how the current recession will affect the way that web designers and developers work.

1930’s-40’s in Color

It’s possible that this should be an elsewhere entry, but as so many people have emailed, tweeted and otherwise asked about the placeholder images that I’m using in my New Internationalist redesign process, I thought I’d share the source.

A top-down look at the New Internationalist redesign

Thanks to all of the excellent and constructive feedback so far, I am today working towards the New Internationalist pages that I am designing being feature complete and ready for sign-off next week. With that in mind, I wanted to share with you a top-down view of all of the pages that I have been working on.

Designing New Internationalist blog pages

Today I want to share and invite your feedback on my work on the New Internationalist blog pages.

Designing New Internationalist magazine pages

Today I want to share and invite your feedback on my work on the New Internationalist magazine pages.

Did a greedy capitalist steal that page?

I hope that New Internationalist readers will never see 404 Page Not Found.

The New Internationalist home page challenge

Most often when I’m designing a new site, I focus first on its content pages. Then, working from the inside-out, I finally arrive at the home page. This is the approach that I’ve taken in my work for New Internationalist. That said, a site’s home page is often what people want to see first, so who am I to disagree? Today I want to share and invite your feedback on my work on the New Internationalist home page.

The New Internationalist redesign process

When I was asked by New Internationalist to design for their online magazine, blogs and shops, the challenge seemed pretty daunting. The New Internationalist site has content that reaches back over thirty years, more page templates than you can shake a riot policeman’s truncheon at and a structure that involves some complex interaction design challenges. I also have limited time, budget and resources available.

New Internationalist online branding

As part of the New Internationalist redesign project, I’m focussing on how the organization presents itself online. To begin that process, I’ve been researching the printed magazine since it started in 1973. (I should stress that I’m not working on the organization’s overall branding, nor the design of the magazine.)

Help me to redesign New Internationalist

A few weeks ago I received an email from New Internationalist magazine asking me if I’d like to work on the redesign of their online magazine, blogs and shop. I was away from my studio when the email arrived so I pecked out a quick reply on my iPhone. I think it went something like New Internationalist? Oh fuck yes!

Still Really Worried

It’s always a pleasure to have the opportunity to build on work that I have done in the past, so a few weeks ago I jumped at the chance to work on a small visual design realign for my friend Richard Rubin of Really Worried fame.

Designing tweetCC

This week Brian Suda and I launched tweetCC, a Twitter micro-app that allows Twitter users to declare a Creative Commons license for their tweeted content. I’ll be writing more about why we decided to make tweetCC and why licensing you tweets is important in a future entry, but as several people have commented on my design and CSS implementation, first a few words about them.


Today it came to light in a blog post on Microsoft’s IE Blog that the company intends to include a new ‘compatibility feature’ and black/white list that it hopes will help users if sites break in the up-and-coming release of Internet Explorer 8.

A client-focussed copy style guide

Let’s be fair, few customers are professional writers and few hire one when making a web site. That is why I now include professional copywriting into every estimate as a non-removable item. When customers are adding their own copy to a site, I give them ten simple tips to follow.

Has Barack Obama exhausted Gotham?

The United States’ soon to President Barack Obama’s choice of Tobias Frere-Jones’ Gotham typeface has been well documented.

Typesetting The Waste Land

With only a week to go until our first Visual Web Design Master Class in London, I’ve been taking time away from client work to focus on writing all new content that I hope people attending will really love.

Five CSS design browser differences I can live with

Web designs need not look exactly the same in all browsers. I know that’s a topic I have written about and spoken on a fair amount before, but somehow I’m always amazed by the reactions that I get when the subject comes up.

Time to stop showing clients static design visuals

Demonstrating our designs to clients as XHTML/CSS pages rather than as static Photoshop or Fireworks has streamlined our workflow and helped us to set and manage a client’s expectations better than ever before.

Designing For A Beautiful Web

When I set out to design the site to launch For A Beautiful Web I knew that I wanted to set a new tone and arrive at something a little unexpected. One of the ways that (I hope) I have achieved that level of unexpectedness was to turn to a classically trained artist, rather than a web designer for creative direction.

The Jon Burgerman Edition

To my complete and utter amazement, Jon Burgerman has agreed to create something truly, but unsurprisingly unique for this site. In doing so he has made me realise just how different a feel a new illustration can create, even when nothing else on a page changes.