陳 Jon Tan

Events & The Favour Bank

Jon 陳 — Tue, 19 Aug 2008 13:29:24 GMT

Have you ever heard of the Favour Bank? It’s a derivative of karma, using an obviously capitalist metaphor, but Paulo Cohelo used the phrase in his novel, The Zahir. That’s when it first grabbed my attention.

“Zahir” is an Arabic word meaning visible, evident, obvious, or always present; an obsession; that’s what the novel is about.

The Favour Bank is something we are all aware of. According to Pablo, we withdrawl from it by receiving the help of friends and contacts when we’re starting out. We also deposit in it by helping others later, after establishing ourselves. Hopefully we end up in credit. An example might be Jeff Croft’s intention to highlight the work of less well-known people who aren’t the usual suspects, but are still doing great work, regardless. I try and do the same in my and rare posts. Hopefully you do, too.

I mention the Favour Bank because it fits neatly with a two events happening over the next few months; both might put all of us in credit at the Favour Bank:

Web Developer’s Conference, 2008

The Watershed, Bristol, UK. 12 November, 2008.

This is a conference run by, and for, the students on the Web Design degree course at the University of Western England (UWE). It’s an opportunity for them to meet and mix with industry professionals. There’s some interesting talks by folks such as Patrick H. Lauke. I will be on a panel discussing working in the Southwest with Joe Leech, Rick Hurst and Peter Coles. As of writing this, my profile hasn’t been added to the panels page but everyone else is there, so there’s much more interesting stuff to read.

The conference is free to attend, and based on last year’s event, should be fun and interesting. If you’re around at the time, consider popping in.
South by Southwest (SXSW) 2009

Austin, TX, USA. 13–22 March, 2009.

This time I’m asking for your vote for our typography panel, Quit Bitchin’ and Get your Glyph On. It will be hosted by Samantha Warren, and fellow panel members will be Elliot Jay Stocks, John Boardley, and Ian Cole

We’ll be discussing web typography and I have a sneaking feeling that there will be some very different views on the panel so it should be fun. There’s also a fair amount of experience and passion there, too. So, if you can join us I’d love to see you there, but even if not, your vote would be very much appreciated! To vote, go to the panel picker page and either cast it, or quickly sign up to give us a thumbs up. Thanks!

In other news…

Locally, BathCamp is happening on the 13th and 14th of September at Invention Studios. I’m going to try valiantly to make it, and drop some typography musings on the unsuspecting crowd, but there’s already a heap of people going so it will be a fantastic day of geekery regardless. Keep in mind, according to BathMaster, , any talk you give doesn’t have to be technical. Someone gave a talk about growing veg last year; it’s just a chance to geek about your areas of expertise in front of an audience who will appreciate the geekiness of it, no matter what.

Away from the Southwest, Scripting Enabled takes place on the 19th and 20th of September at the Metropolitan University of London. It’s a two day “conference and hack day” that aims to break down the barriers between disabled users and the social web. The first day will be a summit to discuss and identify the barriers with anecdotal evidence from disabled users. The second day will try and solve some of them — especially in regard to existing sites — with a hackathon. Sounds like an event bursting with social karma, and thus, very cool. My accessibility lexicon and good mate, Jon Gibbins, will be in attendance, too. I’m tempted to ask you to heckle him if you see him, but I think I’ll reserve that right for myself.

If you know of any other interesting events coming up, feel free to share them by throwing the relevant HTML in the comments. It’s all good credit in the Favour Bank, or good karma, or however you want to describe the wonderfully seductive and aspirational concept of mudita.

OSCON 2008, the Year of the Butterfly

Jon 陳 — Tue, 12 Aug 2008 13:34:05 GMT

Writing this is my way of remembering my first OSCON. It’s also a good way of taking a break from the research I’m doing into the next web typography post. I’m also a little frazzled by moving house, and a recent period of sleep depravation after my eldest son’s operation. This is my therapy.

The stage

Sometime in the very early hours of Monday 21st July, after leaving New York nine hours earlier and being tortured by JetBlue and JFK, Chris and I arrived at the Doubletree in Portland. It was balmy. After the tropical heat of New York, to be cool was a treat.

The next morning I got chance to explore a little. The center of Portland is a good place. The free tram is a great idea. Tree-lined avenues break up what would otherwise be a sterile business district into human-friendly spaces. You can walk around the city. That might sound like a strange statement to make but, in my experience of the States so far, a walkable city is exceptional enough to highlight. OSCON takes place for a week at the Oregon Convention Center which sits on the Willamette River’s east bank. A pair of glass pyramids and spires call the faithful to prayer from above the main entrance. Architectural comparisons with cathedrals and palaces are hard to resist. The pyramids reminded me of the Louvre in miniature. On closer look, the spires almost seem like an afterthought. OSCON only took up the south end of the centre. In the eery quiet of the other empty concourses a dragon boat and pendulum wait in patient suspense for admiring glances.

Players & acts

I’m averse to some of the more negative aspects of professional conferences. Sometimes, I get a sense of some people’s innate self-consciousness that can go one of two ways in the social mælstrom: Quiet humility that should be treasured, or competitive haughtiness attempting to mask insecurity. The latter is suboptimal. OSCON has almost none of it. Thanks to Chris, from the moment I stepped through the door, to the last night, I seemed to meet a whole bunch of people who were comfortable in their own skin, and with their own proclivities. They even accepted mine. There’s nothing so pleasant than having good things to say about people one meets. These of just a few of the characters:

The mighty Wez Furlong was possibly the busiest man at OSCON, giving three talks, and sharing his PHP / Cocoa explorations with the world. His obscure cultural reference library is almost as smart as his code, which is saying something. Andrei Zmievski has rightly been called the social director of OSCON before now. He has a unique ability to organise dispersed techies into a night out, and find the best food and drink. Like Wez, he’s also a core developer of PHP; multi-talented like most of the folks I met.

