@Media 2006: Day 2Sunday, June 25, 2006
Bulletproof Dan Cederholm
Dan Cederholm's presentation was a good talk about bulletproofing web designs. He describes his Dig-Dug test (part of the 10 second usability test), which involves blowing up the font sizes substantially to see if effects do not break easily.
He talked about self-clearing floats (which uses CSS generated content) as a clean method of handling float based layouts. The sliding-doors technique - a Cederholm invention for list navigation tables - makes a presence as a means of adding curved corners to other markup containers.
Dom Scripting Panel
The size of libraries is a concern, particularly in the area of dependency management. For instance Dean Edwards noted that a drag and drop script he needed when using the Yahoo! library came to about 250Kb, but a different library only came to 5 or 6Kb.
On the question of favourite functions, Dan Web expressed a preference for foreach and map functions - useful utilities for dealing with lists and arrays. Stuart liked the E4X utilities for dealing with XML, and Simon - in geek form - pointed to hitch, which is a function used for binding.
In terms of what makes a good library, Dan's preference is for a low-level library containing functions for Events, dealing with lists of objects, attaching behaviour - perhaps using a CSS like query. JQuery is seen as meeting those sorts of requirements - allowing users to select nodes and do stuff with them (but Dan hasn't decided on a suitable library yet). PPK's preference is for small libraries, choose your own components to keep the file size as small as possible. Stuart retorts that would only work if you are PPK, and describes his ideal library as one that does everything he wants, how he wants it done, and in 5Kb (but in work he uses the Yahoo! library, and suggests that Ajax applications benefit from using an existing library). Simon makes the point that documentation around libraries is spotty - and talks about the Yahoo! patterns library, which contains many usability patterns including a pattern for "something has changed on the page".
Molly the International superhero
Of all the presentations of this year's @media, this is the one I really wanted to see. Being UK-based and working for a UK-based company with no international markets limits the chances of getting to grips with Internationalisation. Molly's talk would be the first time I opened up to the concept that's been backstage for a long time.
Much closer now, I'm taking a career step upwards to an organisation where internationalisation is a fundamental building block and one that needs to be taken seriously. So its gone from being a passing interest into a requirement within the last three months.
What is internationalisation and localisation?
Safe to say Molly's talk was awesome. Starting from a finding that people prefer to be addressed in their own language, and with that confidence factor comes a 3 times improvement in sales, and reduced customer services, its obvious there is a compelling business case for web sites aimed for international audiences.
Internationalisation and localisation are two parts of the same solution. Internationalisation is the framework that enables easy localisation. It is the feature that makes multiple localisations possible (localisations isn't just language, its date formats, currencies, personal names and forms of address, keyboard usage, its number formats and systems. Its also about colours and iconography. In each culture, the same icon or colour means different things.
For instance, an upwards pointing triangle - fresh from the Da Vinci Code has meanings as a male symbol - there are different, and sometimes opposite meanings implied by the use of this icon.
Adapting content for locale
Localisation is the adaption of a site to meet the requirements of a specific market (or locale). The key is an understanding the culture you are addressing. What's cool about localisation is that it presents us with an opportunity to learn about the world. Localisation is sometimes seen as a synonym for translation, but that is too limited a definition. Even translation isn't an easy task: the Web Content Accessibility Guidelines uses the word technology, and in German the same word has a more abstract meaning, and that makes the sentence confusing to German speakers. Using the word technique would be a clearer path.
Belgium is a classic example of the need for multiple localisations - multiple languages need to be handled equally, yet Content Management Systems don't do this - they are built with the concept of one page is in one locale, thus failing to handle multiple languages on the same page (as perhaps a chain of discussion in various languages). This highlights the need for internationalisation to be handled in the design stage, since retroactively building it in contains this major failing.
Internationalisation best practices
The best practices of Internationalisation involve:
- the use of structural and semantic markup
- separation of presentation using CSS
This is something we already know from our understanding of web standards. Internationalised sites rely on structural elements in a document. Proper encoding,
xml:lang attributes are keys as well as the flexibility to manage monolingual as well as multilingual documents (Spanglish is an example of multilingual - a language used by the multicultural community around Tucson, Arizona. Its not a language in its own right - as having its own language code - but as a language formed by the merging of English and Spanish).
The barrier of presentational markup
Presentational HTML can wreak havoc. Italicised text results in a presentational result. Ideographic text - like Japanese - don't use italics for emphasis, so any meaning associated with the use of italics is lost. Japanese uses a pair of dots to emphasis certain characters (called wakiten).
More best practices include using meaningful names for classes and ids (for example microformats). Presentation will change from locale to locale, and choosing a name based on function is a safer option since the function is unlikely to change based on locale.
Yahoo!'s Nate Koechley
The Malarkey of CSS Design
Andy Clarke blew the audience away with his presentation on the Fine Art of Web Design. What started off as a rant about CSS designs being uninspired and dull fed into new areas, thoughts and inspiration. Andy's premise is that CSS designs these days are not innovative. He showed a number of CSS reboot designs side by side, and they looked samey. Dark backgrounds, sidebar navigation, and asks the question if this is really all that CSS and CSS designers are capable of.
Using a series of photographs - one was a picture of marathon runners - we sampled Andy's keen eye for structure. There's an ordered list, or perhaps a definition list. It impressed that great design, or beautiful design, also has a beautiful structure.
The grid is a standard way of designers thinking about layout. Andy asks if a left navigation and sidebar is the pinnacle of CSS designs. And in the path he leads we see more and more original layouts founded on the well established grid systems. Designers can come up with original layouts, once they get themselves out of the left-sidebar frame of mind.
Andy produced a slide from his scrapbook of design ideas or pictures taken from print - showing particularly beautiful lists can be styled (for example the stages of a recipe). I loved Andy's tour of newspaper layouts, it shows that even though we understand the typical layout of newspapers, we sometimes miss the inner beauty of its structure. Particularly the layout of a Japanese paper is quite at odds with how the Western World lays out a newspaper.
And Andy has a book on the way - Transcending CSS: The Fine Art of Web Design.
Feathers was just jammed pack, so the Accessifyforum crew, the accessibility gurus. and the Dom Scripters decided to head towards the alternative venue a block further away. Caught up with Bruce Lawson eventually. Dotjay, Gez and I decided to hunt for something to eat at seven, and headed towards a number of restaurants in Westminster that were either closed or charged a small fortune. We crossed paths with Rob Whiting, and eventually ended up in the Archduke just next to Waterloo station where grilled chicken sandwiches were quickly devoured.
Had a great conversation with Jon and Gez about where web accessibility was heading and the problems that still needed to be tackled. Talked around and eventually into a subject that's been a concern of mine for about a year - of the misselling of web accessibility as something to do with mobile phones and Lynx.
Talking through the issues with Gez and Jon highlighted that I needed to get out of the accessibility rut I was in, the online conversations about web accessibility are still of low quality, and its making it harder to push the envelope and actually bring about improvements.
- Andy Clarke: Done @nd dusted
- RNIB Web Access Centre: @Media Day 2: Internationalisation: Awakening the sleeping Giant - Molly Holzschlag
- RNIB Web Access Centre: @media Day 2 - Dan Cederholm
- Eat Your Greens: Impressions of @media 2006