Well, it may be holiday time for many people, but it hasn’t been for us. We’ve been up to (and past) our eyeballs in work, particularly graphic design work, for the past several months. One of the items we’ve been working on is this.

The “Culture & the Mind” Project assembles individuals from a wide range of academic fields to investigate different subjects. This year the focus is “Folk Psychology”: what we, in our everyday lives, do when we attribute beliefs or desires onto other people. One of the questions the conference (and the Project in general) will attempt to do is to examine what aspects of folk psychology are innate, and what change depending upon one’s cultural upbringing.

The client had a great desire to have fun with the poster, in particular to hark back to 60s & early 70s design. I took the opportunity to quote that, but also to pay homage to one of my all-time favourite graphic designers, Steven R. Gilmore. You can only go so far quoting Jefferson Airplane & Skinny Puppy posters, though: psychedelic typography & brain imagery act as visual hooks to make the viewer take a closer look at the content of the conference.

I spent last week shivering away with the Swine Flu. It wasn’t fun; but I knew something was coming & accordingly shut down jobs until I felt better, notifying the clients of the issue. This is planning: you do it because you know what’s coming.

Whilst convalescing, I read a fascinating discussion over on Jeffrey Zeldman’s blog. In this article, Zeldman publicised the fact that David Berlow of the Fount Bureau was proposing a new permissions table to OpenType. The idea is to be able to embed fonts into websites via @font-face whilst protecting the foundries from piracy. A permissions table would stop the font from, say, being downloaded & used elsewhere. Currently, only Microsoft’s EOT format allows for any protection from misusing the technology; it’s been around since 1997 (and it feels like it). Safari (for some time), Firefox (as of 3.5) & Opera (as of 10) support standard, naked type formats: Firefox 3.5 has just been released & Opera 10 will be released any day now. One may assume this is why there’s a sudden flurry of activity from foundries about the subject.

The name “David Berlow” may be familiar to you: he was interviewed in A List Apart back in April, where he started making this permissions idea & I wrote about that interview, and some of the reaction to it. Mark Pilgrim smacked it down pretty thoroughly, and with good cause: Mr Berlow’s suggestion would require that every computer on earth be altered. Not to mention virtually every font as well.

This isn’t the only problem, however. In the comments to Zeldman’s article I pointed out that it’s far too late for foundries to make such proposals: all modern browsers now support @font-face. To expand upon what I wrote there, the time for making these proposals should have been made back at least in 1998, when the @font-face was definitely part of the W3C’s CSS2 specification. And remember, if 1998 is the date of the recommendation, you can be goddamn sure that they were talking about it for years beforehand.

I apparently irked Berlow. He became quite defensive that until recently, foundries didn’t know how browser vendors would deal with fonts; and moreover, like other industries, he just wants to protect his IP. At first I thought that, in my feverish state, I had been a dick, but looking back, he simply didn’t get what I was saying. No matter the mechanism by which a browser deals with a font, @font-face has been with us for over a fucking decade. Foundries have had plenty of time to do something about it.

The best scenario for some sort of “webfont”, protected format would be to strongarm all the browser vendors into supporting it; suppress all the browsers out there that now support naked fonts; update every browser with webfont-“enabled” (one might say DRM-crippled) versions; and then hope for the best. Good luck with that. Let me reiterate what I’ve said before: this horse has long since bolted. If the foundries have pursued actions, they’ve been very slow and, worse, ineffective.

And as for Berlow’s concern about protecting his IP: well, they’ve had at least a decade to think about how to do this. A less charitable man than myself might think they were hoping this whole “fonts on the web” thing would just go away. Instead, they should have planned for this: full @font-face support was coming, and they knew it.

So bring on TypeKit. Where of course you’ll rent & not simply pay for the fonts you use. I have sympathy when people want to protect their IP, but Jesus H. Christ in a chicken basket, they’ll do anything to stop use from being straightforward.

That the recent brouhaha over the death of XHTML2 is totally overdone. After all, the spec was so fucking obtuse & abstract that no browser vendor was going to implement it.

I mean, the authors wanted to get rid of the IMG tag, fer chrissakes!

Well Uni is over now for me (ceremony pending) and life out of the city is a lot quieter.

I've decided to keep busy with a few events coming up this year, two rails specific and one on more general web design topics:

Rails Camp UK:

FOWD Tour - Leeds:

Take a look, there may be something you fancy.