It was great to meet the Funkatron (Ed Finkler) too; security dude, publisher of a rather fine blog, and Spaz developer (for all of the Twitter fans out there). The Chay, first name Terry, arrived late during a great Tuesday evening at the Doug Fir. Another person who, like Ed, I’d only known via the Metaverse before. Watching Terry in live debate around Rails and PHP was a gift, flavoured with some choice vitriol, and prepended with some Physics.

Ben Ramsey also contributed his fair share of choice phrases to that particular evening, too. He went from custard to goats to communism, all within the space of two mis-interpretations, and the unique Ramsey filter that emerges to great effect when the sun goes down. Elizabeth Naramore of PHP Women and the forthcoming PHP Appalachia conference also kept me company one Thursday night in the Vault. We put the world to rights, and lamented the joy and pain of younglings. The Vault was also the place of more Ramsey mayhem and obscure cocktails. They included a strange take on the Mojito with lemon grass, a favourite of the beatific Marcus Boerger of Google.

The person who starred in my best picture of OSCON, was security and PHP guru, Damien Seguy. On a mis-guided first attempt to find Mint, the best restaurant in Portland (truly), Damien brought his elephant along. Arguably, his elephant had more directional smarts than us that night. I visited Mint three times during OSCON. Andrei took us there the first time (hence his accolade for finding good food.) Chris and I also dragged his royal amusing contrariness, Theo Schlossnagle there as he flew into town, assaulted the world with his brain (and huge velcro-covered lens) then departed. The third visit topped them all with an en-mass invasion after a glorious afternoon at Brewfest on the Friday. Apart from the strange Brewfest wave of sound — a cheer that started nowhere and undulated around the tents — and the excellent beer, the evian-esque gigantic atomiser was a person favourite. Who would of thought to put an urgency-inducing sprinkler system just before the queue for the loo?

I also got to spend a bit of time on Friday with those excellent equestrians and technical authors, Luke Welling and Laura Thompson of OmniTI and Mozilla, respectively. Earlier that day, Luke and I shared the affirming experience of donating to the Electronic Frontier Foundation. For me, this was partly to support the EFF’s help for people like Luke, who’s currently dealing with a ridiculous attempt by confirmed spammer, Jim Mirkalami, to sue Luke after he re-published information on his blog that was already in the public domain. Anyway, we got the tshirt, and it was good. After such great company, great food, and drinks, Mint is definitely in my top two Stateside restaurants so far, along with Gen in Brooklyn (it has incredible Japanese-Rastafari sushi). Later that night, Chris and I said a fond farewell to Mint, jumped in a cab and headed to the airport via the Doubletree to soar back to Brooklyn on the red eye. An apt name, for sleep was not forthcoming. After a few hours rest in Chris’s place on Saturday morning, I dragged my bags into town for present shopping. I fell into another flight that evening and landed back in Bristol and the beautiful embrace of my tribe on Sunday morning. Knackered is an understatement. Then we moved house four days later.

Apropos

If this post is packed with names, that’s because OSCON was all about the people for me. I haven’t mentioned everyone I met (just those I spent most time with), and didn’t manage to attend many talks, but the atmosphere alone was worth the trip. Chris Shiflett and I gave a talk on experience-driven development which took place on Thursday. A good thing, because some of our best ideas dropped into slides on Wednesday afternoon. It was fun, but still a little raw in its first outing. We got some great feedback—almost all positive—so hopefully it will have more meat and equal amounts of fun the next time around.

OSCON was a blast. Here’s my OSCON ’08 Flickr photoset if you’d like to see a bit more. It was superbly organised, at a great venue, with some of the best developers in the world exchanging mental energy for a conference pass. Details make big ripples when it comes to conferences. Details like the fantastic help of Shirley Bailes — O’Reilly’s conference speaker manager — who even offered to send me this year’s butterfly t-shirt after I forgot to grab one while I was there. If you wondered at the title of this post, there’s your answer. I only met a handful of people out of the three thousand or so who attended, but they made it great for me. I encourage everyone to consider going in years to come. With luck, I’ll see you next year!

Collaboration at OSCON ’08

Jon 陳 — Thu, 10 Jul 2008 15:47:47 GMT

In just under two weeks time I’ll be delivering a joint talk with Chris Shiflett at OSCON, the biggest open source convention in the world run by O’Reilly. It happens to be my first time at OSCON, as well as my first talk. It also happens to be OSCON’s 10th birthday. Needless to say, I’m a little nervous: First, at the privilege of speaking in front of such an erudite crowd at such an important event, and second, because losing your cherry is always nerve-wracking, unless you’re drunk.

Just for the record, I have no intention of being drunk.

It was Chris’s idea. He thought that our working process was valuable enough to share. I’ve really enjoyed the way we’ve worked together over the last couple of years, so thanks Chris for suggesting we talk about it.

Our talk will be about collaboration, what we’ve called experience-driven development. We’ll be exploring how we can do our best work, and enjoy the relationships and processes that get us there, no matter the size or complexity of the project. I don’t want to give anything away, but hopefully it will be fun as well as informative. With a bit of luck we’ll leave folks with some food for thought to take away with them and re-heat later.

The talk will take place on Thursday 24th July from 10:45am to 11:30am in room E145. If you can make it, I’ll see you there! Also, let me know if you’re going, and feel free to come and say hi anytime. I’m looking forward to meeting people and generally soaking in the vibe! If anyone is considering grabbing a last minute pass, and could use a 15% discount, . You don’t have to come along to our talk, but we’d love to see you.

No. 172

Jon 陳 — Fri, 4 Jul 2008 22:13:40 GMT

When I woke this morning it seemed like any other day. The sun was shining. I liked that. The boys were mischievous. I liked that too. Nothing seemed out of the ordinary. Then I remembered: Today we get the keys to our new house.

