Stuff & Nonsense Home

Where you’ll find designer, author and speaker Andy Clarke. The bastard.

Blogging And All That Malarkey

Reading room

You might have noticed already, things are looking a little different around here. Over the Easter weekend, I took some time away from the pressing matter of eating chocolate to work on a redesign, specifically to address (justifiable) concerns over the previous design’s readability but also to prepare bringing For A Beautiful Web visually in line with a coming redesign of the Transcending CSS book site.

Almost universally unpopular, the previous design and the process of arriving at it, was experimental. I thought that was a brave move for a business site but it was something I felt I needed to do, after all I've been telling designers for years that it's OK to experiment and OK to fail sometimes. I learned a lot in that process.

When I set out to design the site to launch For A Beautiful Web I knew that I wanted to set a new tone and arrive at something a little unexpected. One of the ways that (I hope) I have achieved that level of unexpectedness was to turn to a classically trained artist, rather than a web designer for creative direction.

[…]

While Ophelia [Chong] got her hands inky in her studio, I set about turning my layout designs in XHTML and CSS prototypes. When we were both finished I took several of her hand-printed images and applied them as background images to my pages. I honestly didn't know what I was going to see, so the results were certainly unexpected. One of the fascinating aspects of collaborating with Ophelia was a sense of not knowing what direction the design might take. Of course I knew what I wanted to achieve from the site in terms of content structure and layout, but I really enjoyed separating these from the aesthetic aspects of the design and letting Ophelia's artwork drive the direction. I suppose that this process was a little contrary to how most designers would approach a project. After experimenting with handing creative control to an artist rather than a web designer, I know that I'm going to do it again as the result is very different from my usual style. That's what I wanted; unexpected. I hope you like it.

You didn't.

Less of a new design and more about a new direction, this new look is intentionally minimal. Although over time I'm sure that I will introduce more imagery, for now that seems unnecessary and I'm happy to let typography and layout do the hard work of framing and conveying the content. Whereas the previous design made a statement about aesthetics while sacrificing the readability of my content, I hope that this new direction puts the focus back onto what I write. I hope too that when I write about design, that this site will quietly take a back seat. Perhaps it will wear earphones and not jump into the front, grab the steering wheel, overpowering me and my content.

Text rendering across browsers

More of an observation rather a comment; when you strip away design to focus on typography, the different ways that different browsers render your type becomes glaringly obvious. I've not yet had a client mention these differences, but it brings home the fact that a web site cannot look exactly the same in all browsers.

Text rendering across browsers Text rendering across Safari, Firefox, Opera, IE8 and Chrome

I have a lot to write about over the coming months and I feel more comfortable already that the new direction will be better for that content, for me, but most importantly for you. (exhales deeply)

Leave your comment

Sam Hardacre

April 14 2009 @ 08:51pm #

Although the previous design was very much my cup of tea, I really like the simplicity of this design : ) A fine job sir!

Tim Van Damme

April 14 2009 @ 08:55pm #

I didn’t hate the previous design, I hated _reading_ it. That’s fixed now, it reads smooth, and my eyes don’t twitch anymore.

The redesign is a real beauty, so many details to discover.

Also: since when did you start caring about what other people think? ;)

David Simpson

April 14 2009 @ 09:19pm #

Looking good.  2 minor things in the comments form distract from the goodness. On Safari 3.1.2 (old yes) & FF 3.0.8: The asterisks are sitting on top of the M in “your name” and the 1st D in “your address”. “Twitter nickname” - do you mean website? (screenshot)

Guy Carberry

April 14 2009 @ 09:27pm #

Great layout. Something very wrong with the contrast between the foreground and background colour for the main body text on Google Chrome 2.0.169.1 / Win / XP that I’m looking at it on now. The text seems to have a drop shadow on it too! Quite difficult to read.

Andy Clarke

April 14 2009 @ 09:38pm #

@Guy Carberry: Chrome is buggy in relation to CSS RGBa colour and opacity, so is not rendering the text correctly (as seen using Safari). Last night I checked the Chrome bug reports and it’s a known issue, so I hope that it will be fixed in a future version. Until then, if you must use Windows, look again using Safari.

