My site’s moved CMS and servers. If you spot a problem, let me know.

Stuff & Nonsense product and website design

0/6

Can you catch ’em all?

There’s a different outlaw to capture on every page.

Design

Last week in the studio (CW25-26)

In this regular series, I write about what I worked on during the previous week. I’m still in Germany, away from the studio, and I’m missing my space a lot. There’s a big part of me that loves travelling, but an equal part that craves the familiarity of my home workspace.

Last week in the studio (CW24-26)

In this regular series, I write about what I worked on during the previous week. I’ve missed a couple of weeks of reporting because a) I haven’t been in the studio, and b) this site has had major surgery.

Last week in the studio (CW21-26)

In this regular “Last week in the studio” series, I write about what I worked on during the previous week. Last week was one without a solid piece of work to tackle. Instead, I spent it on some updates to a client’s design and on making a little website for myself.

Last week in the studio (CW20-26)

In this regular “Last week in the studio” series, I write about what I worked on during the previous week. Last week was spent on a more business-focused but no less creative project

Making my view options toolbar more intuitive

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.

Last week in the studio (CW18-26)

In this regular “Last week in the studio” series, I write about what I worked on during the previous week. Last week was quiet enough for me to take an afternoon off to enjoy the sunny weather, but I still got plenty done.

Militant masthead logo (r)evolution

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.

Last week in the studio (CW17-26)

In this regular “Last week in the studio” series, I write about what I worked on during the previous week. Last week was a good one as I could concentrate on just one thing.

I added a spring mode to my animated SVG landscape

I’ve added a “spring mode” to my animated SVG desert. Flowers bloom, colours shift, and the whole scene feels more alive—all without creating a separate version. Instead, I’m layering changes on top of the same SVG and letting CSS and JavaScript do the work.

Last week in the studio (CW16-26)

I thought it might be interesting to document what I work on during the week, so I started a regular “Last week in the studio” series. Last week was a bit productive but bitty.

A bold new website for the Academy of Scoring Arts

The Academy of Scoring Arts just launched its new website. It’s a community of arrangers, composers, and musicians that helps industry professionals develop their craft through events and video tutorials.

The Timex x Pan Am Waterbury Automatic Ace

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.

Designing banners for the Academy of Scoring Arts

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.

Can you catch ’em all?

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.

More Magnificent 7 Malarkey

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.

Say hello to my Magnificent 7

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.

Comic book layouts as web design inspiration

Yours truly over at the Envato blog: “What if we thought of web design more like a comic book? Comic book nerd and web design pioneer Andy Clarke shows you how the structure of comic book layouts—panels, gutters, and rhythm—can inspire more expressive and narrative-driven web designs.”

Colour palette inspiration from B-movie posters

Yours truly over at the Envato blog: “What do giant spiders, invaders from Mars, and a 50-foot woman have in common? Incredible color. B-movie buff and web design pioneer Andy Clarke shows you how the over-the-top palettes of horror and sci-fi posters can inspire memorable color choices for modern websites.”

Web design inspiration from retro wrestling

Yours truly over at the Envato blog: “How can a collection of dog-eared posters from the golden age of British wrestling influence the design of today’s websites? Web design pioneer Andy Clarke steps into the ring to give us the lowdown.”

Retro Reboot: What ’90s web design can teach us today

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.

Web design inspiration from ’90s cartoons

Yours truly over at the Envato blog: “Have you ever considered how ’90s animations might relate to web design today? I show how they inspired a new website design for Emmy-winning composer Mike Worth.”

Web design Smash Hits

Yours truly over at the Envato blog: “How can a long-defunct popular music magazine for teens influence the design of today’s websites?”

Movie poster-inspired web design

Yours truly over at the Envato blog: “What do you see when you look at a movie poster? Is it simply advertising to promote a movie or a piece of artwork you’d potentially hang on your wall at home or in an office?”

Fanzinetastic web design

Yours truly over at the Envato blog: “When I was growing up in the 1980s in a steel-making town that had lost its steelworks, there was a thriving subculture of fanzines and fly posters printed in garages and community centers.”

Labour’s 1997 election website is lost to history, so I imagined how it might’ve looked

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.

The Green Party website could be better at promoting their policies, so I imagined how that could be done

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.

How I designed a new website for comedy candidate Count Binface

“All water company bosses to take a dip in British rivers to see how they like it.” “National service to be introduced for all former prime ministers.” “European countries to be invited to join the UK, creating a new ‘Union of Europe.’” Who would disagree with policies like these?

The Labour Party’s website could do better at promoting their policies, so I imagined how that could be done

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.

Comedy candidate Count Binface’s website needed a design which matched his personality, so I imagined how that could look

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.

With the 2024 election looming, how do the parties’ websites fair? I took a look.

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?

Kerfuffle on the Planet of the Apes (part 1)

Kingdom of the Planet of the Apes is out, and I’m so excited that I decided to celebrate by updating another of my responsive easter egg headers— Kerfuffle on the Planet of the Apes —with more efficient, modern code. I’ll explain how I did it, starting with the new optimised SVG images.

Designing for the Cheeky Condiment Company