Our new house is on a narrow street in Montpelier. When we arrived it felt like coming home, which it is in a way. The area’s old streets are more suited to horses and people than cars, regardless of the lines on the roads. Montpelier undulates up a hillside, at the top of which Cromwell once stood directing cannon fire onto the city during the civil war. It was market gardens then. It was, according to local legend, given its name by prisoners of the Napoleonic wars who said it reminded them of Montpellier in France. In Bristolian Montpelier, sandstone-faced Georgian houses sit next to ancient cottages and Victorian terrace town houses. Our house is one of the latter. More square than usual, on one of the lower streets, with a grape vine, a pear tree, and a passion fruit bush in the garden.

Number 172 is special for a few reasons. It’s the first house we’ve bought. Years ago, when friends were busy being career super-heros and I was busy being a itinerant vagabond I wondered if I would ever put down roots . They were buying houses. I was off to Australia on a whim, or living in The Seychelles, or running a stall on Brixton market for the summer playing French hip-hop and selling sunglasses. Until today I’ve always rented places. I fell in love with some. I fell out with others. I was always moving around and moving on. No longer!

Another reason is that this marks a return to Montpelier. An area I fell in love with when I first came to Bristol in 2000. Artists, musicians, film-makers all paint the walls, eat a lot of organic food, smile a lot, and generally act as a band-aid on the wound of capitalism lest the world forget that life is much, much more than paying bills and buying Apple gear. Architects, hippies, designers and fiends also live here. It’s an oasis of difference: From Herbert’s Bakery to Saj’s grocers; from veggie breakfasts at The Bristolian to the friendly smell of weed in The Cadbury garden and deli feasts from Licata’s; Montpelier is special. I’m glad to be home.

The final reason, and most important of all to me, is the most prosaic. This is ours. A family home that we own. It feels different. A calm kind of contentment.

As I sit writing this, the day is quickly coming to a close, and I wanted to mark the moment. As the States celebrate their independence, we’ve celebrated our own in a small way. I took some pictures. It was a wonderful day.

The Paragraph in Web Typography & Design

Jon 陳 — Mon, 9 Jun 2008 17:44:16 GMT

Paragraphs are punctuation, the punctuation of ideas. After selecting a typeface, choosing the right paragraph style is one of the cornerstones of good typography. This is a brief inquiry into paragraph style for the Web.

To collect my thoughts I put together a rough page of examples. I was interested in openings and texture more than font style, so they all share the same basic copy, typeface, size, and leading (line height). It was mostly for my own reference and will change over time, but you’re welcome to take a peek:

12 Examples of Paragraph Typography

Typographers use layout techniques like single line boundaries, indents, outdents and versals (drop caps etc.) to punctuate paragraphs in a stream of discourse. Block paragraphs are common to the Web, indented paragraphs are common to print. Browser vendors gave us a default block style of flush left, ragged right with a single line boundary, but there are many variants we can pick from depending on the context.

In any project, the text itself will have its own tone, rhythm and meaning. It’s our job to provide it with a stage on which to sing. Typography serves the spirit of the text, bringing it before an audience, and then quietly fading into the background as the reader delves into the meaning. As Ellen Lupton says in Thinking with Type:

Typography is a tool for doing things with: shaping content, giving language a physical body, enabling the social flow of messages.

In the Web era, designers create narrative spaces made up of text, images, video, etc. We add context and legibility to those formats. We also create spaces where people express themselves. We work with enacted narratives where the content is already available, and emergent narratives to be created over time. Instead of just styling symbols, we’re styling bytes in fluid narrative spaces. We’re bytographers; literally, the writers of bytes, not just glyphs. Yet still, at the heart of this explosion in publishing, is the humble and beautiful paragraph.

From paragraphos to paragraph

Punctuation is a word derived from the Latin punctus, to point. Punctus is also the precursor of the period, or full stop. Punctuation was called pointing in English. It was used to indicate pauses or breaths until the 16th century. Punctuation as syntax didn’t emerge until the Renaissance.

A paragraph was historically a punctuation mark. According to the Online Etymology Dictionary, the word paragraph has roots in the old French word paragrafe from modern Latin paragraphus or “sign for start of a new section of discourse”. That in turn is based on the Ancient Greek word paragraphos, a “short stroke in the margin marking a break in sense". The great reference of the 20th century, the Encyclopædia Britannica says:

In the oldest Greek literary texts, written on papyrus during the 4th century BC, a horizontal line called the paragraphos was placed under the beginning of a line in which a new topic was introduced. This is the only form of punctuation mentioned by Aristotle.

This fragment of a parchment scroll shows a paragraphos (a) indicating the line where the new paragraph starts with a break in the text (b).

Source: The ‘Textual Mechanics’ of Early Jewish LXX/OG Papyri and Fragments by Robert A. Kraft (University of Pennsylvania), The Manuscript Fragments, s.5: parchment roll, ca 100 bce; Rockefeller Museum, Jerusalem.

Medieval punctuation employed a paragraphus—also known as a “‘gallows-pole’ or upper-case gamma, or § (later ¶)”— to separate ideas in a running discourse.

White space did not punctuate paragraphs until the 17th century. This was the era of Ben Jonson’s English Grammar, where he recommended the use of syntactic punctuation. Around that time, the practise of indenting the first line of a paragraph became part of our standard syntax, along with the use of capital letters for the start of a sentence, and the use of a space between words.

Technology & cost influencing style

Materials and technology have always influenced calligraphy and typography. Papyrus was used from the 4th century BC. It was brittle, so papyrus was rolled instead of folded. Parchment codices became more popular in the 5th century AD. The finest parchment was vellum, made from the white skin of a calf. Next came paper: Invented in China in the 1st century, the first latin text was written on paper around the 10th century. By the mid-15th century it was becoming dominant. Johannes Gutenberg printed only 45 copies of his Forty-two line Bible on vellum, using paper for the remaining 135 copies because it was cheaper.

