External links

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

Mule Design Studio

A PSD is a painting of a website. We don’t spend weeks or months understanding a client’s complex needs and issues to make them paintings.

Don't say I never told you so.

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.

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!

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.

-webkit-background-clip: padding-box;

Have you ever gone clothes shopping for a person that you haven’t met or seen before? I’m not talking kids shopping, I’m talking full grown adults. How do you buy jeans for someone that you know nothing about?

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

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.

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

Jan Quickels with a German translation of my updated killer contract.

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.

Jan Quickels with a German translation of my original killer contract. (Revised 2010 version)

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.

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.

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

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.

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.

3-D has not only given Hollywood its biggest payday ($2.7 billion and counting for Avatar), but a slew of other hits. The year’s top three films—Alice in Wonderland, How to Train Your Dragon, and Clash of the Titans—were all projected in 3-D, and they’re only the beginning.

I hated Avatar too. (via)

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

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.

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.

Wow

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.

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.

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.

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.

Blue Flavor’s Nick Finck presentation from MIX10.

Microsoft’s Ted Johnson outlines Internet Explorer 9 at MIX10 (Warning: Windows Media Video), plus a complete set of videos from MIX.

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.

From Paul Irish, one of the brains behind Modernizr.

How the Wired Magazine user interface will look on the iPad or other devices.

— Expect Hardboiled Web Design to be like no other CSS book you’ve ever seen.

I’ve seen Andy a couple of times in the past and kind of felt he was a bit ‘marmite’ and it was clear from both the verbal feedback during the talk and the Twitter stream that some were keen to disagree with his views but like he said – that’s OK.

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.

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.

If you care about how the content on your site is presented I think you get the best results with a designer that knows how to code.

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.

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.

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

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

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

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

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.

This is why CSS was invented. Read the tutorial.

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:

There’s so much to think about when building a web site that it is easy to leave things out, or forget about important considerations. One of the most important of these is accessibility, an area of web design that can seem very daunting.

— Part two is equally as fantastic.

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

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.

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.

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

That’s some big brass typefaces you have there Greg.

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.

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.

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.

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.

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.

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.

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

Andy Clarke is an ass with a horrible sense of fashion who just happens to have a rare eye for great design

— What did I say? (Features tweetCC and other fantastic work)

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)

Cute, but this would have been so much better if it had used a liquid layout and flowing text.

Google Browser Size is a visualization of browser window sizes for people who visit Google. To view your own Web site with this same visualization overlaid on it, simply type its URL into the “Enter URL here” textbox at the top of the window and click Go.

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

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.

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.

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.

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.

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.

Have you read the comments that belong to a Smashing Magazine post? I know we can’t demand that every website in the world has the types of discussions that we wish for, but you would at least want the leading site in the community to enrich your life just a little bit I would think.

— Paul Scrivens (one of the smartest men on the web) on how Smashing Magazine is the OK Magazine, Jeremy Kyle Show of the web.

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.

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.

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 Progressive enhancement with CSS3 presentation slides (including a little from my CannyBill redesign) on Slideshare.

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.

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)

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.

Hard man Dan Cederholm — I’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.

The Future of Web Applications by Bruce Lawson.

Let me be the first to say it, Gregory Wood is the Steven Spielberg of web design.

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.

Greetings modern browsing people. — Dan Cederholm

Alex Russell on PPK’s WebKit-based browsers compatibility charts.

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.

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.

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)

Oh yes it is. (Source)

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.

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

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.

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)

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

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.

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.

Of all the things to screw up on, it had to be @font-face, of course. (Hat tip Joe Clark)