For years now, I’ve kept sauce sachets in my car’s glove box—I mean, who actually keeps gloves in that compartment?—just in case I needed it for a burger or bag of chips. That’s why I was really pleased when The Cheeky Condiment Company got in touch asking me to design a website for their condiment-carrying charm bracelets and necklaces.

Designing Zombie Hunt part five: Coding my designs

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.

Designing Zombie Hunt part three: Designing a layout grid

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.

Designing Zombie Hunt part two: Dark and light themes

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.

Designing Zombie Hunt part one: Colour

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.

Work I’d like to do in 2022

I’m starting my fourth full year working mainly with Nozomi Networks. I love the people there, the work we’re doing is fascinating, and I enjoy the ability to develop designs over a longer period of time. But, I will have some time available for other projects and I want to use that time to make a difference.

Design of the dead

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.

Where no design has gone before

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.

Quick typography tips №2

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

Design vs. Godzilla

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.

Design Another Day

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.

Live and Let Design

I’ve always been fastidious about how my Apple TV movie library looks. When the time came to change the artwork from portrait to landscape, I was disappointed by what Apple provided for my James Bond movie collection. So, I decided to make my own.

A book for your inspiration collection: Alex Steinweiss

There’s so much we can learn from books about editorial, graphic, and print design to help us get web design out of its rut. So, I’m sharing my collection and recommend this book about the work of Alex Steinweiss, the inventor of the modern album cover.

A book for your inspiration collection: Richard Hollis

To help get web design out of its rut, I think people should look outside the web to all areas of design for inspiration. There’s so much we can learn from books about editorial, graphic, and print design. So, I’m sharing my collection and recommend this book about the work of British designer Richard Hollis.

Quick typography tips №1

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

A book for your inspiration collection: David King

I’m sharing my design books collection to help encourage designers to drag web design out from its rut. I recommend this book about the work of British designer and design historian David King.

A book for your inspiration collection: Paula Scher

To help get web design out of its rut, I think people should look outside the web to all areas of design for inspiration. So, I’m sharing my collection and recommend this book about the work of American graphic designer Paula Scher.

A book for your inspiration collection: Wim Crouwel

To help get web design out of its rut, I think people should broaden their knowledge of all areas of design. So, I’m sharing my collection and recommend this book about the work of Dutch designer Wim Crouwel.

A book for your inspiration collection: Robert Massin

My bookcase holds my growing collection of books about editorial and graphic design and studying them has completely changed how I approach design. To help get web design out of its rut, I think people should broaden their knowledge of these areas of design. So, I’m sharing my collection as it grows.

Layout ❤: Take the guesswork out of layout by using ratios

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.

Layout ❤. How and why I built it

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

Layout ❤: Modular grids for visually appealing layouts

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.

Layout ❤: How a 3+4 compound grid can improve on 12-columns

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.

Stuffed with layout options: Using a 4+5 compound grid

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.

52 weeks of Inspired Design Decisions #40 — David King

Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 40 and my design this week was again inspired by David King. David King was a British writer, designer and historian of graphic design. He devoted his career to uncovering and chronicling the art of the Soviet and the Constructivist periods, developing posters and graphics for many political groups.

52 weeks of Inspired Design Decisions #39 — Milton Glaser

Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 39 and my design this week was inspired by Milton Glaser. Milton Glaser was born in 1929 in The Bronx, New York City and throughout his career, he personally designed and illustrated more than 400 posters including a famous psychedelic poster of Bob Dylan.

52 weeks of Inspired Design Decisions #38 — Saul Bass

Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 38 and my design this week was again inspired by Saul Bass. In a career which spanned over 40 years, Saul Bass not only designed some of America’s most iconic logos, but also designed title sequences and film posters for some of Hollywood’s best filmmakers, including Alfred Hitchcock, Stanley Kubrick, and Martin Scorsese. For Hitchcock, Bass created innovative title sequences for films including North by Northwest, Psycho, and Vertigo. The opening sequence of Mad Men—one of my favourite TV shows—pays homage to Bass who died in 1996 aged 75.

52 weeks of Inspired Design Decisions #37 — Paula Scher

Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 37 and my design this week was again inspired by Paula Scher. Paula Scher is an American graphic designer, painter and educator and the first female principal at design firm Pentagram. She is well-known for her distinctive typographic style.

52 weeks of Inspired Design Decisions #36 — David King

Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 36 and my design this week was inspired by David King. David King was a British writer, designer and historian of graphic design. He devoted his career to uncovering and chronicling the art of the Soviet and the Constructivist periods, developing posters and graphics for many political groups.

52 weeks of Inspired Design Decisions #35 — Paula Scher

Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 35 and my design this week was inspired by Paula Scher. Paula Scher is an American graphic designer, painter and educator and the first female principal at design firm Pentagram. She is well-known for her distinctive typographic style.

52 weeks of Inspired Design Decisions #34 — Max Bill

Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 34 and my design this week was again inspired by Max Bill. Born in 1908, Max Bill was a Swiss artist, typeface and graphic designer, and industrial designer. He studied at the Bauhaus under Wassily Kandinsky and Paul Klee.

52 weeks of Inspired Design Decisions #33 — Tibor Kalman

Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 33 and my design this week was inspired by Tibor Kalman. Tibor Kalman was a Hungarian American graphic designer best-known for his work as editor-in-chief of Colors magazine. In 1979, Kalman opened his own studio with the goal of challenging mundane design thinking and creating unpredictable work.

