Category: Writing

Yours truly over at the Smashing Magazine: “CSS relative colour values are now widely supported. In this article, pioneering author and web designer Andy Clarke shares practical techniques for using them to theme and animate SVG graphics.”

Yours truly over at the Smashing Magazine: “In this article, pioneering author and web designer Andy Clarke shows his techniques for creating Toon Text titles using modern CSS and SVG.”

Yours truly over at CSS Tricks: “I spend an unhealthy amount of time on the typography in my designs, and if you’ve read any traditional typography books, you might remember “the measure.” If not, it’s simply the length of a line of text. But measure means more than that, and once you understand what it represents, it can change how you think about layout entirely.”

Yours truly over at the Smashing Magazine: “SVG is one of those web technologies that’s both elegant and, at times, infuriating. In this article, pioneering author and web designer Andy Clarke explains his technique for animating SVG elements that are hidden in the Shadow DOM.”

Yours truly over at CSS Tricks: “Over the past few months, I’ve explored how we can get creative using well-supported CSS properties. Each article is intended to nudge web design away from uniformity, toward designs that are more distinctive and memorable. One bit of feedback deserves a follow up.”

Yours truly over at the Smashing Magazine: “SVGs, they scale, yes, but how else can you make them adapt even better to several screen sizes? Web design pioneer Andy Clarke explains how he builds what he calls “adaptive SVGs” using symbol, use, and CSS Media Queries.”

Yours truly over at CSS Tricks: “There are so many creative opportunities for using shape-outside that I’m surprised I see it used so rarely. So, how can you use it to add personality to a design? Here’s how I do it.”

Yours truly over at CSS Tricks: “When you picture placing images in long-form content — like articles, case studies, or reports — the standard approach is inline rectangles, breaking up blocks of text. Functional? Sure. Inspiring? Hardly. So, how do you use images to add personality, rhythm, and even surprise someone along the way? Here’s how I do it.”

Yours truly over at CSS Tricks: “How do you design block quotes and pull quotes to reflect a brand’s visual identity and help tell its story? Here’s how I do it by styling the HTML blockquote element using borders, decorative quote marks, custom shapes, and a few unexpected properties.”

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

Yours truly over at CSS Tricks: “How can you style drop and initial caps to reflect a brand’s visual identity and help to tell its stories? Here’s how I do it in CSS by combining::first-letter and initial-letter with other unexpected properties, including border-image, and clip-path.

This year, I’ve been writing a monthly column on web design inspiration for my friends at Envato. It’s a series about finding inspiration in unusual places and applying what we find to product and website designs. Here’s a recap of the articles so far.

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

Yours truly over at the Smashing Magazine: “What’s the best way to make your SVGs faster, simpler, and more manageable? Andy Clarke explains the process he relies on to prepare, optimise, and structure SVGs for animation and beyond.”

Yours truly over at CSS Tricks: “How can you take dialogue box design beyond the generic look of frameworks and templates? How can you style them to reflect a brand’s visual identity and help to tell its stories? Here’s how I do it in CSS using::backdrop, backdrop-filter, and animations.”

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

Yours truly over at the Smashing Magazine: “Now, you might’ve heard that SMIL is dead. However, it’s alive and well since Google reversed a decision to deprecate the technology almost a decade ago. It remains a terrific choice for designers and developers who want simple, semantic ways to add animations to their designs.”

Yours truly over at the Smashing Magazine: “What if you could take your CSS animations beyond simple fades and slides—adding an extra dimension and a bit of old-school animation magic?”

Yours truly over at the Smashing Magazine: “Have you ever thought about how the limitations of early cartoon animations might relate to web design today? From looping backgrounds to minimal frame changes, these retro animation techniques have surprising parallels to modern CSS.”

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

Yours truly over at CSS Tricks: “Designing Mike Worth’s website gave me a chance to blend expressive design with modern development techniques, and revisiting image maps reminded me just how important a tool image maps were during the period Mike loves so much.”

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

Yours truly over at CSS Tricks: “I’ve used border-image regularly. Yet, it remains one of the most underused CSS tools, and I can’t, for the life of me, figure out why. Is it possible that people steer clear of border-image because its syntax is awkward and unintuitive? Perhaps it’s because most explanations don’t solve the type of creative implementation problems that most people need to solve. Most likely, it’s both.”

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

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

Yours truly over at CSS Tricks: “Honestly, it’s difficult for me to come to terms with, but almost 20 years have passed since I wrote my first book, Transcending CSS. In it, I explained how and why to use what was the then-emerging Multi-Column Layout module. Yet, CSS Columns remains one of the most underused CSS layout tools. I wonder why that is?”

Back in 2005, my friend Drew started a Christmas advent calendar website and asked me if I’d write something for it. Of course, I agreed, and my first 24ways article was “Z’s not dead baby, Z’s not dead.” It was a short piece how z-index and positioning in CSS could “be used to create designs which ‘break out of the box.’ This year, I returned that topic in what will be my fifteenth and final article for 24ways.

I wrote Transcending CSS: The Fine Art of Web design, way back in 2006. As I explained, writing my first book was a challenge, personally and professionally.

One message I wanted to put across when writing my new book was that there are already examples of art direction on the web, in products and on websites. I wanted to showcase some examples in a series of case studies.

Last year, Rachel Andrew wrote an article that took a new look at CSS Shapes in which she reintroduced readers to the basics of using CSS Shapes. In a new tutorial for Smashing Magazine, I expand on the topic of Art Direction for the Web with CSS Shapes to create exciting and inspired new design ideas.

Over on 24ways, my fourteenth contribution in as many years is a tongue-in-cheek look back at how we developed websites when I started my company in 1998. In ‘ Designing your website like it’s 1998 ’ I explain how I would’ve developed a design for ‘Planes, Trains and Automobiles,’ one of my favourite Christmas films.

On a change from the usual date–for the past eight years I’ve been published on 23rd December—I’m back on 24 ways again this year with a new article about Designing Imaginative Style Guides.

I doubt that anyone except me and 24 ways creator Drew MacLellan have noticed, but since my original Contract Killer in 2008, I’ve had an article published by 24 ways every year on the same day, December 23rd. Even after seven years, I don’t take that spot for granted and I was really chuffed when Drew asked me to write again this year.

The new Hardboiled Web Design Fifth Anniversary Edition is now available to buy from Smashing Magazine, in a beautifully printed softcover book and all ebook formats. I also have a bit of a confession to make.

When Mark Boulton and I were planning the first edition of Hardboiled Web Design, we both knew who we wanted to illustrate the cover, Kevin Cornell. Kevin’s interpretation of the hardboiled detective theme was so perfect that I couldn’t have imagined anyone else illustrating for Hardboiled.

My small contribution to 24ways, Z’s not dead baby, Z’s not dead blinks sleepily into the daylight today. The use of positioning together with z-index has been a little out of favour recently.