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