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.

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

Although we’ve had a smattering of snow here in the Rhineland—where I’m basing myself for a couple of months—at home, an “arctic blast” means snow is threatening. Last week, I added a snow mode to my websites, but my pioneer characters still looked toasty and warm, and unaffected by the wintery conditions. So, it was time for them to get chilly.

I redesigned my contact page animation as a gold mine scene. Here’s how I approached the artwork, structured the SVG, and added subtle ambient animation using CSS.

Winter’s definitely arrived, and there’s a chill wind blowing. We haven’t had snow in the village yet, but it’s falling on my website, courtesy of a new ‘snow mode.’

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

I mentioned last week that as well as expanding my Toon Text styles gallery, I’d added a Toon Text generator to help me (and you) create text in the style of those classic cartoon title cards. Now, I’ve launched a major update to both.

Partway through writing an upcoming article for Smashing Magazine, I decided it would be helpful to have a tool to generate text styled like that in my beloved cartoon titles. So I made one.

You know what it’s like. You decide to make a fun little side project. No need to integrate it into your main codebase. It doesn’t have to have compatible CSS or HTML, so no worries. Then you make another one. Same deal. Then another. Oh. All of a sudden, you have several projects, and there are annoying differences between them.

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

Last week, I explained my strategy for writing CSS selectors. Today, I’ll explain how I decide on and design layouts. It isn’t really about grids; it’s about a repeatable way to make layout decisions.

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

Writing good CSS is all about restraint. As an example, I used to over-specify too many things in my stylesheets. It was a bad habit picked up from BEM, OOCSS, and from developers who flattened everything with classes to dodge specificity. Now I think of my CSS selector strategy as a “progressive narrowing of scope.”

When I’ve had a few spare minutes, I’ve been adding to and optimising my Magnificent 7 character animations to improve rendering speed. Then I had the idea to build a silly fairground-style shooting game, and I set myself the challenge of keeping it as small as possible.

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: “Ambient animations are subtle, slow-moving details that add atmosphere without stealing the show. In part two of his series, web design pioneer Andy Clarke shows how ambient animations can add personality to any website design.”

It’s incredibly important to respect people’s preferences and to ensure that any movement is turned off when they’ve set “reduced motion” in their OS settings. After adding my Magnificent 7 animations yesterday, I went back to check them with reduced motion enabled. Oh hell, my CSS grid has also stopped working, and it took me all morning to realise the issue wasn’t the grid, but how I’d structured my 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.”

I have to admit that I got a little over-excited when I read that the contrast-color() function is supported in Safari and was keen to try it out. But there’s a problem, the thing with contrast-color is…

Before my workshop last week, I made some changes to my Compound grid generator. After the workshop, I made a new grid generator tool, this time designed to create modular grids.

To get ready for my first practical layout workshop for designers this week, I upgraded my compound grid generator with a new and improved version.

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

Lately, while I’ve been making my Toon Titles and writing about SVG animations, I’ve been pondering where the sweet spot is between CSS and GSAP for animations. This Toon Title, featuring Hanna Barbera’s Quick Draw McGraw in his alter ego El Kabong, illustrates it nicely.

I’ve always loved it when designers take the time to give their blog posts a little extra polish. Jason Santa Maria did this brilliantly on his old site, and my design hero, Trent Walton, made each post feel like a one-off. With my recent code overhaul, I thought—why not do the same?

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.

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

Working on a design for composer Mike Worth gave me an idea. What if I created animated title cards inspired by classic Hanna-Barbera cartoons? Thirty-five SVG animations later, Toon Titles Series 1 is complete. These are based on artwork from the first appearance of Yogi Bear in The Huckleberry Hound Show.

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

This time, I put GSAP and SMIL to one side and made a Toon Title using only CSS animations. It’s based on Bewitched Bear, a Yogi Bear cartoon from January 1960. I’ve written a detailed write-up on optimising SVGs for animations which will be published on Smashing Magazine over the next few weeks.

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

Designing for Mike Worth’s new website reminded me how much I love classic cartoons. So, after handing over his design, I carried on exploring CSS, SVG, and SMIL animations. I now have a growing collection of Toon Titles.

I now have a growing collection of Toon Titles. But while making them, I discovered two gotchas, which I haven’t seen documented. One for Firefox, the other for Safari.

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