During the industrial revolution in the 19th century, cheaper wood-based paper emerged along with steam-driven paper making machines. Intuition tells me that also influenced typography. By the turn of the 20th century paper was cheaper than ever before. The cost of inserting a single line of white space between paragraphs—the most common style today—would have reduced. The emergence of the consumer society and rise of advertising also encouraged a change in typographic style. “Fat face” display type was created for bills and advertisements; hyperbole became a style of visual layout. Before the 19th century, the insertion of a full line of white space between paragraphs would have surely been decadent. Perhaps that’s how it became commonplace. However, this is speculation; I cannot find reference to how it became prevalent, so would welcome further evidence.

The single line boundary is the most common paragraph delimiter used on the Web today and the most common browser default style. Generally, the indent is still the most prevalent paragraph delimiter in printed books and publications. In some ways, the block and indent styles exemplify the divide between Web and print. Printing cost is still a consideration looking at some of the mistreated text in certain paperback books, but printing on a screen effectively removes cost as a factor. Usability is the only currency by which web typography is measured. That’s what we’ll explore next.

Paragraphs in a narrative space

The narrative space of a web site is where a story develops as a person navigates the site. This should not be confused with narrative as a text-type. However, in some cases, it does share some characteristics like a chronological order. For example, a blog is a narrative, no matter how broken. It has a chronological order (albeit reverse). Even though a blog has multiple entry points, it can still contain a chronological story. The chapters in that story (entries) may be any one or more of the traditional text-types {narrative; descriptive; argumentative; expository;} but they all form the narrative space of the site.

The narrative space within a web site is made up of three components: content, layout (style and context), and information architecture.

Further reading:

Mark Bernstien writing in his mis-spent youth about narrative on A List Apart

Web design narrative can be compared to architectural narrative: The design of an environmental experience from multiple viewpoints in time and space. Visitors experience a web site in much the same way.

Web design narrative can also be compared to narrative in game design: both create the narrative space via a screen.

In both comparisons, the experience of the narrative space is more than just style and technology. In fact, style and technology are tools to create the user experience. The experience of moving through a narrative space on the web is complex. We understand that people may arrive in that space from any direction and context (referrer). They may be confronted when they arrive with any number of artifacts that convey narrative information (navigation, main content, calls to action, etc.). Any paragraph style must consider context as well as the meaning of the text.

Thinking about paragraph style

The way we approach the design of a narrative space on the Web is manifold. In most cases the content is not already available. If it is available, it may be subject to revision as part of a redesign process. The vision of the brand and the purpose of the site can seem clear, but may not be upon further investigation. Sometimes, our job as designers is to help refine both the vision and content. It’s during that stage that we explore layout and get a clue to the context in which the typography will live. We call it experience design. Only after that do we get down to experimenting with style.

The context, meaning and tone of web copy should always determine typographic style. Reading the text in full—or at least understanding what the text might be before styling it—is a pre-requisite. A common mistake is to allow the design to dominate the text: Design for design’s sake, or even worse, fashion’s sake. The text is made subservient to the canvas that the designer wished to paint on the screen. This is exemplified by the proliferation of fun, but ultimately harmful, web design galleries. Once a user muscles past the gag reflex, or stops admiring the amazing graphical decoration, they can often realise the design is in their way. The content is obscured. The narrative space becomes broken into fragments, like pieces of torn parchment linked tenuously together by calls to action, or a nested index of links called a menu.

Good typography makes the canvass fit the meaning of the text, not the other way around. It paints pictures with form that enrich the meaning of the words with colour, texture and movement. It is illusive, subtle, and ambient. It’s the shirt that engages from a distance. The closer you get to it the better it seems, but it takes a moment of reflection to even realise why. Robert Bringhurst says it beautifully in Elements of Typographic Style:

One of the principles of durable typography is always legibility; another is something more than legibility: some earned or unearned interest that gives its living energy to the page. It takes various forms and goes by various names, including serenity, liveliness, laughter, grace and joy.

When trying to energise paragraph text, meaning and context are the most important factors to consider. Meaning flows from the author. They are trying to share a message, a thought, an idea. Context belongs to the audience. They are trying to understand, extract meaning and find relevance. They’re doing so in the context of their own requirements, but also in the context of the page layout and the wider architecture of the site. A refined sense of empathy will help you find the right form for your paragraphs, if user testing cannot be part of your process.

Choosing a paragraph style

There are no hard and fast rules for paragraph style for the Web. Choosing a style depends on all the factors we’ve previously discussed. The 12 example styles I threw together are just a starting point and all paragraph styles need testing in context.

You may find this place holder markup useful when testing styles.

All browsers have good support for basic paragraph styles. However, complex treatments of versals and openings can be problematic. There are still browsers with immature standards support when it comes to using techniques like pseudo elements and adjacent sibling selectors. Our ability to specify fonts for body copy is also limited, and inconsistent rendering across platform and browser persistently frustrates creativity and precision. There’s still a lot to work with, though. Here are a few examples, some new and some that are aging beautifully:

Rob Weychert used indents to wonderful effect in his Across America diary with text set flush left and ragged right. He also uses a deft combination of indents and small-capped openings in his blog posts. Both are a pristine example of using indents to compliment his particular style of writing. Truly a great example of bringing a love of print to the Web.
Ed Finkler mixes a font stack of Palatino and Palatino Linotype with boundaries that perfectly suit his content. He publishes a mixture of material that’s often technical, so boundaries help delineate the technical writing for skim reading, while the larger size and typeface adds great texture to his site. For the technical material I might have defined sub-heads a little more, but his choice of paragraph style is instinctively good.
Andy Rutledge treats paragraphs with love. On his home page, extracts from the three latest posts descend in a beautiful hierarchy of size and tone to indicate the chronology. Individual posts also cascade gracefully. Boundried blocks define his thoughts with great clarity. His material is often instructive, so this style perfectly suits the content.
Cameron Moll indents paragraphs and uses boundaries. This could offend pedants in print but I find it wonderfully pleasing on the Web. His material is often educational so the division of points by boundaries helps legibility. However, one of the main reasons this style works so well is the font size: it could seem small but the indent with a boundary allows the text to breathe and adds great poise and texture.

