This is the archive of jontangerine.com version one, made in 2006, launched in 2007, and active until 2012. It’s archived to preserve the original design and its content that was referenced in multiple posts, books and galleries. There’s a holding page before the new site arrives.

Entries tagged with ‘copywriting’

Display:

  1. An Ode to Old-style Numerals

    Most of my bread-and-butter fonts are broken. So is my keyboard. I can still use them but they’re broken because they don’t work as they should, or as I want them to.

    Between the two of them they’re breaking my user interface and interfering with my ability to communicate. Here’s why:

    Modern (lining), old-style & small caps numerals

    All of the core Web fonts apart from Georgia have modern numerals. They are all equal width, and the same height as capital letters. They are great for tabular data because they line up vertically in tables which is probably their raison d’etre. They work perfectly with capitals, too. After that they start to fail. Miserably.

    For my purposes, I’ve use two of the core Web fonts—both excellent in their own way—that were designed by Matthew Carter as examples.

    These are the modern numerals of Verdana:

    Verdana 123456789

    Old-style numerals have variable widths, just like regular letters. The numbers are mostly the same height as the lowercase letters with descenders and ascenders that fall and rise from that beat. They are perfect for use within text, or anywhere outside of the two examples used for modern numerals. They are beautiful, harmonious, easier to read and I want to use them, all the time.

    This is Georgia:

    Georgia 1234567

    Small caps numerals are equally beautiful and, as the name suggests, relate to the size of the small capital. Also, small caps are not just shrunken uppercase letters, and may not fit to the lowercase x-height so numerals can be drawn separately.

    There’s more detailed comparisons and great examples in John D Berry’s Creative Pro article.

    The only problem I’ve come across with old-style numbers is telling the difference between a zero and a letter "o". This hit me when creating the business cards for Grow. My answer was to commit sacrilege and draw an asymmetric line through the zero in the knowledge that letterpress techniques would deboss the faux small caps heavily almost to the weight of a proper small caps font, and the line would clearly differentiate the zero from the "o".

    Every typeface with upper and lowercase letters should have modern and old-face numerals.

    The ClearType fonts include lining and old-style numerals by default.

    They are both needed. However, I mostly type two kinds of text: prose and code. If you ignore the code for a second, I would guess that almost all of the people using an alphabet where old-style is useful are typing prose more often than not. In prose, depending on the type (technical, academic, business etc) there are rules about the use of numbers. Thirty dollars will get you access to chapter 13 of The Chicago Manual of Style or you can also see the Connecticut Community College guide to numbers and lists, and Jack Lynch’s Guide to Grammar and Style.

    Whatever the house style we lean towards, old-style numerals should be available to use. Typographers and designers, please include them in every possible face. I realise that would be pointless unless everyone could use them easily with common software. Therefore, operating system and user interface designers, please give us access to them via a keystroke or two. There’s no easy way to access them right now, even if they exist (unless you edit the typeface itself to swap lining for old-style permanently.) This I can say with complete confidence:

    My keyboard is busted

    The number row on this shiny new Mac keyboard lists all modern numbers with symbols above them, just like yours.

    Mac number keys

    It’s busted in two ways:

    1. If a typeface has modern and old-style numerals I can’t type them both easily. It should be as easy as typing in uppercase or lowercase, which is exactly what it is.
    2. When writing code I use certain symbols a lot and therefore use shift a lot. In fact, with Mac keyboard the most common symbol I type after angle brackets is the hash (or pound in the States): “#”. This is accessed via pressing Alt+3. There is no hint on the key itself. When I switched to a Mac for the first time, I once spent a good amount of time on a train cursing before working it out.

    An answer

    I freely confess I’m opening a can of worms here, and could go into great detail about the various use-cases and modes our keyboards should have. However, that will be for another day. For now I’m offering this simple way operating systems can enable everyone to use old-style numbers without re-mapping the keys:

    1. Give my keyboard access to old-style numerals by default using the existing keystrokes. If they are not available, default to whatever numerals are available.
    2. If modern or lining numbers are also available, give me access to them in the same way that I have access to other capitals: via shift.
    3. Provide access to symbols with a different key. You decide, I don’t mind, but Alt seems obvious. Seriously, who uses ^ on a daily basis? The even less-used symbols should be moved to a double or triple action key configuration.

    If this is all too much of an ask, then at least allow everyone to access old-style numerals with an obvious set of keystrokes that won’t interupt writing flow too much.

    Does this solution make sense to anyone else? There may be problems I haven’t foreseen with the technical or interface aspects, and there’s much I’d like to add about code mode. However, right now I’d just love easy access to old-style numerals, both for the sake of my eyes when I’m reading and my heart when I’m writing.

    Share

  2. Web Design Craft & Boxwood Combs

    Around 10,000 years ago in the Stone Age human beings were using boxwood combs. They may have predated that, but that’s what the physical evidence shows. To put that in context, we’ve been using boxwood combs about 700 times longer than we’ve been using the Web, who’s protocols were put into the public domain on 30th April, 1993 by CERN. Boxwood has special properties. It is strong yet soft enough to be shaped and generates no static. A boxwood comb is perfect for purpose.

    Tsuge gushi or boxwood comb

    Boxwood comb via japanesetradition.net

    Sometime between the Stone Age and now, perhaps around 400 years ago, the Japanese turned Boxwood Combs (tsuge gushi) into something extraordinary. They discovered that Satsuma boxwood (Satsuma-tsuge) was the best quality for a comb. They dipped them in camellia oil to preserve the shine for comb and hair. People sat for 12 hours straight carving a single comb. They began to carve combs of incredible delicacy and precision that to this day, makes Japanese Boxwood combs the finest in the world. They became true craftsmen and women and were immortalised by artists like Hiroshige.

    That still continues today. Jusan-Ya in Tokyo’s old quarter has been there for almost 300 years where Keiichi Takeuchi, a 15th-generation craftsman, still makes boxwood combs by hand.

    The tradition and craft is important, valuable and precious, but the comb in itself is not the final output of this dedication and history. Craftsmen and women like Keiichi Takeuchi don’t create beautiful combs or just help women have beautiful hair. Through their craft they help to make life beautiful, both for themselves and for their patrons. They do this by creating something that responds to people, something perfect for purpose. That’s what all crafts people do, no matter what their profession, trade or art.

    In my eyes, Web design is almost indistinguishable from experience design. In the same way that boxwood comb makers create an experience, so do we. Web designers are all experience designers, or perhaps more accurately we are all narrative designers. A narrative designer creates an interface with flow. If you imagine user tasks as stories or narratives, whether the content is user generated or authored by copy writers, the concept of narrative design starts to make sense.

    The mistake that people make is to see Web design as the evolution of print design. Jeffery Zeldman broke it down rather well recently. Others have also commented on this and related topics. This mistake is best emphasised in Web design galleries. It seems to me that even fellow professionals sometimes forget what they are rating or judging and fall in to the trap of looking at the visual aesthetic alone. Sometimes the comments are disappointingly shallow. I wonder truly how many of us can reach past our predilections for pretty interfaces and fashion, and move into the realm of uplifting experiences that require much more than a glance at a screenshot to judge. The irony is that our discipline is very much about visual design, but it is not just about style. In my view, it should be about building carefully crafted experiences based on a thoughtful empathy with the audience and their goals.

    There are a lot of craftspeople in narrow disciplines. The issue is not a lack of dedication to craft, but the breadth of narrow disciplines that make up Web design craftsmanship. For example, apart from the technical disciplines of CSS, HTML and the vagaries of cross platform and agent behaviour, there are a vast number of others that overlap, merge and relate. To name a few, there are graphic design disciplines such as typography, illustration and layout. There are user centred design disciplines like accessibility, task analysis, persona building, information architecture and wireframing. There are marketing disciplines like copy writing and brand positioning. Then, if we want to truly create excellent user experiences designers need to understand or work with craftspeople who have depth in application optimisation, scalability, security and adaptability. The list could go on and on.

    I think a good Web designer has an understanding of all of these things, has mastered the technical, knows the non-technical and is thereby freed to be concerned with narrative: How users experience an interface and create their own stories based on the information presented to them, or by creating information themselves. Narrative design is what we do.

    In his fascinating article on Game Design as Narrative Architecture, Henry Jenkins of MIT said that, “a story is less a temporal structure than a body of information” which seemed eerily familiar to my way of thinking. He went on to make two relevant observations. The first on enacted narratives that could be compared to brochure sites that we create:

    “…the story itself may be structured around the character’s movement through space and the features of the environment may retard or accelerate that plot trajectory.”

    The second on emergent narratives that could be compared to social sites:

    “…spaces are designed to be rich with narrative potential, enabling the story-constructing activity of players.”

    Web designers have to consider these kinds of narratives on a daily basis. The skill is in how we push, pull and merge all of our technical and non-technical knowledge together. In order for Web designers to be craftspeople we have to be technically rigorous but also creative and organised, imagining and implementing complex narratives with everything in mind. In that sense, Web design is a much more complex discipline than making a boxwood comb but both aspire to the same ambition of creating something that is perfect for purpose.

    It took 10,000 years for human beings to reach the boxwood summit, but I think that many Web designers are there already in their approach. For my part, I’ll still be reaching for the lofty heights of the polymath and on that note I’d better get my finger out and do some work.

    Share

  3. Copywriting, Experience Design, Daleks & Julio

    Feedburner heading: My feeds are with Julio down by the school yard

    Reading the welcome message from Feedburner made me laugh. Logging in was a treat. Can you name the song and artist? Googling is cheating by the way! How I knew it automatically, I will never know. It was published before I was born.

    Feedburner just endeared themselves to me by making my experience better. Even if my huge subscriber count goes from six to one, then back to six again the following day, I’ll be predisposed to cut them a little more slack, just for making me smile.

    Flickr resurrected good copywriting with the multiligual and colloquial welcome messages. After coming out of beta Flickr also loves me (and you). Ahoy me hearties!

    Flickr: Ahoy jontangerine welcome message

    Dopplr has taken forth the torch and does its own great things with copy. Simple but effective:

    Dopplr copy: Welcome, Jon. Your home city is Bristol. You can invite people to Dopplr to see your trips or look for travellers you already know.

    Great copywriting. Or, more accurately, great copywriting as part of great experience design.

    Copywriting as Part of the Product

    Copywriting is usually associated with advertising: The selling or promoting of a particular product, service, concept or person. Hold the dogma, though. The Web hasn’t made that untrue, but it has extended the definition slightly. Copywriting is integral to user experience. It’s part of the contract between the user and the site. The copy is part of the service, not just a means to sell the service.

    Darlek says: Log in sux sess full.

    Dalek image © Owen BillCliffe via Flickr.

    Once upon a time in a land too close for comfort, developers often did copywriting. They were often great developers but more often terrible copywriters. Everything looked like DOS or Terminal messages: Dry, terse and with the personality of a Dalek. Not any more, though. As designers, we should have an active hand in it, and if the project allows, work with a good copywriter. At Grow, we regularly get pedantic over language because the copy will effect the way we think and see. If the copywriter can move away from the trite self–promotion of corporate sites, or the stale techno–shorthand of developers, we’ll hopefully all think good thoughts and have our eyes delighted by what we see.

    Experience Design and Narratives

    Experiences, narratives, stories; simplistically, one and the same. Denna Jones is Designer in Residence at Central St Martin’s College of Art, and consultant for architects. When she introduced me to the phrase, “design narrative” over a Peking duck salad at Severn Shed in Bristol, we shared a smile together, mostly due to the awkwardness of the term. However, narratives are exactly what social websites are all about. We share, create and experience them through the medium of the site and that’s exactly what copywriting helps to encourage.

    The copy adds to the narrative just as much as the typography and graphic elements do. In the same way, the copy can also add to the personality of the brand. Brand personality is a carefully cultured message. Brands have characters, and as I discussed in a previous article, the house style is integral to it. The question is whether the site or brand is a Mary or a maverick. As Mark Bernstein said in his A List Apart article on narrative:

    The point is that the reader’s journey through our site is a narrative experience. Our job is to make the narrative satisfying.

    One way of looking at it, is to see the narrative we design as just one amongst many. Users will create stories and experiences for themselves. The context may also be created by the audience, too, and then reinterpreted by others as part of their own experience of the site. That leaves the interface, the framework or stage upon which the narratives are played out. That’s where I love to work. Web designer? No. Art director? Maybe. Stage hand? Definitely! On that note I think I’ll go back to watching my feed play with Julio in the school yard. Paul Simon has a lot to answer for.

    Share