We’ve recently completed (and had printed) a couple of new A4-sized posters for the University of Sheffield, one advertising a series of lectures by the renowned philosopher Stephen Stich & the other promoting an MPhil degree in Political Theory.

Before we continue, you may wonder: why A4? Isn’t that small for a poster? It is, but not in the context of a university department bulletin board with lots of competing notices. If your poster is too large, it may not even be placed on the board; and even if it is, a larger poster will soon be covered up by other notices. So an A4-sized poster is about as large as you can safely make it.

Judging from this use-case, you might also conclude that creating a striking effect for your poster would be crucial: one that makes your notice stand out from the dozens of other notices. And you’d be right.

Stich Lecture Series

This was a rush job: I had 24 hours to go through the process of commission, design approval & printing. What’s worse, I was suffering through the worst flu I’ve ever experienced. What’s worst is that I was handed a huge wodge of text & only two source images. Luckily one image was large enough that it was feasible to expand it further to print quality.

With such a timeframe & under those conditions, you are subject to severe constraints. Constraints are sometimes wonderful & this was one of those times: it helps guide you quickly down the path towards a decent design.

Some of the constraints were posed by the photo. It was black & white and couldn’t be expanded further without risking pixellation. Also, the picture wasn’t fully optimal because a critical element—the top of Steve’s head— was cut off. So immediately we know that the poster should be black & white (to match the picture), it shouldn’t rely too much upon the picture to give it visual interest (because it was small) & that we were going to have to distract the eye from the missing top of Steve’s head.

When you’ve got a lot of text and your photo is small & suboptimal and you’re limited to black & white, then you’ve got to rely upon typography & stark contrast to attract the viewer’s attention. Black text on white is too common: reversing this will catch the eye. Using chunky typography, I covered the top of Steve’s head with his surname & used the look on his face to draw the viewer’s eye towards the explanation for lecture series.

The result is pretty good, I think, and certainly eye-catching, but it’s a little conventional. Had I more time, I would have made that chunky typography a lot chunkier: it would have taken up about half of the poster. But time was a real constraint here.

MPhil Poster

The second poster here is for the promotion of a degree offered jointly by the departments of philosophy & politics. We were to employ a really striking image that’s somehow relevant to the subject. My initial to represent the result of a broken political process: images ranging from protests, revolution, police in riot gear, bombed-out cities, etc. I also immediately thought of Orwell’s memorable line from 1984: “If you want a picture of the future, imagine a boot stamping on a human face—for ever”.

Any of these images would certainly contribute to a striking poster, but the approach was ultimately rejected as inherently faulty. I might have put out an unintentionally negative message: “Join us & together we’ll destroy the world”. So a re-think was definitely in order!

I came across an intriguing image of anti-Communist graffito on iStockphoto, one that still cleaved to my original idea of portraying a broken political process, but the action portrayed here was more positive. Here, the notion is of casting aside what didn’t work as the initial part of the transition to something that did. And of course, what do you need to make that transition successful? Why, lots of people with MPhils in political theory, obviously!

To keep to the conceit that the poster was itself political graffito, I opted to place the title in a hand-drawn stencil typeface. And finally, the actual content of the poster was placed on a semi-transparent bed.

By the way, if you’re a graphic designer in the Sheffield area & need digital printing done quickly, consider ASAP Digital, who printed both posters. Their quality is excellent & their turnaround time is fantastic.

There are moments when I’m really happy not to live in the US any longer. This is one of them, because I simply know that if I lived & worked there, I’d have to make an eagle-based logo for a consulting company. Because, as I’m sure you’ve twigged, they’re keen-eyed consultants who know what’s what.

And not because they’re nearly extinct.

Using innovative typography on websites is close to my heart. But its development has been sluggish at best, due in part to the virtually non-existent actions of font foundries. Their inaction is in part understandable: the licensing issues aren’t easy & naturally enough foundries don’t want to give up being paid for what they do, because if a font is on a website, chances are that you can rip it off. Even if you use something like Cufon, which is a pretty cool-looking, Javascript-based encoded siFR alternative, you’re likely to be able to re-engineer the font.

It’s tempting to view font foundries—like Adobe—as big, faceless monolithic corporations who have their own profits in mind, not the use of their fonts in innovative ways. But the truth is that they’re usually quite small & by ripping them off you’re hurting “the little guy”. So how do you resolve this issue? Well, in an interesting interview between Jeffrey Zeldman & the Font Bureau’s David Berlow, Berlow suggests creating a new table for fonts which defines permissions for online usage. On the face of it, this sounds like a decent idea, but the problem is it’s an idea that’s come far, far too late: that particular horse has bolted. Foundries should have closed that gate back in, oh, 1990.