A note on indents

If you choose to use an indent, stylistic tradition suggests that there should be no indent on a paragraph that follows a head or sub head. Tradition also suggests there should be no indent following elements like lists and blockquotes. You can achieve this without extraneous markup using adjacent sibling selectors. For example, if you have already set an indent on your paragraphs:

p { text-indent: 2.5em;  }

Then, to stop any paragraphs following a heading of rank 1–3 having an indent you can set:

h1 + p, h2 + p, h3 + p { text-indent: 0; }

However, I would caveat that with only if the blockquotes and indents are set flush left with hanging punctuation. Robert Bringhurst suggests: “If your paragraph indent is modest, you may for consistency’s sake want to use the same indent for quotations.” I agree, and I think the same can apply to lists on the Web. In both cases, a boundary is required to separate the list or blockquote from the surrounding paragraphs.

A note on blocks

If you choose a block style with no indent, but with boundaries between paragraphs, tradition suggests that there should be no indent on either lists or blockquotes. As you may have noticed from reading this article, I don’t always agree, especially on the Web. It depends on the content and the balance of elements. In certain instances, lists and blockquotes might be used to punctuate the running text, which can help people skim read on the Web.

Web `!=` print

People experience the Web differently to print. The Web is not linear; in print people most often read sequentially, from front to back. They may flip, looking for something that catches their eye. After an initial look, they may skip back to interesting items using a table of contents or an index. On the Web this is reversed. Skipping to a certain page via the menu is habitual. This has been encouraged by bad design and web copy writing where inline links in the running text are sparse, if available at all.

Skim reading is the norm on the Web. It may well even be the case that skimming is normal everywhere, it’s only when we become absorbed that we digest the meaning of the text linearly. It’s a way of filtering the noise in a page to try and get to the content of interest. However, this has become essential because of bad design; pages have been confused with intrusive advertisements, overbearing calls to action, and layouts that don’t serve legibility. It has forced people to skim, whether they want to or not. Better designers refuse such harmful techniques. Getting layout and content right in prototyping is essential.

Careful choice of paragraph style (and other body text forms) can accommodate all of the differences in audience behavior and expectations. The optimal paragraph style you choose in summary pages may not be the optimal one for dense, detailed pages. A subtle change may well be necessary in different sections of a site. Choose judiciously, but most of all, designers should know why they are choosing a particular form; “because it looks good” is not a good reason on its own; “because it feels good” may well be.

Reflecting on Acceptance

Jon 陳 — Mon, 12 May 2008 16:30:03 GMT

You might already know that my entries are mostly about design with a few personal perspectives that peep out between the lines of prose. Sometimes the personal might take over. Today is one of those times. Apologies if you’re used to seeing more professional material in my feed, this is an indulgence: I’m celebrating!

Summer has arrived with a smile the last few days in Bristol. It’s humid and bright, and somehow calm in the city. This morning was no exception. Just after rush hour, and before the shops opened for business, I swung my backpack on my shoulders, hitched into my flip-flops and walked through the old town to the harbour. I headed for the Watershed, but it wasn’t opening its doors until ten-thirty, so I wondered along the river with my camera, looking for some inspiration.

The city noise fell away as I walked around a bend past the famous Lloyds TSB building; the only sounds were an occasional river boat chugging by, and people talking on their ’phones as they sat in the sun and smoked. I walked under an avenue of young trees in front of new office buildings and came to Caffe Gusto, nestled at the end of a grassy divide between tall office and apartment blocks called Cathedral Walk. The tables reach out towards the river at the edge of the dock. The wifi extends to the river like the rippled reflections of the morning sun on the water. I sat for a while in the shade then moved out under a parasol. That’s where I’m sitting now. A ferry just passed by, gently bubbling the River Avon with its velvet diesels.

There are some changes in the air; as gentle as this moment, but no less significant. They might take me away from this city where I’ve lived for the last eight years to a different country. It’s an exciting time; all for the good. So, if I seem a little whimsical, forgive me: The breeze of change is blowing.

I would like to share one important event with you: Last Thursday, I got a great email. It was from Freda Sack, type designer, co-founder of The Foundry, and President of the International Society of Typographic Designers. The opening line simply said:

“Welcome to ISTD”

I grinned so much I almost swallowed my ears. I had spoken to Freda on Monday last week to ask about submitting web specimens for consideration. She told me that was fine, the board was meeting the next day, and it would be considering applications if I could submit in time. To do so, I built a web page that mimicked the PDF application form and submitted it that night. I really wasn’t sure I would be accepted. Web typography is volatile: The paper is inconsistent, the printing imprecise, and the opportunities to make a mess of it are manifold. I looked at my specimens the next day (not to mention some of my rushed copy) and winced.

The ISTD started life as the Guild of Typographers in 1928. It is acknowledged as the authority on typography in the UK, and has international standing. Applicants submit six specimens of work that are reviewed by the voluntary board. Acceptance is by merit, and understandably geared towards print typography, so submitting six examples of web typopgraphy was a slightly nervous experience. The standard required is high. In some ways I felt like I shouldn’t apply; to be accepted was a genuine surprise. It still feels very much like a seminal moment.