Kingdom of the Planet of the Apes is out and I’m seeing it this coming Saturday. I’m so excited that I decided to update one of my responsive easter egg headers— Kerfuffle on the Planet of the Apes —with more efficient, modern code. In this final post of the short series, I’ll explain how I added animations and subtle transitions to bring the design to life.

Kingdom of the Planet of the Apes is out, and I’m so excited that I decided to update one of my responsive easter egg headers— Kerfuffle on the Planet of the Apes —with more efficient, modern code. Today, I’ll explain how I made the layout using a combination of container queries, Flexbox, and grid.

I don’t look at my analytics often, but after last week’s site revamp, I thought I’d check to see which pages were popular. Oddly, a post in my ancient archives about CSS specificity had been getting a fair few Google referrals, so I decided to spend a few hours updating that, too.

This week, I launched Design Chatter. It’s a weekly one-hour Zoom call where like-minded designers can give each other constructive, friendly feedback.

One of my favourite CSS writers Ahmad Shadeed has written about CSS Masking and I thought I could put his techniques to good use on Emma’s website.

Emma Bodger is a film/television producer, and recently, I’ve spent time working on her visual identity and a new website. It’s been a lot of fun, and I also learned more about SVG while working on it. I’m digging into the details this week, and today I’ll reveal the Easter Egg theme which I hid on Emma’s website.

Emma Bodger is a film/television producer, and recently, I’ve spent time working on her visual identity and a new website. It’s been a lot of fun, and I also learned more about SVG while working on it. I’m digging into the details this week, and today I’ll explain how I made experimental banner images for Emma’s home page using SVG masks.

Emma Bodger is a film/television producer, and recently, I’ve spent time working on her visual identity and a new website. It’s been a lot of fun, and I also learned more about SVG while working on it. I’m digging into the details this week, and today I’ll explain how I made an experimental word search concept for Emma’s home page.

Emma Bodger is a film/television producer, and recently, I’ve spent time working on her visual identity and a new website. It’s been a lot of fun, and I also learned a few things while working on it. I’m digging into the details this week, and today I’ll explain the pseudo-3D design I created for Emma’s home page banner.

Emma Bodger is a film/television producer, and recently, I’ve spent time working on her visual identity and a new website. It’s been a lot of fun, and I also learned more about SVG while working on it. I’m digging into the details this week, and today I’ll explain the SVG filters I created to transform images on Emma’s website.

After writing yesterday’s blog entry on Re-coding Apple’s Black Friday dates I realised I had missed the bleedin’ obvious solution. That instead of wrangling CSS and HTML, SVG could’ve been the better option.

In a video of one his talks, Andy Bell mentioned CUBE CSS and his approach to using data attributes for variations (exceptions) to design styles. I’m currently working on a grid system for a product project and revamping my Layout ❤︎ templates, so was keen to implement this approach.

Most parts of Apple’s website are fabulously flexible. But today, I was browsing for Black Friday deals and found a fixed-width design element which I was determined to make flexible.

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

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

Safari Technology Preview is my every day browser. When the latest version dropped, a feature in the release notes interested me. It was experimental support for three new relative colour CSS values. So, I tried what’s possible now.

There’s been a meta tag for specifying a theme-color for UI elements on websites for a while. If you’ve used it, now’s time to change that element along with the upcoming version of Safari.

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

Let’s face it, unless you develop a complex product—and even if you do—you probably don’t need half the humungous hunk of CSS you bung at a browser. In fact, it’s possible you only need one default and one alternative style for every element.

Sam Sycamore tweeted a utility class for breaking an element out of its container to fill the full width of a page. It prompted me to think about how and when to use utility classes.

I’ve said over and over again that a well-chosen grid can do much, much more than align content. The choice of grid can influence how we approach a design, it can change how we think.

Given that SVG makes it possible to create cool compositions of images and text, I’m surprised I rarely see designers and developers using it for more than just icons.

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.

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.

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.

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.

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.

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.

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.

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.

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.

