I’m taking on new projects next month. Start a conversation

Stuff & Nonsense product and website design

CSS Tricks

Getting creative with the Measure

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

Getting creative with small screens

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

Getting creative with shape-outside

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

Getting creative with images in long-form content

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

Getting creative with quotes

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

Getting creative with versal letters

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.

Getting creative with HTML dialog

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

Revisiting Image Maps

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

Revisiting CSS border-image

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

Revisiting CSS Multi-Column Layout

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

Tags


Andy Clarke. Web design pioneer

Andy Clarke

I’m Andy Clarke. I’ve spent over thirty years helping businesses, charities, and organisations create distinctive websites. I’m also the author of books on web design.