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’ll have noticed that I’ve implemented a brand new dark mode version of my website.
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:
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.
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:
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.
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.
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:
Hello. I’m Andy Clarke, an internationally recognised product and website designer and writer on art direction for products the web. I help product and website owners captivate customers by delivering distinctive digital designs.