I know some people swear by frameworks and I do understand why, although my work rarely needs them. I also appreciate why some people find the grids component in frameworks useful. But, to me, including a framework just for its grid has always seemed excessive. Particularly when there are other ways to develop reusable layout components which are far less generic, but no less flexible than a framework.

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.

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.

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.

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.

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

Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 21 and my design this week was inspired by art director Alexey Brodovitch.

Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week twenty and my design this week was inspired by rebellious British designer Neville Brody.

Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week nineteen and my design this week was again inspired by Italian graphic designer Giovanni Pintori.

Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week eighteen and my design this week was again inspired by Italian graphic designer Giovanni Pintori.

Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week seventeen and my design this week was again inspired by Bradbury Thompson.

Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week sixteen and my design this week was inspired by Italian graphic designer Giovanni Pintori.

Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week fifteen and my design this week was again inspired by Herb Lubalin.

Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week fourteen and my design this week was again inspired by Max Huber.

Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week thirteen and my design this week was inspired by art director and graphic designer David Carson.

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.

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.

Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week ten and my design this week was inspired by Czechoslovakian born graphic designer and typographer Ladislav Sutnar.

Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. My design this week was again inspired by graphic designer and typographer Herb Lubalin.

Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. My design this week was inspired by American modernist graphic designer, Lester Beall.

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.

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.

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

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.

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.

Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. My design this week was inspired by graphic designer and typographer Herb Lubalin.

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.

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.

While developing prototype designs for a French football magazine, I came across a strange bug when Chrome’s translate feature comes into contact with CSS generated content.

While I was researching typefaces for a new project, I came across Dalton Maag’s case study for Universal TV. The type is beautiful, of course, but it was their graphics which got my attention.

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.

It’s 20 years to the day since my wife, and I started Stuff & Nonsense, our little studio and my outlet for creative ideas on the web. Over on 24ways, it’s also my fourteenth article, this time how to Design your site like it’s 1998. It’s a tongue-in-cheek look back at how we developed websites when I started my company, complete with not so old favourites like font elements, frames, layout tables, and spacer gifs.

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.

If you liked my Specificity Wars, you’re going to love Mandy Michae’s Batificity.

Here’s a quick entry about something I learned just this week about:not() pseudo-class selectors and how to combine them.

It’s been a while since I’ve written seriously, but since I started working on my new ‘ Art directing for the web’book, I’ve got the bug. So when Smashing Magazine asked me to write for them again, I couldn’t resist. My latest article, on ‘Art Directing For The Web With CSS Grid Template Areas’ was published today and I’m very pleased with how it turned out. You can read it here.

Over the next few weeks, I’m going to share some of the things that I’ve learned while designing and developing Inspired Guides, starting today with using HTML entities as separators in breadcrumb navigation.

In all my travels I’ve not yet been to Berlin. That’s changing in November when I’ll be appearing at the fabulous beyond tellerrand.

The Guardian’s Kaelig Deloumeau-Prigent recently wrote about their struggles and strategy for dealing with Internet Explorer 8. People visiting my site using Internet Explorer 8 are few and far between these days, but those that do could be good customers, so with our redesign I wanted to make a real effort to give them a good experience.

Apple doesn’t have what many of us would consider to be a fully responsive website, but that doesn’t mean they don’t sometimes use two of Ethan’s ingredients; flexible media and CSS3 media queries, to improve the placement of some elements on an otherwise fixed page.

Exactly ten years ago today, on October 20th 2003, A List Apart published Doug Bowman’s Sliding Doors of CSS.

I sometimes work with other designers helping them to translate their design atmosphere and wide screen layouts into responsive designs. Breaking down their designs into systems is big part of what I do. In practical terms that means working through what are sometimes dozens of static visuals to identify patterns of typography, use of colour and layouts, both smaller modules and whole page compositions. From these patterns I classify and identify elements and compose stylesheets based on them.

Following up on my M M M Madness post, here are two good links to more on CSS filters: Creating iOS 7 effects with CSS3: translucency and transparency John Allsopp recreates iOS7’s translucency and blur using CSS filters. I suspect we’ll see a lot more of this design aesthetic on the web in the months to come. Create impact with CSS filters video presentation from Alex Danilo Alex Danilo’s presentation on CSS filters from Web Directions Code in Australia is well worth your time too. My prediction? Designers are going to go CSS filter crazy over the next year.

While I was preparing the slides from my full day CSS3 For Responsive Web Design at Smashing Magazine, I got very excited by the new filters in CSS. (313 onwards in my slide deck.) These filters — not to be confused with those legacy, proprietary Microsoft filters — are now well on their way to becoming part of a standard.

I’ve just come back from a trip to beautiful Freiburg in southern Germany where I hosted my new CSS3 For Responsive Web Design workshop at Smashing Magazine. I went to Freiburg last September when Alex and I attended Smashing Conference and we had a brilliant time. The folks at Smashing Magazine were genuinely welcoming and I jumped at the first opportunity to work with them again.

