Transcending CSS | The Fine Art of Web Design by Andy Clarke
‘A manifesto to transcend the web of today.’
-
- Introduction: Dave Shea
- Foreword: Molly E. Holzschlag
-
Buy from Amazon
Catch Andy Clarke on DVD in three new For A Beautiful Web titles covering topics including “Designing with CSS”, “Designing with Microformats”; and “Designing web accessibility”.
Published by New Riders and available from Peachpit and Amazon.
We just can’t stay off the road. Two years since our last road trip when we drove an RV from Phoenix to Minneapolis, we’re again heading back West and this time we’re Looking for Yogi.
Yesterday, Mike Davidson announced the sweeping redesign of msnbc.com article pages. The redesign is especially brave from a traditional news outlet business perspective as it emphasizes readability and enjoyment over page views. But I do have a minor gripe with its typography and set out to find a solution.
Yesterday Microsoft announced the third Platform Preview of Internet Explorer 9. I’ve been using this preview for a while, testing how their newest browser stands up to the examples I’ve designed for Hardboiled Web Design.
After spending weeks searching for a contract that was simple for me and my clients to understand, in 2008 I wrote my own and published it on 24ways for anyone to use. Now it’s time for an update.
It seems like months ago (it was) when I handed over my design templates for the redesign of CannyBill. Since then, the canny chaps have been working hard to implement the design and @RellyAB has been working her strange magic on their copy. Yesterday the new CannyBill site went live.
Today, RIM unveiled its latest mobile browser. It runs WebKit making every mobile platform except one run that rendering engine. With that in mind, I’d like you to try this experiment.
I asked: Web designers are cool, but private detectives are cooler. No argument, but why can’t you be both?
The answer? You can.
When the W3C announced that it was retreating from XHTML2 after years in the trenches, propagandists trumpeted that advocacy of XHTML had been foolish. With HTML5 again mired in corporate politics, egotism, squabbles and petty disagreements, it is easy to see why people are questioning if using or advocating HTML5 now is foolish too? At least until all parties reach some kind of armistice.
I’m in the middle of preparing materials for a new book, “Hardboiled Web Design”. To demonstrate CSS3 selectors, transforms and transitions I’m putting together a page in the demonstration site, “It’s Hardboiled”. That’s where you come in.
Always an example of the best the web design industry has to offer, this year 24 ways, the advent calendar for web geeks, has its focus firmly set on moving your web design forward.
(On 24th December 2009, the site that this letter refers to was replaced.)
Writing this week about eating accessibility humble pie and using CSS attribute substring selectors, a comment by clever Craig Cook sent my imagination reeling.
We all make mistakes. Right? Particularly when it comes to accessibility. Often in the rush to ready a site for launch, we forget to check the details that can make a world of difference. That’s what I did when I launched the latest For A Beautiful Web.
Changingman, a liquid three column CSS layout with a fixed positioned and width centre column, released under a Creative Commons Attribution 2.0 license. (This entry was originally posted on 23rd November 2005 and has been updated in 2009.)
Relly Annett-Baker on first draft copy for CannyBill.
Now that our For A Beautiful Web workshops calendar is closed for the year, it was time to push live a redesign of that site with a focus on my new DVDs. This was a chance for me to play, both with HTML5 and CSS transforms and transitions to spice up the interface.
Web forms often ask visitors for non-essential information, but long and complicated forms can hinder a sales or sign-up process. Wouldn’t it be cool to give users the option to hide these optional fields at their own discretion. (This entry was originally posted in 2004 and has been updated in 2009.)
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.
An archive of blog entries since 2004 on subjects including CSS, web standards, accessibility, design and development.