◎ The CSS Zen Garden at 10

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.

🔗 Responsive Finn

A year ago I travelled to Oslo in Norway to teach a two day responsive design workshop at FINN. The team there have (obviously) been working hard and yesterday they let me know they’d a new responsive design. It looks great

◎ Complete Madness

I like to think that at Stuff and Nonsense, our house isn’t so much a place to work as it is a house of fun and although we take the work we do very seriously, we don’t take ourselves too seriously at all. We hope that sense of fun comes across on our site and today we’re putting aside our embarrassment, putting on our baggy trousers and unveiling a new header on our home page.

🔗 Why didn’t I have this yesterday?

I sometimes struggle with creating colour schemes, so this is exactly what I need. Using it on a touch device is fun, or on the desktop try hacking the URL if you have a starting colour in mind and carry on from there. Just replace the hex value with your starting colour, color.hailpixel.com/#fa52a6,

(via)

  • Tagged with:

🔗 BLOKK font

BLOKK is a font for quick mock-ups and wireframing for clients who do not understand latin.

Brilliant! (via)

🔗 Dan Mall: A problem of expectations

Dan Mall, following up on Brad Frost:

As an industry, we sell websites like paintings. Instead, we should be selling beautiful and easy access to content, agnostic of device, screen size, or context.

Reminds me of:

Worse still are the expectations that static visuals set in the minds of clients, particularly when designers use these visuals as a method to get sign-off for a design. Is the fact that so many web pages are fixed width and centered a direct result of clients signing off fixed width design visuals?

Funny how things come around.

  • Tagged with:

🔗 ITV’s rebrand and responsive home page

Britain’s first independent television channel, ITV, unveiled both its new logo and a responsive new home page today. I’m a fan of the curvy new logo and how it changes to match a backdrop. The home page is full of thoughtful details too, made all the more interesting to me because my work at STV (the Scottish franchise for ITV) over the last year has tackled many of the same problems.

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

🔗 The Guardian’s Pasteup

Pasteup is where design meets development. It is where the Guardian’s globally recognised design language is turned into code for the web, and the starting point when styling GNM branded products for both internal teams and third parties.

This is from the Guardian Developer Blog. We’re aiming to do something similar at STV.

  • Tagged with:

🔗 Matt Griffin’s ‘Responsive Comping: Obtaining Signoff with Mockups’ A List Apart double bill

In a fantastic A List Apart double bill, Matt Griffin tackles Responsive Comping: Obtaining Signoff with Mockups:

Sending clients in-browser comps is remarkably easy, as it turns out. We just e-mail them a URL. Clients can look at the designs in various browsers and on various devices, resize them, click links and navigation, and check out hover states. Instead of asking our clients to pretend that an image is a website, we show them a website.

Keep in mind though, that showing clients a prototype instead of showing them static visuals is about setting realistic expectations and not about designing a browser.

🔗 Chris Armstrong’s The Infinite Grid on A List Apart

Chris (I so want to say “Stretch”) Armstrong:

Absolute units like pixels effectively give a layout a sell-by date, locking it to a finite resolution range in which it will “work.” Proportional units (ems, rems, and percentages) enable you to define the important relationships between elements, and are a crucial first step on the road to resolution independence.

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

🔗 Divya Manian: Designing in the browser

While we’re talking about talks about design, here’s a recent one by Adobe’s Divya Manian from Web Directions Code in Melbourne.

The talk’s called ‘Designing in the browser’ and while Divya delivers it well (except, speakers please remember to take your conference badge off when you go on stage) and she hits all the points you’d expect to hear, what struck me was how little of the talk was actually about the ‘designing’ from the title.

Take a look at the list of resources and what you’ll find are developer tools that I’ll bet you would leave most designers scratching their heads.

Now I fully understand that the lines between designing and developing are being redrawn. I know I also said in my talk at An Event Apart in Austin:

Design doesn’t work when it’s separate from development.

But for me, Divya (and others) gets something fundamentally wrong when talking about this subject. We would never expect a developer to learn bezier curves in Illustrator in order to work with a designer. On the flip side, the notion that designers should learn Docpad or Jekyll demonstrates a fundamental misunderstanding of how designing and developing involve different experiences, knowledge and skills.

This is something that toolmakers like Adobe need to consider when making new tools, and a subject I think I’m going to write a lot about another day.

◎ Bringing a knife to a gunfight — my slide deck from An Event Apart, Austin 2012

I’ve just come home from a ten hot days in Texas, where I had the honour, again, of speaking at An Event Apart alongside some of the best speakers in the industry. I enjoyed the trip, and especially the conference, enormously.

I’ve spoken at conferences regularly since my first time (again alongside Jeremy and Jeffrey) at @media 2005. (I’d never have guessed then that we’d still be friends, still doing this thing, all these years later.) But in the last couple of years I started to enjoy speaking less and emotional risk/reward ratio that goes with public speaking tipped too much toward risk. So I decided to not speak at all in 2012. That is until Jeffrey persuaded me to speak in Austin.

Unlike Jeremy, this wasn’t my first not-SXSW visit to Austin as Elliot, Simon, Tim and I and a bunch of design globetrotters went there to redesign a bank a few years ago.

I’m glad I went. Every An Event Apart conference feels special, but at this one the (unplanned) recurring themes were spooky. My talk was about designing, design process and particularly how our conventional design tools — drawing tools like Fireworks and Photoshop — are not equipped for designing today’s web. They’re ‘Bringing a knife to a gunfight!’ From the website:

In the mid-nineties, when designers started making their mark on the web, they did it with software tools and processes that they’d brought with them from print. But the web’s a different place now than it was ten, five, even two years ago; the tools and processes we’ve relied on for years are no longer capable of properly designing today’s flexible, responsive web. In this session, we’ll find new ways to design that better serve the needs of today’s responsive web, and investigate better, alternative tools and approaches to design. We’ll learn too how new tools and approaches can improve communication between designers and developers and our clients.

I hear that the talk was well received and I had a great time giving it. In fact, it’s definitely helped me to get my speaking mojo working again.

For everyone not at An Event Apart in Austin:

🔗 Andrew Kim: The Next Microsoft

Designer Andrew Kim set himself a three day challenge, to update Microsoft’s branding and messages. The results are stunning.

  • Tagged with:

🔗 CodePen

CodePen is all about front end code inspiration, education, and sharing.

Like Dribbble for code? I like it. A lot.