Tom

April 14 2009 @ 09:44pm #

Love the typography and layout however I find the main body text a lilttle hard to read. If it was white like your comments Andy, it would be a lot easier.

Interesting screengrabs by the way. Safari reigns supreme in the font rendering kingdom.

Andy Clarke

April 14 2009 @ 10:19pm #

@ Tom: I have increased the contrast a little for you, setting the colour on <body> to color : rgba(255, 255, 255, .6);  from color : rgba(255, 255, 255, .5); I hope that helps.

Guy Carberry

April 14 2009 @ 10:42pm #

@Andy Clarke Can’t use Safari at work due to the security problems it has. So I’m limited to Chrome, IE7, Firefox an Opera. More readable on Firefox (no drop-shadow there!). But still a little more contrast would be nice. I agree with Tom about the comment white which is much more readable.

David Kaneda

April 14 2009 @ 11:23pm #

Very beautiful. Lovely work.

Scott

April 14 2009 @ 11:52pm #

Looking good. I find the text quite readable in the browsers I’ve checked with. My only gripe is that the hyperlinks are very difficult to distinguish from regular text. The difference is a bit more apparent in Safari than Firefox, but it can still be difficult to spot.

Frank Stallone

April 15 2009 @ 12:48am #

This is a wonderful redesign and the layout and the type doing the work is exactly what inspires me most. Keep up the great work Andy!

Jeff Allen

April 15 2009 @ 12:55am #

I like the readability of this one MUCH better. I used to have to turn stylesheets off to read the content and now, well as Tim points out there are some many delicious details to discover!

Bridget Stewart

April 15 2009 @ 01:12am #

I like this design just fine. However, I did like the old one, too. Like others, I had trouble with the readability on the last design, but I fixed that by putting background on the articles with my user stylesheet:

#content_main {background:#0A0102 !important;}

That did the trick and managed to keep the lovely art background for my purposes. Admittedly, I felt a little naughty toying with your work. :)

MarkB

April 15 2009 @ 04:27am #

Wasn’t there an argument (ages and ages ago) about using/not using the default bullet points? I can’t remember the exacts but I’m also sure I’m not making it up :)

Either way, I think that is a lovely touch (under Blog categories).

Also, what is your thinking behind using a pre tag within the h1 for the blog title?

Thanks

Daus

April 16 2009 @ 01:30am #

Lovely typography. And I found the layout flow very intuitive. And yes, I hate you previous design :)

Erwin Heiser

April 16 2009 @ 09:37am #

Love it, a massive improvement over the previous version.

I’m bookmarking this article so I can point clients who complain about differences in text rendering (yes, they do exist!) towards enlightenment :)

All Good Found

April 17 2009 @ 08:03pm #

Andy,

To me, the text seems a bit too small and I have to enlarge it somewhat to be able to read it comfortably. Since default size is set to 75% in your stylesheet I realized I´ve been accustomed to websites with larger text.

I like this minimalistic approach but I would love to see a bit more color. Andy Clarke is more vivid, isn´t he? ;=)

Ryan A. Bednar

April 17 2009 @ 11:38pm #

Beautiful redesign for your blog. I’m looking forward to the Transcending CSS site too btw!

Nat

April 18 2009 @ 08:07am #

I loved the old design. It was one of my favorite sites, although maybe that’s because I have a backgroundin printmaking. I always had to bump the text size up a bit, but otherwise it never seemed difficult to read (and I think the font-size thing has more to do with my aging eyes than the design). The new design is nice, but I very much prefer the old one.

Commenting is not available in this channel entry.
Hardboiled Web Design

Hardboiled Web Design by Andy Clarke

How the latest technologies and techniques will make your websites more creative, flexible and adaptable. Get hardboiled in all formats from Five Simple Steps. Digital formats also available at Amazon.com, Amazon.co.uk and the iBooks store.

We’ve deconstructed this site to focus on content while we restyle. Expect wonkiness during the transition.