I have been stung by this. So. Many. Times. The current release of Rock Hammer gets this wrong too, — which is probably why I get stung so often — so I’ll update it with this today.

I’m struggling to believe it quite frankly, but The CSS Zen Garden was planted ten years ago today. I don’t think we should underestimate the importance of The CSS Zen Garden in the history of the web. Its influence still resonates today. Now it’s back accepting submissions and making some of us feel very old.

My Responsive Web Design workshop at Smashing Magazine is getting closer and some tickets are still available. In the meantime, here are three useful new resources for responsive layout using CSS3:

Endless possibilities for mischief.

Flexible layouts. Equal height columns. Presentation independence from your HTML source order. These things haven’t been so easy to achieve with CSS — until now. The flexible box layout, the new flexbox specification, makes creating any of these layouts easy and much more. Backwards compatibility is still an issue, but there’s no doubt that flexbox is (part of) the future of CSS layout.

We know that it’s only web designers who habitually resize a browser window to see if a site’s responsive. But why not reward their dedication with a little something special? Add this to your stylesheet: @media only screen and (min-width: 960px) and (max-width: 970px) { body { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } } This could be the most essential CSS3 media query you’ll need today.

Following on from Three clever people talk about CSS layout, here’s more from Zoe Mickley Gillenwater on Flexbox including a handing comparison between the current specification (2012) and the 2011 syntax implemented sadly by Internet Explorer 10.

Not since the turn of the century, when we largely shifted from using CSS positioning to floats, has CSS layout been so interesting. Here are three great reads from just today that are all worth your time: Strong Layout Systems by Eric Meyer Jeremy is at An Event Apart in Atlanta, and reports on Eric Meyer’s new talk, Strong Layout Systems in which Eric speaks about flexbox and grids, both new CSS modules that were created specifically to allow us to create layouts. Using Flexbox: Mixing Old and New for the Best Browser Support Chris Coyer Coyier (who deserves a medal for the work he does (and his name spelling correctly, sorry) ) weaves together old and new flexbox syntaxes for better browser support. Anything lower than or equal to Internet Explorer 9 is still tricky though, so you’ll still need to get handy at designing around that problem. CSS3 Layout presentation at In Control Orlando Back at a conference, this time in Orlando, Zoe Mickley Gillenwater also spoke about CSS layout techniques including Grid Layout and Flexible Box Layout. Her slides are available on Slideshare, then check out her post as it’s full of examples and resources. PS: If you can remember either The Noodle Incident or Position Is Everything, it’s past your bedtime.

Microsoft launches Windows 8 in just a few days, so now’s a good time to turn our attention to Internet Explorer 10. Here are two links to help you get prepared:

The app uses regular expressions to find the parts of the selector which contribute to specificity. It highlights each part with a background colour to help you learn the specificity rules. Then of course, there’s always Star Wars.

This seems like a lot of work, but I am acutely aware how large some of the high-resolution (retina) assets are on this site. Via Jeffrey, who thinks “this is madness.”

Tweetbot for Mac Alpha is notable for a whole bunch of reasons I won’t get into here. Instead, I found something notable about the CSS the Tapbots team used on the page for their alpha release.

CodePen is all about front end code inspiration, education, and sharing. Like Dribbble for code? I like it. A lot.

File this one under gotchas. I’m desktop browser testing a series of layout templates for a current project today. Everything was going really well until I encountered some files where my web fonts stubbornly refused to display in Firefox, but rendered perfectly in every other browser. Luckily I found the reason for the problem and a solution to it.

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.

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.

Over on Digital Web, Carolyn Wood asked Colly, Andy Clarke said recently that what always impressed him about sites designed by you is that you don’t limit yourself to the normal CSS layout conventions.

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.

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.

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…

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.

Following much of the discussion over the future, activities and progress of the W3C over recent weeks, Mozilla’s David Baron, a member of the W3C’s CSS Working Group has published a long and detailed examination of what he believes are the conflicting…

the CSS Working Group is finally aware that it must include at least one classically trained artist and graphic designer on the team.

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.

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

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.

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

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…

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.

