The view options toolbar at the bottom of my animated banners has irked me for a while. It had grown one button at a time, and the result looked ill-considered rather than designed. With a few minutes to spare at the end of last week, I finally redesigned it.

Militant was a British socialist newspaper associated with the Militant ‘tendency,’ a left-wing political movement whose members were ultimately expelled from the mainstream Labour Party. I looked back at how the Militant masthead logo evolved between 1964 and 1997.

Talk to my family and friends, and they’ll tell you I never bloody stop talking about the IWC Big Pilot 43 watch that I bought to celebrate my 60th in November. Mechanical watches are all over my social media feeds, and the other day I did a double-take when the algorithm suggested I might like a new design from, of all companies, Timex.

While the smart people finish the Academy of Scoring Arts website’s CMS development, I’ve been rummaging through my design files and rediscovered several concepts that didn’t make it into the final design.

I’d been tinkering with animations last week and wondered what else I could do with my Magnificent 7 characters. I love surprising people with hidden Easter Eggs, so I decided to use them in a little hidden game.

I had some spare time earlier this week to add a little more finesse to my Magnificent 7 animated graphics, so I added a new background to my blog pages’ illustrations, which has some hidden features.

When I started writing for CSS-Tricks, Geoff and I talked about what to put in my bio. He called me a “veteran” web designer. Geez, I felt old enough. So we settled on “pioneer.” That word stuck—and it’s what inspired the new set of animated pioneers now roaming my website.

Website design in the ’90s was messy, but it was also magical. It was frequently fraught with accessibility, performance, and usability problems that took us years to solve. But while we addressed them, we discarded much of what was captivating about early websites and replaced them with conservative, commodity designs.

In my latest Design Chatter video, I talked about how the homelessness charity Crisis aims to be bold and impactful and asked if their website design lives up to those goals? Here’s a written version of that, plus the full versions of my redesigns.

In my latest Design Chatter video, I talked about how the RSPCA rebranded and asked if its website makes the best use of its new look. Here’s a written version of that, plus the full versions of my redesigns.

The 2024 General Election is just days away, and opinion polls suggest Labour will win with a majority bigger than 1997. Even though I’m not as excited about Labour’s vision as I was then, I still keep my fingers tightly crossed. As I found a few weeks ago, there’s barely anything left of Labour’s labourwin97.org.uk campaign website from its victory in 1997 under Tony Blair. It wasn’t archived by the Wayback Machine, so I imagined what it might’ve looked like.

During the General Election campaign, I’ve been studying political party websites, looking at their user experience and visual designs, and imagining what I’d make if they asked me to work on their designs.

There are less than two weeks before election day, and most of the headlines have come about from things the party leaders have said on the various TV debates. Out of nowhere, Prime Minister Rish! told young people he might take away their driving licences if they refused his national service. Keir Starmer was pushed on his supporting Jeremy Corbyn but not Arsenal, which is an even bigger character flaw. Ed Davey said, well, actually, I can’t remember anything Ed Davey said. But the person I’ve been most impressed with is Carla Denyer, the teeny-tiny confident co-leader of the Green Party.

Since, I suppose, the late nineties, every time a General Election comes around, the political parties roll out new websites. Having spent time studying Labour’s 2024 campaign website, I wondered what their previous election websites looked like.

Labour has launched its 2024 General Election manifesto. With a campaign slogan that shouts “Change,” I’d expected they’d replace their lacklustre pre-manifesto website design with something which reflects that message. Today, they released a dramatically different design, which inspires and motivates people to vote for their plans. Just kidding.

The Conservatives launched their 2024 General Election manifesto. Its contents won’t come as any surprise to anyone who’s been following politics recently. Having no new ideas doesn’t mean their designers haven’t attempted to introduce a few of their own on the latest version of their website.

So far, Rishi’s announced the general election to the soundtrack of Things Can Only Get B W etter, spoke to reporters outside the Titanic exhibition (spoiler: It sank,) was photographed under an Exit sign, and accidentally grew big ears after announcing a crackdown on Mickey Mouse university degrees. Yes, it’s all going very well. But, even with all these mishaps, Labour can’t take victory for granted. Sadly, their website design sucks. So, I imagined what I’d make if Labour came calling.