52 weeks of Inspired Design Decisions #27–32

Since going on holiday during July, I’ve fallen behind with my commitment to designing 52 designs for a series of Inspired Design Decisions. Now II’m back in the studio and II’ve settled back into work, II’m making up for lost time. Here are six new designs, inspired by Otl Aicher, Saul Bass, Ken Garland, and Armin Hofmann.

52 weeks of Inspired Design Decisions #26 — Lester Beall

Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 26 and my design this week was inspired by Lester Beall. Lester Beall was an American modernist graphic designer. Born in Kansas City, Missouri, Beall moved to Chicago to study and from there to New York. From his farm in Connecticut, he worked on covers and posters which often featured his distinctive use of photomontage.

52 weeks of Inspired Design Decisions #25 — Erik Nitsche

Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 25 and my design this week was inspired by Erik Nitsche. Erik Nitsche was born in Lausanne, Switzerland in 1908 and was a pioneer in the design of books, reports, and other printed materials. In 1955, Nitsche began working as art director at engineering company General Dynamics where he designed a 420-page book on the company’s history entitled Dynamic America.

52 weeks of Inspired Design Decisions #24 — Dan Friedman

Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 24 and my design this week was inspired by Dan Friedman. Friedman was an American graphic and furniture designer. He studied under Armin Hofmann at the Ulm School of Design and became a major contributor to the new wave typography movement. While working at Pentagram until 1984, Friedman designed letterheads, logos, and posters. Sadly, Friedman died of AIDS in 1995 in New York.

52 weeks of Inspired Design Decisions #23 — Herbert Matter

Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 23 and my design this week was inspired by Herbert Matter. Matter was a Swiss-born American photographer and graphic designer known for his pioneering use of photo-montage in commercial art. His experimental work helped shape the vocabulary of 20th-century graphic design.

52 weeks of Inspired Design Decisions #22 — Emmett McBain

Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 22 and my design this week was inspired by Emmett McBain. McBain was an African American Graphic Designer who’s work highlighted themes of the African American community and helped bring a positive image of African Americans to the mainstream. He designed impactful advertising, during the Civil Rights era and a series of iconic album covers throughout the sixties and seventies. #blacklivesmatter

52 weeks of Inspired Design Decisions #12 — Armin Hofmann

Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week twelve and my design this week was inspired by Swiss born graphic designer Armin Hoffman who is now 99 years old.

52 weeks of Inspired Design Decisions #11 — Max Huber

Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. My design this week was again inspired by Max Huber. Huber taught graphic design in the Swiss town of Lugano, which coincidentally is where I stay when I go to work in Switzerland. He died in Mendrisio—where my Swiss office is—in 1992.

52 weeks of Inspired Design Decisions #7 — Max Huber

Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. My design this week was inspired by Max Huber. Huber taught graphic design in the Swiss town of Lugano, which coincidentally is where I stay when I go to work in Switzerland. He died in Mendrisio—where my Swiss office is—in 1992.

52 weeks of Inspired Design Decisions #6 — Alvin Lustig

Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. My design this week was inspired by Alvin Lustig. Lustig’s work as a book, graphic, and typeface designer has been influential long after his death in 1955.

52 weeks of Inspired Design Decisions #5 — Bradbury Thompson

Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. My design this week was inspired by Bradbury Thompson. Although less well-known than many of his contemporaries, Bradbury Thompson has been called “one of the giants of 20th-century graphic design.”

52 weeks of Inspired Design Decisions #4 — Alexey Brodovitch

Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. My design this week was inspired by Alexey Brodovitch. You can read more about him and his work in my article for Smashing Magazine.

52 weeks of Inspired Design Decisions #3 — Bea Feitler

Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. My design this week was inspired by “the pioneering female art director you’ve never heard of,” Bea Feitler.

52 weeks of Inspired Design Decisions

For the past six months, I’ve been designing, writing, and presenting a series of Inspired Design Decisions articles and webinars for Smashing Magazine. These have been brilliantly well received and I wanted a regular project to experiment with new designs.

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.

Redesigning your product and website for dark mode

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.

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.

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.

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.

River

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.

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:

Seven

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.

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.

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.

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.

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.

Responding

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)

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.

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.

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.

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)?

Sisters

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.

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.

Pajamas

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.

South Bye Bye South West

I had looked forward to it for a year and it certainly didn’t disappoint. For me, this year’s SXSW Interactive was the best so far. Every year seems to be a little different.

The Britpack and where we go from here

This morning when I opened my inbox, I found a flurry of messages discussing the Britpack and what it is, could and shouldn’t be and about whether or not the wider perception of it was elitist and somehow harmful.

SXSW: Bullet Tooth Web Design

The end of this week sees web design masterminds, mobsters and even petty criminals heading to Austin for SXSW. It’s like Parkhurst for design geeks.

Ready for Web Directions North

Packed: Passport, toothbrush, Mac, pants, socks, toasted sandwich maker iPod. I think I’m ready: Web Directions North here I come. I’m heading out on Sunday.

Creating Inspired Design Part 1: I Am The Walrus

I had thought that months of solid writing Transcending CSS would have left my ink a little dried out. But an offer to write a series of articles for Informit on Creating Inspired Design was one that was too good to pass up.