Which is where Dive Into Mark’s foundry screed comes in. Unlike many screeds, it’s really worth reading because he makes very cogent, stark points. For one, Berman’s permissions table suggestion would break every font-consuming application on every platform on every computer on Earth. Mark also points to the future:

Dynamic web fonts are coming. Actually they’re already here, but most of Our People haven’t noticed yet. But they will, and that’s going to be a huge boon to somebody. I see you’ve decided that it won’t be you. Well, have fun shuffling your little bits of metal around. The rest of us will be over here, using the only fonts we’re allowed to use: Everything But Yours.

Mark’s point is really important: by defining some licensing in the most boneheaded manner possible (really simple example: not allowing some fonts be embeded in PDFs), type foundries have shot themselves in the foot. Unless they change—and fast—they’re going to be left behind.

Here we see some really close (and obvious) parallels with the machinations of the music industry, the movie industry & even the newspaper industry. All of these “content owners” (and isn’t that a generic expression) are so paranoid about “giving away” their work that they’re earning the enmity of anyone who comes into contact with them. And like the music, movie & newspaper industries, I suspect that type foundries are going to see their business models change dramatically—and they’ll not have had the initiative to have a hand in that change.

Like books? Like photography? Like art? Let’s mix all three of them. Thomas Allen’s book art photography is a wonderful series where Tom takes different pulpy book covers & with some judicious slicing makes a fantastic new work out of it.

Thomas Allen’s “Fury” (2006)

Truly fantastic stuff.

Are HDR images the new velvet paintings?

There’s a great article about designing a font over at “I Love Typography” that’s worth a thorough read.

I love, love, love articles like this: they stick you directly in the mind of the author & give you practical tips for doing something similar, if you’re interested in doing so. Even if you’re not interested in designing a font, the observations that arise from the article will help hone your vision for designing anything.

If you’re a web developer, you’re going to be interested in the fact that Microsoft Internet Explorer 8 has been released.

There’s a lot of good news: it’s passed the Acid2 test & supports CSS tables, making it the last major browser to achieve both of these. Apparently it’s also more secure than previous versions, although that has yet to be fully tested in the real world. Finally, it’s also faster than previous IE versions, although according to Computerworld, IE8 is still the slowest browser based upon SunSpider benchmarks. In my (very limited) experience, IE8 is significantly faster than previous versions—not dramatically so against Safari or Firefox, however—but more importantly I’m grateful that it hasn’t munged up any of my layouts!

What a difference a few years make: when IE7 came out, it’s only real competition came from Firefox (with Opera as well, of course). It’s now a very full field, with Safari & Chrome freely distributed as well. It’s really great to see such strong competition, and it has to be said that the IE team seem to have done a good job on the browser.

It remains to be seen what the new release will mean for IE’s declining market share; I can’t speak to that. For developers, IE6 was pretty odious & IE7 a bastard step-child of a browser, as it only made half-steps towards standards compliance. IE8 has removed support for HasLayout, the code that trips up most developers, including me.

But… the insta-reviews aren’t positive, and although they’re concentrating mostly upon installation problems, the centre of my concern lies in advanced standards support. There’s still a lot of room for improvement from a developer’s point of view. Whilst the other major browsers have passed the Acid3 test, IE8 still fails, and pretty miserably.

Just as important is the lack of CSS3 support. One might argue that CSS3 isn’t a full recommendation yet, but its development was modularised so browser vendors could start implementing portions as they were completed. And on this score, Safari & Firefox roundly beat IE8. I know I’d love to have multi-column & RGBa support across the board. Yet even if IE8 did support these, it’d be years before we could use them with confidence, that is until older IE versions finally dropped off the face of the earth The fact that the IE team haven’t supported them yet means the day is that much farther away.

Maintaining Older Browsers for Testing

If you’re like me, you’ll have multiple slices of Windows so you can test sites against IE versions. To not get tripped up & accidentally overwrite an IE6 or 7 install because of an automatic update, I’d suggest you install the IE8 blocker toolkit.

As a fan of the cool Scriptaculous home page, I was wondering how we could achieve a similar look using pure CSS. It turns out that it’s child’s play.

The circular effect we want to achieve in CSS