Recent conversations over at 456 Berea Street on the subject of whether a new solution for clearing floats without structural markup is needed, required an answer. So at MIX06 I sat down with s e ven’s developers to find a recommended answer to the question.

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.

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.

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.

Back in October 2005, the Internet Explorer team urged developers to begin removing CSS hacks in favour of conditional comments.

So, according to those slipping the new IE7 Beta Preview out of it’s sleeve and slapping it down on the music-center, Internet Explorer 7 breaks my site. I can’t say that this was much of a surprise.

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…

A new year and tv commercial breaks are full of advertisements for partworks magazines. The choice is so vast that I really don’t know which ones to choose.

Today I heard a rumour that there’s gonna be something big happening in London this summer. When I say big, I mean big and pulled off by some of the biggest names in the business.

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…

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

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.

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…

Ian Lloyd has today published an email interview over at Accessify, Accessibility, the gloves come off. There are now so many web sites, blogs or publications devoted to helping people learn standards and accessible techniques that there are now no excuses…

As I head for London, I thought that you might like a sneaky peek at the presentation slides which I have prepared for next week’s Carson Workshop’s CSS For Designers events.

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

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.

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…

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…

NB: First published in 2005. Read the up-to-date version and see the latest demo. Join me, and together we can rule the galaxy as father and geeks!

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

I’m not sure if this has come up before or if indeed it is of any interest (after all, why would anyone want to hide CSS styles from Safari?). But if you’re still here, this is a new (to me) method.

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.

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.

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.

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.

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.

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.

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!

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.

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.

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.

Whereas many have already publicly switched from MovableType to other brands of blogging software, some for technical and others for economic reasons, I am sticking to MT.

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.

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.

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

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.

Some of you may have read about’Durstan’ being left off the cover of the up-and-coming Professional CSS book. So, in the style of Where’s Waldo, let’s play Where’s Durstan?!

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.

Almost once a week during meetings with clients or prospective clients, I need to explain the concept of web standards. Sometimes it’s during a pitch, and always to a non-technical person who knows little or nothing about anything remotely ‘webby.’ I have…

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.

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.

Just like Scrivs announced this week that the CSS Vault has been sold, this site too has a new owner and I’d like to introduce him to you. His name is Malarkey. (Ed: What are you rambling on about now?) OK, I’ll get to the point.

As a company, we give each member of the team a ’25.00 per month allowance to spend at Amazon on anything they think will benefit the company. We don’t vet what people buy, it’s a way of encouraging them to expand their knowledge (and our range of skills).

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.

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…

My CSS Zen Garden submission, unimaginatively titled’Invasion of the Body Switchers’, has been accepted. Thanks Dave!:D

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.

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.

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.

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.

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.

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.

I’m damn sure that like coffee and cigarettes, blogs contain some chemical that makes them addictive. Just because I felt like it, I’ve been tinkering again with And All That Malarkey, although this time the changes are mostly’under the duvet’.

I don’t want to tread on Dan’s or his Simple Quiz toes, but… I’ve been trying recently to better optimise my CSS, and this has lead me to wonder where certain rules are best arranged. So with that, and with this example of a navigation list in mind.

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

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.

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.

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.

Day two: First of all I wanted to say the biggest “thank you” to everyone who gave their time to review the accessibility decisions that I made during the design and build of the 2004 Disney Store UK.

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…

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.

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

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…

I’m working on the early stages of my new design company web site and I have become interested in the subject of accessible, ’alternative’ content for complex graphics and images, in particular portfolio images and screen captures of client sites.

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.

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.

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

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.

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.

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?

Web forms often ask users for both essential and non-essential (marketing purposes and research) information. Long and complicated forms can often slow down the progress through a web site and in the case of e-commerce, can seriously hinder the sales process.

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.

Simon Collison opened a can of worms recently when his (rather fantastic) personal site launched with the now famous’ticks’ for visited navigation links.

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.

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…

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.

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!

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.

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…

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.

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.

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.

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.

Yes it’s another Transcending CSS, book related grovel. If you or anyone you know owns a vintage (or semi-vintage) Lambretta or Vespa scooter and you live in or close to Manchester (UK), please read on.

Carson Workshops have announced a second day and limited availability for the CSS for Designers Workshop in London. I am very pleased that demand for seats at the workshop has been so high as to require a second day.

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.

Transcending CSS seems to be doing rather well so far, largely I’m sure down to those kind people who places cover buttons on their sites to help promote it.

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.