For over fifteen years, my blog and Unfinished Business podcast have been popular with website designers and developers.

Marc Thiele on creating the schedule for beyond tellerrand

I know very few people who curate better conference line-ups than Marc Thiele and I was proud to speak at his first event in Berlin last year. It’s great that he’s written up how he thinks about conference schedules so that hopefully others can learn from him.

Jeremy Keith’s 100 words 016

I’ve been enjoying—and a little jealous of how he can write every day— Jeremy Keith’s 100 words series. Today he wrote about A List Apart’s 15 Years of Dao and I could not agree more with what he said here:

I fear that today we run the risk of treating web development no different to other kinds of software development, ignoring the strengths of the web that John highlighted for us. Flexibility, ubiquity, and uncertainty: don’t fight them as bugs; embrace them as features.

Substitute ‘software development’ with ‘digital product design’ and you have what Dan and Jeffrey were talking about on Unfinished Business this week.

Also, as I said in 2006 at John’s Web Directions conference, “the web is not a power drill.”

Debug podcast episode 47

Speaking of podcasts, the latest episode of Guy English and Rene Ritchie’s Debug is well worth your time as Don Melton—former Director of Internet Technologies at Apple—and Nitin Ganatra—former Director of iOS Apps at Apple—talk about presenting to Steve Jobs and offer a wonderful insight into working at Apple.

Banksy’s letter on advertising

People are taking the piss out of you everyday. They butt into your life, take a cheap shot at you and then disappear. They leer at you from tall buildings and make you feel small. They make flippant comments from buses that imply you're not sexy enough and that all the fun is happening somewhere else. They are on TV making your girlfriend feel inadequate. They have access to the most sophisticated technology the world has ever seen and they bully you with it. They are The Advertisers and they are laughing at you.

Something tells me that Jeremy will approve of this.

Jerry Seinfeld’s Clio Acceptance Speech - YouTube

Jeremy pointed me to this. I supppose he likes it because it fits his dislike of advertising. I like it because it fit my dislike of awards.

Zoe Gillenwater on Leveling Up With Flexbox

I’ve wanted to meet Zoe Gillenwater for years and have just watched her at Smashing Conference in Oxford give the best presentation of the conference on flexbox progressive enhancement.

Her message was, you may not use Flexbox for whole page layout due to legacy browser issues, but there’s no reason not to use it for enhancing interface elements. She’s followed that up with links and resources. I’m going to have a hard time following that at my workshop tomorrow.

It’s not new enough

Mark Boulton on defining responsive web design:

We’ve heard this line time and time again over the past couple of years. You see, responsive design is a useful term and one that will stick around for a while whilst we’re going through this change. How else do we describe it, otherwise? Web design? I don’t think so. No board member is going to get behind that; it’s not new enough.

All’s Farrah In Love

A fascinating story in Texas Monthly—not a publication that I often read— about the court battle between the University of Texas and actor Ryan O’Neal over an Andy Warhol painting of Farrah Fawcett.

Farrah and O’Neal were the Brangelina of their day—the glamorous Hollywood king and queen whose every move was captured by the tabloids. One of their fans was Andy Warhol, who became obsessed with the couple. He gave them a drawing on a tablecloth of two hearts coming together, and in 1980 he painted two nearly identical silk-screen portraits of Farrah, in which she stares intently, her red lips pressed together, her eyes bright green, and her hair brushed behind one shoulder. One painting went to O’Neal’s Malibu beach house, the other to Farrah’s home in the hills above Bel-Air.

The Day We Fight Back (Against Mass Surveillance)

In celebration of the win against SOPA and PIPA two years ago, and in memory of one of its leaders, Aaron Swartz, we are planning a day of protest against mass surveillance, to take place this February 11th.

Typekit: Kerning on the Web

A nice run-down of typography kerning and the font-feature-settings property in CSS.

Ignore the irony of the poorly kerned ‘Web’ in Typekit’s title.

Ashley Nolan: Controlling heavy weight websites

A balanced view on performance versus beauty by proud Welshman Ashley Nolan:

Ian Feather’s ‘Ten reasons we switched from an icon font to SVG’

An interesting piece from lonelyplanet.com’s Ian Feather on their move from icon fonts to SVG.

I switched all our icons to SVG during our latest redesign (with PNG fallbacks for IE8) and they’ve proved incredibly reliable. That’s why I was slightly surprised to find Jon Hicks promoting icon fonts over SVG at the Handheld Conference back in November. Am I missing something, I wonder?

The Profitable Side Project Handbook by Rachel Andrew

Rachel’s new book, ‘The Profitable Side Project Handbook’ is available today and has a launch day offer of only $29.00. That’s for three digital formats, .mobi, PDF and ePub.

(I bought a copy using our company credit card and the emails for that go to my wife, so I’ll have to wait until she comes home to start reading.)

Ghostlab for Windows

I know I’ve talked about Ghostlab a lot on Unfinished Business and mentioned it a fair few times on Twitter. This isn’t just because its makers Vanamco have sponsored the show. No, I use Ghostlab almost everyday and it’s really made my designing responsive websites much more convenient.

As Ghostlab is an app for the Mac, often when I tweet about it I see people complaining that it’s not available for Windows. Well quit your whining Windows users, because today Vanamco have launched Ghostlab for Windows!

Ghostlab for Windows has a new interface and is available in both 32 and 64 bit versions. There’s even a free seven day trial and a licence costs just $49 US.

Ghostlab for Windows may be just what you were ho, ho, hoping for.

Handheld’s Welsh Veterans Male Choir

I’m not going to link to all of the videos from Handheld Conference, but if this one doesn’t make the hairs on your neck stand up, there must be something wrong with you.

In fact, the only criticism I have of the conference is that the audience didn’t stand to applaud the end to that excellent day.

An Open Letter (to the web industry) from Handheld 2013

How could you follow this? (With a male voice choir, obviously.)

‘Doctor Who: 50 Years’ Trailer

Getting excited yet?

With the 50th anniversary episode and the Day Of The Doctor just over a month away, I am. I’m also looking forward to the Unfinished Business Doctor Who Special with Jon HIcks too. We’re recording that the day after the Day and publishing it the day after that.

Brad Frost’s Development Is Design

Brad Frost:

As multi-device Web design quickly becomes the norm, the throw-it-over-the-fence style of creating websites is going to be increasingly difficult. The modern Web design process requires intense collaboration between designers and front-end developers. Real collaboration and communication are difficult, but we must get over that awkwardness in order to overcome the design/development divide.

His post reminds me a little of my Walls Come Tumbling Down presentation slides and transcript. It is often quite scary how alike our thinking is.

Matt Stow’s Viewport Sizes reference

Matt Stow has been documented device viewport sizes and the result is a handy, searchable reference of platforms and device dimensions. If you have a device that’s not listed, you can check it’s sizes and add it here.

Dawn Of The Planet Of The Apes banner at Comic-Con

A growing nation of genetically evolved apes led by Caesar is threatened by a band of human survivors of the devastating virus unleashed a decade earlier. They reach a fragile peace, but it proves short-lived, as both sides are brought to the brink of a war that will determine who will emerge as Earth’s dominant species.

That banner says everything that makes The Planet Of The Apes special to me.

Google Visual Assets Guidelines

In January 2012, we began creating this solid, yet flexible, foundation that will help Google’s designers and vendors to produce high quality work that helps strengthen Google’s identity. What you see here is a visual summary of the guidelines

A lot of design gold to learn from in Google’s Visual Assets Guidelines. Part two is here. (Via my mate Dan.)

Our man in Japan

I noticed a strange spike in traffic from Japan today. Turns out to be a report on the workshop I help there in April. Google Translate’s version is a hit-and-miss in some places and hilarious in others:

I feel each time you attend a workshop of Andy Clarke’s, but expect a “great technique” and “amazing tool” from work and his track record, but the expectation is betrayed every time in a good way.

But the gist of my message — of responsive vs adaptive design (very common in Japan) is there, along with some photographs of the day.

Andrew Jones: Adobe Edge Inspect vs Ghostlab

Andrew compares his experiences with both Adobe Edge Inspect and Ghostlab. It’s a good read and well worth your time.

What Andrew doesn’t mention, and something I’ve been using Ghostlab for this week here at WIPO is demonstrating designs to clients on a range of devices all at the same time. Instead of handing someone a phone or tablet and directing them — “now, press the menu link” — I’ve been driving the demonstration from my own phone. Honestly, watching a client’s face when their phone updates remotely is a delight. Big smiles. They think it’s magic.

CSS Tricks: Just One of Those Weird Things About CSS: Background on <body>

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.

Some people have way too much free time

John Galantini I’m looking at you.

I Ask. You Answer

Remember me linking to Dan Davies’ series of workflow interviews? Well now this excellent series has a new home at I Ask. You Answer.

Marco Arment: The One-Person Product

More importantly, it gives David, and the rest of Tumblr’s team, the freedom to continue making the best product they can while offloading a lot of the grunt work to Yahoo’s leadership, staff, and infrastructure.

As for me, while I wasn’t a “founder” financially, David was generous with my employee stock options back in the day. I won’t make yacht-and-helicopter money from the acquisition, and I won’t be switching to dedicated day and night iPhones. But as long as I manage investments properly and don’t spend recklessly, Tumblr has given my family a strong safety net and given me the freedom to work on whatever I want. And that’s exactly what I plan to do.

Lovely, genuine and inspiring writing.


Last month I moved off Adobe’s Creative Cloud and back to a ‘boxed’ version of Creative Suite – laughably just in time for Creative Cloud to be the only way to use Adobe applications in the future. One of the casualties of the move was Adobe Edge Inspect, a tool that I have used and liked for testing designs across multiple devices. So today I downloaded Ghostlab and so far it looks promising.

Manchester McrFRED event

I didn’t know about this FRont End Developers’ meet-up in Manchester until I heard on Twitter someone there was discussing the pros and cons of my new beard. Beard talk aside, I’m planning on attending the next McrFRED, whenever it’s happening. (Maybe my beard will go with me.) In the meantime, organiser Simon Owen’s videos from the first event are online now.


Fighting gifs: 125 fighting game backgrounds.

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

How far is it to Mars?

A really fun site by David Paliwoda and Jesse Williams.


Endless possibilities for mischief.

Steven Bradley: Working with flexbox (the new specification)

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.

Dan Barber: Design Eye for the Developer Guy

Whenever I’m asked what aspects of design developers should learn, I always answer grid ratios and typography. From now on I’ll also point people to this great little slide deck by Dan Barber.

Smashing Magazine: Goodbye, Zen Coding. Hello, Emmet!

I’ve been using Emmet these last few months in Espresso and find it incredibly useful. I suppose between this and Sass, I write half the code I used to. (Now I just need to write the Emmet shortcuts reminder sheet I’ve been planning for months too.)

Subtle Patterns

Today’s Squidfingers.


After I mentioned on Unfinished Business about wanting to improve Rock Hammer’s typography Sass, Zachary Kain got in touch to tell me about Typeplate, a “typographic starter kit” that’s worth your attention too.

Chris Mills: Laying out the future (Slideshare)

Slides from Chris’ excellent talk on CSS3 layout modules at today’s Camp Digital in Manchester. He covered, Flexible Boxes, Multiple Columns and more.

Louis Lazaris: Modular CSS with Media Queries and Sass

This couldn’t have come at a better time (for me.)

Jeremy Keith Told Us So

So you’ll forgive me if I feel a certain sense of vindication now that everyone is finally doing what I’ve been banging on about for years.

Jeremy is like John The Baptist, except with dry trousers. Follow the links to some of his older posts too. I like this in particular:

Arguing about 640, 800 or 1024 pixels is like arguing about whether Pepsi tastes better than Coke when really, a nice glass of water would be much more refreshing. The numbers game is a red herring. A big fixed-width red herring.

From August 2005.


2. 0. 0. 5.


Remembering Jeffrey Veen’s “I don’t care about accessibility”

For anyone who read my I don’t care about Responsive Web Design (from two years ago) and missed the original reference (from almost ten years ago) and therefore the point I was trying to make; that responsiveness should be something we build in, not bolt on.

Gary Oldman cast in Dawn Of The Planet Of The Apes

How excited am I?

Cinema Tarantino: The Making of Pulp Fiction

Tarantino would rabbit-sit Honey Bunny, her pet, when she went on location. (Tarantino refused, and the rabbit later died; Tarantino named the character in Pulp Fiction played by Amanda Plummer in homage to it.)

A fascinating read about one of my top ten movies.

Am I Responsive?

  • Add your URL to the input field
  • Click GO (reloads the preview) or press Enter (reloads the page)
  • Admire your good work

A little bit of responsive fun from Brisbane based Justin Avery. (Via Jordan Moore who has a name like a country singer but has never drunk moonshine.)

CodePen’s plain english Terms of Service

Don’t be a jerk.

That about sums it up.

Ray Cusick, designer of the daleks has died

I’ve known about daleks all my life.

BLOKK font

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

Brilliant! (via)

CodeKit and The Kit Language

You should know by now that I’m a huge fan of Hammer For Mac. I couldn’t and wouldn’t start a project without it as I’d miss its variables and partials and includes too much. I like Hammer so much I moved from LESS to Sass because of it.

If you’re a CodeKit user — and many are — you can get some of Hammer’s functionality in that too. I haven’t had the need to try CodeKit and The Kit Language myself yet, so I’d be keen to know if you have and what you think? Let me know on Twitter @malarkey.

Flexbox syntax for IE 10

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.

Josh Clark: Designing for Touch

This year’s An Event Apart in Atlanta (the first of 2013) looks to have been filled with fantastic new talks. So much so that I’m considering attending one show this year. Once again, Luke does the web a great service by taking notes from the talks. I’d love to hear this one, from Josh Clark, in person.

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,


