External links

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)

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

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)

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

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)

Enable open web technologies in Internet Explorer.

— I’ll be testing this over the next few days and implementing on all my sites. I hope that together we can develop a design pattern for prompting people to readily install the plug-in.

Showing the difference between Arial and Helvetica.

A rare, useful article from Smashing Magazine.

Instead of refusing content to IE6 users or breaking brand guidelines by disrupting their experience with a patronizing notice, why not relegate them into a tier of Content-Level Support as opposed to Design Support?

— I’m a little late with this one.

I have plans for this typeface.

What it says.

Safari has a not-so-lovely way of bulking up text using sub-pixel rendering. On previous versions of Safari, this was fixed with a text-shadow declaration, but since Snow Leopard that method no longer works. Fortunately, I’ve found an alternative.

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.

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

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.

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

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.

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.

I needed a good reason to upgrade from my iPhone classic to a new 3GS. I think that this is it.

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.

Wonderful stuff, and perfect desktop background fodder.

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

Two lovely site launches in one day. The second from web writer and editor Tiffani Jones and Things That Are Brown. (source)

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

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.

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.

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.