All entries from September 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. 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

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

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

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

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

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