Life in the old Duke yet

The Duke of Lancaster — a landlocked former cruise ship — is about a twenty minute drive away from our house on the North Wales coast. I must’ve driven past it hundreds of times, but have never parked up and walked the quarter mile from the road down to the old boy. Recently, the Duke has become a (huge) canvas for artists. Although I’m personally not a fan of street art, I’m somehow glad that the ship’s been getting some love, even with a spray can. One of these mornings I must take a walk and say hello to the old Duke.

Nathan Ford: Don’t just choose a grid. Design it!

Notes from Nathan Ford’s talk on grids and Gridset from what looks like an excellent evening at Port80 localhost in Newport, Wales.

You should design a grid based on your content’s constraints, not design your content based on a grid’s constraints.

Luke Brooker: Improving Your Responsive Workflow with Style Guides

Exactly one year ago, I linked to slides from a short talk I’d heard in Brisbane, Luke Brooker’s Future Friendly Style Guides. Again today, poking around SpeakerDeck I found slides from a more recent talk by Luke, Improving Your Responsive Workflow with Style Guides. It expands on his earlier thoughts and is well worth your time.

(Changing the subject slightly, it occurs to me that if you’re looking to get into speaking, writing a talk and sharing your slides even before you’ve given it is a great way to make conference organisers aware of what you have to say. Even better, give the talk as a screencast in the privacy of your own home and share the audio/video on YouTube or Vimeo. Everyone loves to find new talent, attendees, organisers and speakers.)

Opera moves to Webkit for future products

Bruce Lawson on Opera Developer News:

The WebKit project now has the kind of standards support that we could only dream of when our work began. Instead of tying up resources duplicating what's already implemented in WebKit, we can focus on innovation to make a better browser.

And their CTO Håkon Wium Lie on the [webkit-dev] mailing list:

The first contributions from our side will be in multi-column layout. We have experimented with combining multicol layout with page floats and column spans; in 10 lines of CSS code one can create amazingly beautiful, scaleable and responsive paged presentations.

This really is great news. I wish Opera every success with this.

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.

Rachel Andrew: Credit and Risk - getting paid for your work

Would you offer a stranger a loan of £4,000 without any agreement in place? That is exactly what you are doing if you do £4,000 worth of work on the promise of payment.

Wise words.


Testing on all versions of Internet Explorer will be much easier from now on thanks to their new suite of testing tools, modern.ie.

The included tools look impressive on their own, but the website is also full of helpful information. Scanning this site revealed not only that I’m running an outdated version of jQuery but that I can help Windows 8 touch users simply by adding canvas { -ms-touch-action: double-tap-zoom;}. Handy.

If you don’t develop on Windows (I don’t) Microsoft are offering three months BrowserStack virtual testing free. I’m baffled by the fact that to get the free offer I have to login using a Facebook account (that I don’t have,) but BrowserStack have their own (shorter, I think) free trial.

Hats off to Microsoft. modern.IE may just let me ditch the 63Gb of virtual machines I use just to test Internet Explorer.

Guesting on The East Wing with Tim Smith

On Monday evening I had the pleasure to speak with Tim Smith on his show The East Wing. We talk about book authoring, business podcasts and how better to manage client relationships. The East Wing is a great show and I thoroughly enjoyed speaking to Tim.

Brad Frost: The Post-PSD Era

Throughout my career, I’ve watched immensely talented designers waste a shitload of time creating fully fleshed-out comps of what a website could look like.

Getting to your minimum hourly rate

Brian Suda’s post is the perfect compliment to episode two of Unfinished Business, out today. I may come back to add my take on Brian’s advice another day, time permitting

Sophie Schmidt visits North Korea

Sophie Schmidt, daughter of Google chairman Eric Schmidt, visited North Korea and wrote a fascinating account of what she saw along with a few photos. Personally, I’ve always been fascinated by totalitarian, propaganda art and North Korea is one of the few places left in the world to see it.

Killing Contracts: Veronica Picciafuoco interviews me for Smashing Magazine

A fun interview about contracts, client relationships, debt collection and men with big dogs. All topics we will be talking about over the coming weeks on Unfinished Business.

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.

The full video of my talk from Smashing Conference is now online

Thanks once again to all the folks from Smashing Conference for making my son and I so welcome during our visit. One, if not both, of us will be back to sit in the audience next year. Thanks also to Marc Thiele for his hard work to make these videos available.

.net magazine: Top 20 CSS sites of 2012

I’m not sure that fat fella at the top deserves to be there.

Mark Boulton on Participation

What will you tolerate in this community? Will you tolerate a conference circuit swamped by supposedly the same speakers and vote with your wallet? Or will you tolerate conference organisers being continually beaten up for genuinely trying to do the right thing? Will you tolerate speakers being abused for getting on stage and sharing their experiences? Will you tolerate harassment, bullying and exclusion?

(Cynics will no doubt now accuse me of linking to my friend, another old face.)

Guesting on The Web Ahead with Jen Simmons

Yesterday I had the pleasure to speak with Jen Simmons on her show The Web Ahead. We riff about design process and tools, but I start off talking about public speaking, the destructive effects of cynical criticism and I issue a challenge to those who complain about regular conference speakers.

Smashing Conference videos and interviews

Being in Freiburg for Smashing Conference helped me regain my confidence for speaking. I was thrilled and honoured to be a part of it in a small way. Now Smashing Magazine are publishing interviews with all the speakers and videos of their talks. The first three excellent talks by Jeremy, Rachel and Stephen are available now.

A List Apart: Designing Contracts for the XXI Century

Docracy’s Veronica Picciafuoco, a recovering lawyer, with a wide ranging article about contracts that very kindly mentions Contract Killer. Watch out for another of Veronica’s articles and an interview with me about Contract Killer and The Three Wise Monkeys NDA on Smashing Magazine, coming soon.

Brett Jankord: Cross Browser Retina/High Resolution Media Queries

Good work by Brett Jankord:

You can replace, the min–moz-device-pixel-ratio, the -o-min-device-pixel-ratio with a resolution media query. You can also just remove the unprefixed min-device-pixel-ratio.

Chris Mills: Native CSS feature detection via the @supports rule

This article looks at the CSS @supports rule, part of the CSS3 Conditional Rules Module Level 3, which provides a perfect mechanism for selectively applying CSS based on feature support. Here we’ll look at basic syntax, along with an applied example.

I did not know this.

Filament Group: SocialCount

Yesterday, my friends at ISO and I were discussing the impact that their social media icons have on the performance of their site. (Short story, they add 14 seconds to the rendering time of every page.) Then last night I found SocialCount (via Brad Frost.)

SocialCount is a small jQuery plugin for progressively enhanced, lazy loaded, mobile friendly social networking widgets.

Funny how the universe works.

Mike Monteiro on What Clients Don’t Know

Here’s Luke Wroblewski with notes from Mike Monteiro’s talk this week at the final An Event Apart of the year, in San Francisco. There’s so much wisdom here, so much to like. In particular:

Your process is a mystery. Show people what it’s like to work with you on a day to day basis. Let them the sequence of events, when you’ll connect and how often. If you don’t control the process for the start, clients will start telling you how it should go. They’ll fill in voids when they see them.

(And if you haven’t already bought Mike’s book, you really should.)

Cennydd Bowles on creating and refining

I’ve found that if you want rough indication of a designer’s experience, look at the time they spend on different stages of the design process.

Novice designers spend most of their time creating a solution, and maybe 20% refining it.

Intermediates split the time roughly evenly.

For senior designers, the ratio flips: 20% creating, 80% refining.

And the experts realise that creating and refining are actually the same thing.

This is a fabulous insight. Next week I’m heading back to Geneva to do exactly this with ISO, because ‘expert’ clients realise it too.

Remote Preview

Remote preview is a tiny JavaScript based tool which I built for our test lab. It allows you to preview any URL on large number of mobile devices simultaneously. Just enter a URL, hit Cmd+S, and new URL gets automatically loaded on each device. Remote preview works on platforms like Android, Blackberry, iOS, Maemo, Meego, Symbian, Windows Phone and WebOS.

I’ll test Remote Preview for myself later this week. I hope it’ll be another reason for me not to renew my Adobe Creative Cloud subscription next year.

Rolf Timmermans: Responsive background images with fixed or fluid aspect ratios

It is possible to make any HTML element scale its height proportional to its width.

I’ll use the heck out of this.


“Prototype iPhone apps with simple HTML, CSS and JS components.” From the fellas that brought you Bootstrap.

Jordan Moore’s Palm Reader

Jordan Moore (who wears crocodile skin shoes) made a handy little tool for “showing what @media features your device can and can’t see.”

Microsoft: Design guidance for Windows Store apps

Don’t be put off by ‘Windows Store apps’ in the title. There’s lots of really good information about designing for tablets in general here.

Aside: I spotted this in the ‘Windows 8 touch posture’ section:

Because slates are most often held along the side, the bottom corners and sides are ideal locations for interactive elements.

That’s a big difference between iPads and Microsoft’s Surface ‘slate’ (do they actually still call it that?). Microsoft sees the 16:9 Surface as a landscape device, whereas a 4:3 iPad is for use any way up.

Typekit announces Windows Phone 8 support

The big news here is actually that Internet Explorer 10 on Windows Phone 8 supports web fonts in the standard WOFF format.

Todd Motto’s jResize Plugin

A jQuery plugin that:

Grabs all your HTML, and resizes it inside the browser when you click the width you want.

Potentially useful as a demonstration as well as a development tool. As well as a set of fixed (device derived) widths, I’d love to see the ability to add any width. I’m sure Jeremy would like it written in plain Javascript too.

James Sherrett: 5 iPad Mini Web Design and Development Early Best Practices

After me saying the other day that I won’t buy an iPad mini, James Sherrett has tugged on my wallet.

But a desktop site won’t work on a seven-inch iPad Mini. A typical 12-pixel font will be unreadable. The buttons will be unclickable. The form inputs will drive people away.

At worst, a desktop website will look broken. At best, a desktop website will be hard to use.

My wife (who handles our finances) made me laugh yesterday when I brought this up. She said, “if you want an iPad mini, just hold your regular iPad at arms length.”

But designing for tablets isn’t just about what you ‘see’, it’s about what you ‘touch.’ Me ordering an iPad mini tomorrow is looking more likely.

Sergio Nouvel: Ditch Traditional Wireframes

Sergio Nouvel, writing for UX Magazine, about ‘Hi-Fidelity Wireframes.’

This is what most people have in mind when they think of wireframes: a carefully crafted blueprint, which is usually true-to-size and incorporates the highest level of detail previous to the final visual comp. In other words, this is a final comp, minus the look and feel, color palette, and fonts.

Sizes, whitespaces, margins, proportions, and line-heights are considered in this kind of wireframing, usually produced in a precision tool such as Fireworks, Illustrator, or OmniGraffle. This document is ready to be dressed by the visual designer with textures and branding.

“Dressed?” Dressed? You could of course substitute the word ‘decorated’ because that’s what design is reduced to in a so-called UX, bullshit, workflow where this kind of wireframes play a role.

I’m not arguing with Sergio though. This is a great article. Not only should you read, if you work with someone who spends hours in tools like Axure, you should print it out and staple it to their head.

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.

Lea Verou: Easy color contrast ratios (tool)

An incredibly useful, and beautifully designed, colour tool by Lea. I can see myself using this all the time. (Some background to the tool.)

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.

The Surface Movement (video)

This spot reminds me somewhat of Apple’s iPod ads and I don’t mean that in a bad way. I like the look of the Surface. I like it a lot and will probably pre-order one (for testing) this week. Even as an Apple devotee, I really hope that Microsoft does well with the Surface.

I have a Windows Phone 7 phone that I used as my only mobile until I upgraded to the iPhone 4S and I love the we don’ call it Metro no mo’ Windows 8 Style interface. If I had to stop using an iPhone tomorrow, I’d head straight to a Nokia Lumia running Windows Phone 8.

Jordan Moore: The Semantic, Responsive Navicon

Jordan Moore (who has a name like a country singer, but doesn’t like country and can’t sing):

There have been calls recently from Andy Clarke and Jeremy Keith to have a standard icon for revealing navigation in small contexts, and rightly so — this is a new technique and we need to set users’ expectations about the consequence of the reveal action.

Keegan Street’s Specificity Calculator

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.

Aarron Walter: “UX Design is bollocks.”

Aarron Walter is one of those people I wish I could spend more time with. Every time we’re together, I learn so much from him. Here, Aarron tells the story of how he helped me make my talk at Smashing Conference more balanced and inclusive (he does that to me a lot), particularly when it comes to (so-called) UX.

This article is published on On My Mind, Aarron’s email newsletter, which is well worth subscribing to.

Chris Coyier: Media Queries for high resolution displays

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

Stu (Robson) goes Sass

Stu’s compiled a great list of resources for LESS users (like me) who need to use, or want to switch (Blah. Blah. LESS. Sass. Sass. LESS. Blah. Blah.) to using Sass.

Personally, I love LESS. But the real kicker is that I’m trialling a soon-to-be-released compiler that compiles Sass but not LESS, and it doesn’t play nicely with Codekit. That alone could persuade me to make the move to Sass. (For God’s sake don’t tell Jina Bolton that.)

TrentWalton: A New Microsoft.com

My design hero, TrentWalton, on how he and his amigos responsively redesigned the Microsoft.com homepage.

Encouraging Better Client Participation In Responsive Design Projects

My first article for Smashing Magazine is my (ever so expanded) notes from my talk at the fabulous Smashing Conference in Freiburg. The original title was “How to call your client an idiot, to their face, without getting fired, then have them thank you for it.” I still like that one best, but we didn’t want a controversial title to get in the way of the serious points I wanted to make.

