AjaxWorld session: Mark Meeker
Coding the UI: Lessons from ebookers and Orbitz
Experiences from re-engineering of Ebookers.com and Orbitz.com. Change rate: 1971 changes to one particular CSS file in svn. Team of 20 developers; fast moving site. Have to keep up with changes in browsers, etc. Ebookers Europe – 22 different localizations.
Old site: large amounts of JavaScript, 560 files with html tag. Record: 66 tables on one page (with no tabulator data). Redesign goals: i18n, universality, maintain high quality code, re-use, consistent user experience.
I18n: differences in times, dates, distances. 3000+ text items that need localization. Even when English is on the site, there are still differences in choice of words. Small words can expand up to 500% in some languages. Rule of thumb: allow for 40% growth from English. Watch for text wrapping issues – affects the page design. E.g: put labels above edit controls, not to the side.
Universality: want to not care about OS, browser or device. Following web standards really paid off. POSH (plain old semantic html). Use reset stylesheets to smooth some diffs between browsers. Validate CSS on check-in.
Progressive content: content is key. Get semantic HTML working. Then use CSS and/or JavaScript to improve appearance. Graded browser support: not everyone gets the same experience, not all or nothing. A-grade: white list, tested by QA; C-grade: blacklist; X-grade: everything else, wait for complaints before fixing.
Quality: automated testing. Static analysis. Constraints on code: e.g. ban some constructs, require some others (e.g. labels on all input fields). Logging: use blackbird JS. (www.gscottolson.com). Separate developer convenience – file structure, comments, etc, from deployment issues (repackage the files, strip the comments).
Modularity: standardised templating/module system. Avoid using ID’s in CSS.
Consistent experience. Keep no of. interaction patterns to a minimum. Use the ones that work best everywhere. Lightbox to factor out common dialogs. Consistent error message placement. Review site and introduce a pattern library. Build shared controls for common patterns.
Slides: available.