In this week’s General Election campaigning, Reform’s Nigel Farage announced he’s standing for a seat in Clacton after promising everyone he wouldn’t stand as a candidate. Farage popped up on BBC Question Time, which, in fairness, promised they’d invite politicians from other parties. Speaking of novelty candidates, I hope the BBC will stand by their promise and invite someone with real common sense policies like Count Binface. The Count has obviously been too busy conquering the galaxy to get his website ready for the election, so I imagined what I’d make if Count Binface came calling.

Finally, the UK general election campaigns are underway, and the parties are pushing their messages to voters. With the Conservatives desperate to cling to power, Labour anxious to seize it, the Liberal Democrats hoping for more MPs, and Reform looking to claim the far-right vote from the Tories, how do I think their website designs are fairing?

This week I’ve been diving deeply into how I approach projects, using a recent design for Zombie Hunt as an example. Yesterday, I wrote about catering for small screens. Today’s all about performance and accessibility considerations when coding my designs.

This week I’m diving deep into how I approach projects, using a recent design for Zombie Hunt as an example. Yesterday, I wrote about designing a layout grid. Today is all about catering for small screens.

This week I’m taking a deep dive into how I approach projects, using a recent design for Zombie Hunt as an example. Yesterday, I wrote about designing dark and light themes.. Today is all about the choices I make when designing a layout grid.

This week I’m diving deep into how I approach projects, using a recent design for Zombie Hunt as an example. Yesterday, I wrote about making decisions about colour. Today is all about using colour across dark and light themes.

Two weeks ago, I took a week—away from work on Nozomi Networks—and spent some time working on a redesign for Zombie Hunt. The team are franchising their successful business and needed a new design to attract customers and potential franchisees.

Over the past month, I’ve been upgrading my Apple TV movie artwork from portrait to 16:9. Like the artwork for many older film series, Apple’s artwork for George A. Romero’s series of zombie films is more walking on sunshine than walking dead. So—like I did for other series in my collection—I decided to make my own artwork.

I’ve been upgrading my Apple TV movie artwork from portrait to the latest 16:9 format recently. Like the artwork for many older film series, Apple’s artwork for the Star Trek films is less photon torpedo and more phaser set to stun. So, I decided to make my own artwork.

Here’s a quick design tip for making headlines more interesting using text-decoration.

Over the past few years, I’ve amassed quite a collection of Godzilla films, from the original 1954 Toho production to Legendary Pictures’ monsterverse Godzilla vs. Kong. When I was upgrading my Apple TV movie library from portrait to landscape, I decided to make my own artwork.

When I was updrading my Apple TV movie library, I was very disappointed by the artwork Apple provided for my James Bond movie collection. So, I decided to make my own. I worked on several concepts and this was another version.

Here’s a quick design tip for improving the readability and style of long passages of running text.

Justin Stahl tweeted, “It’s been tough to recruit product designers with great visual design and an eye for detail. Did we atomic-design-system and product-manager-skills a generation out of having them?” It’s a fair question.

One of my biggest problems with grids included with frameworks is that they offer little or no help in deciding proportional relationships between elements. Ratios can be an enormous help in determining these relationships, but they’re rarely written about in relation to web design. I want to change that.

I’m not a framework user. I’ve never once used Bootstrap and I didn’t use 960gs or Blueprint before that. I can understand the benefits of using a framework or off-the-shelf templates, but they weren’t ever for me. Still, I wanted a simple set of layout modules I could call on for design projects, so I developed my own. I call them Layout ❤.

As I’ve said plenty of times before, a well-chosen grid can do much, much more than align content. Our choice of grid can influence how we approach a design and it can change how we think about layout. That’s especially true of modular grids.

Compound grids offer exciting and often unconventional layout possibilities. Most importantly, they also encourage us to think differently about the choices we make when we’re designing layouts. If you’re familiar with the grid made ubiquitous by Bootstrap, a 3+4 compound grid is a great place to start learning about compound grids.

A generation of product and website designers has grown up with 12 or 16 column grids from Bootstrap-style frameworks. In those frameworks, columns are used mostly for aligning content. In my new design for Stuff & Nonsense, I wanted to go beyond that and use a compound grid to influence the entire design.

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.

If, on the off chance: You’re reading this entry using Safari Technology Preview 68, and You’ve already upgraded your MacOS to Mojave 10.14, and You’ve selected Dark appearance in System Preferences You’ll have noticed that I’ve implemented a brand new dark mode version of my website.

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.

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.

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.

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

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.

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.

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

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.

I’m a Fireworks man.

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.

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.

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.

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

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

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.

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

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.

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.

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.

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.

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

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.

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.

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.

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.

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

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.”