I confess, sometimes when I read what others so generously write about my work, I feel like a fake. Such generosity is truly heart-warming to read, but I can’t help feeling sometimes that it’s undeserved. It would be ungracious to say so and detract from the gesture, so I just say thank you, and mean it. The same is true of my application. It might sound like insecurity, but I’m always conscious of how much I don’t know. I’m also deeply aware of my own impatience with false modesty so even writing this is a little tricky for me. The main issue is that I am mostly self-taught, spending time researching my craft alone. There are benefits to this accidental approach, but I never experienced the (presumably) reassuring consensus of formal learning, especially around typography. I never served my time, so to speak, like so many of the incredibly talented people who’s work inspires me every day. However, I believe in my own work, and how I approach my craft. That’s a problem itself: My pedantry precludes me from believing that any piece of work is truly complete. That’s why being accepted into the ISTD is both a cause for celebration and reflection.

Navel-gazing aside, I am honoured to be a part of the ISTD. It’s driven by volunteer members, and I feel privileged to be a part of it. Hopefully, I can learn, and contribute too. Web typography is flourishing. Print designers are discovering the tools to bring their paper skills to the Web. Web designers are re-discovering the elegant beauty of type on the screen. Discussions around the CSS3 fonts and web-fonts modules are in full swing. Sites like I Love Typography are bridging the gap between traditional typographers and web designers. It’s an exciting time!

I’m about to step away from Caffe Gusto, and take a slow walk back to my office. Hopefully this side note in my life has been an interesting read. For me, I’m just happy to be able to share the moment. Hopefully there’ll be more to come!

Typographers, lend me your pain

Jon 陳 — Fri, 2 May 2008 09:32:17 GMT

Dear web typographers and designers, I need your help (and your woes!) A couple of days back, Jason Teague, Director of Web Design for AOL Global Programming and member of the W3C CSS3 Working Group made a request for input from designers around the CSS fonts and CSS web fonts modules. He has volunteered to be an advocate for them, and wants our thoughts and feedback on the way forward. It’s a welcome move, and a veritable bag of snakes he’s opening, so congratulations to Jason for volunteering to take the pain. I think we should help him out.

For my part, I’m planning to respond in detail, supported by a few test cases and examples of current rendering. Wish lists are great, but I think empirical evidence is more useful when identifying current issues and areas for improvement in the recommendations. So, if you’re a web typographer or designer and have come across problems or issues that might be worth cataloging, let me know what they are. I’ll promise to try and put together a test case and convert anecdotes to science if I’m able. Alternatively, you can just throw your thoughts into the comments for Jason’s article.

As an example of what I think might be useful, I’m planning on discussing classic type setting techniques that are either badly supported or absent like old-style versus lining versus small-cap numerals, raised or drop caps, granular glyph weights, ligatures, baseline fixing, etc. I’ll also be mentioning browser-specific hacks I use to achieve better rendering like setting a miniscule opacity value in Firefox on OSX to de-bloat the glyphs and improve larger-size anti-aliasing.

What do you think?

An Ephemeral Site: Denna Jones

Jon 陳 — Fri, 25 Apr 2008 14:35:59 GMT

Denna Jones is a designer, and we recently launched a site for her that is unlike any other that Jon Gibbins and I have done before. This is it:

The evolutionary bit for us is under the hood, and to understand why, let me introduce you to Denna, herself.

Introducing Denna Jones

Denna’s fascinating to talk to because she is genuinely erudite. Her influences are as diverse as her roles. She’s a former Designer-in-Residence at Central St Martin’s College of Art and Design for the B.A. Architecture course. Currently, she’s Lead Artist for DLA Architecture’s Masterplanning Team, Deputy Editor of Art and Architecture Journal, and the Resident Curator responsible for delivering the arts strategy for the massive Devonport regeneration project. Most recently, Denna’s contributed to books like 1001 Buildings You Must See Before You Die and had an invitation to be the editor of a new tome in the series, 1001 Houses You Must See Before You Die.

Luckily for us, Denna’s work with spacial narratives is often exploratory, so she was open to our newfangled experiments.

A Web 2.0 problem

Denna is also prolific around the Web. She documents her projects and travels using Flickr, and regularly reads, writes about, and observes Web culture as part of her work. So when she came to us to discuss a site it seemed to me she embodied a problem I’d been thinking about for a while: How can our domains be connected to our other personal accounts more naturally? Domains are our identity. However, much of what we publish is locked into other sites where we share it. It’s accessible by APIs at best, or clunky widgets at worst. Technical people can pull everything together but for non-technical people it’s not intuitive. Then there’s the issues of legacy content and copyright. Unsolved as yet, but looming. What will happen to all of our content in five, ten or twenty years time? Will we still have content strewn around the Web disconnected for the most part? Somehow we need to connect the dots. Maybe portable social networks are part of the answer, or Google’s OpenSocial. Whatever the answer, I wanted to include Denna’s existing content in her own site, and to make the future relationship between her Web activity and personal site as seamless as possible.

Web services, say hi to dennajones.com

The content on Denna’s site is delivered exclusively by Web services. We take advantage of the ability to share and manipulate data that those services provide to Denna, then let her choose what to publish on her site, and in what context. This is how:

Flickr is used to manage all images and some of the site copy direct from Denna’s account. That includes the main display images on the home page, the introduction copy on her work page, and the images and copy for projects. Work projects are managed via a specific Flickr collection, with each set being a project. This enables Denna to choose the display image and write a description that appears on the site. Visitors can also drill deeper via the project link to see other images that Denna has added to each project on Flickr.
Tumblr is used for Denna’s blog and her about page. The site archives her entries and allows access to tags and dates exactly like a conventional blog would. We also use tags to display different content around the site like the entries tagged with “projects” that are displayed on the work page.
Ma.gnolia is used for bookmarks.
Twitter is used for random thoughts and snapshots of her day.
Upcoming manages events.
Technorati is used for references to her posts in the wider blogosphere in place of allowing local comments which were considered but discarded.
Feedburner manages all feeds.
Google is used for site search.