Learning Illustrator CS2

I’m always inspired by Veerle’s Adobe Illustrator tutorials. But Illustrator is a tool that I’ve never really used beyond its rudementary features and I’m inspired to learn more.

Win one of three Transcending CSS iPod Shuffles

Despite owning several iPods including a 60Gb that contains my entire music collection, all six Star Wars movies and a multitude of other files, the new iPod Shuffle is such a thing of beauty that I just had to have one.

And All That (Transcending CSS) Malarkey

This morning I returned from a (literally) flying visit to New York where I had the very real pleasure of visiting my friends at AOL and speaking at their Design and Programming Offsite event.

CSS: Browser testing order

It’s been a while since I wrote about CSS on And All That Malarkey, ( Ed says: It’s been a while since you wrote about anything here Malarkey!.) I’ve been busy documenting some of my working methods and thought that I would share Stuff and Nonsense’s current…

Jasper Johns’ Flag at MoMA

Last week I came back from a (semi) working trip to New York. As it’s been nine years since I was last in the city, I did all the usual tourist attractions (Empire State Building, Circle Line cruise, Central Park) and I ate hot-dogs and donuts and bagels and…

Of conferences and workshops

With Web Directions South and Fundamentos Web now both done and dusted, I have only one public event left before the end of this year. You might think that attending conferences regularly would mean that I have heard what is on offer from speakers.

Way too many cooks (Dvorak special)

I invited thirty celebrity CSS chefs to collaborate in baking a single stylesheet. Now the bell has rung, the oven mitts are at the ready and our Too Many Cooks (Dvorak special) is ready to come out of the oven. But first, an open letter to Mr. Dvorak.

Too many cooks (Dvorak special)

After his altogether brilliant article Why CSS Bugs Me, I’m officially designating this week to be John C. Dvorak week. To help Mr.

W3C Webinar: Mobile Web Design

Bert Bos man Bos has informed me that those boffins (Ed says Oxford English Dictionary: Brit, colloq, a person engaged in scientific research ) at the W3C are offering places at a W3C Webinar on Mobile Web Design.

.net magazine September 1998

Hicks’ (justifiable) excitement about his logo design article appearing in.net magazine (#152 August) has brought back memories for Malarkey.

Done @nd dusted

These last few days I’ve been looking back on @media2006; 800 people, two amazing days and one designer left feeling very humbled by the whole experience.

Code Snippets two-point-oh!

I’m not a user of many web 2.0 applications, although the few that I have bonded with, including Basecamp, Blinksale, Flickr and Ma.gnolia, I use pretty extensively.

Web Accessibility In UK Small Businesses

A dissertation evaluating the awareness of web accessibility amongst UK small businesses. Student Andy Higgs has written an excellent dissertation on ‘ Web Accessibility In UK Small Businesses ’.

IceWeb 2006 presentations

I would like to thank everyone who organised and attended IceWeb 2006. It has been a privilege to have been asked to present my two sessions, How To Be A Web Design Superhero and Feeding your Creativity without Compromising User Needs.

Semantics and design

With everything else that has been going on lately, it’s been a while since I’ve written anything much about CSS. It’s not that I’m any less interested in CSS; infact s e ven’s recent Beta has me more excited than ever about what we will be able to do on a…

Looking forward to IceWeb 2006

April 27th and 28th will see me wrapping up warm, as I’m heading to Iceland for IceWeb 2006; billed as Iceland’s premier web oriented conference.

Re: Help, my head is about to explode

Today I opened my email to find a passionate plea for help from a web designer looking to find good books or articles on web design.

MIX06: Viva Las Vegas

With blue suede shoes on his feet and Viva Las Vegas ringing in his ears, Malarkey can’t help falling in love with Vegas as he reports from Microsoft’s MIX06 conference.

Designing for: The Web Standards Project

SXSWi, The Web Standards Project is changing, entering a new time in its history, opening the hive up to better include the communities and issues we’ve done our black and gold best to represent since 1998.

How To Be A Web Design Superhero

So it’s done. This morning Mr. Budd and I presented How To Be A Web Design Superhero at SXSWi. For budding superheroes, our presentation slides are now online (PDF 13.5Mb). I want to say a great big thank-you to everyone for coming, Mr.

The IE7 MIX 06 release

I am so pleased today to announce that a new beta build of IE7 (I call it the MIX 06 release) will be available from MIX 06, March 20th to 22nd. The new browser will be handed out at MIX and will then hopefully be available from MSDN.

MIX and match events

A busy few months of travel are ahead in Malarkey world. I’m very much looking forward to what’s coming up, to meeting old friends and making new ones.

Taking a Leaf out of an old book

With awareness of standards and accessibility being raised by groups such as WaSP, companies and organisations across many sectors have adopted standards. Sometimes their decision to do so might have been commercial, other times out of a need to comply.

IOTBS: Version 2.1

My good friend (and evil genius) Brothercake has today released an update to Invasion of the Body Switchers. Updating the classic ALA Style Switcher to accommodate multiple users and devices, including some that are not even traditional browsers, all from a…

CSS3 Multi-Column Thriller

Mickey Spillane, Frank Miller, Hakon Wium Lie: Three of my favourite thriller writers. No really, because alongside Spillane’s’My Gun Is Quick’ and Miller’s’The Hard Goodbye’, another thriller hit the book stores web just in time for Christmas; Lie’s CSS3…

More referrer log malarkey

Way back when, I listed my favourite top ten phrases that people search for to find my site. Now thanks to the wonders of MeasureMap, it’s time for ten more.

Designing for: Karova.com

I’ve alluded to it recently, and now after not much blood but one or two tears I’m ready to show and tell. The new design for Karova.com is out there. The new site is geared towards promoting Karova’s development framework).

