Clagnut

A new design

Sun, 07 Sep 2008 13:15:34 PST

I’ve finally got around to redesigning clagnut.com. Or at least the home page and blog post pages; the rest of the site will follow bit by bit. The driving reason for the redesign was to change the emphasis of the home page and provide a visual framework for introducing more supporting content to the blog posts. The old design was created in 2002 so I also wanted a new look to better reflect my oft-stated interest in grids and typography.

Home Page

I wanted to completely reorganise the home page. The latest blog post still takes precedence, while an unrelated but interesting (to me) photo ads visual impact. Summaries of older posts make up a significant proportion of the remaining content, with ‘column five’ allocated to lifestream feeds Twitter, Last.fm and blogmarks, with more planned. Below this main area goes more content – bits and pieces I felt needed a place on the home page, including a latest Flickr feed.

Then there’s the footer with About statement, and miniature site map forming the global navigation, shared across the entire site. The home page header is unique in the context of the site, and uses a magazine-style masthead to provide an overall explanation of the site and to highlight upcoming speaking events and the like.

Blog Pages

Blog pages now have a banner image when I’m inclined to create one. Alongside the comments I’m now using Technorati to pull in blog linkage. Each post uses keyword tags and machine tags to pull in relevant content from third party sites. At the moment this is limited to my Flickr photos and Google maps. See Seventy Penguins for a good example.

I intend to include much more content from other sites. Initial thoughts include Upcoming event details and Amazon book details, based upon event and book machine tags. Any other suggestions are most welcome. Using APIs in this way is proving quite addictive. It’s great fun working what content can be pulled in from elsewhere, and pretty easy once you’re set up with the first one.

Grid and Layout

Eagle-eyed Brits will notice that the home page in particular borrows heavily from the print edition of the Guardian newspaper in terms of layout and typography.

For the grid, I went with basic five columns, subdivided where necessary. The horizontal sizing of the grid is based on the vertical rhythm of 18px (each column is 180px wide plus gutter).

I’m using Helvetica Neue/Arial for the body copy, partly because I think it just works visually, but also because I believe sans-serif is still the way to go for most on-screen reading. The headings are set in Adrian Frutiger’s lovely Egyptienne F, but most folk will see Cambria or Georgia, with Cambria being a particularly fine substitute.

The layout is fixed width. There, I’ve said it. Essentially the content demanded it, with images and other embedded content in so many different places across the grid. That said, I’m investigating ways to make the layout adapt more to window size. Any polite suggestions are welcome.

The design didn’t really take that long to mark-up. The most time consuming part was using as many microformats as applicable (hCard, hAtom and rel=”me” mostly). There’s more microformats to be added, especially for inline content – something I’ll need to semi-automate. Styling was fairly straight forward too. The typography was set using Clearleft’s in-house style sheet (more on that in a forthcoming post) and with that, the grid was fairly simple to put in place.

To the future

There’s clearly a huge chunk of pages still to build (archive, search results, etc) and functionality to include (proper tag pages) but that will come over the next few months. For now, it’s time to start writing again.

Read or add comments

The future of web font embedding

Mon, 28 Jul 2008 16:43:12 PST

Firstly, let me define web font embedding, or so-called web fonts, as I see it. I mean using @font-face to point to regular TrueType or OpenType font files on a web server. In terms of support, the current state of affairs is such that Safari 3.1 supports web fonts, it is scheduled for Firefox 3.1 and it is currently available in a development release of Opera.

It’s true to say that Internet Explorer has supported web fonts since version 4, but only by way of EOT files which are currently proprietary. It’s true that Microsoft is trying to get the W3C to make EOT a standard, but EOT is a form of DRM requiring pre-processing of regular fonts and as such is not acceptable to me, despite Bill Hill’s protestations (the condescending tone and content of which not unreasonably got the Joe Clark treatment).

So. The current state of affairs is that about 3% of browsers currently support web fonts (as I define them), a figure which is due to rise to about 30% probably later this year. This means, to me, that web fonts are not the future, they are the here-and-now, especially if your business is typefaces.

On that basis, it’s high time that font foundries and type designers stopped waving their hands in the air proclaiming the death of their industry, insisting that everyone will be pirating their fonts and installing them for free. Instead they should see this as an opportunity to be grabbed with both hands.

Before I explain how, let’s get a couple of facts straight. Firstly, web font embedding doesn’t install the font on the operating system. The Web Fonts spec has always specified that “downloaded fonts should not be made available to other applications.” So the font exists only within the browser.

Secondly, designers do not necessarily have to upload the font file to their own web server. They can link to a font file on another server. And this is where the real opportunity lies.

When you embed a Google map on your web page, you don’t download a bunch of map images from Google and stick them on your server, you link to Google which then serves up the maps to registered domains. The same approach can be applied to fonts. Font foundries could license their fonts for embedding and serve those fonts only to registered websites, using their own hosted system or via a trusted third party.

This way foundries can provide designers and their readers with a legal way of embedding fonts, removing the need for uploading font files to multiple web servers, and of course make some extra income in the process. Think about it – foundries can sell their fonts twice this way – once to the designer and again to the readers†.

Font embedding won’t increase piracy of fonts – there’s plenty of that already happening via email, BitTorrent and any other Internet vessel you care to think of. Professional designers and reputable clients will continue to license fonts as they always have done. There is no point trying to fight font embedding – that horse has bolted – it’s already happening. So why think of your customers as potential criminals, when instead you could gain control over the situation and make more money from your fonts?