Jon Gibbins did the heavy lifting around the idea, using CakePHP and SimplePie to manage the incoming data. He also added functionality like Technorati reference counts, and the ability for Denna to refresh her site as soon as she published something elsewhere if she didn’t wish to wait for the automatic updates.

Other small touches were also a pleasure to see unfold, like Denna’s footer image being her Flickr profile image, and the text describing her blog coming directly from her Tumblr byline.

Denna’s Tumblr account is not linked because she wishes it to remain private.

Tumblr posed the most significant problems. When we started development, tags were invisible on Tumblr. Entries could be tagged, but tags were not displayed anywhere for people to use. They were absent from the API. Jon Gibbins wrote a workaround and fired an email to Tumblr suggesting it might be good to give people some way of using tags. After a couple of weeks Jon came back to me and declared that although he hadn’t had a reply, the API had just changed to allow tag access. Perfect! We got an email a couple of days later from the Tumblr crew: Did we know that the API supported tags?

Visual design, typography & layout

I wanted the design to be a container to allow Denna’s own content to flourish. Although we discussed style, and helped Denna formulate her own house style, it was very much in her hands. Strangely, I had no reservations about this. Putting the choice of stock images in the hands of a client might seem risky to some folks; to me it was exciting, especially as Denna was so enthusiastic about having such an intimate level of control over her own site.

Typography and layout have a touch of the Swiss modern using Helvetica Neue or Arial (depending on your platform) with a traditional scale. The layout is a hybrid—part fluid, part elastic — meaning it defaults to a 1024px viewport width, shrinks to fit 800px-wide viewports, but grows with browser font size until it fills the available viewport and then wraps.

Information verbitecture

The information architecture mostly uses verbs in the directory names—an idea that first surfaced with Chris Shiflett during our recent OmniTI design. It means that web addresses make up sentences wherever useful. For example, a blog entry has a URL of http://dennajones.com/writes/entry-title.

HTML, JavaScript & microformats

Plain old semantic HTML is used with CSS for styling. The interface was designed with accessibility firmly in mind; all JavaScript is introduced as a progressive enhancement to PHP-powered features like the slide-show for the home page.

Microformats are used wherever appropriate: hCard for Denna’s contact details; hAtom for blog entries; hCalendar for Upcoming events.

There is still more things we’d like to do, but in the meantime we’ve got a great head start and hopefully the beginnings of something special for an exceptionally interesting voice on the Web.

Parting shots

Working with Denna was inspirational. Her boundless curiosity, willingness to experiment, and professional skill made the whole process lots of fun. Her uncompromising belief in the ability of art and design to improve people’s lives makes her just the sort of person we need consulting on the future of our public spaces. It was a pleasure to give her a quasi-professional site that hopefully embodies the spirit of collaboration, personal creativity and expression we all admire. You can read more of her own thoughts on the design in her entry, Websites and the Science of Happiness. I’ll leave you with the opening line of that entry; it’s humbling to be though of in this way:

“The designers of this website are happiness merchants.”

Thanks Denna.

A Site for Sore Eyes: OmniTI

Jon 陳 — Thu, 24 Apr 2008 13:09:07 GMT

You may have seen the recent case study featuring the evolution of OmniTI’s brand mark. Work on their new web site started soon after that was finished. This is what we did:

OmniTI’s CTO Chris Shiflett and I worked closely on every aspect of the vision, brand message, information architecture, copy writing and content. For me it was the best kind of arrangement resulting in a piece of work I’m especially pleased with. Along the way we developed the kind of relationship that I’ve come to treasure, making me feel like I work in a collaborative industry, rather than a service one.

Metaphors for the invisible

Discussions around the new site made me think of two interesting design problems. Scalability and performance, security, development and infrastructure are invisible arts. Historically, companies have fallen back on metaphors to communicate what they do visually: Faux boxes of imaginary software; stock photography of happy people at computers; they never worked for me. From my perspective, OmniTI is one of the finest development companies in the world. They’ve written some of the seminal technical books in our industry. They work for some of the most heavily trafficked sites on the planet like Digg, Friendster, National Geographic and Facebook. Their contributions to open source are legendary, with their utilities being used by Yahoo!, amongst many others. When tackling email on a massive scale they built the world’s fastest mail transfer agent. To reduce what they are capable of to awkward metaphors seemed disingenuous. I wanted to do something different.

Another significant problem was how to convey personality. People buy from people, especially in a service industry. The relationships we develop are priceless. Many developers in our business—especially those who attend conferences like OSCON where they often speak—are already aware of the people at OmniTI, but they themsevles don’t tend to shout about what they do. Part of the reason for this is the culture of the company itself: Relaxed and down-to-earth but jam packed full of some of the most talented people anyone could hope to work with. Excellence has become commonplace, making celebrating it feel almost un-natural. It just happens by default. So, the web site needed to show some leg, reveal their personality as well as their work, without forcing patterns of publishing on them that would not be maintained.

These problems made the job interesting. I wanted to accomplish three specific goals:

Make OmniTI accessible. Personalise the brand, reveal the company character, and the people within it.
Communicate the scale, quality and depth of what they do to technical and non-technical people.
Make the whole experience of researching and contacting them simple, easy and useful.

Collaboration

To try and accomplish the goals we took a novel approach to design. It might seem ad-hoc, but it was deliberately organic; we let everything develop collaboratively, at almost the same time: From setting the vision to requirements gathering, persona development and task analysis, through to information architecture and copy writing. It sounds insane, but with a condensed time-line and a lot of intellectualising to be done, it worked in a way that only a small agile team that knows each other well can do.

Along the way we went through four related iterations of style. Each reflected a development stage in the multi-track process we embarked on. The staff started writing a personal note for their own profiles. Some chose to stay with the professional photos, others supplied their own. All of it real though and unfiltered by marketing hype. Read the personal note of Rob Speed to get a glimpse of what I mean. The iterations kept getting better. In fact, everything kept getting better. Nothing is ever perfect, but a feeling of constant iterative improvement is a joy in itself. These are some of the highlights from my point of view:

Theme, copy writing & content

The theme is deliberately textual. OmniTI is a company that manipulates data in ways that are so esoteric that sometimes I had a hard time conceptualising the scale, nevermind the method. Text is the prevalent form of web data. It felt right to focus on it.

Early on I decided to drop almost all decorative images and anything that was not content from the design. The data, the typography, they became the decoration. That went hand-in-hand with the decision to let OmniTI’s people, work and clients tell the company story. We decided to have a dual section in the planet for official company news and relevant posts from the staff’s own personal blogs. For the rest of the site, any copy that didn’t reflect the spirit of the company was avoided, and that which was left would be factual, not hyperbolic. Any claims OmniTI have made are under-estimates, and therefore all the more exceptional.

Tiered detail

I wanted to find a way of communicating the scope of their ability in a simple way. The audience diversity made this problematic. When developing personas to identify who we wanted to reach, two stood out: The technician and the executive. Both have very different requirements from the site. Both required detail in different areas. The first answer to this was for the home page. To grab people’s attention, I had the idea to display the actual output of their work as data in real time. There were technical and disclosure issues. We settled (for now) on showing some meta-level data around the number of pages and people that OmniTI’s clients serve:

This will evolve over time and also be stored in an archive for future reference. Even more importantly, it is no mere boast. The figures are independently gathered and conservatively rounded down.

The next solution was to somehow ease all of the audience into the site, whether they were technical or not. The narrative pattern we developed I call tiered detail. At the first level, like the index or any of the main navigation landing pages, chunks of different data are labeled with headers that encourage page skimming to find interesting topics. Copy is short, terse, accurate. The second level, like a personal profile, is more detailed and specific but has contextual links to related second level topics. The copy has links to third level pages where the focus narrows further to provide the kind of detail some people might want. These third level areas can be on site or off site—we didn’t distinguish between the two. All detail is useful when you want it.

URLs

Both Chris and I love beautiful, clean URLs. So when he came up with the idea of using verbs rather than nouns in the information architecture we we quickly agreed to make it so. The outcome of a fair degree of debate and wrangling is the structure you see today. The about page is http://omniti.com/is, the work page is http://omniti.com/does, etc. Deeper pages have a URL that forms a sentence, such as:

http://omniti.com/does/security

All trailing slashes have been removed making for highly legible and beautiful URLs in any context. More traditional URLs are redirected to the verb, so people can still type http://omniti.com/about and reach the about page. If you wish to know more, read Chris’s post, URLs can be beautiful.

Typography & palette

Evolving an interface from a brand, the type choices of which I had nothing to do with, is always interesting. Trying to find compliments is fascinating, even more so in a design that relies heavily on type composition and treatment for decoration. I’ll pretty much let the typography speak for itself .

Highlights for me are the raised initial used in headlines which I always see as an icon, my favourite Baskerville italic ampersand used in the byline on the home page, and other subtle treatments like the semantics of the page titles or contextual links. I used a traditional scale, body copy is set in Georgia by Matthew Carter with the headlines set in a Lucida stack.

The palette is included in this section because the typography developed alongside it, and they are irrevocably linked. Or, I should say, they are tonally co-dependent. Although the palette is autumnal, it is a counterpoint to the season, and you may see us have some fun with it over time, but the effect will persist: Type highlighted by luminosity, regardless of palette.

Layout, functionality & accessible Ajax

The layout is elastic in every respect to a strict baseline grid. This served the narrative theme, splitting the content in to equal chunks higher in the architecture for skimming, resolving to conventional asymmetric columns deeper in.

Jon Gibbins did a sterling job implementing the JavaScript effects on the site. He chose jQuery and added some flavour of his own to make everything accessible with or without JavaScript turned on. That extends to the Google Map on the contact page which fills the expanding container as font size is adjusted. Jon also audited the site for accessibility generally, applying his uniquely pedantic but practical approach to support a wide range of disabilities, especially where the JavaScript is concerned. You can read more in his post, Accessible Ajax: OmniTI.

All other functionality was handled by OmniTI, with Theo himself building an unbelievably quick search engine with Perl in about an hour, and Chris building out the CMS equally as fast it seemed.

Experience & narrative

As designers, we wear a multitude of hats. In the final analysis I think we’re experience designers more than anything else. In many cases we use design to tell stories, or help a story unfold. We create spaces in which enacted or emergent narratives exist and the OmniTI site is no different. Like all real tales though, there’s still much to be told. Hopefully they have a good starting point; an authentic opening chapter where the history of the last ten years can sit comfortably with the next ten.

For my part, I hope the story is a joy to read. I hope the design is unobtrusive and becomes an ambient signifier that adds a little texture to the content. It is a design I would have liked to implement for Grow itself, so a lot of my own predilections went into it. I was lucky: The great relationship that we have, and the creativity of OmniTI, allowed my ideas some breathing space. We took a journey that resulted in a site that is re-markedly different to other technical companies. Some might view that as dangerous. I think the opposite is true. To me it was a great project to do. Hopefully you’ll find it interesting enough to enjoy. If that’s the case, keep an eye on it; there may be some more subtle changes to come.

Naked in Tahiti (where’s Ms CSS?)

Jon 陳 — Wed, 9 Apr 2008 16:55:19 GMT

Naked again. Why, oh why every year do I feel the urge to cast off the perfidity of style and expose my structure to the world? A question never to be answered, but merely enjoyed on CSS naked day!

Love my semanticness (sp?). Love my form, my structure, my HTML, your browser (which is actually styling the HTML right now,) and markup in general raw and unabridged.

Hey, on an unrelated note, did I tell you about that time in The Seychelles when I was naked and kinda playing guitar with my…

Oi! You have a filthy mind. Enjoy the day folks, long may the tradition continue!