Heroes of the quiet revolution

At the beginning of last month I advocated a quiet revolution and wrote, Fighting a solitary campaign for standards within any organisation must lead inevitably to frustration if the responses are either negative or apathetic.

Changingman layout

Many thanks for all the kind birthday wishes over the weekend, it’s not everyday that you reach […];). By way of a thank-you to all the kind people that I have met and others who occassionally stumble drunk across my site, here is a layout experiment which I…

Advocating the quiet revolution

Over the last few weeks I have had several interesting conversations with web standards enthusiasts who work within institutions.

Presentation slides

With Molly and I in session for Carson Workshops in only a few weeks and our presentation materials near completion, I have become interested in what audiences need or expect from presentation slides.

Tim Burton’s Corpse Bride online

As standards enthusiasts, I think that we are often guilty of a little navel gazing when it comes to web design. In many open discussions on WSA or Style Gala, the conversation can often turn to the importance of semantics and validation and sometimes (not…

Paul Weller: As Is Now

Released today, Paul Weller’s new album As Is Now isn’t the return to form which I expected. It’s better. A tour-de-force! Weller at his most spectacular for almost ten years.

Treasure (Measure) Map

I’ve been aching to write about Measure Map, the first product from those cool hombres over at Adaptive Path. Now that Jeff Veen has written about Measure Map today, I can hopefully prevent my sides from splitting with gleeful excitement by writing about this…

A very British art

It was announced yesterday that one of the most influential artists of the British 1960’s art movement, Patrick Caulfied, died on Thursday.

Designing for: The Woodland Trust

(This one sneaked out while I was teaching in Cupertino) As a studio we work on a number of e-commerce projects each year.

The return of K9

I’m sorry to all my overseas friends (and possibly those of you under 30) who probably won’t have the faintest clue what I’m talking about, but the BBC Doctor Who web site last week announced the return of the Doctor’s once faithful dog, K9.

Bullet Tooth Web Design (or The Mystery Of Page 196)

I love a good book and nothing helps me relax more than disappearing into a good crime or mystery novel. Mickey Spillane, Elmore Leonard, Colin Dexter, all great story tellers who keep you guessing right up until the last few pages.

A List (taken) Apart

A major brand name redesigning and implementing their web site with web standards can still be big news. When that brand belongs to one of the most influential sites of modern web design, the news is bigger.

Professional CSS: Chapter 8

My copy of Professional CSS arrived on my desk this morning and I was very proud to read chapter eight in which Ethan discusses stylesheet switching and Invasion of the Body Switchers.

A Proud Member

With the launch of the Dutch after school club standards group Happy Clog and the proliferation of WaSP working groups, it seems that (maybe for warmth) standards geeks and designers are cuddling up.

Arrangement de couleurs

One of the things which I love so much about southern France is colour, the way in which man-made colours are affected by the elements and in particular the strength of the sun.

Workshop: CSS For Designers

I’m back. Tanned, rested, fired-up and ready with news of a special design and CSS workshop event happening in November in old London town.

Ghost Town Markup

I’m very lucky. I get to work with some great clients and I’m currently working with a very cool consultancy company. Part of the brief was to do something which no one in his industry had done before and I wanted this to involve code as well as design.

An emotional response

Travelling around the London Underground, it is difficult not to notice a series of posters for the British Legion’s Victory Thanks campaign. Among all the advertising for theatres and stores, these Victory Thanks posters stand out as striking and evocative.

Accessibility and a society of control

Since I delivered my (slightly modified) Anatomy of a Mouse presentation at @media2005, I’ve had time to formalise my thinking about my answer to one of the questions from the audience.

over @nd out

Well, it’s a wrap. @media2005 has drawn to a close tonight and a four hour train journey back to Wales has given me not only the chance for a bit of a snooze, watch Mona Lisa on my iBook but gather my thoughts about the last couple of days of what I hope…

Look out Johnny Foreigner

Dateline London. Later this month, Waterloo in South London will be the place to be as the great and the good gather and @media 2005 rolls into town.

On top form

It’s now only two weeks until @media2005 in London, and the (now sold out) event looks set to be one of the biggest web occassions the UK has seen so far. It will be interesting to see how @media’s style differs in comparison to SXSW.

Too many cooks?

Working with other designers or developers on any project can often be tricky. But imagine what it would be like if there were 29 other people working on the same CSS file!

Way too many cooks

In Too Many Cooks I invited 30 designers and developers to contribute to a single CSS file. It has been interesting to see the CSS styles roll in and now we have a finished result.

Musical baton

I’ve been passed the baton by John Oxton in a new musical pass the parcel, so I thought I’d use this to explore the depths of my record collection. 9.65Gb on my PC laptop. (Oh how I’m looking forward transfering it to my (soon to be arriving) iBook.)

And more (design) Malarkey

I want to say a huge thank-you for all the kind comments about my new design. As you can imagine, a lot of time goes into making a total redesign, and often designing for yourself is harder than designing for client projects.

And all that (CSS) Malarkey

Applying id and (multiple) class attributes to the element is a fantastic way to turn the same XHTML configuration into multiple design layouts without the need for adding different attributes to div elements.

And all that (Design) Malarkey

It’s here. I’ve been meaning to redesign this site for a little while now and since I have emerged from my black, depressive state, the urge was getting too strong to ignore. I just had to do it.

The all new And All That Malarkey

Well, I’ve been hinting at it for a little while now and now here it is, an all new And All That Malarkey. Not simply a lick of paint, but a complete new design, ground-up re-code and a CSS shake-up.

Colour: Color Palette v1.2

Some of you may remember that one of my first (and most visited) columns way back in May last year was about creating colour palettes from only two colours plus black and white.

IOTBS: Look Who’s Switching Too

Evil genius Brothercake has been busy in his secret laboratory and the result is a chicken with eight legs massive update to IOTBS - a full new version 2 release entitled’IOTBS: Look Who’s Switching Too’.

Party political’con’ fab

With less than a month to go until the General Election, here in the UK you can’t seem to get away from inanely grinning politicos squeezing palms and kissing babies for the cameras.

New Tory poster campaign

I wrote a little while ago about the UK Labour Party’s early campaign posters and now with the capitalist scam democratic process well underway here, I thought I’d take a look at what the UK Conservative Party is hoping will grab our attention and make us…

A rule of thumb

As some of you might know, I like to work on e-commerce store designs. Part of what fascinates me about making sites designed to do business is the psychology of designing for e-commerce.

What’s in YOUR name?

Drive through most towns in the UK (and probably elsewhere in the world) and you’ll see a hairdresser in the main street.

MIR image replacement

Image replacement is a topic which keeps reappearing on websites and in books. There are whole sections devoted to the pros and cons of each method in books such as Web Standards Solutions and The Zen of CSS Design.

SXSW: It’s a wrap

I’ll never be able to show my face in Austin again, and I’d like to take this opportunity to apologise publically to… All that’s left to say is an enormous thank-you to everyone who made me and the rest of the Brit Pack sooooo welcome in Texas.

Announcing Professional CSS

SXSW was the venue for Ethan Marcotte to announce the up-and-coming publication of Professional CSS, a new book by Christopher Schmitt, Dan Cederholm, Porter Glendinning, Mark Trammell, Dunstan Orchard and Ethan himself.

Design mood-boards

A while ago (when I couldn’t sleep), I sat up late watching re-runs of home decorating shows on UK TVStyle, a channel wall-to-wall with house make-overs.

Turning Japanese

Back in November I was approached for an interview by a very nice chap from Japan, Yasuhisa Hasegawa, who was writing a book on design and web standards. I’m sure that Yasuhisa won’t mind me quoting a little bit from his email to me.

Work smarter with Fireworks symbols

I’ve written in previous columns about how working with wire-frames and grey-box page layouts during a site’s planning and early design stages can improve efficiency and enable client sign-off points.

Decorate my studio

Some of you may recall that way back in June last year, Stuff and Nonsense grew up, moved away from home and got a place of its own. I wasn’t so sure about the move at the time, but (happily) I was proved wrong and it’s been a good move.

Designing for: Dig Business

It’s always gratifying when someone calls or emails out-of-the-blue and says something like, Can you do… for us?. It’s even nicer when that person is halfway across the world.

CSS: Hold the front page

I’ve been experimenting with a’magazine contents’ or news style page for a current project and thought I’d give it a whirl here.

Introducing Holly Lloyd

Oooo, how I envy real artistic talent - to be able to create a piece of artwork from nothing more than paper or canvas, pencils or paints is a talent I wish I had more of.

New Labour poster campaign

Oh my kiddy aunt, it’s started already. Driving through Warrington yesterday, I caught my first glimpse of the UK Labour Party’s first campaign posters for the up-and-coming (to a church hall near you) General Election.

Copy copy

It seems to be the season for discussion on rips, with Shaun Inman and Dave Shea both again highlighting design theft and the most professional methods for dealing with such occurrances. I’m not interested in going over old ground.

@media 2005 conference

London is most definately the place to be in June this year. Why? Well @media2005, that’s why! With speakers including Jeffrey Zeldman, Joe Clark, Douglas Bowman, Patrick Griffiths, Andy Budd, Jeremy Keith and, err, me … this looks like the web event of the…

Fighting off design Stalinism

Jason Santa Maria recently published a highly insightful article Fighting Off Design Stagnation in the latest issue of Design In-Flight magazine. This is the first time I have read DIF and I am genuinely impressed.

CSS: Mark-up guides

Whether working alone or as part of a team, there are many separate tasks in any project. If you are working as a team it is important that everybody involved understands the structural requirements needed to implement a design, and even if working alone it…

Design like it’s…

When I was working (on my own) in the studio between Christmas and New Year, I played the Live Aid DVD which the guys bought me for my birthday.

Black and white: Day five

We are in the final stages of completing our project for Young Flintshire, an initiative for young people in the county. And the process of design has taken many things from the stuff that I have talked about this week.

Black and white: Day three

Most recently, Paul Chadwick has recieved much critical acclaim for his work on comic-book movie tie-ins such as Star Wars and the Matrix.

Black and white: Day four

I love comic books (you might have guessed that already), not just because of the stories or the artwork (or because I long to wear a cape and jump off the wardrobe), but because I admire the’process’ and teamwork which goes into creating them.

Black and white: Day two

Two of my favourite comic books artists excel in black and white illustration, the first, Frank Miller is better known for his work on Batman: The Dark Knight Returns and more recently, Sin City.

Black and white: Day one

When I didn’t know what colour to put down, I put down black. Black is a force: I depend on black to simplify the construction.

Accessibility: On a shoe-string

Testing a site design to ensure the widest practical audience should be an essential part of the design process on every web site. Of course in an ideal world, every web site developed would be tested both for usability and accessibility using real people.

Accessibility: Panning for gold

I’ve been meaning to write more about my current thoughts on accessibility for a while now. In the last week I received (among many) some interesting emails on the subject and this has spurred me into writing.

ECMOD Awards

NB: This article refers to a prior version of the WWF UK online store that I designed in 2004. I was pleased to learn yesterday that our work has won the ECMOD 2004 (European Catalogue and Mail Order Days) Best Charity/Good Cause Related Catalogue Award for…

Three designs

I thought that it might be fun to talk a bit more about design for a while rather than standards, and release a few work-in-progress designs for sites that will be launched in the next few weeks.

But where are the cows?

Here it is, the new Stuff and Nonsense portfolio site. I always find it hard to design our own company portfolio site. So this time I took a different approach and decided to concentrate on the content first and let content dictate the design.

Why do I do what I do?

Saturday afternoon was spent in pleasant company at Tate Modern, walking the galleries and thumbing through hefty books in the shop. Conversations were often focussed on the arts and there were some very thought provoking works to see.

What can we talk about now?

it made me sit back and wonder if’we’ in the web-standards’community’ have anything left to say about standards. It’s been a short, but busy few years since deploying standards for day-to-day, commercial web ventures became practical.

Web design depth of field

Photographers commonly use depth-of-field to emphasise certain parts of image by de-focusing others such as backgrounds. Our eyes are naturally drawn to the sharpest part of any image.

Power to the people

(For the non-Brits (or anyone too young to remember), the picture is actor Robert Lindsay in the BBC’s 1977 sit-com, Citizen Smith written by John Sullivan who went on to write Only Fools and Horses.

3d CSS Zen Garden

I’ve been thinking about making a CSS Zen Garden entry for a little while now, but before I think about design, I wanted to understand the Garden’s XHTML structure.

Anatomy of a mouse

Day four: I couldn’t say thank-you enough to all the people who left kind comments about the 2004 Disney Store UK project, here, at CSS Beauty, CSS Vault, and Style Gala.

Anatomy of a mouse

Day three: I ran through how the 2004 Disney Store UK was developed, looking specifically at XSLT. The 2004 Disney Store UK website was developed using an ecommerce platform called Karova Store.

Anatomy of a mouse

Day one: A skip through some of the markup and styles I used on the 2004 Disney Store UK store. One of the things that I found fascinating then about working with CSS was the application of new techniques to solve the real dilemmas which crop up during a site…

Disney Store UK store

It was a busy ten days in the web-standards world. Jeffrey Zeldman was a new dad (congratulations) and Dave and Doug made big noises in Australia at Web Essentials. Here was my news in October 2004.

Time for a paint-job

It’s been a very busy few months in Malarkey world. (I’ve got a big announcement to make tomorrow.) Anyway, as our American cousins have been splashing blood around their sites in the run up to Halloween, I thought that I would splash a little colour around…

Style-sheet ordering

When awarding the latest version of the Mozilla site a WSA Silver Star, Johan pointed to the mozilla.org Markup Reference.

Accessibility footnotes

Following on from the recent discussion about accessible alternatives for complex graphics and images, Bob Easton made an interesting point which compounds browsers’ lousy support for the longdesc attribute, Yet another reason to avoid LONGDESC … There is…

Underpants over my trousers

I need your advice on something please guys, if you can spare the time. I started this site for a number of reasons, most of them pretty half-baked.

Empire Hotel: Then and now

This is likely to be my last column before I take off for France on Saturday for a two week holiday with Sue and Alex. We have just completed a small site redo for a long standing client, the Empire Hotel in Llandudno, North Wales.

WWF UK online store

In 2004—after eight weeks, 1,600 cups of coffee, 1,920 cigarettes, 16 pork sausages and one instant BBQ—I was pleased to announce the launch of a new online store for WWF UK.

Find your way back

Stuff and Nonsense is in the final stages of testing a new e-commerce store for a client (more about that when the site goes live on Wednesday).

Fluid and fantastic

I’ve been doing a lot of thinking about fluid layout design over recent weeks and have made it my goal to attempt fluid (or fluid/elastic hybrid) layouts with each new design. And you know what? It’s a damn site harder than I thought it would be.

Fixed or fluid, you decide

In a recent conversation with Swedish web accessibility advocate Tommy Olsson, Tommy impressed on me again the importance of fluid, rather than the more commonly used fixed-width design techniques that I and so many others designers favour.

Wearing badges is not enough

A discussion at Accessify got me thinking about the usefulness of compliance badges or icons. What purpose do they serve the public who have little knowledge or interest in accessibility or code validity?

Time travelling tags

Looking back at an old site I made for a client made my rethink the way that that I have been coding my sites over recent months. So much so, that I thought I’d look again at the code structure of this blog and redevelop the HTML in a totally different way.

What’s in a name (pt2)

Eric Meyer’s recent comments about my original What’s in a name column have prompted me draw some conclusions from the comments and suggestions made on And All That Malarkey and elsewhere. First I want to lay a few ghosts to rest.

Something about Fireworks (day 2)

Forgive me if you think that I’m a lot obsessed with colour and with Macromedia Fireworks at the moment. If you’re bored with both these topics, play with this instead.;).

Fireworks and XML (pt1)

In the first of an occassional column on one of my favourite graphics applications (the largely under-rated) Macromedia Fireworks, I thought I’d write about how I often use a combination of Fireworks MX and XML to create a site-full of graphical text headers…

Dear Mr. Google

I love you. I have loved you as far back as I can remember. I think I have always loved you. I visit you many times every day and sometimes when I am sleeping, I dream that you come to visit me too.

E-commerce definition lists

A number of designers and developers have asked me for recommendations on how to layout product range pages using semantic mark-up and CSS. So I decided to write a mini tutorial for our training manual and try it out here first.

Web imitates football

Cum on Eng-er-laaand! It’s only five days until our boys take on France in Euro 2004. So to get us in the mood for some superb footy action, here is my Web Imitates Football Quiz. Can you guess which European team strips inspired these colour palettes?

Living without TextPad

I have been pondering whether or not to replace my personal design machine with a shiny new Apple PowerBook. A new Mac will certainly give me the power and flexibility that I need and looks sooooo sexy too!

What’s in a name

Andy Budd wrote about Semantic Coding and said, This got me thinking about the benefits of naming conventions and I began to realise that these conventions matter, not just for the sake of web designers (and easier site redesigns), but for users too!

Getting client sign-off

An eagerness to please should always push a designer to do the best for a client. But there are times where just when you thought the job was finished, a client will say, Can we just add… The four stage sign-off sheet can be our best friend.

Flintshire Youth illustrations

As part of a current young peoples’ project for our local Flintshire Council, Stuff and Nonsense has commissioned the talents of a young illustrator, Holly, to design a cast of characters for a new web site.

Stylish, accessible forms

I can’t think of many web sites that don’t include at least one form, and I can’t think how many times I have compromised on a form’s visual design because of looming deadlines, leaving a Must get around to styling this form properly comment in the code.

Web Standards Awards

Today I discovered that the fantastic Cameron Adams had nominated our work for Goppa Fireplaces for a Web Standards Award. My smile got so big that my face almost split, thanks Cameron!

Web imitates art

My recent post on creating colour palettes, combined with a conversation on painting with my friend Sue, (a Fine Art student at Liverpool University) got me thinking more about colour inspiration for web design.

My wireless home

Over the weekend, I installed iTunes on all the computers in the design studio and centralised our entire CD collection on the server.

An objective look at IE CSS

Standards-based designers often appear to loath Microsoft’s behemoth browser, sometimes for good reasons. Internet Explorer’s patchy support for W3C CSS (particularly attribute selectors), its non support for the abbr tag or PNG transparency on the Windows…

Creating colour palettes

When I am designing a colour scheme for a client site, I am often lead by the colours used in existing logos or publicity materials. But when the client only uses one or two colours, I use a favourite technique for creating complimentary tones.

Ambition No.337

Way back when the web was young and active volcanos spewed molten rock into the sea just north of Morecambe, I dodged falling boulders and lava flows and headed into my local bookcave.

An ecommerce strategic partnership

When I sold my shares in Karova earlier this year, many people wrote to me asking whether or not I was still using Karova Store (KS2) accessible, css based e-commerce software for my clients and whether I would still recommended it to them.

And all that Stuff and Nonsense malarkey

Back in June 2004, I wrote about a new chapter in the story of Stuff and Nonsense, the design company that I have owned since 1998. It was at that time that I combined the running of the two businesses that I owned, Stuff and Nonsense and Karova.

Editorials

It is the first new month after the relaunch of And All That Malarkey and for the redesign I introduced a new Editorials category. As a single author site, you might be wondering why there is a need for such a category.

Reg and his Rhodesian ridgeback

About thirty years ago, my Mum had a friend called Reg, an ex-army chappy with a gruff manner and a rhodesian ridgeback dog called Simba. It was a huge creature. But this is not about Reg, or his dog.

The business of design

With the many excellent design and CSS resources and blogs available, there seems little point in my humbly chiming in. Nor can I compete with the staggering talents of Shaun or Jon.

WWW 2006 presentation

I was very pleased to have been invited by Bert Bos to briefly speak alongside him and AOL’s Kevin Lawver at WWW2006 in Edinburgh.

Categories


Andy Clarke. Web design pioneer

Andy Clarke

I’m Andy Clarke, a product and website designer. My work blends art direction, branding, and editorial to help people improve their products and websites. I’ve written books about website design, given talks, and delivered design workshops worldwide.