Brad Frost’s notes from my talk at Smashing Conference

I’ve also expanded on my notes from my talk for my first article for Smashing Magazine, to be published any day now. Read that, read this, then watch the video from the conference (also coming soon) and you’ll have me in 3D. Fancy that.

Adobe announces Edge Reflow

Create truly responsive layouts thanks to an intuitive user interface. Design simultaneously for all screen sizes without sacrificing quality or capability.

Fireworks is dead.

Harry Roberts: Big CSS (YouTube link)

I’d intended to go to The Digital Barn this weekend, but having just come back from Freiburg, I couldn’t make it. My main reason for attending was Harry Roberts and his talk about Big CSS.

I’ve linked to Harry a lot recently. I’m a big fan of his work, so I was disappointed I wouldn’t hear his talk. That’s why I was so pleased to find a rehearsal run through on YouTube.

It’s great when conference organisers record audio or video, but speakers shouldn’t rely on that. Like Harry, more people, particularly younger or newer speakers, should record their talks. It makes them more widely available, spreading the word about what you have to say and about you. It’s exactly what conference organisers are looking for when seeking out new speakers.

Josh Brewer: Responsive Measure

Responsive Measure is a simple script that allows you to pass in a selector (ideally the container where your primary content will go) which generates the ideal font size needed to produce the ideal measure for your text.

Josh brings my proportional leading idea to life.