†Update: a clarification and a pricing model

I wouldn’t expect any website visitors to pay for an embedded font. However if designers want their customers to read a certain font then they could be willing to pay for it. So I’m expecting designers (or more likely their clients) to pay for the font embedding on behalf of their readers.

At the moment, fonts are sold on a per-machine basis – a single payment allows perpetual use. But given that the font embedding mechanism I’m proposing is a web service, a monthly payment model could be more appropriate. By way of example, let’s pick a $199 font and divide that figure across two years. That makes about $8 per month, which would seem fairly enticing for something as lovely as say, Archer. And there’s the ‘freemium’ model to think about which might mean you could get the book weight for free, but other weights and italics are paid for. Food for thought, surely?

Read or add comments

Silverback has launched!

Thu, 24 Jul 2008 10:14:16 PST

Clearleft’s first desktop application is now available! Silverback is a handy piece of software to make ‘guerilla’ usability testing a breeze. Running on Mac OS X Tiger or Leopard, Silverback records mouse movements and keystrokes, and uses your Mac’s built-in microphone to record the usability test moderator and tester’s commentary. Importantly too, it also records the tester’s facial expressions using the iSight – a picture says a thousand words and testers don’t always say what they’re really feeling so it’s handy to have a visual record. There’s also some other great features including pausing and adding place markers using your Mac remote, a bunch of handy export options, and simple, effective organisation of projects and test sessions. At the end of it all, Silverback exports to a Quicktime movie which you can then edit to your heart’s content in your favourite movie software.

At Clearleft we do a lot of small scale usability testing. In fact, where possible, we usability test every site we design. Our old system was a bit awkward and off-putting (involving a camcorder and such paraphernalia) so we had an itch to scratch and designed Silverback to address our own usability testing needs. It’s made our lives a lot easier – hopefully it could do the same for you.

We are indebted to the super-helpful folk who have been beta testing Silverback over the past few months. Without them, Silverback wouldn’t have the stability and ease-of-use it now does. We were immensely pleased that the feedback from our testers was overwhelmingly positive. Here’s a few choice quotes to give you a flavour:

Harry Brignall: it does what it’s meant to do elegantly and quickly … it encourages you to keep your workflow clean and simple.

Garret Dimon: I believe it can bring usability testing the masses and will be the go-to application for basic usability testing. It’s simple, focused, thoughtful, polished, and a joy to use.

Matthew Pennell: I’ll definitely be pushing to use it at work if we ever get permission to carry out any more usability tests.

Jay Hathaway: If you design websites or application interfaces, this program is worth the wait. Silverback is intuitive to use and provides straightforward and informative results.

Kyle Meyer: I was simply blown away by its ease of use and useful features. It’s a great substitute for anyone without a dedicated testing lab [and] it makes for an awesome portable test station, no extra cameras or one way mirrors needed. Silverback will be a must have application for anyone working on creating websites or interfaces for web applications.

Mark Ford: The movies are incredibly useful for understanding how users will interact with your site, they’re a very persuasive tool for getting colleagues to rethink functionality. I think Clearleft have done a great job with Silverback, we’ll definitely be buying a license when they launch the product.

Our first foray into desktop application design has been quite a journey; a longer one that we hoped, but exciting, frustrating and informative as all good journeys are. I would be remiss not to thank Jon Hicks for Steve the Gorilla and further interface design, and of course Martin Redington for a brilliant job actually coding the application.

You can download Silverback for free for 30 days, after which registration costs a mere $49.95 ($58.69 incl VAT). Enjoy!

Read or add comments

Cavendish wins Stage 5 of the Tour de France

Thu, 10 Jul 2008 08:38:31 PST

This is the first British stage win since David Millar in 2003, and apparently the first win from a bunch sprint since Barry Hoban in 1975.

I like Cav. He may be a Manx but you’d be forgiven for thinking he was a Manc. His supreme confidence flirts with arrogance, but at least he walks the walk: 18 pro wins in the last 18 months including two stages in the Giro d’Italia (plus a gift to a team mate), and now this stage win in Le Tour. That and his position as world champion madison rider with Bradley Wiggins.

Update: Cav wins Stage 8 as well!

Read or add comments

Scripting Enabled conference/hack day

Mon, 07 Jul 2008 11:08:34 PST

The estimable Christian Heilmann has announced Scripting Enabled, a combined accessibility conference and hackday being held in London this September.

The aim of the conference is to break down the barriers between disabled users and the social web as much as giving ethical hackers real world issues to solve. We talked about improving the accessibility of the web for a long time – let’s not wait, let’s make it happen.

The concept of making Scripting Enabled part-conference, part-hackday is inspired. By putting together accessibility experts and knowledgeable developers there is a day of shared learning followed by a day of actually building stuff. Stuff that will be useful to the wider world. Stuff like Christian’s own Easy YouTube, an accessible YouTube player.

Sounds pretty good to me. Christian is currently looking for sponsors and somewhere to host the hack day.

Read or add comments

Clagnut

A new design

Home Page

Blog Pages

Grid and Layout

To the future

The future of web font embedding

†Update: a clarification and a pricing model

Silverback has launched!

Cavendish wins Stage 5 of the Tour de France

Update: Cav wins Stage 8 as well!

Scripting Enabled conference/hack day