Weblogs: Web Standards

@Media 2006: Day 2

Sunday, 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.

In terms of page layout, Cederholm notes that percent based layouts are easier to deal with, and using minimum and maximum widths, easy and clean layouts are possible. He covers the concept of variable fix width layouts, promoted particularly by Simon Collison's websites, where JavaScript is used to determine the screen size, and a decision made, if there is space, of adding an extra column to the page.

Dom Scripting Panel

Cameron Adams (The Man in Blue) moderated a panel discussion about JavaScript library with Dan Webb, Peter-Paul Koch, Stuart Langridge and Simon Willison.

The issues discussed included what makes a good library (a sane API, suggested by Stuart). Joel Spolsky's Law of leaky abstractions made an appearance as one of the problem areas of JavaScript libraries.

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.

Simon talked about edge caching as a means of reducing page loads - common libraries being pulled from one location. Dojo is looking this way. Stuart points out this is good for Yahoo! (with their Akamai backbone), but not an option for one's own library. Minification - or the removal of extraneous characters from a JavaScript file got a mention. Mochakit has its own package manager.

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:

This is something we already know from our understanding of web standards. Internationalised sites rely on structural elements in a document. Proper encoding, lang and 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

Nate talked about three recent Yahoo! web releases - the home page, their picture web application and the long awaited Yahoo! Mail interface. He talked about some of the techniques used through the projects, including the use of CSS sprites, JavaScript optimisations like destructor functions, conserving the number of objects created, recycling iframes instead of creating new ones. The main problem was to keep memory usage down, and prevent the browser from crashing because of too many objects.

Also of interest, Nate talks about the being a limit on the number of events that can be attached to a number of objects. With web-based applications, hitting this limit means further functionality cannot be added, and the browser crashes. To work around this the Yahoo! JavaScript developers created their own Event model at a document level, thus cutting down on the exponential scale relationships between objects and the events they capture.

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.

Winding down

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.

How do we raise the quality of web accessibility conversation above the level of "blind people can't use computers, they can't see!", and "its about working on a mobile phone in Ethiopia", and "JavaScript is inaccessible because it doesn't work on Lynx". What have GAWDS done in the two years since it was publicly launched? Permathreads - unresolved, regurgitated, burdensome, and energy-sapping. Time to move on.

Other commentary

[ Weblog | Categories and feeds | 2011 | 2010 | 2009 | 2008 | 2007 | 2006 | 2005 | 2004 | 2003 | 2002 ]