Brad Frost mentioned Mobitest during his talk last week at Smashing Conference. I’ve becoming more aware of performance issues these last few months, and tools like Mobitest can only help me do better. (This site’s home page, crammed full of retina quality bitmaps, weighs in at 649.36kb and 10.22s average load time. I need to halve that. At least.

Tantek Çelik: microformats2 and bits of HTML5

I’ve been asked quite a bit recently, “Do I regret devoting a good sized section of Hardboiled Web Design to microformats when authors and browsers have largely ignored them?” My answer’s always been “no”, although microformats haven’t been adopted as much as I’d hoped they would be, if nothing else they provide some great naming conventions for our attribute values.

Out in Lisbon, at the end of a pretty packed week for European conferences, Tantek gave a talk on ‘microformats2 and bits of HTML5’. I’d missed what Tantek and others have been working on for microformats2. It’s worth your time running through his presentation and then following up on the microformats2 wiki.

Hillsborough: Brian Reade on the day that changed football forever

[Chief Superintendent David] Duckenfield, in charge of his first big football match had given the order to open the gate without ensuring the thousands who entered Leppings Lane would be funnelled into the outside pens. He had seen the over- crowding and suffering on the terraces on CCTV cameras with zoom facilities and done nothing. And when asked for an explanation he mouthed something he believed outsiders would buy. A hooligan mob had stormed the stadium and killed their own.

It was a lie which would travel all the way around the world before it was corrected.

A calculated slur that would never go away.

Maybe today.

Filament Group: Responsive Carousel Project Now Open Source

Scott and the Filament Group continue to make the web better.

If only I could be one tenth as good a speaker as Bill Clinton

I watched President Clinton’s speech at the Democratic National Convention this morning before work and was captivated. If only our sad bunch of British no-hoper politicians had a fraction of his conviction and charisma. If only I could be one tenth as good a speaker. What’s also amazing is how much the former president deviated from the script.

(Via: Daring Fireball)

This Is Responsive

Brad Frost (I want his dog. So badly.) and Pon Kattera collect the latest links, news and thinking in responsive web design. There’s some great resources in here already.

Conor MacNeill: Major and Minor Breakpoints for CSS

Sample CSS files set at ‘major breakpoints’ which, in turn, contain ‘minor breakpoints’.


“A reuseable collection of carefully-considered Less mixins” from our friends at ClearLeft.

Smashing Magazine: Fireworks Extensions For Better Workflow

If Adobe Fireworks is your everyday design tool, like it’s mine, this is a fabulous selection of extensions and links to find more.

Device Viewport Widths reference on Google Docs

If you have a smartphone or tablet (or an Android powered, internet enabled refridgitoaster,) add its viewport sizes to this spreadsheet on Google Docs. (Then print it out and tape to that refridgitoaster.)

Zoe Gillenwater’s Building Responsive Layouts presentation

There’s lots of great information in Zoe’s slides from Responsive Web Design Summit. And it looked like a great overall line-up too. Dang. How’d I miss it?


I want a Canon EOS M so much

I really like my Olympus PEN EPL-3. It’s become my ‘go everywhere’ camera. But the lack of lenses for it is becoming frustrating, particularly as my camera back is stuffed with Canon lenses (and an EOS 450D) that I now never use.

’Now Canon has announced the EOS M, its own mirror less Micro Four Thirds camera that’s compatible (with an adapter) with all of Canon's EF and EF-S lenses.

Canon EOS M
Canon EOS M

Damn. I want one.

Here’s more on The Verge and on Canon USA.


Sun is a web app designed for the iPhone and iPad. It’s making heavy use of gestures. Rest assured, you’ll be doing a lot of pinching.


Andrew Kim’s Nexus 7 Review

This is the best Android device I’ve ever used. Actually, this is the first Android device I really like.

Me too. This is a great review.

Typekit’s new embed code

If you’re a Typekit customer (like me) any improvement in performance is welcome.

(Plus, I only learned about ‘protocol-relative URLs’ last week, while at An Event Apart in Austin.)

Harry Roberts: Quasi-qualified CSS selectors

Part way down Harry’s post, I found this gem.


I write the element in a comment so that it reads properly (a html element with a class of .product-page) but without altering the specificity at all.


Verge: EC investigating Microsoft’s lack of compliance with browser choice commitment

Here’s the part that got me:

Other browser makers have complained at the lack of Metro browser choice in the company's upcoming Windows 8 software.

When will companies like Mozilla realise that the way to succeed is to make a great product that people want to use (like Firefox used to be), not whining about competition to authorities like The European Commission?

Notice I didn’t mention Opera?


Luke Wroblewski: Top Three Passwords

These easy answers are hardly the secure, unique, and complex passwords security and IT teams hope for.

Getting regular people to appreciate the importance of choosing different passwords for different services obviously isn’t getting any easier.

I’ve been teaching my nieces and nephew to use patterns when picking passwords, but that advice obviously hasn’t reached their father yet. He’s a savvy iPhone, iPad and Mac user but he still uses the same weak and obvious password for everything. Convincing people like my brother-in-law to spend $49.99 for 1Password on his Mac and another $4.99 for his iPhone is hard. I spend an hour yesterday trying to do just that.

Much as I love 1Password, strong password generation and secure password storage really should be a part of the operating system. Maybe if it was, people would stop hacking the system with 12345.

CSS3 Animations, transitions, transforms and gradients to go unprefixed in Firefox 16

As Lea reported last week, the CSS Working Group have approved the unprefixing of CSS transforms, transitions and animations. IE10 will support these unprefixed and soon Firefox will too.

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.

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.

iA: Responsive Typography: The Basics

A fascinating first in a series article. (I’m very much looking forward to meeting Oliver in person at Smashing Conference in September.)

Brad Frost: How much does a responsive web design cost?


That much?

CSS3 superheroes

and my favourite, Hulk.

(Source: Here and here).

Harry Roberts: The open/closed principle applied to CSS

N.B. This article will require an understanding of the principles of OOCSS.

It doesn’t.

Luke Wroblewski: Off Canvas Multi-Device Layouts

This couldn’t have come at a better time because at STV, we’re designing and prototyping something very similar.


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

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

Southstreet Progressive Enhancement Workflow

Already widely linked following this week’s An Event Apart in Boston, but very worth another mention.

Southstreet is a set of tools that combine to form the core of a progressive enhancement workflow developed at Filament Group. This workflow is designed to help us (and other developers too!) deliver rich web experiences that are accessible to the widest range of devices possible, and catered to the capabilities and constraints of each device.

Sassy Buttons (BTW. This is way to write Sass instructions)

I haven’t used Sassy Buttons (I use LESS) or dug deep enough into this tutorial yet, but the first thing that hit me about Jared Hardy’s piece was just how clearly he wrote the instructions.

simply open your terminal and type:

gem install sassy-buttons

Now that you have compass and the sassy buttons extension installed.

I’m not a complete idiot, but I’m also not a developer and so the language so often used in Sass and Compass explanations is baffling. I might still not know what a ‘partial’ is, but this is first Sass article I’ve read that didn’t make me feel stupid. If you write about Sass, more like this please.

(Hat tip to Stef Lewandowski for the link.)

Eric Meyer: Combining ‘nth-of-type()’ With Negation

Oh so geeky. Oh so good. And, Eric’s post has inspired me to run a little CSS-based competition that’s been on my mind for a while. Watch out for that tomorrow.

ManageWP: 5 Reasons Why Responsive Design Is Not Worth It

One might argue that responsive design is a damn sight cheaper than building a separate mobile site from the ground up, and I would agree. But do you know what is even cheaper than responsive design? Non-responsive design.

Pure comedy gold.

Boagworld: Dealing with design (iTunes link)

Paul and I discuss our respective approaches to client work and I surprise him by not being a raving lunatic.

Luke W: Mind Blowing iPad Stats

In 2012, the iPad accounted for 94.64% of all tablet based traffic according to Chitika's network study.

That’s the one that got me.

Google’s recommendations for building smartphone-optimized websites

Google’s pushing responsive web design in their most recent developer guidelines. Dig a little deeper for their “Why we recommend responsive design.”


Converts fixed-pixel width layout dimension to percentages. It would be better with padding and box-sizing, but mustn’t grumble.

Roger Johansson: An alternative to select elements as navigation in narrow viewports

Roger references me and Brad and suggests a better way to solve small screen navigation than the all too common select menu navigation pattern.

I like this a whole lot better.

Stephen Hay: Multi-column confusion

Stephen feels the pain of CSS3 columns.

Responsive Mode and Layout View in Firefox 15

Useful for people who still use Firefox as their development browser.

Jina Bolton has added Sass to 320 and Up

320 and Up now includes Sass files (in both Sass and Scss formats) thanks to Sass superhero (and one of my favourite designers) Jina Bolton.

I’ve updated the project page.

Contribute to 320 and Up on Github or download the files.

Nick Bradbury: Old Farts Know How to Code

The startup culture is similar to professional sports in that it requires a fleet of fresh-out-of-college kids to trade their lives and their health for the potential of short-term glory. “Old farts” are often excluded from that culture, not because we’re lousy coders but because we won’t put up with that shit.


Need noise? Get noise.

(Via: Tim Van Damme’s @2x.)

Bearded: Mocking up is hard to do

I skipped linking to this a couple of weeks ago, but it makes sense to read along with the previous link to Edward O’Riordan.

Chris Coyier: Sass vs. LESS

Chris makes some great comparisons. I’ve used LESS extensively for a while now and there’s been exactly zero instances where I needed something that LESS couldn’t do (but Sass could.) Maybe that’s because I’m a designer who writes code, not a developer? Who knows? Still, I am tempted to work with Sass on a project sometime.

Harry Roberts: The single responsibility principle applied to CSS

Harry Roberts:

Loosely, the single responsibility principle states that every module or chunk of code (a function etc) should do one job well and one job only. The benefits of this are mainly in the way of maintainability and extensibility.

I didn’t know this approach had a name or think to look.

Jordan Moore: Building with Content Choreography

Jordan Moore (who has a name like a country singer:)

Say for example we want to present an article in the narrow single column view, but before the article appears in the stacking order we have: a header (containing site name etc), navigation, maybe even a banner advertisement, then the article. The heart of the page is buried beneath items that may be less important in this context. Rather than brutally hiding these items with a display:none property we can reorder them using another CSS property - flex box.

It takes something to make me sign in and blog on a Sunday, but this is good. Very good. Read the whole thing. Then study Jordan’s demo page. Brilliant.

Matt Stows Izilla Media Query Debugger

Now this is handy. It adds viewport width and height as a :before pseudo element on the body to help you determine breakpoints for content-first responsive design. Here’s Matt’s test page with the debugger* enabled. Download the debugger from Github.

* Snort

Responsive image maps jQuery plugin

Remember Matt Stow and his responsive retina images using CSS and a spacer PNG? (Now updated.) Well, Matt’s been at it again, this time with a solution to the image map problem in responsive design. Matt’s solution recalculates area coordinates to match the image size on load and window.resize. Clever. View the demo page or download the plugin from Github.

Map of the Dead

Honestly, I’ve been wanting to start hoarding candles, fire-lighters, tins of corned beef (it’s nice. Really.) and other things for a while. I know the collapse of civilisation is much more likely to come from a petrol strike these days, but hey. It’s a zombie survival map. My wife thinks I’m mad.

Chris Coyier’s Flat Icons & Icon Fonts

This came at the perfect time for me this week (thanks Chris), as one of the projects I’m working on required icon fonts. I chose Font Awesome because it works so well with Twitter’s Bootstrap and even comes with files for my beloved LESS.

Matt Stow’s Responsive Prototype Fireworks extension

More from Matt Stow. This one had gone clean out of my head. When I was in Sydney in February, Matt showed me a Fireworks extension he’d written for exporting responsive prototypes.

Now I use Fireworks almost every day — it’s my ‘go to’ design tool and so much more efficient than Photoshop for web designing — but I’ve never used it’s code output, not even for a ‘rough as a badger’s arse’ prototype, let alone anything I’d show to anyone. But Matt’s extension worked flawlessly when he showed it to me.

I’m going to try this and if Fireworks is your thing, test this out too and let’s compare notes.

Matt Stow’s responsive retina images using CSS and a spacer PNG

Matt Stow emailed me from Sydney with a link to his solution to the responsive/retina images problem. It’s a clever workaround that uses CSS and a transparent spacer PNG. Matt’s interested in your feedback (and so am I) so try it out and let Matt know your thoughts via Twitter.

Government Digital Service Design Principles


Now, when will our politicians, in all parties, communicate with such clarity and honesty.

James Weiner: Throw away Photoshop and be true to your medium

James Weiner, who works on the front end team for GOV.UK :

Furthermore, designing in-browser exposes mistaken assumptions at the earliest possible stage in a build. This means we fail quickly rather than expending effort on high fidelity mock-ups that were based on mistaken assumptions.

How happy am I to read this? Really happy.

Process is for fast food restaurants

Cennydd Bowles:

Following a recipe won’t make you a great chef – it just means you can make a competent bolognese. Great chefs don’t need cookery books. They know their medium and their ingredients so well that they can find excellent combinations as they go.

I love this. And I would go further. If your design process is more process than design, take a step back and rethink it. You don’t need what people’s say or do to tell you how to make a great design. Listen to your gut.

James Mellers’ Responsive Layouts, Responsively Wireframed

Using simple layout wireframes, this illustrates how a series of pages could work across these different devices, by simulating how the layout of each page would change responsively, to suit the context.

Another fabulous piece of work by James Mellerson a topic that’s been on my mind for longer than I can remember.

Off Canvas

Inspired by the observations of Luke Wroblewski, this Off Canvas layout demo has 3 panels that display differently depending on the viewport width.

Really nice work by Jason Weaver.

Jeffrey Zeldman tribute video - on his induction into the SXSW Interactive Hall of Fame

I was pleased to add my thanks (and so was General Ursus.) Jeffrey Zeldman go ape!


Make starting with Bootstrap easier by starting with StyleBootstrap.

The Responsinator


Via: David Roessli

Luke Brooker: Future Friendly Style Guides

Poking around Speaker Deck, I found this short presentation from Luke Brooker. In it, Luke has similar thoughts about a responsive design process to those you might have noticed in my workshop slides and up-and-coming chapter for Smashing Book Three.

There was something else familiar about the presentation and it took me a while to figure out that Luke was one of the speakers on the Brisbane leg of What Do You Know, a fabulous night of informal, short talks organised by Web Directions.

Shame on me.

Check out Luke’s presentation on Speaker Deck as well as his accompanying blog post and Pattern Response.


Mark Boulton:

Gridset is a tool for making grids. It lets you create whatever type of grid you want: columnar, asymmetrical, ratio, compound, fixed, fluid, responsive and more. It serves multiple grids to your site based on breakpoints for different devices. Using it is as simple as embedding a link.

Oh hell yeah!

iPad3 retina display will wreak havoc on the web

Brad Frost:

This is seriously troubling for the web, who’s already dealing with increasingly-bloated page sizes. Users are going to get used to seeing beautiful crisp experiences on native apps, then turn to the web and get pixelated disgustingness. It happened before with the launch of the iPhone4, but the size of the iPad’s screen compounds the problem.

Olloclip vs. iPro Lens review

Some very useful side-by-side comparisons of the results from these two iPhone lens attachments. I have the cheaper Olloclip and I like it.

Which One: Responsive Design, Device Experiences, or RESS?

One of the most asked questions at this month’s Fashionably Flexible Responsive Design workshops in Australia was “responsive or device specific?” Here, Luke makes a case for each with, as always, a thorough list of further reading.

Responsive Enhance

Josh Emerson, from:

(Responsive Enhance) A technique where a small image is always downloaded. If needed, a large image is downloaded in the background, and replaces the small image only once it’s fully downloaded. This results in a faster perceived page load speed, but a slower actual speed. I’m happy with this solution as I care more about perceived speed than actual speed.

I like the idea of this, although I’ve yet to use it. Download Responsive Enhance from GitHub (whatever that is).

On The Grid

I’ve posted my slides from On The Grid — my five minute presentation at What Do You Know, an informal series of evening community events in Perth, Melbourne, Sydney and Brisbane in February 2012 — to Speakerdeck. I know they’re not much use without the audio, but hell. You just had to be there.

The Responsive Process

Josh Emerson:

If clients only see flat images of their website, there is a danger that they are surprised by the outcome when seen in a browser.

Remember my Time to stop showing clients static design visuals? Funny how things come around.

Izilla jQuery Touch Menu Hover

Allows ULs that open on li:hover to open on tap/click on mobile platforms such as Android, WP7 etc.

(Via Matt Stow on Twitter.)

Responsive navigation patterns

Brad Frost with a very thorough and up-to-date run down of responsive navigation patterns. If you’ve attended my responsive design workshops in Australia this year, you’ll recognise many of the examples, plus a few more.

Responsive Summit: Workflow

Mark Boulton, from this week’s Responsive Summit in London. Read the whole piece (the first in a series), but this stood out for me:

Prototype. In HTML. This allows us to get the product – in whatever form – in front of the client. The aim is to remove The Big Reveal. It also lets them see how the site responds on different screen sizes. Also, we can start to think about problems that may arise due to a responsive approach *now* instead of when the templates are being integrated into a backend, or at other production sensitive times.

It happened

Vendors shipped 488 million smart phones in 2011, compared to 415 million client PCs

Via The Verge

Every Doctor Who Story 1963 to Now

Detailing every Doctor Who adventure from ‘An Unearthly Child’ in 1963 right up to ‘The Doctor, The Widow and the Wardrobe’ Christmas Special.

remember, there are still 106 episodes missing from the BBC archives.

I wish we had a time machine.

Responsive design testing bookmarklet

Benjamin Keen has made a bookmarklet based on Lennart Schoors’ responsive design test page I linked to last week.

Simple responsive design test page

Just drop this HTML document in the same folder as your index page and open it – it’s dead simple, really!

File this under “why didn’t I think of that?”

The new (and hopefully final) linear gradient syntax

Peter Gasston on the updated syntaxes for CSS3 gradients. Time to update those LESS mixins fellas.

Orangutans could video chat between zoos via iPads

Orangutans at a Milwaukee zoo could soon be video-calling their primate friends via tablet computers. The hairy tech fans have been playing with iPads since they were first introduced to them in May.

So, when apes rise, you’ll know whose fault it was.

Leaving Old Internet Explorer Behind

Joni Korpi:

Instead of enabling media queries in the browsers that don’t support them, like Internet Explorer 6–8, I chose to simply serve them the Narrow Layout.

It’s an approach that’s very similar to how I’ve chosen to handle old IE’s lack of support for Media Queries. As in accept that browsers are built differently and don’t polyfil to try and make them act the same.

Looking back at A List Too Far Apart?

I’m spending this week writing content for my Fashionably flexible responsive web design workshops in Australia in February and an article on a related topic for Smashing Magazine. Digging through the archives, I found something Jeremy wrote back in 2005 in response to the (then new, now current) A List Apart design.

When you nail a layout to a set number of pixels, you’re bound to alienate some people. It’s inevitable.

Sometimes it’s just nostalgic to read old articles, but you can find real gems. This is one. Read it in the context of what we now call responsive design.

Frameless Grid

From Joni Korpi, designer of Golden Grid System and Less Framework:

Give your grid an infinite number of columns, so that no matter how wide you make your viewport, more and more columns come into view. Imagine you’re looking at an infinitely wide honeycomb filled with columns instead of hexagons.

How many times can I like this way of thinking about design?

KLM to let airline travelers choose seating partners based on social media profiles

Dutch airline KLM is taking some of the surprise out of air travel with Meet & Seat, a new program that will let passengers pick who they sit next to using social networking tools.

Good job I’m not on Facebook.

Missing Doctor Who episodes discovered

On the BBC:

The 1965 and 1967 episodes star William Hartnell and Patrick Troughton, the first two actors to play The Doctor. They are among more than 100 instalments which were not retained by the BBC.

Great news for Doctor Who fans.

Cosmonaut stylus for touchscreens

Cosmonaut stylus for touchscreens
Cosmonaut stylus for touchscreens (Credit: Marco Arment)

I’ve tried several sketching apps and styli, but this one looks like a winner. I ordered one earlier. I’ll let you know how I get on.

Via Marco Arment, who’s written a review too.

HTML 5 new target for cybercriminals

Jane Wakefield, writing for the BBC.

An increasingly popular web language will be the next big target for cybercriminals, according to a security firm. HTML 5 is being developed to improve the look of websites, remove the need for plug-ins such as Java and Flash, and bring the storage capacity of the cloud to the browser.

Emphasis mine.

This is potentially going to be quite painful,” said James Lyne, director of technology strategy at the security firm (Sophos). The fact that HTML 5 allows more data to be stored in the browser means firms and cybercriminals could create super-cookies to track people’s web behaviour.

You mean like Facebook?

Gowalla is Going to Facebook

Gowalla’s founder Josh Williams:

Gowalla, as a service, will be winding down at the end of January. We plan to provide an easy way to export your Passport data, your Stamp and Pin data (along with your legacy Item data), and your photos as well. Facebook is not acquiring Gowalla’s user data.

I’m happy for everyone who’s happy about Facebook acquiring (I hate that term) Gowalla. For me, the best part of this news is that Facebook won’t get their hands on my data and that there’ll be easy ways to extract it. If the Foursquare guys are watching, now’s a good time to work on those import tools.

Type at the Crossroads

Typeface designer Jonathan Hoefler:

I drew an ‘E’ this morning.

At Pivot, the AIGA Design Conference in October. If you’re at all interested in fonts and webfonts, before you do anything today, watch the video.

What bugs me about content out

Cennydd Bowles:

Some of the best-known examples of the content out design principle are blogs from today’s leading digital lights. These sites feature expert typography, harmony and balance. They are undoubtedly beautiful. They also look terribly similar.

Cennydd makes a good point, that “It’s impossible to perceive content and presentation separately. The two combine to create something more valuable: meaning.” but I can’t agree with the quote above without examples.

New rules on the use of security scanners at European airports

In addition, passengers are given the right to opt out from a control with scanners and be subject to an alternative method of screening.

This can only be good news, but I wonder how quickly (if at all) this will apply to UK airports. The last time I tried to opt out of a backscatter scan in Manchester, where they have been trialling these machines, I was told “no scan, no fly.”

Via: Daring Fireball

Build Brass Nuts

Thomas Forsyth made ten bespoke brass nuts for Build. Here’s a short film about how he did it. It’s inspired.

Via: Simon Collison

Responsive Advertising

Mark Boulton:

The template > slot > ad mental model is engrained both in advertisers, planners and web sites. Providing space for ads needs to be broadened into multiple spaces for one ad concept. This requires closer collaboration between advertisers and web sites, designers and marketeers and sales teams.

This is exactly the issue I’ve faced in my redesign work for STV. My solution, and one that seems to been accepted, has been to:

  • Develop a custom grid for STV based on the size of MMU units
  • Design a series of page regions to accommodate a fixed number of same-size ad slots to help with adaptive layouts
  • Use min-width on ad containers
  • Serve leaderboards above the 768 breakpoint only

With STV’s permission, I’d love to publish some of our solutions.

Divya, you are just plain wrong

John Foliot commenting on Divya Manian’s aforementioned ‘Our Pointless Pursuit Of Semantic Value

Web Developers: don’t believe this rubbish — it is the opinion of one, slightly mis-informed young lady who has failed to really understand what she is advocating.

Our Pointless Pursuit Of Semantic Value

Divya Manian writing for Smashing Magazine:

Mark-up structures content, but your choice of tags matters a lot less than we’ve been taught for a while.

Divya makes some good points, but overall this article just leaves a bad after-taste.

Type study: Sizing the legible letter

Ethan on the many different ways to size text using CSS. Make sure you don’t skip the (too short) section on rems. (I’m using rems exclusively these days, with a pixel fallback.)


From the makers of LESS.app, CodeKit

Automatically compiles Less, Sass, Stylus & CoffeeScript files. It effortlessly combines, minifies and error-checks Javascript. It even optimizes images, auto-reloads your browser and lets you use the same files across many projects.

I’m testing CodeKit this week, but I suspect it’s soon going to be my go-to toolkit.

Original Hover Effects with CSS3

I haven’t linked to much CSS3 recently — hell, I I haven’t linked to much at all — but all that’s changing with this new site. These demos by Alessio Atzeni are fun, with the “don’t forget the no-hover alternative” caveat.


One of the biggest reasons I chose LESS over other CSS pre-processors, was LESS.app. It processes LESS syntax into CSS on my Mac, every time I save a file. No Javascript and most importantly no complicated Terminal, Ruby malarkey. Simpless is a compiler that works on Linux, Mac OSX and Windows. I’m testing it now.

I’ll be writing a proper entry about how and why I use LESS soon.

BBC Weather (beta)

Hats off to the BBC. This is lovely work.

(Via Mark Boulton.)

Jawbone Up

Jawbone Up

I just ordered mine, in black.

Twitter Stories

From Twitter’s blog:

Today we’re launching the first in a series of Twitter stories. Read about a single Tweet that helped save a bookstore from going out of business; an athlete who took a hundred of his followers out to a crab dinner; and, Japanese fishermen who use Twitter to sell their catch before returning to shore. Each story reminds us of the humanity behind Tweets that make the world smaller.

Having ridden it a few times, I especially like @caltrain’s Twitter story. What a lovely idea and so very well executed.

Time for a change

Steve Faulkner asks for more discussion on the removal of ‹time› and the pubdate attribute from HTML5 (it’s been replaced by the far less useful ‹data› and value. He’s right too.

And if HTML5 is supposed to build standards around existing usage, how come the fact that many sites — including the HTML5 poster child Boston Globe and potentially millions using the default WordPress theme — has been ignored?

See also Bruce Lawson’s Goodbye HTML5 <time>, hello <data>!

A .Net Magazine interview with yours truly

To hell with being graceful! We need to be really ambitious.

What? I actually said that? Who? Me?

JAWS Support for ARIA

Steve Faulkner:

Freedom scientific have provided documentaion on how the JAWS screen reader support WAI-ARIA. It is available as a microsoft word document. [Below] Here is the same information in HTML format

HTML5 - Edition for Web Developers

This HTML5 specification is like no other—It has been processed with you, the humble web developer, in mind.

See also Ben Schwarz’s background to the project.

Using Media Queries in the Real World

The way I achieved this is by making the mobile stylesheet the default, and adding in the heavier page assets for the desktop theme using a media query:

Why didn’t I think of that? Genius!

Class Action Lawsuit Against Disney Alleges Inaccessible Websites

The ADA requires Disney’s websites to respect the needs of the visually impaired, such as by accommodating the use of screen-reader technology. The Disney sites, which are created for Disney affiliate Walt Disney Parks and Resorts by two other affiliates, Disney Online and Walt Disney Parks and Resorts Online, are replete with video and audio trailers which cannot be turned off by people who cannot use a mouse and which drown out screen-readers. The websites also contain Flash content that is not accessible to blind persons. The Plaintiffs assert that Disney simply does not address the needs of people who are visually impaired in creating its webpages.

From my experience of working with Disney UK, it wasn’t that they didn’t care about accessibility, they just didn’t know a damn thing about it.

Getting Hardboiled with CSS3 2D Transforms

Those lovely folks over at Typekit published a guest article by my good self yesterday, Getting Hardboiled with CSS3 2D Transforms, where I’ used an example that was planned for Hardboiled Web Design, but never quite fitted in. The link to the hardboiled example file must have been stolen, so here is the final result.

Win one of five signed copies of Hardboiled Web Design

Courtesy of my good friends at Media Temple, your chance to win one of five signed copies of Hardboiled Web Design. No, not the PDF silly! The full 400 page, 1.5kg printed version! To enter, simply leave a comment with your definition of ‘Hard Boiled Web Design.’ Good luck!

Update: Please leave your comment on the Media Temple blog, not here.

Hardboiling it: Five Simple Questions with Kevin Cornell

When Andy suggested asking the amazing illustrator Kevin Cornell to produce the front cover for Hardboiled Web Design, we were so excited by the possibility! So, when he said yes, we were made up! Kevin has produced a work of art! We'll be revealing the finished cover when the book goes on sale on the 19th October but read on for a few clues to what it will look like.

600 Hanna-Barbera Characters

Juan Pablo Bravo:

Infographic showing 600 Hanna-Barbera Characters. The characters are shown in chronological order, with their respective names in english and spanish (of the TV series and the characters).

Campaign Monitor’s Email Newsletter Design Contract

Thanks to Andy Clarke’s ‘Contract Killer’, we’ve adapted one of the best design contracts we’ve seen to make it not only relevant to email newsletter design, but fillable in 30-seconds or less!

Highly Maintainable, Efficient, and Optimized CSS

Zoe Mickley Gillenwater:

I gave a presentation at entitled Highly Maintainable, Efficient, and Optimized CSS. I tried to squeeze as many tips as I could in to cover how to create CSS that is well organized and readable while still keeping efficiency in mind.

Contains some fantastic resources.

Extending HTML5 — Microformats

Oli Studholme on HTML, microformats and WAI-ARIA roles. These are three topics I cover in Hardboiled Web Design, making this article a fantastic primer.

Fixing the background ‘bleed’

-webkit-background-clip: padding-box;

goTeach brand identity design

Designer David Airey Shares his process for the branding design for goTeach. I’ve been working separately on the web interface and layouts.

Flash and the HTML5 video tag

While HTML5’s video support enables us to bring most of the content and features of YouTube to computers and other devices that don’t support Flash Player, it does not yet meet all of our needs. Today, Adobe Flash provides the best platform for YouTube’s video distribution requirements, which is why our primary video player is built with it.

What does browser testing mean today? (Belorussian translation)

A Belorussian translation of my What does browser testing mean today? for all you Belorussian types.

Web Directions @media 2010

I think that what Andy showed us was inspiring and I hope every designer and developer in that room was encouraged and excited by the possibilities. However my take is that an approach that attempts to recreate that experience at least for all modern desktop browser users is a requirement for most of us.

— Pragmatic as ever, Rachel Andrew challenges some of my hardboiled approaches. A very good read.

Multiple Backgrounds and Borders with CSS 2.1

Using CSS 2.1 pseudo-elements to provide up to 3 background canvases, 2 fixed-size presentational images, and multiple complex borders for a single HTML element.

Really good stuff from Nicolas Gallagher.

100 Years Of Propaganda: The Good, The Bad and The Ugly

In this article, we look at various types of propaganda and the people behind it, people who are rarely seen next to their work. You will also see how the drive for propaganda shaped many of the modern art movements we see today.

— Smashing Magazine deserve a pat on the back for publishing this.


At Web Directions @media last week, Mircea Piturca (who attended my Advanced CSS Styling workshop) showed me his latest side-project — TypeFolly — a designing in a browser interface experiment made entirely using jQuery pulling fonts from the Typekit API.

TypeFolly is probably the first web typography tool that allows designers to easily create beautiful “type follies”. The result is a fully html & css3 compliant code. TypeFolly gives designers the freedom to create beautiful type compositions, test new font combinations and fully enjoy the power of CSS3.

An amazing piece of work.

Universal IE6 CSS version 1.1

Minor updated removing unnecessary :before and :after pseudo-classes.

Playing with new site design idea in HTML is painful

Brendan Dawes:

If I was doing this in Flash it would take me ten minutes, and it would work consistently. But I want to learn new things and have it visible on the iPad and iPhone. It’s taken me about two days of work to get it to where it is now. As a designer these kind of things are a distraction.

Prisca Schmarsow reviews jQuery for Designers

It was brilliant — I learnt a lot and left with a full head, bursting with geekery, tons of new ideas and solutions to old and new problems flying through my mind.  The venue was wonderful, the food delicious. We received a beautiful cloth which is delicately embossed with the #fabw pattern and text. Just gorgeous. And the workshop was just brilliant.

Blackberry shows off their (cursor driven) Webkit-based browser

Can you count the number of times Mike Lazaridis says we respect carriers?

The changing typography of the Web

LA Times’ Deborah Netburn:

In other words, a seventh-grader writing a book report on Microsoft Word had more font choices than the person designing Esquire Magazine’s website or the IKEA online catalog. But now that is about to change.

No shit.

Ben Ward on Understand The Web

Want to know if your ‘HTML application’ is part of the web? Link me into it. Not just link me to it; link me into it. Not just to the black-box frontpage. Link me to a piece of content. Show me that it can be crawled, show me that we can draw strands of silk between the resources presented in your app. That is the web: The beautiful interconnection of navigable content. If your website locks content away in a container, outside the reach of hyperlinks, you’re not building any kind of ‘web’ app. You’re doing something else.


Advanced CSS Workshop at Web Directions @media 2010

This year, in addition to my traditional appearance at @media in London, I’m running a workshop, Advanced CSS Styling. If you’re coming to the conference, the price is only £299.00 (otherwise £325.00) plus you’ll get a peek at everything hardboiled. I hope I’ll see you there.

Designing for iPad: Reality Check

I cannot emphasize enough how radically different the frame set is, that iPad interfaces are embedded in. The iPad brings hands and eyes back together.

For A Beautiful Web DVD series review by Designorati’s Jeremy Schultz

The three-disk For A Beautiful Web DVD series is a very nice resource for web designers, with roughly two hours per disk on three important topics: CSS, microformats and web accessibility. Presenter Andy Clarke, a web designer based in the UK, knows his stuff.

Internet Explorer 6 no longer supported by Amazon

As of the end of March 2010, we will no longer develop Seller Account pages to be compliant with Internet Explorer 6.

I didn’t see that coming.

Lifecycle of a Wireframe

Blue Flavor’s Nick Finck presentation from MIX10.

Four ways to mix fonts

Here are four tips for navigating the typographic ocean, all built around H&FJ’s Highly Scientific First Principle of Combining Fonts: keep one thing consistent, and let one thing vary.

CSS3, Please! The Cross-Browser CSS3 Rule Generator

From Paul Irish, one of the brains behind Modernizr.

Speak the Web (Manchester) Review

Fun as it is to take a trip to London/Brighton for a web conference it does start to get expensive so the fact that some local boys put on something for us Northerners was really cool.

— Couldn’t agree more. Speak The Web was a triumph.

Why designers should and shouldn’t code

At Clearleft, our designers do not mark up their own designs. We require that they can all code well, but they never touch a line of production HTML. By the same notion, our front end developers – the ones who do code up the designs – never push a pixel of design, but we do expect them to have a basic understanding of design principles.

On Designers writing HTML

To deem it neces sary to write HTML to be a good web designer is really quite dis respect ful to experts in those sub sets of web design who never go near any HTML, yet have equal value to bring to a design project.

An Outsider’s Guide to the W3C - FAQ

From January 2003 but still an illuminating read from Simon St. Laurent.

BlackBerry demo of its WebKit browser

Start asking your clients, “Would you like me to make sure your new site works on Blackberry, iPhone and iPad or spend time hacking for IE6?” I bet I know which one they’ll choose.

MTV logo changes, stays same

There’s nothing terribly revolutionary about MTV’s new logo – described aptly by the network as a ‘refresh’ rather than a redesign.

We’re Ready for CSS3, but are we Ready for CSS3?

A thoughtful article from Jonathan Christopher on when he feels it appropriate for him to use progressive CSS.

Revised Font Stack

Font-stacks created after considering the font-share percentage on both Mac and Windows platforms and then checked in browser for x-height and other issues (like: readability).

CSS3 AT-AT Walker

This is why CSS was invented. Read the tutorial.

Life Below 600px

Some people would have you believe that you aren’t reading this because it’s not ‘above the fold’.

— Sending this to my client from hell.

Hello, summary and figcaption elements

This weekend saw the minting of not one but two new elements. The summary element (not the summary attribute on the table element) goes inside the details element:

The Proper Way to Add In-Page Navigation

Peachpit have released a short section from my Designing Web Accessibility DVD on YouTube.

Remy Sharp Talks JQuery

Remy Sharp talking to Boagworld.

— Don’t miss out on your place on jQuery for Designers with Remy Sharp workshop in London on May 14th 2010. Tickets on-sale now.

Redesigning the undesigned

In my totally unbiased and professional opinion, this new blog design from Simon Collison is worth two years of waiting. Brilliant stuff.

Screenshots of Typekit fonts in (almost) every browser, on every platform

Want to see how FF Meta renders in IE 6 on Windows XP? How about Skolar in Firefox 3.5 on Ubuntu? We’ve got it covered. Just navigate to any font on Typekit and click on the “Browser Samples” tab.

— More from the Typekit blog. The almost added by me as there is currently no Typekit support for Opera.

The Battlefield of HTML5

Modularization is but one option for the HTML5 specification, of course, but while it won’t please all parties equally, it would at least put an end to this battle and restore some sense to the specification.

— Faruk Ate? on one option for stabilising HTML5.

Helping Carbonmade keep their finger on the Pulse

Seeing as I already had all of the content that was to be displayed I jumped straight into writing HTML and laying out the content in the browser – this is an approach I often take where appropriate and this job was really all about the content, Photoshop could wait for now.

— Sam Brown with a lovely writeup on the new dashboard he designed for Carbonmade.

Cleaning up the CSS only sexy bookmark demo code

To me, praising “CSS only solutions” is not enough – if you really love CSS and see it as a better solution than JavaScript then you should also show how people can use its features to create smart, short and flexible code.

— Excellent tutorial from Christian Heilmann. Too many people forget that good HTML is more important than any fancy CSS or Javascript.

Cascading Style Sheets, level 1

CSS1 is a simple style sheet mechanism that allows authors and readers to attach style (e.g. fonts, colors and spacing) to HTML documents. The CSS1 language is human readable and writable, and expresses style in common desktop publishing terminology.

— As we start the third decade of CSS, it is good to remind ourselves just how far we have some.

Without them

One of the most common things I hear is, “I’d like to do something remarkable like that, but my xyz won’t let me.” Where xyz = my boss, my publisher, my partner, my licensor, my franchisor, etc. Well, you can fail by going along with that and not doing it, or you can do it, cause a ruckus and work things out later.

— Web designers and developers can learn a lot from this.

Evolution of every medium

Technicians who invented it, run it. Technicians with taste, leverage it. Artists take over from the technicians. MBAs take over from the artists. Bureaucrats drive the medium to banality.


Primer undercoats your CSS by pulling out all of your classes and id’s and placing them into a starter stylesheet. Paste your HTML in to get started.

— This could be a useful tool.

CSS3 2d transform visualiser

Now updated to include Safari 4, Firefox 3.5 and Opera 10.5.

Ignorance Is Bliss

Often when I talk or write about using progressive CSS, people ask me, “How do you convince clients to let you work that way? What’s your secret?” Secret? I tell them what they need to know, on a need-to-know basis.

— My article for 24ways 2009 is live. Comments range from “He’s mad” to “He’s really lost it this time.” (archived here)

Iron Man 2 trailer

After Marv, this could be the perfect role for Mickey Rourke. Shoot to thrill!

Stronger, Better, Faster Design with CSS3

Focussing on using those CSS techniques (and a little JavaScript) to create some practical elements and layouts.

— Article: 9/10. Comments: Don’t get me started.

Speak the Web

A series of small, intimate, low cost web design and development events in the style of a gig. Coming to Manchester, Liverpool, Sheffield and Leeds in early 2010.

— I will be helping out and of course the events are supported by For A Beautiful Web.

Going Nuts with CSS Transitions

CSS transitions and transforms are a great example of progressive enrichment, which means improving the experience for a portion of the audience without negatively affecting other users. They are also a lot of fun to play with!

An 18-Minute Plan for Managing Your Day

How can you stick to a plan when so many things threaten to derail it? How can you focus on a few important things when so many things require your attention?

— I’m starting on this. Tomorrow.

Sass isn’t for me

Nathan Borror on Sass, the CSS preprocessor. CSS is not a programming language, it’s a style language and the preprocessor community should keep that in mind..

Best comment comes from Jeff Croft: CSS gurus are just that: CSS gurus. They already know how to write their way out of any paper bag you can find using CSS. They’re experts. They don’t NEED a preprocessor.

Please design a logo for me. With pie charts. For free.

Instead of traveling through time and finding myself in the future, I traveled about fifty metres along the footpath at 200mph before finding myself in a bush. When asked by the nurse filling out the hospital accident report “Cause of accident?” I stated “time travel attempt” but she wrote down “stupidity”.

— Simply hilarious.

An Early Look At IE9 for Developers

Includes border-radius in Internet Explorer. I would love Microsoft to offer a full roadmap of their planned CSS development for IE9.


A collection of screenshots displaying examples of microcopy in web application design. Microcopy is tiny copy (often shorter than a sentence) that helps clarify, explain, reduce commitment, or otherwise assuage someone when performing (or considering) a task. Curated by Annett-Baker and Joshua Porter.

Westciv CSS Transforms creator

A first look at John Allsopp’s Westciv CSS Transforms creator and demonstration (remember, you read it here first folks). I hate that how clever this guy is, but I love him anyway.

The Beauty of London in Design

A look at the visual personality of London, based on visits to the city’s major art museums, attendance at the 2009 London Design Festival, and interviews with artists and designers who call the great city home.

— A well written and illustrated piece by Dan Redding. Well done to him and to Smashing Magazine. More like this please.

Nick Cowie’s CSS Zen Garden example with CSS transitions

The CSS Zen Garden has largely gone to seed. But that didn’t stop Nick Cowie from using it to show off CSS transforms and transitions.

Progressive enhancement with CSS3

Nick Cowie’s Progressive enhancement with CSS3 presentation slides (including a little from my CannyBill redesign) on Slideshare.

New Drop Caps

I wanted illustrative drop caps produced that were aligned to the inspiration for this design; namely Renaissance illustrations and carvings.

— Vision like this is why I rate Mark Boulton as probably the best web designer in the world.


In praise of the chrome logos and lettering affixed to vintage automobiles and electric appliances — those unsung metal emblems and badges that are overlooked, forgotten, damaged, lost to time or the dump. (source)

CannyBill redesign browser testing screenshots

If you’ve been following my redesign of CannyBill, after only three weeks, the project is drawing to a close. Here are screenshots from the browser testing phase on our Flickr group.

The Multipack Presents: HTML5

The Future of Web Applications by Bruce Lawson.


Hard man Dan CederholmI’d like to post here more often — not just to fill up bits and bytes, but to write again. Remember when blogs were more casual and conversational? Before a post’s purpose was to grab search engine clicks or to promise “99 Answers to Your Problem That We’re Telling You You’re Having”. Yeah. I’d like to get back to that here.

— I’d like that too. I have to admit that I really miss blogging as it was in 2005/6 and since I restarted And All That Malarkey in earnest, I’ve loved writing on it.

Showcase of Web Design in Russia

I vowed never to link to a Smashing Magazine list post, but this one is something different to their usual fare. I’ve been interested in global design differences for years and back in 2007 I presented a talk called Royale With Cheese about those little differences at @media in London. There is some amazing work linked to here.

@font-face and performance

Given the high number of posts about @font-face recently, I expect we’ll see more performance issues and workarounds as we grapple with how to use this feature in today’s browsers while ensuring our users get the fast experience they want and deserve. (source)

Do websites need to be experienced exactly the same in every browser?

Greetings modern browsing people.Dan Cederholm


Say goodbye to the browser-specific properties and hacks cluttering your files and say hello to lean, mean CSS. With eCSStender, when you write the rules, browsers pay attention. From the kilted Aaron Gustafson at An Event Apart Chicago.

Spammers, Evildoers, and Opportunists

It’s not your job to create content for Google. it’s their job to find the best of the web for their results. Your audience is your readers, not Google’s algorithm.

Becoming a Font Embedding Master

I’ve spent a couple days worth now trying to figure out the best and most complete approach to font embedding using @font-face. It really is a dark art that must be mastered. It is by no means a straightforward process.

Introducing the Flexible Box Layout module

Peter Gasston — One aspect of CSS3 that hasn’t received a lot of attention so far is the Flexible Box Layout module. Already implemented in the Gecko and WebKit engines.

There is no WebKit on Mobile

There’s iPhone WebKit, Android WebKit, S60 WebKit (at least two versions each), Bolt, Iris, Ozone, and Palm Pre, and I don’t doubt that I’ve overlooked a few minor WebKits along the way. This is not consistency; it’s thinly veiled chaos.

— Where does PPK find the time? Be sure to check out his Great WebKit Comparison Table. Amazing work.

Screencast: Converting OTF or TTF to EOT

Jonathon Snook demonstrates FontForge to convert TTF and OTF fonts to EOT for font embedding in Internet Explorer. You might also want to try a free online font converter and TTF to EOT Font Converter.

Print Fancy

An often overlooked aspect of your online brand is how people print it. — What a brilliant idea for a design gallery. I wish I had thought of that. (Source)

@font-face in Depth

A very thorough round-up of font-face issues and techniques.

A big-assed post about Fireworks

God, on and on and on. Not just on your blog but on Twitter and anywhere else you care to air your smelly old-skool blanket. Jon, just accept you need to switch to using a combination of Photoshop and Illustrator and stop plowing this lonely furrow. Everyone else manages just fine this way. But wait, oh no, we’re not ‘web celebrities’! Catch hold of yourself and get with the program please.

— (Sixth comment is not me (actually). I love Fireworks, always have.

textorize: Pristine Font rendering for the Web

We all want really nice looking web typography, and there’s a ton of solutions out there. — Thomas Fuchs on web typography.

What Gives?

The work we are doing on the web is critically important. We’re working at building the most important communications network in history. What we do today matters. It matters for today, for tomorrow, forever – and it deserves our very best work. We owe it to each other, to ourselves, to everyone.

Stuff made from stuff

I love all things mechanical and taking things apart to see what makes them tick. I especially love old mechanical clocks and all those gears. (Source)

Why Corporations Don’t Upgrade IE6 and How Chrome Frame Could Help

Some interesting case studies and experiences in the comments. Skip the weak article and jump straight to the comments.

Google Chrome Frame - accessibility black hole

Google have released Chrome Frame a plugin-in for Internet Explorer that seamlessly brings Google Chrome’s open web technologies and speedy JavaScript engine to Internet Explorer. What it also does is seamlessly bring Google Chrome’s lack of support for assistive technologies to Internet Explorer.

— I cannot imagine that this situation will last for long. (Source)

Arial versus Helvetica

Showing the difference between Arial and Helvetica.

Guide to CSS Font Stacks: Techniques and Resources

A rare, useful article from Smashing Magazine.

21 Awesome @font-face Embeddable Typefaces

What it says.


I have plans for this typeface.

How to Handle IE6: Aggressive Graceful Degradation

Taking an Aggressive Graceful Degradation stance is the easy part, the hardest part by far is conveying both the cause and effect of this decision to your client and what it means for his project. To tackle this issue directly, my company has started including an additional document with our contracts, explicitly stating our stance when it comes to Internet Explorer.

The State of the Web Design Profession

Now, just because we’re not a licensed profession, doesn’t mean we can’t act like one. Excellent entry from Noah Stokes. I don’t agree with him completely but it’s so refreshing to read a thoughtful, original article.

Things to ask before you redo your website

Seth Godin. My favourite has to be Does the organization understand that ‘everything’ is not an option?

Our Craigslist

Wired magazine invited several designers to re-imagine and redesign Craigslist. A fascinating look inside the brain that belongs to Khoi Vinh.

Roundup of Font Embedding and Replacement Techniques

Zoe Mickley Gillenwater, author of the most excellent Flexible Web Design: Creating Liquid and Elastic Layouts with CSS on the current options for web fonts.

September HTML5 spec changes

September being one month before the HTML5 spec goes to last call in October, there’s been a few significant changes to the HTML5 spec that we wanted to briefly share with our patients.

A collection of vintage Apple ads

Wonderful stuff, and perfect desktop background fodder.

Keyboard Accessibility

Patrick Lauke’s presentation from future of web design tour 2009. Includes suggestions for improving keyboard access on For A Beautiful Web that I will implement this week, plus a tear apart of Boagworld.

The Z-Index CSS Property: A Comprehensive Look

A half-decent CSS z-index primer but one that (again) misses one of the most important facets of z-index, that when you create a positioning context (by applying the position property to an element), you create a new instance of normal flow and therefore a new, independent stacking order. To fill in the gaps, see my Z’s not dead baby, Z’s not dead article on 24ways from December 2005.

Bulletproof @font-face syntax

Let Paul Irish introduce you to the best way to do your @font-face definitions.

Screencast demo of Typotheque web font system

Typotheque is in the final stage of testing their web font service. The video below presents some of the features and show how to use Typotheque fonts.

Trent Walton

It’s rare that I find a site as immediately appealing as this one. Nice work. (source)

12 business tips: cash is king

The boot is now on the other foot. The client is the one who is taking the risk by paying us up front and in advance of time spent on their project.

— Great advice. I’ll be switching from 30 day to 7 day terms from Monday.

Modernizr 1.0

Have you ever wanted to do if-statements in your CSS for the availability of cool features like border-radius? Well, with Modernizr you can accomplish just that.

— I’ve been using Modernizr since the first release and have upgraded Stuff and Nonsense to this latest version. It works seamlessly. Also, be sure to check out the Modernizr documentation. It’s a fantastic reference for up-to-the-minute CSS.

A valid XHTML & CSS Lightbox (no JavaScript)

This is brilliant. Amazing. Did I say brilliant? Now I’m figuring out how she did it. (Source)

Google’s SVGWeb Brings SVG Support to All Browsers

Google, realizing the widespread installed user base of Flash (probably >95% of users), decided to basically implement SVG through Flash so that anyone who has Flash installed will be able to see and interact with SVG content. (Source)

An Event Apart 2010: A Web Design Odyssey

An Event Apart, the design conference for people who make websites, announces its 2010 schedule, covering five great cities in five information-packed, two-day sessions.

— And I’m also very proud to announce that I’ll be speaking at every one (except Minneapolis).

HTML5 pocket book

Jeremy Keith has put together an HTML5 pocket book using using Natalie Downe’s superb CSS.

Download Hundreds of @font-face Fonts

This page showcases all the fonts that Font Squirrel offers for use with @font-face CSS embedding. Though [they] try very hard to verify compliance with license agreements, please read them yourself before using.


Typedia, a community website to classify typefaces and educate people about them. — From the head of Jason Santa Maria.

Customizing ExpressionEngine RSS 2.0 Template

Emily Lewis has written a lovely piece on how to customize ExpressionEngine’s RSS template.


Lessn is an extremely simple, personal url shortener written in PHP with MySQL. — I implemented Lessn on my own short URL in less than a minute.

Simon Collison’s Nailing Your Own Projects on Slideshare

In this design and content-focused talk, Simon shares his own experiences - both successes and failures - with a specific focus on the agency/portfolio website and it’s variants.

Web fonts and standards

There is also the possibility that the middlemen, by increasing acceptance of web fonts, will hasten the arrival of a licensing standard—and that this will, in turn, prompt Microsoft to support @font-face for any licensed font. — Zeldman on web fonts.

.net Magazine Awards 2009

The .net Awards celebrate the best in web design and development, and are brought to you by the world’s best-selling magazine for web builders - .net. — You can vote for mine and Brian Suda’s TweetCC for Best API Use. (Disclaimer: I’m also a judge for the awards, but I won’t tell if you don’t.)

The Process Toolbox, part seven: Convention

Erskine have developed a base layer of rules and conventions that act as starting points for HTML, CSS, JavaScript and ExpressionEngine for our own projects.

I suppose it should come as no surprise that the Stuff and Nonsense Ultimate Package shares 90% of its DNA with that of Erskine Design’s.

Bad advice: people still teaching CSS hacks

Peter Gasston on uninformed articles like this one that perpetuate bad advice about how to handle browser differences.

Nice Web Type likes Bello and Proxima Nova

That’s not an image, it’s HTML text with real fonts provided by Typekit and embedded via CSS @font-face.

Now we’re talking.

Pure CSS text gradient (no PNGs)

One of the best, and easiest to understand, explanations and demonstrations of CSS masks and gradients I have seen.

Serving and Protecting Fonts on the Web

Our goal is different. After talking to dozens of foundries, we’ve found traction with a solution that works today and moves the conversation forward. With it, we hope to provide the easiest place to use real fonts on the web, legally and licensed, and to compensate type designers for their amazing contribution to visual communication.

Typekit’s Weights and Styles palette in action

Typekit‘s Weights and Styles palette launched today, enabling you to select only the weights and styles that you need from each typeface and so reducing the weight of a kit. By selecting only ‘Normal’, I reduced For A Beautiful Web‘s kit weight from 204Kb to only 51Kb.

Typotheque web fonts preview

Owners of Typotheque font licenses can create embeddable fonts via their Typotheque accounts. Simply enter the URL(s) where the font will be used and the languages to be supported, and our system instantly generates a short block of CSS code. Paste the code into your website, and you are ready to start using the font. You will not work with actual font files, but with the CSS code linking to the font files. For most browsers TTF subsets are used, for Internet Explorer, fonts are converted to EOT format on the fly.


Something tells me I’m going to do a lot of shopping on this site. I already have a use for Adelle.

Geek In The Park 2009

Saturday 15th August 2009 for an all-day family event including a relaxing picnic and an evening of illuminating talks by web industry leaders Simon Collison and Remy Sharp.

I wish I could be there, but I’ll have to be satisfied with Trevor Morris‘s amazing work on the site.

IE6? Not on my internet!

The idea is to deny large swathes of the web to Internet Explorer 6. If enough people do it, IE6 will become unusable literally overnight. Upgrading to another browser will become a pressing need.

This is a terrible idea, a naive and uninformed approach as it will disadvantage users and most importantly harm accessibility.


Royalty-free vector icons, glyphs and symbols based on the Helvetica Bold typeface.

html5 is a mess

John Allsopp comments on Zeldman’s html5 nav ambiguity resolved.

Misunderstanding markup

Just remember, XHTML 2, the spec, has nothing to do with XHTML, the syntax. XHTML lives on in HTML 5. (See also Zeldman’s In Defense Of Web Developers.

Static design processes lead to usability failures

Dave Mosher (an attendee at An Event Apart Boston) responds to Walls Come Tumbling Down.

Typography For Lawyers

And for web designers too. There is a lot of fantastic content here.


Have you ever wanted to do if-statements in your CSS for the availability of cool features like border-radius? Well, with Modernizr you can accomplish just that! — Now this is promising. I will be testing and writing about Modernizr later this week. Also, read Proudly Announcing: Modernizr by Faruk Ate?.

What is a Browser?

A very telling video about what the average person is thinking when they use the Web.

Checking for installed fonts with @font-face and local()

Firefox 3.5 was released earlier today, and joins Safari in supporting the @font-face rule with OpenType and TrueType font families, allowing you to use a wider range of fonts in your designs (as long as they are correctly licensed, of course).local(), now that’s interesting.


html5doctor is a collaboration between, Rich Clark, Bruce Lawson, Jack Osborne, Mike Robinson, Remy Sharp and Tom Leadbetter. — I learned something in the first five minutes, good stuff.

Icons for Interaction

Jon Hicks’ presentation slides from @media2009.

Ration Coupons on the Home Front, 1942-1945

Shows how the U.S. government controlled and conserved vehicles, typewriters, sugar, shoes, fuel, and food. (via @brunsvold)

Using tweets as comments in ExpressionEngine

Kenny Meyers on tweets as comments in ExpressionEngine.

@Media2009: The Process Toolbox

Simon Collison gave the talk of the show at @media2009 and Greg Wood‘s slides were the best I’ve ever seen at any conference.

Designing Virtual Realism

Dan Rubin‘s Designing Virtual Realism presentation from @media2009 and An Event Apart Seattle.

this is a working library

Mandy Brown is a Creative Director at W. W. Norton & Company, where her work involves everything from book design to web design to writing about design. — How do I love the design of this site? Let me count the ways.

10 Useful Firefox Extensions to Supercharge Firebug

Firebug is a revolutionary Firefox extension that helps web developers and designers test and inspect front-end code. — Perfect for when you’re designing in browser.

A Detailed Look at the Z-Index CSS Property

I would venture to guess that z-index is probably the CSS property that is more speedily abandoned than any other. — Nice overview. You might also want to read my Z’s not dead baby, Z’s not dead for 24ways from 2005.

LetterCult: The best of the first half 2009

Custom Letters is an evolving category that includes calligraphy, sign painting, graffiti, stone carving, digital lettering, hand lettering, paper sculpture, and type design.

Why browser zoom shouldn’t kill flexible layouts

Now that all the major browsers include the ability to zoom the entire page layout, rather than just increase text size, are liquid and elastic layouts obsolete? Can’t we just use fixed-width layouts and let the user zoom them if needed? The answer to that question depends on whether browser zoom solves all of the same problems than liquid and elastic layouts solve, and I don’t think it does. — Excellent article from Zoe Mickley Gillenwater.

Quadrophenia scooter sold at auction

How did I not hear about this before?

Adaptive CSS-Layouts: New Era In Fluid Layouts?

Fluid web designs have many benefits, but only if implemented correctly. With proper technique, a design can be seen correctly on large screens, small screens and even tiny PDA screens. — The next version of Stuff and Nonsense will be fully fluid, so this might be perfect timing.

Why Designers Should Learn How to Code

For optimum efficiency, designers should not only be concerned with painting the bigger picture but also building it! In this article, I’d like to share with you some reasons why designers should learn how to code.

Contract Killer (versao tupiniquim)

Brazilian lawyer and contract specialist Henrique Haruki Arake Cavalcante has translated Contact Killer into Brazilian Portuguese.

Record Envelope

Kavel Rafferty’s collection of company sleeves — A reference for vinyl geeks and graphic artists.

Digital Artist 2009 Masterclass #2 - Brendan Dawes

My mate Brendan Dawes, interactive designer and creative director at magneticNorth, discusses the inspiration behind his award-winning work including Cinema Redux and the BBC Earth website. — and guess what? It contains language that some viewers may find offensive.

Fonts, JavaScript, and How Designers Design

More on Typekit from Jeffrey Veen — Our goal is to support designers and developers with tools that make it easier and more efficient to practice their craft. How will typography fit in? It may be too early to tell. — I’ll tell you something Jeff, it better fit well.

Getting Semantic With Microformats, Part 8: Value Class Pattern

No, your eyes aren’t deceiving you. It’s another installment of Emily Lewis’s Getting Semantic With Microformats series. — Cool girl, hot on code.


Clearleft has been working on a system very much like Typekit. Our technology sounds different, but the effect should the same: a font-face delivery system that will work keep both font designers and web designers happy. — You heard it hear first folks. I thank you. (cymbal crash)

Cool Tools and Toys for Web Developers

Even when it’s nowhere near Christmas, the gifts just keep on coming from John Allsopp.


A clear and quick reference to HTML symbol entities codes. (via)

The Vendor Client relationship

Genius video.

Cigarette Packet Collectors Club of Great Britain

(cough). I’ve collected a few (cough, cough) packets in my time, but these (cough) are a great source of (cough) colour and type inspiration (cough, cough, cough).

Introducing Typekit

Phew! I don’t need to keep quiet about this any longer — We’ve been working with foundries to develop a consistent web-only font linking license. We’ve built a technology platform that lets us to host both free and commercial fonts in a way that is incredibly fast, smoothes out differences in how browsers handle type, and offers the level of protection that type designers need without resorting to annoying and ineffective DRM.

Is “crowdsourcing” the new “design by committee”?

Though it’s still relatively early in the New Internationalist open redesign process, there are definitely some other identifiable benefits (and, to be honest, challenges). — Gah! Currently you must log in to comment on the New Internationalist site. That’s something that’s got to change.

Parting with my Macbook Pro

After some years of faithful service, including helping to write Transcending CSS, it’s time for me to say a tearful farewell to my Macbook Pro.

HTML 5: Now or Never?

Here at SitePoint, we have started thinking about HTML 5, and whether or not the time is right to publish a book about it. To help us decide, we asked a number of web luminaries what they thought. Their answers were both varied and interesting. — Not so sure about the luminary part, but I did answer a few questions.

80+ Very inspiring uses of Typography

A smart and well aligned use of typography on websites can really make a difference and here is plenty of inspiration on how it can be done. — Pleased that this site gets a mention.

Steve Rydz on Universal Internet Explorer 6 CSS

One argument I would use is that by taking this approach we can use the most up to date techniques to design the clients site without worrying about it inevitably breaking in IE6 and consequently spending hours (if not days) fixing it. I really can’t see why any level headed, reasonable client would not go for this. — A fair assessment.

Web fonts now (how we’re doing with that)

The advantages of using fonts other than Times, Arial, Georgia, and Verdana have long been obvious to designers; it’s why web design in the 1990s was divided between pages done in Flash, and HTML pages containing pictures of fonts—a practice that still, bizarrely, continues.

Contract Killer in Greece

Yiannis Konstantakopoulos (try saying that after a few shandies) has launched a Greek site dedicated to my Contract Killer (Google Translate version of the site’s FAQs). How fantastic is that?

An IE6 post

Guillermo Rauch doesn’t like Universal Internet Explorer 6 CSS.

Twitter search results for Universal Internet Explorer 6 CSS

It looks like this has caused a bit of a buzz today.

Universal Internet Explorer 6 CSS - I Disagree

Mr. Stokes respectfully disagrees with Universal Internet Explorer 6 CSS. That’s OK with me.

Introduction to Web Accessibility

This introduction should help you understand how people with disabilities use the web, the frustrations they feel when they cannot access the web, and what you can do to make your sites more accessible.

Google on Marking up structured data

At Google, we believe in openness, so we are using two open standards to allow you to annotate structured data on your site: microformats and RDFa. — Good news. Now, if only Google would award valid pages with a higher Page Rank.

Value Class Pattern

After many long months of focused iterating (repeatedly researching, brainstorming, testing, documenting) led by Ben Ward, the [Microformats] value-class-pattern alpha draft is ready to use and support.

Opera’s Childish Antics

I’ll tell you the number one reason why I don’t use Opera. It’s because of the company’s public behavior with their legal actions and petulant whining. The rank-and-file employees are talents people creating a worthwhile (albeit, not standout) product. But the big shots on top cost the company their credibility every time they make a cheap, transparently spiteful shot at current market leader. — Bugger. I was going to write about this, but Kyle Weems has used up all of the words I would have used.

Patrick Gunderson’s photostream

Amazing artwork, and if you’re looking for desktop wallpapers, this is your place. This is my current wallpaper.

Ready for use: CSS3 Template Layout

I covered the CSS3 Advanced Layout Module extensively at the end of Transcending CSS. Now it’s called Template Layout and Alexis Deveria has written a jQuery plugin to help you experiment with it now.

42 Amazing Resources for Inspirational Typography

Some typography sites that I had not spotted before.

CSS Animation Examples

Fire up your copy of Safari 4 (or Chrome) and prepare to get, errrm, animated.

Star Trek Movie.com

I visit the Star Trek movie site and now I want to design Flash sites. How did that happen? One word — ‘engage’.

Super Awesome Buttons with CSS3 and RGBA

With a little CSS3 magic, we’ve created a scalable set of buttons with nearly half the CSS it would have taken with hex colors. — A nice tutorial.

The Line Length Misconception

It’s become a best practice on the web to keep line lengths below 75 characters. But research doesn’t support this claim, at least on the web. Instead, users are able to read significantly longer line lengths on the web, and it actually increases efficiency and comprehension. — (via Adactio).

The Medium is the Mess

We can learn from the many years of work that went into divining rules of thumb for other mediums but we should also remember that the web is not just a new and different medium; it’s an ever-changing, ever-evolving medium. That can be frustrating but I also find it incredibly exciting and liberating. — I wish I could write like Jeremy.

Facing up to Fonts

Richard Rutter’s slide deck from his excellent Skillswap Goes Typographic talk (PDF)

What’s Golden

The rule of thirds and ratios such as the golden section are fantastic methods for achieving designs that feel cohesive. The problem is these principles don’t really apply to web design. — I can’t say I agree with Jason on this one.

Font Embedding

Font embedding is a broad and complex topic, and we hope [FontEmbedding] becomes a valuable resource for everyone who creates or uses fonts to learn more about proper font usage and licensing.

Font Squirrel

Free fonts have met their match. We know how hard it is to find quality freeware that is licensed for commercial work. We’ve done the hard work, hand-selecting these typefaces and presenting them in an easy-to-use format. — A potentially useful @font-face resource.


A simple jQuery plugin that checks if a browser supports a given font.

The extreme Google brain

My impression of “Googlers,” which I concede is based on little direct knowledge and is prejudicial on its face, is one of unsocialized, pampered, arrogant faux-savants who have cultivated an arrested adolescence that the Google working environment further nurtures. — I’ve said it before and I’ll say it again, there are few more intelligent, more eloquent people on the planet than Joe Clark.

Favorite Typefaces of 2008

Typographica’s Favorite Typefaces of 2008.

Five Types of Effective Headers in Web Design

5 different types of header design and see how the examples have used them creatively to make an impact.

Typographic Spaces Test Suite

This is a series of examples of different types of typographic spaces using the core web fonts for user agent and operating system comparison. Not all fonts have the array of spaces tested. User agents or operating systems may substitute the character if it is not available in a specified font.

Combining Cufón And @Font-Face

Everyone wants @font-face to work everywhere, but as it stands, it only works in Safari and the upcoming versions of Firefox and Opera. In this article I’ll show you how to use Cufón only if we can’t load the font through other, faster methods.

In Defense of Eye Candy

We’ve all seen arguments in the design community that dismiss the role of beauty in visual interfaces, insisting that good designers base their choices strictly on matters of branding or basic design principles. Lost in these discussions is an understanding of the powerful role aesthetics play in shaping how we come to know, feel, and respond. — Oh, this one is a keeper.

Jacek Utko: Can design save the newspaper?

Jacek Utko is an extraordinary Polish newspaper designer whose redesigns for papers in Eastern Europe not only win awards, but increase circulation by up to 100%. Can good design save the newspaper? It just might. (via)

Prety Sketchy

Sketchbooks are not about being a good artist, they’re about being a good thinker.

We Love Typography

Think of it as FFFFound for all things type, typography, lettering, & signage.

Help kill Internet Explorer 6

Certainly clever, but I’m not sure if pretending that your browser messages come from Microsoft is any better than phishing.

“Taking Your Talent to the Web” is now a free downloadable book from zeldman.com

I wrote this book in 2001 for print designers whose clients want websites, print art directors who’d like to move into full–time web and interaction design, homepage creators who are ready to turn pro, and professionals who seek to deepen their web skills and understanding. — Shamefully, I've not ever read Jeffrey's first book.

Bulletproof, cross-browser RGBA backgrounds, today

I’m a huge fan of using RGBa (and alpha-transparent PNG images when I’m designing in the browser. This is an interesting solution that I need to take a closer look at.

Implement RGBA() colors for modern web browsers

Includes filters for IE and a solution for Opera using the <canvas> element.

RGBa Browser Support

Chris Coyier with a handy overview of RGBa implementations.

FaceOut Books

Updated every Monday. [FaceOut Books] has been created to appreciate the practice of book cover design.

Last One Out, Please Turn On The Light

This project, shot on 4"x5” film, documents London’s remaining professional darkrooms. It is based on my nostalgia for a dying craft (there are no young printers). […] I miss the darkroom’s ambience, the physicality of dodging and burning, the shaping of the light. Richard Nicholson, May 2008

The complete Austrian cigarette packs and single cigarettes collection

Smoking may not be cool anymore, but I still find fag packets inspiring. My personal favorite? Swiss cigarettes Mary Long. I smoked a lot of these in the eighties.

CSS contents and browser compatibility

PPK on what browser supports what CSS and how. Either Peter-Paul has too much time on his hands or somebody should give the guy a medal.

Web Typography panel at SxSW

Richard Rutter, Jon Tan, Ian Coyle and Elliot Jay Stocks on web typography at SxSW. The most important hurdle is font licensing. Without appropriate licensing, we’re all criminals. Foundries need to catch up and view this as an opportunity not a threat.

Creating a Web Slice for your flickr badge

Microformats buffs will love Cindy Li's example of converting a Flickr badge into a WebSlice for IE8.

The Cost of Accessibility

Get it wrong and make a mistake and a whole bunch of ‘experts’ (who don’t even rely on the technology themselves) will whinge at you something awful. Drew McLellan, on top form again.

Webkit CSS animations

The Webkit team push what is possible with CSS. I love these guys, but I sometimes wish that they would use their talents to move forward CSS that is (currently) part of the W3C CSS Working Group's proposals.

How to handle a web deisgner

Back in 2005, John Oxton became Fergus Webber and for too short a time, he anonymously terrorized the web design world. This post, his best, is the only blog post ever to (almost) make me wee myself with laughter.

Recreating the button

Details matter and no one, I mean no one, does those details better than Doug Bowman.

Fluid 960 Grid System templates for rapid prototyping

One of the most interesting, grid-based system implementations that I have seen in a while.

Microformats, hAccessibility & Moving Forward

She lives in New Mexico, says fuck and has written a fantastic series on Microformats. Emily Lewis is one to watch.

Sprite Optimization

Cram as many UI images as possible into a single image, then use selective CSS to clip and only show the relevant part of the image.

CSS Working Group Charter 2008

Fantasai, an invited expert to the W3C's CSS Working Group (of which I am a former member) has published information on the working group’s new charter. You can leave comments at The Web Standards Project.

12 resources for getting a jump on HTML 5

Cameron (Mr. Smooth) Moll with a round up of articles on HTML5 including one from this very site. What goes around comes around.

Font-weight is still broken in all but one browser

Richard Rutter is frankly, well, depressed about the current state of browsers' font-weight implementations.

The State of the Web 2008

When asked Which of the following best describes your web design philosophy?, 57.37% of people answering the Web Directions State Of The Web survey said, their cats preferred it Consistency across browsers is important, but I use features supported in newer browsers provided they don’t cause problems for older browsers.

CSS SuperScrub

Reduces the size and complexity of your CSS by programmatically stripping unneeded content, stripping redundant calls, and intelligently grouping the remaining element names.

Art of the Title

Title sequences. I particularly love Soylent Green.

The 11 Coolest Mugs for a Hot Cup o’ Joe

Collection of fab mug designs. I picked up the Alcatraz inmate tin mug when I went to the island this summer.

Shiny Happy Buttons

John Allsopp on taking a plain old boring HTML button, and 2.0 it up the wazoo over at 24ways.

gridr buildrrr

Too many 'rrr's in this handy dynamic grid builder, but useful nonetheless. I do worry though that this 960 width grid approach is too quickly making people lazy about grids.

Not quite what I had in mind.

George Oates on being affected by the layoffs at Yahoo. How companies, how people deal with tough times says a lot about them. Yahoo told the world not to trust them.


Lipsum.com has been in my bookmarks bar for just about as long as I can remember, but this is far handier. Great job by the guys from CSS Tricks

Equal Height Columns with jQuery

If you are not ready to fix equal heights by using display:table;, this jQuery plugin might be just what you're looking for.

Video interview with Andy Clarke

I was interviewed during the Fronteers Conference in Amsterdam earlier this year after my talk on CSS positioning, Waiting For The Great Leap Forwards


Love ExpressionEngine and typography, but hate widows? Eliminate widows in entry titles with the Widon't plugin.

Syncotype Your Baselines

From 2007, Rob Goodlatte and a useful typographic tool for working with baseline grids.

The Grid System

A spooky coincidence considering the topic of my workshop yesterday.

Your (physical) music needs you!

Some people think that he was born on horseback. Others that he has no understanding of the word fluffy. All we know is that Gregory Wood designs a damn good blog post.

The Proof Is In the Pudding

Kyle Weens on his results with presenting designs to clients with XHTML/CSS prototypes, rather than static proofs. Good man.

Typography served

A promising-looking typography showcase site.

Biscuit Tin

Love Flickr? Love biscuits? Me too. And I love Biscuit Tin too

Yes We Can

Front pages from top US newspapers on the morning after Barack Obama's election.

Web Content Accessibility Guidelines (WCAG) 2.0

WCAG 2.0 has just entered proposed recommendation status. For balance, see also the WCAG Samurai who published corrections for, and extensions to the Web Content Accessibility Guidelines 1.0.


According to the blurb, one or more persons obscuring or augmenting any part of their body or bodies with record sleeve(s) causing an illusion. Hilarious.

E-mail error ends up on road sign

Bilingual signs are one of my fiercest pet hates. While they are almost always horrifically designed (and make me want to scratch my eyes out with a blunt compass), this story made me smile. (via)

Making Web Fonts Work

Jon Tan with an exhaustive, beautifully researched look into the state of font embedding.

Prototyping with XHTML

Anders Ramsay and Leah Buley on what it means to prototype with XHTML.

The Mysterious ‘Save For Web’ Color Shift

Viget Labs make the Save For Web web world a safer place for colour.

ExpressionEngine Developer’s Toolbox

How could I not link to Smashing Magazine's err, smashing, list of Expression Engine resources?

sIFR 3 r436, thoughts on font embedding, presentations

Mark Wubben curator of sIFR with his thoughts on font embedding and its alternatives.

Double Down or Batten Down?

While not quite design related, my friend Howard Mann has essential advice for any self-employed designer or business person.

Text-Shadow In IE With JQuery

Firefox 3.1 is coming and three of the four major browsers will then support text-shadow. Here is a jQuery plugin that simulates text-shadow in Internet Explorer.

CSS3 box-sizing attribute

Helen from Helephant.com writes a good introduction to the CSS3 box-sizing property.

The origins of Watchmen

The Guardian presents preliminary designs and early sketches which chart the development of the Watchmen alternate reality

Vintage and Retro Typography Showcase

Smashing Magazine go retro, finding beautiful examples of vintage typography and the modern work they’ve inspired.

Jeff Croft on Elegant web typography

Jeff Croft on elegant web typography from Web Directions South 2008 in Sydney. Check out the presentation slides and audio.

MSDN Conditional Comments

Not new, but a full set of Conditional Comment examples including some that I had not discovered before, including subexpressions and operators like [if (gt IE 5)&(lt IE 7)]

CSS Browser Selector

If you liked Conditional CSS, but would prefer a very lightweight (1k) Javascript solution. CSS Browser Selector is a very small javascript with just one line and less than 1kb which empower CSS selectors. It gives you the ability to write specific CSS code for each operating system and each browser.

Goodbye, old 500 page

Carsonified on the design of a page that hopefully no one will see. Lovely.

JavaScript Will Save Us All

Eric Meyer on how JavaScript will help us to push CSS standards support forward now I'm with Eric, I can’t wait for Sizzle to be finished and I’m absolutely going to use implement it into my own development framework.

Stephenfry.Com 2.0

The inimitable Stephen Fry's site has undergone a redesign. I love his work and this new site is a huge improvement.

Wilson Miner redesigns

I have always admired Wilson Miner's personal and commercial work and his new site is everything I would expect from him. It's a temple to perfectionism and thoroughly refreshing and inspiring.

Cameron Moll’s web accessibility checklist

From his talk at An Event Apart in Chicago, Cameron Moll's web accessibility checklist.

-moz CSS Transforms

In case you missed them (I did), the CSS transformations first proposed and implemented in Webkit have come to Gecko nightly builds.

Is There Anything You Wish CSS Could Do? 15 Designer/Developers Sound Off

Fifteen designers (including yours truly) on what they wish that CSS could do.


devot-ee.com aims to be the definitive non-EllisLab run resource for all things relating to ExpressionEngine. I'm looking forward to seeing how this ExpressionEngine resource shapes up.

Retro and Vintage In Modern Web Design

A showcase of 50 beautiful retro, vintage and renaissance designs on Smashing Magazine. I'm so very tired of these list style posts, but this one features some nice site designs.

iPhone supports full-screen web apps

Worth noting: If you add <meta name="apple-mobile-web-app-capable" content="yes" /> to your web app pages, if you use the Add to Home Screen feature, it will launch as its own standalone app, with no Safari browser.

The Ol’ College Try (CSS/HTML Prototyping)

Kyle Weens follows up with real experience of not showing client static design visuals. "My prediciton is that by using this technique we'll end up saving hours on the final product". I'm looking forward to reading more about Kyle's experiences.

Line-height Testing

Eric Meyer tests super big text and line height. (via)

Vintage Motoring Maps

Jon Hicks, that gentleman of British web design, has Flickred his collection of vintage motoring maps.

Web Design is 95% Typography

"95% of the information on the web is written language. It is only logical to say that a web designer should get good training in the main discipline of shaping written information, in other words: Typography."

Gustavo Pimenta’s Design Solutions screengrab Flickr set

Gustavo Pimenta screenshots web interfaces. "I've a confession to make: I'm addicted to screenshots, it is stronger than me, I can’t help it..." Priceless. (via)

Using jQuery for Background Image Animations

After reading Dave Shea's article on CSS Sprites using jQuery to produce animation effects, Jonathan Snook takes things one step further. As Dave Shea himself says in the comments. Wow, this is simpler and more elegant than my article for sure. Nice.

Vitor Lourenco

A new name to me, South American designer Vitor Lourenco is responsible for the look and feel of the new Twitter redesign. One to watch.

What advertising can’t fix

Seth Godin on Microsoft and why buying ads pretending to be something you're not is a waste of money.

Tiling Backgrounds in Internet Explorer

Jonathon Snook tackles the problem that CSS background images specified in the <tr> gets displayed as if set for each <td>. Handy if you subscribe to the notion that web sites should look the same in all browsers.

Anchor Buttons

Dave Shea with a solution for anyone who is bored to tears of simple border and background colour styling for button formatting.


Typechart lets you flip through, preview and compare web typography while retrieving the CSS. A very clever idea and beautifully executed.

How to create a set of Photoshop grunge brushes

Another one of Veerle Pieters' excellent Photoshop tutorials. Read the article, download the brushes, go grungy.

Minimal design css gallery

Less is more. We believe in it. Doing more with less, that's our goal.

Arjan Eising on Fronteers 2008

It was a great pleasure for me to close the show at Fronteers 2008, the first web conference of its kind in Amsterdam.

Attack Of The (Lightbox) Clones

If JavaScript/CSS popups are your thing, then this comparison of thirty-plus scripts by Planet OZH should be your thing too.

Firefox is missing the point

The one, the only, Seth Godin on growing Firefox use: "Firefox needs to add functionality that makes the surfing experience better for all users when more users use Firefox."

On Nails, Lipstick, and Redesigns

Boston based Ethan Marcotte returns on top form with a top class redesign. If you thought that grid-based and liquid layouts don't mix, think again.

CSS constants with SSI

An interesting solution for simple CSS variables using SSI (on Apache) for easier maintaining of CSS files.

Dan Rubin’s Web Standards Creativity site design

Dan Rubin takes the ten geek authors of Web Standards Creativity and turns us into movie stars in this wonderful, playful, movie poster inspired design.

If You Were a Typeface…

Jason Santa Maria asks what typeface best represents you?

Implementing Design: Bulletproof A-Z

Jeremy Keith live-blogs Hard Man Dan Cederholm's Implementing Design: Bulletproof A-Z from An Event Apart

Small talk with a web designer

The Man In Blue, Cameron Adams, hits the nail on the head with a graphic that would be even funnier but for it being so true.

Storytelling by Design

Jeremy Keith on Jason Santa Maria's Storytelling by Design presentation from An Event Apart. Jason will be repeating his talk alongside me at An Event Apart Chicago in October.

The Curious Job of Kevin Cornell

Kevin Cornell (who designed the Stuff and Nonsense logo) has his graphic novel adaptation of The Curious Case of Benjamin Button available in October.

The Lessons of CSS Frameworks

Jeremy Keith rounds up Eric Meyer's round up of CSS frameworks from An Event Apart. Me? I use a modified version of Blueprint's typography baselines, but I steer clear of its nasty, presentational grids implementation.