NB: to use this effect, you’ll need to be using a browser that’s implemented CSS3’s border-radius. This means Safari & Firefox: other browsers will simply get a square. Because they’re square, man!

For the example, we’re going to have simply a DIV with a paragraph in it.

CSS Circle Effect Definitions

  div {
    width: 10em; height: 10em; 
    -webkit-border-radius: 5em; -moz-border-radius: 5em;
  }
  p {
    text-align: center; margin-top: 4.5em;
  }

The Explanation

You have to define your parent objec’s height & width & they must be the same (here, 10em). You then employ -webkit-border-radius (or, for Firefox, -moz-border-radius) & define it as half the amount of the height & width. There’s your circle. To get your paragraph looking awesome, align the text centrally.

I’ve placed a HTML/CSS sample here for viewing. Note that I added a border colour to verify that the DIV operates as a proper circle.

For the sample, I defined the P tag explicitly as 1em in height. A small paragraph would be square in the middle of the DIV, which means it would straddle the centre, hence a definition of 4.5em—5em being the centre of our example, 1 em being the height of our P, so we have to nudge the paragraph up by half its height, or 0.5em.

If you wanted to employ this for a real project, you’d have to consider what would happen to the enclosing content of your DIV, however. You’d almost certainly have to define your paragraph to be smaller in height & width than the parent DIV, otherwise your paragraph would bleed over the edges of your circle.

Anyway, some food for thought. Now go & make circles, my pretties!

Not that long ago—well within living memory, in fact—the only way to show people your design work was to cart around sheaves of paper, your fingers greasily smudging the edges. We likely forget how long this has been common practice.

The Creative Review blog recently had a brief photo essay showcasing a 16th-century artist’s portfolio—the Macclesfield Alphabet Book.

Macclesfield Alphabet Book: ornamental detail for lettering of “S” & “A”

Macclesfield Alphabet Book: ornamental detail for lettering of “D”

Books like this not only showed potential clients what your house could produce, but it also retained a “house style”—anyone in the workshop could reproduce these images.

It’s been a long while since the ink dried on my Art History MA, but the style doesn’t at all look circa 1500 to me. I think it’s likely to be about 1450 at the very latest—and even then, it’s retained imagery from a far older manuscript. Have a look again at the fashion in the second illustration above: the woman’s fashion looks about mid-15th century & the man’s significantly earlier.

In any event, give me a website any day :)

So Microsoft have distributed the next public release of Internet Explorer 8. If you’re using XP (and who among you, honestly, is using Vista?), you can get it here.

Here’s an interesting note in the “known bug” list: looking at the markup within an iframe tag is impossible if the first item within is a comment. Ohforchristssakeareyouserious.

On Friday, Sitepoint posted its latest podcast (MP3 link) with a discussion unfortunately germane to a lot of developers’ work: what to do about Internet Explorer 6. They linked to one of my articles as background material (as if I’m an expert or something).

I found the discussion somewhat strange—as I do all podcasts, really, because instead of a “proper” media show where the participants research before presenting their views, podcasts are the equivalent of nattering around the water cooler.

Much of the discussion whipped around why on earth people don’t upgrade their browser. I mean, c’mon. There are lots of reasons for this & if you’ve ever worked in a large corporate atmosphere as I did a very long time ago, you can come up with a few more. The prime users of IE6, I’d wager, will be first: those using ancient machines—they’re people who either cannot upgrade or don’t know how to upgrade. The second and far larger user base: those behind corporate intranets, where everything’s been tested in the simplest way possible, with one browser only & one version of that browser only. Lots of corporate intranets use ActiveX & will restrict its usage to IE6 because, well, that’s what they restricted it to. It’s the lazy path to information design, but corporate IT departments—trust me on this—are often filled with lazy people.

But corporate IT isn’t the only lazy culprit out there. Lately, some banks have been caught out using lame browser-sniffing techniques & have thereby excluded the latest browser on the scene, Opera 10, from using their websites because “it’s too old”. (For those interested in why the sniffer didn’t work, it’s because the browser sniffer doesn’t parse more than one digit, so Opera 10 is classed as Opera 1. That’s practically the dictionary definition of “lame”.) And don’t think that standardistas are exempt from laziness: one of the podcast’s participants stated he “didn’t even test in IE6 any more” (albeit for personal sites), which to me is pretty scandalous. After all, the whole point of the web is its inclusivity: the more, the merrier.