All entries from 2007

Display:

Dates

  1. 2007
  2. 2008
  3. 2009
  4. 2010
  5. 2011
  6. 2012
  1. Jun
  2. Jul
  3. Aug
  4. Sep
  5. Oct
  6. Nov
  7. Dec
  1. Thinking my way in to 2008

    On the 15th of November, 2005 in Washington DC, the Dalai Lama said:

    “I believe the twenty-first century can become the most important century of human history. I think a new reality is emerging. Whether this view is realistic or not, there is no harm in making an effort.”

    Thanks to Kim Stanley Robinson for introducing me to those words in his book, Sixty Days and Counting.

    As we move into the eighth year of the new century, that’s what I’ll be trying to do in my own way with some small projects that I’d like to think can contribute. They are not the paradigm shift the Dalai Lama refers to, but you’re welcome to join me anyway.

    Earlier today I took a break from the consumer carnage of the sales with Starbuck (unfortunately not the one from Battlestar Galatica). I sipped my chai tea latte, smoked a coconut ciggi and wondered what 2008 might bring. Eight is a lucky number for Chinese folks. When my father first heard I’d moved to house number 88, he told me to get a lottery ticket straight away. I didn’t win but it was fun to engage with the superstition for a moment. Maybe 2008 will be a lucky year for humanity but my first thought wasn’t that, it was wondering if it will be a good year, period.

    I was hoping I might be able to do everything I want to in the coming months, and not kill the planet while I’m about it. A thought struck me though: The tension between “us” and “I” is always there; between what we’d like to do for each other and what we feel we have to do for ourselves and our loved ones. As the earth moves towards rapid climate change with 100 million new humans are added to the tribe every year and the whisper of science is still drowned by the cacophony of war the pressures of our own lives loom larger still. The need to buy the right home, to educate our children, to secure our personal futures all make us compete. Having said that, with a little perspective I try and hold on to the common, human aspirations we all share, whether they are realistic or not. After all, there’s no harm making an effort, is there?

    If I was an overly-cool, cynical man perhaps I’d sarcastically say “utopia for the win!” Perhaps that persona and the altruist that I’d like to think I’d be without the other pressures can compromise though. So, instead I’ll just say: Thanks for taking the journey with me, and all the best to you and yours for 2008, no matter how or where your efforts lie!

    Share

  2. What Future for Web Typography & Screen Fonts?

    The browser wars of yesteryear were a frustrating period for anyone working on the Web. We’ve come a long way since then. Following the vanguard of Opera, Safari and Firefox, IE8 will be the first Microsoft browser to pass the ACID2 test when it’s released in 2008. Congratulations to the IE team! 2008 may well be a seminal year for Web standards.

    However, the same might not be said for Web fonts. While we have commonly supported standards with which to author information for the Web, we still only have ten core Web fonts to present it, with six most commonly used. There are hundreds if not thousands of outstanding typefaces. A few are shipped by Microsoft, Apple and Adobe with their software, allowing us to use them with font stacks. That leaves a multitude of beautiful, important typefaces that can only be used as text in images or with kludges like sIFR. The current situation is like the browser wars, or perhaps, the type wars.

    In a world where the Web is the platform, having ten core Web fonts makes no sense. It stifles innovation in the same way that poor Web standards support used to.

    The core Web fonts, then & now

    The Microsoft core Web fonts project was started in 1996 and discontinued in 2002. To put that in context, 1996 was the same year that Internet Explorer 3 was released with a CSS gallery to test IE3’s first tentative implementation of W3C CSS.

    Today, the core Web fonts remain in stasis. Apple have renewed the license with Microsoft this year but there are no plans to expand either the typefaces or the font variants. Back in 2006, Andrei Herasimchuk made an excellent proposal closely followed by Jeff Croft’s own worthy suggestion, both of which have unfortunately not come to fruition.

    Other Web fonts with @font-face

    More recently, Web fonts and the @font-face CSS property have come into focus. Håkon Wium Lie’s article on A List Apart started some valuable discussions. Ascender also recently announced new licensing for Microsoft faces which could apply to downloads, and the observations of people like Richard Rutter give us all hope for the future.

    However, as people have already mentioned, @font-face support is not a reality yet and there are questions over support across platforms that have not been addressed. Think mobile phones for example. End-user license agreements (EULAs) will need careful consideration and the methods of protecting type designers’ and foundries’ rights are still a matter for debate.

    Universal Web Type

    If the Web is the platform, and browsers are the gateways to it, then we don’t just need standards for layout and object rendering, but also a standard type library that is universally available to all, with a mechanism to allow new faces to be added over time.

    This is not an alternative to @font-face—there will always be a place for very specialist typefaces for specific uses—but it is a compliment to it.

    I would like to invite you to contribute how you think this might work. This is how I see it:

    1. Organisation: We should form a grass roots organisation to provide universal Web type. It could be part of, or complimentary to the Web Standards Project and the W3C. It would reach out to, and include anyone who has a stake in implementing, creating or using Web fonts.
    2. Structure: The organisation should be co-operative and democratic, with membership open to all. Intellectual copyright and assets would be jointly held by the group on behalf of everyone.
    3. Purpose: The group would strive to find common ground between all stakeholders to research or support common standards, find funding to create a font library with complete typefaces that would be freely distributed.

    The group could be funded by a mixture of micro-finance, donations of time and money, public funding and sponsorship. It would also affirm the right of type designers to proper remuneration for their work, and foster recognition of type’s importance to the Web.

    I’m deliberately publishing this idea to elicit your feedback and comments. The way forward is not clear, and I do not claim to have the answers, but I believe that between all the interested parties—whether individuals, companies or organisations—we have the ability to give everyone a better typographic experience.

    Share

  3. Opera sues Microsoft over Web standards in the EU Court

    Opera and Operati, I love you! There’s a crate of cider at my place if you want to swing by and pick it up. Yesterday, Opera filed an anti-trust complaint in the EU court against Microsoft:

    First, it requests the Commission to obligate Microsoft to unbundle Internet Explorer from Windows and/or carry alternative browsers pre-installed on the desktop. Second, it asks the European Commission to require Microsoft to follow fundamental and open Web standards accepted by the Web-authoring communities.

    Read the Opera press release and treat yourself to a smile. They rely in part on the recent decision taken by the court against Microsoft over bundling MediaPlayer with Windows. Opera accuses Microsoft of stifling innovation by embedding a browser than does not support Web standards as it should. All true. How many compromises, hacks and tweaks have we made over the years for Billy Gate’s browser?

    Of course, if this suit was successful Opera would have a better opportunity to grab themselves some market share. Good on ’em. If Opera had a stripped down version of the browser, but with tools akin to Firebug or Chris Pederick’s Web developer toolbar it would be my primary browser, right now.

    Co-incidentally, I’m just about to pay Microsoft for the priviledge of a new copy of WinXP, all because I can’t run multiple copies of IE for testing on Vista easily. Imagine a world where we could run multiple versions of IE without clever hacks. A world where IE passed the Acid2 Test (like Opera) and conditional comments and IE specific style-sheets became a relic of history. I’m almost salivating at the thought.

    There’s a long way to go before that happens. I’d like to think that Billy’s browser would of made it to the point of goodness regardless but, if Opera’s action helps it along, so much the better. It’s just a shame these kinds of actions seem necessary. Then again, Kim Stanley Robinson’s idea of revolutions by law in Pacific Edge always seemed much more preferable than any other method.

    Good luck to them!

    Share

  4. 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

  5. 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

  6. The Awakening by 4Hero feat. Ursula Rucker

    Great production (as always) characterises The Awakening by 4hero. It features acclaimed poet, Ursula Rucker who wraps her raw insights into smoothly powerful lyrics that mimic a conversation between mother and daughter. Thankfully for me, 4Hero continue the poetic, almost orchestral sound created on other tracks such as Twelve Tribes from the Creating Patterns album — the beats are still warm, driven and complex but the sound is more organic, even if the label says, “electronic”.

    The animation is by Judd Brett. He does a superb job of syncopating the video with the aesthetic of jontangerine.com, and throws in a few bits of caption typography too. Thanks, Judd!

    The Awakening is taken from the recent Album Play With The Changes which you can get in MP3 format via Tune Tribe or the proverbial iTunes.

    Share

  7. Days like these

    Cartoon of a man carrying a ridiculously large box.

    Ever have days like these? (It’s the multi-tasking that does it. What you don’t see is the cats fighting in the box.)

    Sometimes, I think we’re really not all that efficient, no matter how we’ve been conditioned. After all, real efficiency would be working 4 hours a day to feed, cloth and secure ourselves, and then spending the rest of the day laughing in the sun with the kids. Instead, we work 8, 9 or 10 hours a day, and then buy an iPhone.

    Share

  8. Complex Type: CSS Fix, ClearType Miss

    When an elusive penny drops, it’s always a good moment. Earlier today, I was thinking about the complex type rendering problem of a few days back. Skim that post, before you carry on and things will make much more sense.

    Suddenly, I realised what the solution was, and fixed the IE7 CSS problem in 5 minutes: After giving every element some padding and an invisible border—effectively forcing IE to recognise the element dimensions—it now renders the glyphs properly and doesn’t cut off loops or terminals that are outside the conventional em. Tinkering afterwards took another two hours but now the homepage has a new type experiment type folly for the masthead!

    So that’s the CSS sorted. I bumped into a IE7 problem with Eric Meyer’s unitless line heights along the way too, but that needs more research.

    Unfortunately, the ClearType anti-aliasing problem is out of my control. We simply can’t tell Windows to not use it, or to do it better. That’s up to users themselves, or Microsoft. So, for anyone looking at this site using Vista with ClearType enabled, here’s what you're missing:

    Safari screenshot

    Fig 1. OS X/Safari 2 screenshot of the masthead.

    For those of you lucky enough to be viewing using a Mac, or Safari on Windows, here’s what you're not missing:

    IE7 screenshot

    Fig 2. Parallels/Vista/IE7 screenshot of the masthead.

    The difference is stark. Even Windows standard rendering smooths large-sized text better than this. Update: See for yourself:

    Screenshot in IE7 using standard font rendering

    Fig 3. Parallels/Vista/IE7 with ClearType switched for standard rendering.

    ClearType seems to get worse as the font size increases. It sounds impossible that ClearType could be so bad, but my copy of Vista is a virgin Vista Ultimate, running on Parallels. No settings have been changed at all, and the only software installed apart from standard applications are browsers and anti-virus.

    So, there we have it, I predicted my own pedantry wouldn’t allow me to leave it be. With character predilections, as with rendering engines, knowing is only half the battle.

    Let me know what you think of the masthead type. You might even see it completely differently to me with a similar configuration. I’d be very interested in seeing a screenshot. I've not tested it in IE6, so bear with me while I get around to that. Is it worth keeping, even with the absence of decent smoothing in IE7/Vista?

    Share

  9. The iPhone arrives in the UK

    Apple iPhone

    Apple’s hype machine is in full swing with the launch of the iPhone at 18:02 today. That’s two minutes past six this evening in long hand. Catching a brief interview on BBC 5Live just now in the middle of a late lunch I suddenly realised what a load of cobblers this is.

    First of all, the marketing speak was flowing like a 12” with a scratch in it. “Revolutionary user interface”, “iPod, phone and internet all in one”, “exceptional value for a revolutionary product”, “revolutionary internet,” then repeat, and repeat, and repeat.

    Next the reality: Only O2 have the iPhone. Minimum contract 18 months, minimum tariff £35 plus the £269 for the handset. The marketeers would have us believe it’s great value for money. Maybe so. I had the chance to play with Chris’s iPhone earlier this year when he was over here. I liked it. The interface was fun. No quarrel with that bit of the revolution. However, the specs are more complex. The camera is an also–ran. Two MegaPixels, no flash, no great shakes. As a phone it’s just big. The visual voice mail is cool, but the revolutionary network integration seems to cause problems. One example is the lack of automatic roaming for AT&T customers in the States travelling elsewhere. When Chris landed here, he couldn’t get a signal. Even the venerable Stephen Fry had to fight for the right to party roam. Perhaps that will change now with O2 primed and ready. However, regardless of anything else, the sweet spot is the browser and the UI. Safari firing on all cylinders and the pinch, slide and tap of the interface are a peach.

    Wait a second, though.

    As much as I like the interface in a 10 minute playing slot, I didn’t like the housing. “Traitor!” I hear you shout. I know, but although it’s solid, it’s also dangerously pretty. The perfect smooth–cornered, super–shiny device to fly out of my hand onto the pavement/floor/other dink–inducing surface.

    Then there’s Safari. I love that browser. It does lovely things to my body text. However, it’s nothing without the bandwidth to feed it. WiFi at home will make it sing and O2 throw in access to 7,500 Cloud WiFi hotspots as part of the deal. Outside of that we start to struggle. In a country that’s famous for over-priced and slow WiFi (as anyone who’s stayed at a Hotel over here can testify,) poor Safari will gasp for bandwidth unless you have deep pockets. The in–between places where I would get real benefit from decent Web access, like walking down the street needing Google Maps or on a train between the stations, will be frustration zones.

    I sound like a whinging pom, even to myself, but my hype aversion angel is looking out for me this time I think. I’m looking for a new phone. Good Web access on the road from a mobile network would be a valuable bonus. So let’s stop a second and look at an alternative, the 3SkypePhone:

    3SkypePhone

    Its name abuses camel case even more than the iPhone. It costs less. Free with a £12 p/month contract. £50 pay as you go, with a minimum top up of £10 per month, of which you can throw £5 at unlimited Web access on a 3G network. With either option you get unlimited Skype to Skype calls and IM thrown in for good measure. No SkypeOut or SkypeIn (although that may be coming) but still, for that price who can argue? No revolutionary interface, no iPod but a similar camera to the iPhone. All in all a reasonable deal and a phone that can fly out of my hand and I won’t have to grapple with the insurers or cry at the cashpoint to replace.

    I’ll probably end up with an iPhone in my usual late-adopter way. Not because of the marketing hype or because it’s trendy with the cool kids, though. Probably because open WiFi and good connectivity start to become available in places where I need it. The price will come down, too. Probably just after Christmas. After all, the main problems with the iPhone are actually nothing to do with the device itself, but everything to do with monopolistic network pricing and poor network speeds.

    In France, where the excellent anti–trust laws prohibit one company owning retail access to the device, they will probably sell them contract–free, but make sure the price is so prohibitive that it makes no sense to buy one. Already, according to the BBC, Apple and O2 have stated that unlocking the iPhone to use on any network will void the warranty. What a hardware warranty has to do with network locking, I’ll leave you to figure out.

    So I'll be biding my time and seeing how things develop. I'd love to grab one for real world site testing, but an 18 month contract and a heap of cash seem a high price to pay to see if my suspicions are correct. If you are lucky enough to dive right in without a care, let me know how you find it. Did you feel the revolution?

    Share

  10. Rendering Complex Type—Who’s got the Love?

    The home page for this site was always temporary. After losing a year in distractions, work and prevarication I finally caved and whipped it together in a day so I could launch.

    Earlier this week I needed a timeout between sprints of development on our latest project, so I started to play with an idea for the masthead: A celebration of Web font letterforms with a complex <h1>.

    17/11/07: Updated in Complex Type: CSS Fix, ClearType Miss.

    This is where I paused just before I started testing in other browsers:

    Fig 1: Screenshot from Firefox 2 / Mac OS X 10.4.10.

    Jontangerine rendered with complex CSS in Firefox2

    I thought it was fun. I hadn’t yet locked all the distances to the pixel grid, and there was still more to do, but it seemed pretty close in Safari 2 as well.

    Fig 2: Safari 2 / Mac OS X.

    Jontangerine rendered with complex CSS in Safari 2

    Opera 9 also had it right. It also happens to be my favourite browser that I don’t use. If it had a stripped–down version with Chris Pederick’s Web Developer Toolbar you’d have to pay me not to set it as default, it’s core really is that good.

    Fig 3: Opera 9 / Mac OS X. Opera 9 is the only browser in the group to pass the Acid2 test.

    Jontangerine rendered with complex CSS in Opera 9

    Then I fired up IE7 on Vista, running it in Parallels and viewing it on an Apple Cinema Screen. Big Mistake.

    Fig 4: IE7 / Windows Vista Ultimate.

    Jontangerine rendered with complex CSS in IE7

    I can’t even begin to analyse the multiple problems with the rendering of my (albeit complex) type sample in IE7. From Vista’s ClearType jaggies to IE7’s CSS issues it’s simply carnage and a veritable type–crime; a smörgåsbord of bad rendering served with a mallet and a scowl.

    OK, I confess, I despaired for a second, hence the wry rant. I guess I’m asking too much of the browser. Maybe. However, surely we should step out of the cosy confines of tried and trusted methods, and let the creative beastie loose in the privacy of our own websites? Hell, under the hood this is just POSH with a few superfluous <span>s thrown in and a bit of CSS.

    Thinking With Type by Ellen Lupton

    In the very first line of the introduction to her fantastic book, Thinking With Type, Ellen Lupton writes:

    The organisation of letters on a blank page—or screen—are the designer’s most basic challenge.

    Perhaps that should apply to browsers too?

    Some of you may have more insight into these problems, and approach them as an intellectual challenge. I’d be interested in seeing any evidence or suggestions you have.

    In a previous article on core Web font rendering I’ve delved into the platform and agent differences, but this is more an emotional reaction. My heart says, “bollocks!” I know I’ll be drawn back to trying to find a way around the problems though, much in the same way as I was with the current logotype on the homepage. Until then, I leave you with the test page so you can hurt yourself with IE7 too, should you have the urge.

    Share

  11. Happy Birthday Son

    Today my eldest son is four years old. As he disappeared out of the door to nursery just now, he ran back to me as he does every day when I’m around to see him off, for a kiss and cuddle.

    Often times, in the middle of playing with Lego or, like this morning, watching him figure out a Transformer, I’ll be drawn into moments of quiet happiness. A spiritual kind of clarity where the presence of him close to me washes away all else. Of course, the next minute, I’m being assaulted by a laughing maelstrom of mischief, complete with our own language like “meatsies” for feet, and “shmambling” for climbing (usually on me.)

    As his great–grandmother said not so long ago, kindness is the most precious of human characteristics. He has it in bags. No matter what else I do in this life, I doubt that anything could make me feel more proud or at peace than him, or his little brother. I’m the audience and stage hand to them, and nothing makes me more happy. As Kahil Gilbran said in The Prophet:

    “Your children are not your children.
    They are the sons and daughters of Life’s longing for itself.
    They come through you, but not from you,
    And though they are with you yet they belong not to you.

    You may give them your love but not your thoughts,
    For they have their own thoughts.
    You may house their bodies but not their souls,
    For their souls dwell in the house of tomorrow, which you cannot visit, not even in your dreams.

    You may strive to be like them, but seek not to make them like you. For life goes not backward nor tarries with yesterday.”

    I’m honoured to be your guide, son. Happy birthday!

    Share

  12. From Elastic to Elastici

    Screen type.

    Thanks to the fantastic voluntary effort of Nicola Pressi, the elastic design tutorial has been translated into Italian. May good karma reign down on her him (oops!).

    If anyone else is bilingual and would like to translate the article for the benefit of local technicians, please download my vCard and get in touch. A few thank you links are the least you will receive, to go with the good karma from such a generous gift of time and skill.

    Share

  13. Letterpress Print Design

    Grow Collective business card with debossed glyphs.

    The new Grow Collective business card is in circulation. It appeared a while ago, and I’ve been meaning to post about it. Today seemed like a good day. In a calm interlude, I snapped open the lens cover, hit the macro key and, after grappling with my poor photographic technique, here you go.

    It was printed using letterpress onto 740gsm two–ply (natural white with Baghdad brown) Colourplan card by the venerable, and expert printers, Piccolo Press of Nairn in Scotland. They are one of the few remaining commercial letterpress printers in the UK who, ironically, do a large portion of their printing for clients in the States. Wherever you are, you could do much worse than a conversation with Tim Honor, or the designer, Paul. Their advice is invaluable.

    Quick Tips

    1. Letterpress is an analogue format so go to the highest resolution your machine and software can handle when producing the artwork. (I spend chunks of time waiting for changes to be applied at 1600dpi, but it was worth it.)
    2. Letterpress will saturate the card with ink, so your colours will be richer than printing on the office inkjet.
    3. You pay for the block, the card and the print run. It’s not cheap but then, it’s not lithographic quality, this is letterpress!
    4. Trust the advice of the printer (especially if you use Piccolo) on the choice of card. They can provide samples, but a good rule is, the thicker the card, the better the deboss at print. Standard weight is around 540gsm — almost twice that of litho printers.

    There’s a high resolution photo on Flickr if you want a closer peek. I’d love to hear how you get on if you go down this route. It’s more than worth it just to run your fingers over the debossing when they’re delivered.

    Share

  14. Smoothing out the Creases in Web Fonts

    Stickman smoothing out the contour in a ligature.

    Designers often choose one of the core Web fonts for body text because they are widely available, but like all typefaces, they render differently on different operating systems.

    Apple OSX and Microsoft Windows have different ways of rasterising fonts and different text rendering engines. Apple’s text rendering engine is Apple Type Services for Unicode Imaging (ATSUI .) Microsoft’s text rendering engine is Uniscribe .

    Font Rendering Methods in OSX & Windows

    OSX tries to respect the anatomy of the type as far as it can using floating–point positioning — a combination of anti–aliasing techniques and sub–pixel rendering that does not lock glyphs to the pixel grid.

    Windows uses two methods depending on the version of the operating system, (Standard and ClearType.) Standard uses a combination of hinting (grid fixing) and anti–aliasing. ClearType also uses sub–pixel rendering — using LCD display technology to achieve better anti–aliasing. With both of them, it prefers to lock the letters to the pixel grid.

    Comparing fonts at 14px and 800% maginifcation in OSX and Vista.

    Fig. 1: Firefox 2 on OSX (left) and IE7 on Vista (right) font rendering at 800% magnification.

    ClearType is enabled by default in Windows Vista. In 2001, Windows XP had ClearType included but enabled Standard mode by default. Changing to ClearType requires navigating through the Control Panel to find the Appearance settings, then finding a button marked “Effects” to access the options. It’s the Windows equivalent of trying to change the accessibility options in browsers: Even if you know they exists, they’re a pain to find.

    The legibility of each technique is subjective, and also depends on factors like ambient light, resolution, viewing distance, visual impairment, screen type and colour contrast.

    Dave Shea prefers Windows’ ClearType method, as does Jeff Atwood and much of his commentators. For judiciously sized body text I mostly prefer the Apple method, yet previously in brand work I’ve also locked the letters to the pixel grid to get them as sharp as I’d like. Again, it’s subjective: How I see the individual font appear at a particular size and colour is the deciding factor.

    Core Web Fonts

    In August, 2007 Apple and Microsoft renewed the license for the core Web fonts. It was anticipated, but still, there was a collective sigh of relief that the fonts would still be common to all major operating systems. Matthew Carter, the designer of Georgia and Verdana said:

    “By agreeing to make these fonts available cross–platform Microsoft and Apple will support their customers, and confirm their respect for the standards of type–design.”

    Using the default Standard mode in XP, text is rendered with minimal (practically non–existant) anti–aliasing up to a certain size. The size at which text starts to become smoothly anti–aliased seems arbitrary. Good smoothing occurs at various sizes for each variant of each typeface. XP is still the most common platform used by our audience today, and this is how it displays Georgia in IE6:

    IE6 on windwos XP font rendering

    Fig. 2: Screenshot of Georgia displayed in IE6 on Windows XP clearly showing smooth anti–alias starting at 17px.

    For your bookmarks: The Web fonts test suite displays text from all the fonts in a range from 11px to 21px so you can compare and contrast yourself.

    Smooth Header Font Size for Windows XP

    The Web Fonts test suite was used to produce the following table that compares the core Web fonts, and the size in pixels at which good anti–alias starts to occur in XP by default. (Every browser except Safari.) Only whole pixel font sizes were used.

    Typeface Pixel size for smooth anti–aliasing
    Regular Bold Italic Bold Italic Small Caps
    Andale Mono* 18 11 18 18 21
    Arial 18 11 18 12 21
    Arial Black 17 17 17 17 20
    Comic Sans MS 16 11 16 11 18
    Courier New - 16 - 17 -
    Georgia 17 17 17 17 20
    Impact - - - - -
    Times New Roman 18 14 21 18 21
    Trebuchet MS 17 12 17 12 20
    Verdana 17 17 17 17 20

    * Andale Mono does not ship with Windows Vista.

    Noticeably, Impact is never smoothly anti–aliased, and Courier New only when embolded (perish the thought.) The font being rendered with smooth anti–aliasing at the lowest size is Comic Sans; a fact that might produce a wry smile from its creator, Vincent Connare, who never intended Comic Sans to be used outside of the speech bubbles in Microsoft Bob.

    Designers can choose to ignore the smooth anti–aliasing point in XP Standard mode altogether. My view is that headers look better when smoothed as much as possible, so a careful choice of weight for the font is important. Now there’s an added complication. ClearType in Vista seems worse in some circumstances to me than the Standard method, but that is a post for another day.

    Future Font

    Apple’s patent application for a system and method for displaying text—invented by Mark Zimmer—from June 14th, 2007 may make interesting reading for some. It includes references to grid fitting / hinting, specifically a method that, “increases contrast of tops of lowercase characters of the font family and preserves thickness at tops of stems of lowercase characters.”

    In the future, the debate around platform specific font rendering may all be moot, as displays move to ever higher numbers of dots per inch and pixels per inch (160 as per the iPhone.) For now, how a given fonts behaves on different platforms is still crucial to user experience. I’ll still be keeping an eye on XP for a while yet, and I have a funny feeling I’ll be getting good use out of the table for a while, too.

    1. Resources and further reading:
      1. Web fonts test suite
      2. Apple Type Services for Unicode Imaging (ATSUI)
      3. Microsoft Uniscribe
      4. Apple TrueType Reference Manual
      5. Microsoft TrueType Reference Manual
      6. Wikipedia: Font Rasterization
      7. Wikipedia: Anti–aliasing
      8. Wikipedia: Font hinting / grid fitting
      9. Wikipedia: Sub–pixel rending
      10. Microsoft ClearType
      11. ClearType tuner for XP

    Share

  15. Strawman Argument

    Stickman: Your argument is flawed. Strawman: Why? Stickman: It’s a strawman. Strawman: ?!

    I couldn’t resist after reading Chris’ (useful) post on logic, and seeing this accusation used frequently on pedantic mailing lists. Forgive the pun and levity but what’s life without a little teasing now and again? :)

    Share

  16. Design vs Evolution

    I just watched a fascinating TED presentation on self–aware robots from Hod Lipson of Cornell University:

    It was inspiring to watch the spider–like bot trying to understand its own form and how to move forward. It was fascinating to see it not walk like a spider as we might have hoped for. Instead, it found a completely different way of propelling itself.

    Observing users in action within a user centred design (UCD) approach can also be surprising. They often do things we might not expect or be able to predict. As designers, we use our intuition to try and create empathetic experiences that transcend our own predilections. Jared Spool alluded to this recently at dConstruct when he described speaking to members of AIGA. He described how he talked about UCD and experience design to the audience who apparently promptly turned around and said, “that’s what we do!”

    In the article about narrative, I was thinking about developer versus user–generated narratives. The best social networks are platforms for expression. Users generate their own stories within the framework. To do this there is often a symbiotic relationship between the stage (the site) and the players (the users and audience.) The stage is literally set by the players and audience. They often find unique and interesting ways of using the stage to tell their stories. They create and pave new cowpaths which are then expanded upon by the developers. So the narrative being designed by the developers is only one of countless plots the users can follow.

    That’s what the robot was doing. With a reward at the end, it created its own story in order to understand itself and move forward. As Hod Lipson suggests, evolution rather than design may be a much more effective way of allowing robots to discover themselves. The same could apply to website users. Should we design experiences, or help them evolve? If it’s a balance between the two, how do we walk the line?

    The other fascinating portion of the presentation is what happens when rewards are removed. Instead of trying to achieve a task, the robots in the primordial soup of parts and power start to self–replicate. Self–replication becomes the task and the reward; amazingly like us, or any life form.

    You might compare that to certain social networks that exist without a goal as such, but to merely connect people. Users define their own rewards and tasks. Create their own narrative. Think about friends lists or popularity on Facebook. In a way that could also be considered self–replication, but of ideas and influence rather than genes. Conversely, on sites like Cybersocietes—a social networking popularity game where an algorithm calculates popularity based on activity—many users choose not to play a part in the designed narrative of the game. They choose instead to get satisfaction in other ways. They create their own narratives that still revolve around influence; not with the false measure of game points though, but in more subtle ways such as participation in public forums or private groups.

    Perhaps our job is not to design experiences in all cases, but to enable the audience to explore, play, and learn their way to a rewarding experience. Along the way they teach us a thing or two, and we all move forward together. Thanks to the Cornell Computational Synthesis Lab we can also let robots evolve on our computers as a screensaver (unfortunately Windows only) but fellow Mac users can evolve sheep instead.

    Share

  17. Starting a Flickr Journey

    New desk and machines.

    There’s been a few changes recently. New desk, new site, new tools for the coalface, and a sudden urge to drag my late–adopter self into the world a little more.

    So, today I posted my first ever picture to Flickr. I feel pleased. I got over–excited with notes which you’ll have to visit the site to see, part inspired by Terry Chay’s office picture. His notes were like the narrative in the margins, giving the photo some context. I love a good story. Notes made it so.

    I've long admired Flickr, and used it as a lurker, even to the point of having an account (sans images.) Anyway, today the lovely new Apple cinema screen arrived with a man in brown. UPS have the best corporate palette of any couriers, and a courageous one at that. It’s not every company that has the vision to use brown and gold in their identity. It’s almost timeless. Long after the bubble–wrapped sheen of so–called Web 2.0 design has become as tired as Microsoft blue, UPS delivery dudes and dames will still look classic, and hopefully feel it too.

    The arrival of the screen seemed like a good time to post a pic. Technically and artistically it has little merit, but as a snapshot into my life, hopefully it has more weight. Especially with the notes. I’ve been waiting for my desk to look like this for a year. Totally worth the wait, and it feels good to celebrate it with folks I know. Thanks Chris for greasing the wheels, I hope you like your handywork!

    Feel free to add me, comment, deride or lurk as you see fit. Let’s see where this journey goes, it might even be surprisingly good fun. :)

    Share

  18. 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

  19. I {heart} Pixels

    Wandering around in my archives recently, I stumbled across a few pixel avatars. Here’s a sample:

    30 pixelated mini avatars

    A crazy way for a designer to spend time, perhaps, but there was something challenging about trying to bring pixels alive and give them character and detail at such a small size.

    CSRF, the character

    This year, those little “avs” and The IT Crowd inspired a few pixel characters created for Chris Shiflett to add some fun to web app security presentations.

    This is “CSRF”, (pronounced Sea-surf).You might meet “XSS” and “2 point oh” in one of Chris’ presentations but I’m reluctant to show them off before Chris has chance to. Please be gentle with them, like all Web villains, they’re really just looking for recognition and a cuddle.

    The little avs were created for one of the original 2–D graphical chat sites, OnChat which started in 1997 and, at its height, hosted thousands of visitors in hundreds of different rooms.

    The avatars were mobile on top of a static room background with speech or thought bubbles that appeared when users typed. It would pale against Second Life or There.com today, but it was created by a couple of guys, and revolutionary at the time.

    Looking back, part of the success was the simplicity. There was no requirement to join, users merely opened a Java applet in the browser. Before they knew it, they were immersed in a seemingly chaotic and infinite space, with little pixel avs all around them speaking and throwing thoughts to each other. Joining in was as simple as typing and using the mouse to move.

    The avatar creators of 1997 have no doubt grown up, moved on and got a proper job, but finding these again reminded me that the things we do for fun are often the most educational. The lessons and skills stay with us. Something I try and bear in mind when my sons and I are playing Robin Hood versus the Robber Sheriff and the eldest wants to shoot him with his “arrow barrow” after tying him up with a grappling hook.

    Share

  20. A Day and a Night of Bristol Geekery

    The Watershed, Bristol

    You might be surprised how much is going on in Bristol. Last night it was SkillSwap Relaunched and today I spent the morning at the UWE Web Developer Conference.

    SkillSwap Relaunched

    I landed at SkillSwap after playing Lego Mars Mission with the kids, giving Xen a bath and seeing them both to bed. So I was late arriving at the new and swanky Goldbrick House on Park Street (Note: Whoever stole the <h1> from their web site, please hand it in at the bar.) Many thanks to Siftware for the bottle of Gem to welcome me in the middle of the “musical chairs” session (as I named it,) where anyone can get involved in the discussion by taking one of the five seats. People come, people go, the discussion moves on swimmingly. It’s relaxed but dynamic. I liked, very much.

    After that came Matt Jones’s talk. The only man I’ve seen yet to say something negative about the iPhone, have people laugh and feel obliged to join him in a drink at the same time. Hey, it’s all in the experience stack… somewhere. Nice work, Matt.

    It was great to catch up (briefly) with future Borg member, Ian, meet Ed in the flesh as well as Gisela, and share a pint of cider after with Steve. So a good night was had by all. SkillSwap was fun. Come to the next one with me.

    UWE Web Dev Conference

    Today at The Watershed, the UWE Web Developer Conference saw Andy Budd give a sterling talk about UX. He hit all the right spots and gave us some great future reference material to rationalise UX for clients.

    Dave Raggett’s opening talk on The Web of All Things was particularly fascinating. Some of it I got, some passed me by like a designer staring at UNIX (which I felt like.) The concept of ubiquitous computing leading to a paradigm shift in design from the desktop / laptop to multi–modal presentation seemed to fit somehow with Matt’s take on interfaces demanding too much attention, and the need to make tasks almost effortless (from the night before.) Not sure how yet, but it demands further research.

    It was good to see Sam again and grab a chat on the most slouching sofa in Bristol with Alex. I’m only sorry I couldn’t stay around for the rest of the afternoon, especially to see our own Chris Garrett take part in a panel on working in the South West. Nevertheless, congratulations to Dan Dixon and everyone at UWE for putting on such a great event.

    Regarding Parapets and Geek Togethers

    It’s always amazing to me how events happening in other cities always seem to be on my radar, but big ’ol Bristol with its masses of technical and creative talent floats somewhere in the background.

    For a long time I kept my head below the parapet in the Grow bubble. It was like a little island inside Bristol populated with a few old colleagues and techies. From the inside looking out (as it were) Bristol seemed fairly silent—not many social events around Web design, and pretty quiet all ’round.

    About a month ago, I grabbed a coffee with Richard Caddick of CXPartners to talk about his company doing some UCD work as part of the design consulting I’d been asked to do on behalf of a client in the states. We got into a discussion about people, co–ops, events and Bristol. It adjourned to another day where I also met Joe Leech—both “diamond geezers ”—and started to be enthused by the idea of trying to lend my weight (physically vast, influentially small) to promote Bristol, fellow geeks and any of the events happening in the city. So that’s what I’ll try and do which this post is starting. If you have any ideas throw them my way and perhaps we can put old Brizzle on the map a little more, and along the way maybe make some new friends. Cool, eh?

    P.S. In the spirit of Geek Togetherness, next Tuesday evening we’re hosting a few drinks and a bit of food for Chris on his first visit to Bristol before his workshop on web app security at FOWA. If you’d like to pop down and say hi, give me a shout.

    Note to self: Marking up lots of vCards in posts needs a shortcut. Call in the Gibbins.

    Share

  21. The Incredible Em & Elastic Layouts with CSS

    Elastigirl saying “I’m an em” and Mr Incredible saying “and I’m a PX”

    Almost a year ago, Ty Gossman over at Stylegala asked me to write an article about elastic layouts. The best I could do was a quick email between work. I always meant to come good on that. Thanks for asking; sorry it took so long.

    Also available in:

    1. Italiano
    2. Deutsch
    3. Español
    4. Russian

    This article will walk you through creating a basic elastic layout; what exactly an “em” is and how to calculate them, how to use ems to create an elastic layer for content with scalable text and images, including basic vertical rhythm.

    What is an Elastic Layout?

    An elastic layout scales with users’ text size.

    More accurately, an elastic interface scales with browser text size—commonly a default of 16px—which users can change if they wish. Some people make a permanent change for accessibility reasons, others use the UI controls to increase text size if they need to.

    Elastic design uses em values for all elements. Ems are a relative size, written like this: 1em, 0.5em, 1.5em etc. Ems can be specified to three decimal places like so: 1.063em. “Relative” means:

    1. They are calculated based on the font size of the parent element. E.g. If a <div> has a computed font size of 16px then any element inside that layer —a child— inherits the same font size unless it is changed. If the child font size is changed to 0.75em then the computed size would be 0.75 × 16px = 12px.
    2. If the user increases (or decreases) text size in their browser, the whole interface stretches (or shrinks.)

    See the elastic layout example. Adjust text size to see it scale. It contains all the CSS and HTML used in this tutorial.

    For other live elastic examples, visit Dan Cederholm’s beautiful and elastic SimpleBits, or resize text on this site.

    Elastic interfaces are flexible and accessible for users, and can be almost as precise as pixels for designers. Layouts can be created accurately and quickly using CSS once we grasp the basic relationship between font size, pixels and ems.

    Introducing Em, the Elastigirl of CSS

    The em is as powerful and flexible as Elastigirl, she doesn’t mind what the font size is, whether 12px, 16 or 60, she will always be exactly equal to it.

    The em is a unit of measurement in typography. What is it and how did it get its name? Here’s a little history:

    An em was originally equal to the size of the metal block used to cut a single letter of type for a specific font. It was roughly equivalent to the width of a capital letter “M”.

    Those with designers’ eyes amongst you might be saying, “hold up a second, letters don’t take up equal space.” You’d be right: Computers use kerning to adjust the horizontal space each letter occupies on the screen, making them equidistant and balanced. Originally, the metal block was trimmed or “kerned” to make the horizontal padding around each letter the same.

    So, in CSS, an em is actually a vertical measurement. One em equals the vertical space needed for any given letter in a font, regardless of the horizontal space it occupies. Therefore:

    If the font size is 16px, then 1em = 16px.

    Getting Started

    Before we start throwing ems around a stylesheet, we need to know what the default font size is in the browser. Luckily, we do:

    All popular browsers have a default font size of 16px. Therefore, at the default browser setting, 1em = 16px.

    In Firefox, you can check default font size via Tools > Options > Content.

    So, before a single CSS selector is written, the browser has a 16px deafult font size. The <body> inherits it unless styled otherwise using CSS. Therefore 1em = 16px, 0.5em = 8px, 10em = 160px and so on. We can now specify any element size we need to using ems!

    Setting Body Font Size

    Some erudite folks suggest setting the <body> font size to either the required font size for body text, or the equivalent of 10px (0.625em or 62.5%) to make calculating child lengths easier. Both have merit, but it seems more logical to me to leave it at the browser default and change it for child elements if necessary.

    So, we know that the body font size will be 16px by default. We also know that if a person has changed their settings, our elastic interface will not break, but adjust. Perfect, so we can set:

    body{ font-size:1em; }
    

    However, (gasp) IE has a problem with ems. Resizing text from medium (default) to large in IE5/6 would lead to a huge increase in font size rather than the gradual one expected. So another selector is needed to get IE to behave:

    html{ font-size:100%; }
    

    As Patrick H. Lauke previously pointed out, it’s an IE correction, not a hack—it doesn’t rely on a browser bug to work.

    IE will now behave and resize text gracefully, rather than in mighty leaps of stupefying grandeur.

    Let’s give our <body> some more style, and center everything in the viewport (this will be important later for our content wrapper.) Our initial CSS ends up like this:

    html{
    font-size: 100%;
    } 
    
    body{
    font-size: 1em;
    font-family: georgia, serif;
    text-align: center;
    color: #444;
    background: #e6e6e6;
    padding: 0;
    margin: 0;
    }
    

    Formula to Convert Pixels to ems

    When first creating elastic pages, you will find yourself doing calculations a lot. Keep a calculator handy.

    Tip: Find font size for any element with Chris Pederick’s brilliant Web developer toolbar using: Information > Display element information.

    I am no maths wizard, so I needed a simple formula to remember. As a designer, I know pixels intimately, so that’s where I start. I calculate what 1px is in ems and multiple by the pixel size I need. That gives me the equivalent em value. We know that 1em is always equal to the font size of the parent element, therefore:

    1 ÷ parent font-size × required pixel value = em value

    For your bookmarks: Pixel to ems conversion table for font sizes.

    Don’t let my talk of forumla put you off. Elastic interfaces are a joy to build so let’s get practical and create some page elements.

    Building an Elastic Container: The Supersuit

    To create the centred content layer in the example, we need a little HTML. Let’s be really imaginative and give it an ID of “wrap”:

    <div id="wrap">
    …
    </div>
    

    We want it to be 740px wide to comfortably fit an 800×600px viewport like the example. What is 740px in ems? Let’s find out:

    1. Set a 740px width in ems for our layer:

      We know that the parent element (<body>) has a font size of 16px. Our child layer (<div id="wrap">) will inherit it. So we can calculate what 1px is in ems:

      1em = 16px. Therefore, 1px = 1 ÷ 16 = 0.0625em.

      Ems allow only three decimal places. More is fine in calculations but before writing CSS, round it up to three.

      Then multiply by 740 to get ems:

      0.0625em × 740 = 46.25em

      Or do the whole calculation in one go with the formula:

      1 ÷ 16 × 740 = 46.25em

      (1 ÷ parent font-size × required pixel value = em value)

      You can use the same formula to calculate ems for any width or height you need. Find 1px is in ems for that element. Multiple that by the pixel value you require to get the em equivalent.

    2. Create CSS:

      Apply the width in ems, center the layer in the viewport using the auto left and right margins, give it a 1px gray border with a white background and align the text left:

      #wrap{
      width: 46.25em;
      margin: 1.5em auto;
      border: 0.063em solid #ccc;
      background: #fff;
      text-align: left;
      }
      

    Now we have an elastic wrapper for our content!

    Styling Text with ems

    Let’s insert a <h1> and a <p> to our wrapper like so:

    <div id="wrap">
    
    <h1> … <h1>
    <p> … <p>
    
    </div>
    

    Essential reading:

    The Elements of Typographic Style applied to the Web created by Richard Rutter based on the masterwork by Robert Bringhurst.

    While we're here, we might as well add some typographic goodness by selecting a basic leading and adding some vertical rhythm, with everything expressed in ems. Here’s a little more history:

    Leading (pronounced “led–ing”) was traditionally the insertion of lines of lead underneath rows of text. It is expressed in CSS as line-height but instead of adding space below, it increases the space above and below each line of text.

    In the example, I’ve used the same font sizes as Richard Rutter did in his outstanding chapter on vertical motion to make your reading as consistent as possible. The heading font size will be 18px. The paragraph font size will be 12px with an 18px line height. 18px will be our basic leading—the most important value for our interface. Everything else will be proportional to that.

    A note on CSS inheritance: Our content wrapper, <div id="wrap">, has no font size set so it has inherited the 1em (16px) font size from its parent, the <body>. Any elements within our wrapper will also inherit that font size, unless we tell the browser otherwise, as we’re about to do.

    1. Set a 12px font size with 18px line height and margin for paragraphs:

      We know that our paragraphs have inherited a 1em (16px) font size from its parent, <div id="wrap">. From our previous calculation, we already know that 1px is 0.0625em. We simply multiple that by 12 to get the em value for 12px:

      0.0625 × 12 = 0.750em

      Or do the whole calculation in one go with the formula:

      1 ÷ 16 × 12 = 0.750em

      (1 ÷ parent font-size × required pixel value = em value)

      Then apply that to the CSS:

      p{
      font-size: 0.750em;
      }
      

      Margin, line height, padding etc. in ems are all relative to the font size of the element they belong to.

      To calculate the desired line height and margin of 18px for our basic leading we do the following:

      18 ÷ 12 = 1.5em

      Dividing the desired line height (18px) by the element font size (12px) gives us the em value for line height. In this example, the line height is 1 and a half times the font size: 1.5em.

      Add line height and margin properties to the CSS:

      p{
      font-size: 0.750em;
      line-height: 1.5em;
      margin: 1.5em;
      }
      

      Now the browser will say to itself, “Oh, line height and margin is set to 1.5em, so that should be 1.5 times the font size. What’s the font size, again? 12px? OK, cool, make line height and margin 1.5 times that, so 18px.” It will do all that faster than Dash too, and render it. Wow.

    2. Set 18px font size for the <h1>:

      The <h1> has inherited a 1em (16px) font size from it’s parent, <div id="wrap">. So, we already know what 1px is from before: 0.0625em. We simply multiple that by 18 to get the em value for 18px:

      0.0625 × 18 = 1.125em

      Or do the whole calculation in one go with the formula:

      1 ÷ 16 × 18 = 1.125em

      (1 ÷ parent font-size × required pixel value = em value)

      Then apply that to the CSS:

      h1{
      font-size: 1.125em;
      }
      

      To retain our vertical rhythm we want to set an 18px line height and margin. Easy: If the font size is 18px then 18px in ems is 1em! Let’s add the properties to the CSS (and make the font weight light:)

      h1{
      font-size: 1.125em;
      line-height: 1em;
      margin: 1em;
      font-weight: 300;
      }
      

    We now have vertical rhythm! Let’s move on to images.

    Sizing Images in ems

    To retain the rhythm of the the example page, the size of an image should be a multiple of the basic leading.

    Our image has a width and height of 90px (18px × 5.) It has right and bottom margins of 18px and is floated left in the paragraph text. This is the HTML:

    <p>
    <img src="90.jpg" alt="Clevedon Pier" /> Lorem…
    </p>
    

    The image is a child of the paragraph—it’s parent—so we know that the image has inherited a font size of 12px. Therefore, to calculate the image width and height we do the following using the formula:

    1 ÷ 12 × 90 = 7.5em

    (1 ÷ parent font-size × required pixel value = em value)

    Then apply that to the CSS:

    p img{
    width: 7.5em;
    height: 7.5em;
    }
    

    We already know what 18px is in ems for the parent paragraph, so let’s add the margin property (and the float) to the CSS:

    p img{
    width: 7.5em;
    height: 7.5em;
    margin: 0 1.5em 1.5em 0;
    float: left;
    }
    

    N.B. The image does not need to be within a paragraph to give it semantic meaning. The was used in this instance as an example of how to take inheritance into account whilst calculating ems.

    Now we have a supersuit elastic container with some elastic content and vertical rhythm like the example. With a bit of a luck, you have a better insight into creating elastic layouts, and designing with ems in particular. We’re done, you’re the Edna Mode of designers! The elastic example page has all the HTML and CSS you need. View source to grab it.

    Using Elastic Design

    Some of the benefits of elastic design for designers are precision, control and accessibility. However, some people have expressed concerns that allowing the content to expand past the edge of the viewport at larger text sizes could be problematic. Also, text will sometimes wrap and flow within the framework when the text size is changed; a minor issue, but worth noting.

    Concerns have also been expressed over the loss of image fidelity at increased text size. However, if a person changes their text size, the chances are they will also benefit from larger images, and browsers get better at resizing images as they increase in size. Hopefully browsers will get even better at resizing, or maybe we’ll soon have SVG and scalable background images to use.

    Implementing elastic design can deliver a deep understanding of ems in CSS. It definitely has a place in every designer or developer’s toolkit, whether in combination with other techniques in hybrid layouts or on its own.

    And finally…

    Any omissions or errors in this article are my own, so please let me know if I’ve missed something. If you know of other good and relevant resources elsewhere, please add them to the comments or email me and I’ll include them.

    I also take full responsibility for all refences to The Incredibles—my 2 sons gave kind permission for me to use their figures for the title image—and I hope Elastigirl doesn’t mind being compared to the em unit.

    References and Further Reading

    1. Resources:
      1. Elastic layout example (from the article)
      2. Reference table of common pixel font sizes and em equivalents
    2. Further reading:
      1. The amazing em unit
      2. Em discussion on Typophile
      3. The Elements of Typographic Style applied to the Web — Richard Rutter
      4. CSS2: Font size
      5. CSS2: Assigning property values, Cascading, and Inheritance
      6. CSS Layouts: The Fixed. The Fluid. The Elastic. — Mike Cherim
      7. Fixed or fluid width? Elastic! — Roger Johansson
      8. Elastic Design — A List Apart

    Can you Translate?

    Also, translated into Italiano by Nicola Pressi, and Deutsch by Pascal Birchler.

    If you are bilingual and would like to translate this article for non English speakers, please download my vCard via the about page and contact me. Thanks!

    Share

  22. An Ode to Exersize Book Margins

    Remember your old school exersize books? If you went to school in the UK, you’ll probably remember the margins, with a red or grey vertical line giving the page a little elbow room (and trying to make your writing line up.)

    Mine would end up full of all sorts of things: Numerous red “Sp” spelling reminders from the teacher (nothing᾿s changed you’ll note), with oft–begrudged marks of “7/10”, as well as my own art, in the loosest sense of the word. That would include snippets of ubiquitous bubble writing; predictably inspired by the girls who seemed to love it—and anyone who could do it well—even more than Wotsits or Cabbage Patch Kids. There would be various malformed “Chad” and Fido Dido sketches (inspired by 7-Up ads in Singapore when I was younger,) and carefully crafted reproductions of Biffa Bacon next to attempts at rendering male reproductive anatomy. Banksy wasn’t even a twinkle in his mummy’s eye at that point, and anyway, Chad and mutated willys were easier to draw than teddybears with Molotov cocktails.

    Therefore, I decided to resurrect the exersize book margin in my print stylesheet. It’s still a little messy and very verbose and will, no doubt, be massaged into pedantic cleanliness over time. The stylesheet, that is, not the margin.

    Asides and small pictures are pulled into the margin where they belong, leaving you bags of room for your own notes, doodles and experiments in anatomical drawings of the male reproductive organ. Ah, but if only browsers would respect orphans, page-break-after:avoid, page-break-inside:avoid and other useful print CSS, but that is a tale for another day. Do a print preview to take a peek. Perhaps the best margin art™ should win a prize—what was in yours all those years ago?

    Share

  23. One Giant Leap for Tangerines

    Houston, we have lift off! It was a bright, crisp autumn day in Bristol to match the launch of this shiny new site. Share the joy of this milestone with me. Share my desktop too:

    Moleskine doodles and my desk

    Between starting this site and now, the keyboard has created many a client’s site by being depressed, and many a bizarre idea has destroyed the clean pages of the notebook. It almost sounds like this site is the product of mild mental illness. I’m saying nothing. It’s been a long road. Anyone for a pint?

    Now, time for the sober, serious business: None of this would have been possible without the tender ministrations, and occasional mayhem of developer extraordinaire, Jon Gibbins. May the gods look kindly on his transgressions in pursuit of his art. Say no more. Nudge, nudge. Oh, I was being serious, wans’t I? OK, OK. He’s great. I owe him more than a sane man would give, or tolerate receiving. There’s more about Jon’s contribution in the colophon.

    Wow, I feel like I'm playing pretend Oscars in front of the mirror clutching a hairbrush and a vase, but it’s all good. Let the exuberance flow where it may. Thanks also go to Chris, for never ceasing to apply the subtle pressure of asking about jontangerine.com—beware this man, he’s a lethal friend and webapp security guru.

    So, what have we here? Well, let me show you around (imagine a big grin:) Under the hood (that’s bonnet for us Brits) we have some plain old semantic HTML (POSH) with juicy slices of microformats from hAtom to rel-tag and lots in between. It has been remixed with CSS but delivered to you without any background images or superfluous presentational shenanigans.

    I think of this site in terms of user’s experience: Mine, as a publisher, will hopefully be one of managing a lifelong file; a notebook for my own life. In fact, that’s what you'll be seeing – notes garnered from diverse sources crafted hacked into entries. Hopefully, it will be something my family and I can read in years to come and laugh at Daddy’s dodgy writing style. Up to now we have a blog, and aggregated asides from my bookmarks, tweets and events. You may think of it as a blog. I call it log. Part humour, part true denominator. Hopefully you'll be entertained, at least for a little while.

    Over the coming months and years you'll find me publishing on all kinds of different topics from interface design to typography to user experience, whether Web or not. There may even be a few tangerines hanging around. I'll try not to bore you, and I hope you like what you see. In the meantime, if you stumble across any bugs, please let me know, it will be much appreciated. Thanks for taking the time to wade through this thorny prose and please feel free to say hello, anytime.

    Share

  24. Masonic Typography

    Typography is having a renaissance on the Web, but perhaps one day we’ll reach the level of beauty in this signature line in Bristol Cathedral from a master stonemason, carved in to marble in 1780:

    “J. Bacon fecit, London 1780” carved into marble.

    Oblique capitals for the stonemason’s initial “J”, oblique small caps for his surname “Bacon”, a lowercase italic “fecit” (meaning ‘made it’) and a regular weight lowercase for “London 1780”. Wow.

    Sharing a bottle of fruit cider with a stonemason the Friday before last, we lamented the computer–assisted carving of inscriptions. In the last decade or so, stonemasons are being replaced with machines who, for the grand sum of £2 per letter, will render any text required into stone with perfect accuracy. Not a lot of flare and soul, but a heap of inhuman precision.

    “She died, August 3rd, 1778, aged 35” carved into marble

    Could they carve the superscript “d” with the dot for the 3rd like line above, though? Maybe so, but then, for anyone who creates anything, there’s a very specific joy in the path taken to create it. It’s completely different to the pleasure in the end product. Perhaps that joy is what is sometimes missing from our pixilated workspace. Tapping a keyboard is an entirely different aesthetic experience than holding a chisel, or a pen.

    Perhaps, like many of the master crafts people working in commercial letterpress printing, master masons will slowly retire with no–one to take up the torch apart from a few enthusiasts. We might lament the loss of such skill, or there might be a revival just in time, as the beauty of the art is fashionable appreciated again.

    For my part, I’ve promised my new cider drinking partner a commission for stone signage outside any offices Grow might acquire in the next few years. It will go perfectly with the letterpress stationary we’ve just ordered. With luck, it might even be around above an old office building for folks like me to wonder at after another 230 years, like the inscriptions above.

    Share

  25. Design Proposals, Specifications & Gestalt Theory

    Sometimes the thinking takes longer than the doing. Getting to know the client, the opportunities and limitations of the job, and how that can all be folded into the underlying structure of the site takes much longer than actually writing the specification. For us, as designers, that means getting the information architecture — the URLs — right. All you have to do then is write the proposal.

    So the thinking is the complex bit, and that’s how it went in the last few weeks as two more jobs were won, both starting today. One for a fellow developer and the other for a social networking site. ‘The most thorough proposal we’ve ever seen’, said the social networking client who works in IT himself. High praise, and many thanks! (You know who you are.) After that kind comment I was trying to identify what differentiates specifications and what we do. Trying to boil it down to a common denominator, I arrived at “experience”. Not just experience in technology though, but in life; business, financial, social and emotional.

    It’s a little like Chinese poetry or Gestalt theory: Part decoding the homographs and part prompting thoughts into self-organisation. That might sound like a lot of blather, but creating websites is more a mental exercise than a physical one. Even though we get paid for the doing, it’s the thinking that wins the job and creates something useful.

    A user-centred design methodology is all about evidence, forming a plan around empirical data generated by users, to the benefit of all. It’s wonderful, obvious, needed but because of it’s empirical nature, relatively time consuming. It can easily eat a client’s total development budget before a single line of code is written, especially in the case of start-ups or small and medium–sized organisations.

    So, we fall back to intuition and experience. We get a good grip on the context for the client: The market, the audience, the purpose. Call it requirements gathering. Then we do a mini usability study of what’s currently available, ask ourselves what features meet the overall objectives and fold them into the specification. We create a user experience from our own experience. We’re not afraid to debate the issues with clients either. In fact, even if they seem to be paying for the doing, it’s the thinking they’re really paying for, so we have to make our case if we want to do good work for them.

    So my advice is to do a lot of thinking even at the proposal stage. Isn’t that a waste of time and effort if you don’t win the job, I hear you ask? Yes, it is, but the key word in that question is, “if”. My personal experience has shown that if the thinking is good and has been well presented in a wholistic proposal then you’ll win the job and do a great one to boot. Plus, if you win the job you will have to do the thinking at some point anyway. You might as well do it to help you secure the job in the first place. Even if you don’t get it, you’ll still be learning through experience, so it’s all good.

    Here’s a quick list of the steps in a process that enables us (and hopefully you) to develop great relationships with clients, do great work and win business:

    1. Show a little leg! By that I mean allow your personality to show in your site. Letting potential clients get to know you passively as people before they contact you mitigates the anonymity of the Web. Let clients see they’re contacting a person or group of people, not an anonymous organisation.
    2. Think! Engage! Talk to them, get to know them and their organisation and what drives both. Basically, build a relationship with them before you even write the proposal. Understand exactly who they are, who their audience is and what they want. Use that as the baking tin, stir in some technology and fire up your imagination.
    3. Create a template. Use it to organise your thoughts. The headings in ours look something like this:
      1. Executive summary
      2. Brand
      3. Audience and purpose
      4. Features and scope
      5. Technical design
      6. Information architecture
      7. Timetable
      8. Charges
      9. Contact

      In sections A to C you’re demonstrating an understanding of them and what they need you to do. Section D is where the meat starts and section F is where the design starts. If the brief requires it, include a further section about you or your business, keeping it short and sweet.

    4. Writing the proposal. This is all about collaboration. Keep talking to your client, feedback ideas that may not have been in the original brief as they come to you. Debate the features, benefits and incentives (function, usefulness and bottom line impact) of each. Give away your knowledge to the client to be paid to use it on their behalf after you’re successful. It’s an investment of the best kind. Throw the final version out to colleagues or proof readers and include the feedback from them too before you deliver.

    The very final piece of our particular proposal puzzle is understanding the fundamental purpose of a proposal. If, like us, most of your clients come to you directly, then they have already seen what you do and like it. What they are looking for from you, in essence, is to give them confidence that you can do something of quality for them too. The primary function of a proposal is to demonstrate understanding, provide expert advice and thereby give reassurance that their site, organisation and audience will be in the best hands.

    Share

  26. IA Update

    Just a note to point you in the direction of the site rather than the feed if you want a peek at the latest update.

    The homepage has changed: Random, rotating images with captions have been added using an adapted version of Jon’s PHP randomiser, and I’ve used the excellent customisable Feed Digest service to display my latest del.icio.us links with their PHP include option. An about page has also been revealed which includes most of the information that used to be on the holding page like contact details and my personal note.

    Hope you like it! As always, it’s temporary until we finish the latest round of the application (now code–named Lifelong File). The phrase “code–named” always makes me smile. It makes the application sound like a secret agent. During these baby steps towards full launch, all feedback is still appreciated. I will get around to ironing out any IE creases shortly but in the meantime that poor cousin of a browser can hold fire with it’s embarrassing imperfections.

    Share

  27. Grow Loves Freelancers

    Grow Collective was is inviting new members. If you’re a freelancer in or around Bristol, UK then we might have had something interesting for you.

    Sat, 4th Aug, 2007: We’re bursting at the seams trying to assimilate everyone. Thank you to everyone who replied. Hopefully we‘ll be inviting members again soon!

    Grow Collective

    A long time ago, in a galaxy far, far away (about 50 miles and 4 years) Charlie Markwick, Paul Whitrow and I got together to formalise an idea that I’d first broached with Charlie in 2001. The idea was that mature professionals with specialist skills who worked for themselves might come together as a co–operative consortium to provide services. Grow was born.

    The principles are simple: Everyone brings their professional profile and specialist skills with them but retains the right to claim any work done under their own name, company or site. Everyone is equal under the parent brand with agreement reached democratically. We would work to co–operative principles, and promote the kind of personal relationships with clients Charlie had been enjoying for over 20 years.

    By allowing everyone to develop their careers personally and anchoring the organisation around personalities, the parent brand would benefit by association: The focus was on people and their skills, not the brand per se. However, everyone would share a common set of ethics and practices. Everyone would be customer facing, with primary project managers agreed jointly on a project by project basis. Project fees would be split based on contribution, agreed in advance between us, but reviewed at project close.

    It was a heady time, forming an organisation that was completely different to the agency model that is so prevalent in our business where, in the worst examples, all the talent is white–labeled and all credit assimilated into the agency brand.

    Since then, Jon Gibbins and Alan Colville have joined us; we’ve proven we can more than just compete with traditional agencies, and we’re going from strength to strength. So much so that we are turning down more work than we take in, by a ratio of five to one. That’s why we’re inviting new members from Bristol or the surrounds, especially interface and graphic designers with a special interest in Web standards, user centred design, information architecture and accessibility. Read the invitation post for more, or drop me a line directly using my vCard, below.

    The Grow Collective model of a technical and creative Co–operative Consortium is something close to my heart, which I know has the ability to help budding and mature freelancers work on projects that may ordinarily not be available to them alone, yet still retain their independence. If you’re considering starting one, or just want to find out more about how they work, please feel free to drop me a line anytime, I’d love to help if I can.

    Share

  28. Feeding the Growth Culture

    Experience designer, Alan Colville has just joined our collective. He’s an experienced user centred design specialist who previously designed the interface for Telewest’s video on demand and personal recorder services — no mean feat given the constraints of Web TV so we’re all happy to be working with him. Please head over to Grow and commiserate with him if you wish.

    Alan Colville

    Alan Colville

    In the next few days he’s going to be publishing some great insights into usability and experience design which I’ve been lucky enough to have a sneak peek at. Keep an eye on the Grow feed if you’d like some practical insights into the user centred design.

    I’ve added a Feedburner feed for anyone masochistic enough to subscribe to my special fried spam. It’s hand coded and seems to be valid, but feel free to let me know if you get any problems.

    This is my lo–fi intermin solution. Neat, eh? Apart from sating my natural urge to publish and venting a little verbosity, there’s something appealing about not having to field comment spam, too. We’re old school, baby!

    Share

  29. It Never Rains but it Pours

    Sunshine and storm clouds over Bristol.

    Storm clouds can have a beauty all of their own. That is, once I shrug off the yearning glances towards the garden, currently under guard by “cow hair rain” as Chinese people would call it. Coming down in long, straight lines it promises a good drenching to all and sundry. Hiroshige illustrated it well in one of my favourite wood block prints, Evening Shower at Atake from his 100 famous views of Edo series. Bike riders beware; there must be an equation somewhere that quantifies why people on bikes get four times as wet in the rain.

    It’s pouring at work too and has been for a while. There’s too much work to handle and I’m actively looking for designers to work with. If you’re interested in our co–op, have a passion for user–centred design, Web standards and accessibility and are a dab hand at traditional graphic design feel free to get in touch. I’m especially interested in talented folks who are running their own business or thinking of doing so, want to further their exposure and may have been white–labeled by traditional agencies in the past. It’s one reason the agency model is broken — give me a shout if you want to know more.

    Apple iPhone.

    iphone

    The iphone has poured out of the stores and into the blogosphere too. 1.4% of all blog posts mentioned the iphone on launch day according to Matthew Hulse of BlogPulse. With such unmitigated hype, the parasites have come out of the woodwork too; there’s poetic justice in the video of a woman who paid $800 for the first place in line to try and buy up all the iphones to sell on Ebay, only to be told she could only have one. Oops.

    Old security holes in AT&T’s voicemail service have come to the fore too (via Chris). With 500,000 sold in the first weekend, analysis of all kinds continues apace but somehow it seems like a self–fulfilling prophecy. Across the pond in an iphone–less world I feel a bizarre absence of envy. Back in January the excitement of my first iphone post revolved around a full version Safari running on a mobile device with great interface features. In real terms though without WiFi the experience will be rubbish, and apparently is. Yes, it looks beautiful; yes, the interface is fantastic fun but an actual feature I might use like the camera is flashless and only 2 mega pixels. However, looks and interface can change the world — and already has — so I’m still going to bite the Apple to see how we can best develop for Safari with the pinch and slide touch controls. Just cross your fingers that Europe gets 3G speed to fly by, not another EDGE to trip on.

    So, it’s been a wet and busy few days. In the midst of the commercial mayhem, efficacious product launches and cow hair rain, there have been moments of pure blue–sky inspiration. Hans Rosling’s incredible, amusing and profound presentation on solving world poverty at TED2007 stands out. If there’s one video you take time to see this week, that is my best pick not just for the solutions but as an example of the value of data visualisation in bringing problems to life, literally.

    Share

  30. First Glimpse into The Tangerine

    In the last few weeks I’ve sorely neglected the development of this site. Sorry site. In mitigation I should say I’ve moved house (on the hottest day of the year so far no less) and been laid low by a virus.

    Today I’m juggling a few proposals and jumping a train to London for a late meeting around a new social media site we’re developing. To be followed by a little supper, time allowing. I’d tell you more about it but I want it to be a surprise. Suffice to say, we’re excited, British humour is coming to a domain near you.

    My youngest son managed to front flip himself out of his cot last night like a scene from the imagined movie, “Escape from Cotatraz”. He achieved this feat of gymnastics even while encapsulated in a baby bag. Unfortunately, apart from a hug from his dad, a carpet burn on his forehead was his only reward. Cot adjustment was called for and completed with a 5mm allen key. “Man work” as my wife would say.

    Today is shaping up as a good day. Perhaps I’ll feel differently when I get back home at midnight but in the meantime all is good with the world. May the same be said for yours!

    Share