coding ui
TRANSCRIPT
Coding the UI:Lessons Learned from ebookers and Orbitz
Mark MeekerArchitect, UI Engineering Orbitz Worldwide
AjaxWorld San Jose, CaliforniaOctober 21, 2008
Dozens of apps, hundreds of VMs, thousands of services.
UI
webapp(controller layer)
JSP(page templating)
JavaScript
JSP 2.0XHTML 1.0
CSS
CSS 2.1
“As far as the customer is concerned, the interface is
the product.”
- Jef Raskin
“Browsers are the most hostile software development
environments possible.”
- Douglas Crockford
1,971Revisions to 1 .css file since Oct. 2006
2.9 edits per day (if working weekends)
2007 - updates.orbitz.com
2008 - ebookers.com
2005 - CheapTickets.com
2006 - mobile.orbitz.com
2001 - Orbitz.com
2002 - OrbitzForBusiness.com
Single JSP files measuring in thousands of lines
Massive amounts of repeated markup
561 files with <html> tag
Minimal re-use
66 tables on one page
Experience
“Good judgement is the result of experience … Experience is the result of bad judgement.”
—Fred Brooks
Fresh start?http://flickr.com/photos/jeremybrooks/833157523/
Wishlist
Internationalization
Universality
Maintain High Quality Code
Promote Code Re-Use
Consistent Experience
http://flickr.com/photos/litandmore/2664900676/
Internationalizationhttp://www.flickr.com/photos/nickjacksonza/256651959/
6:50pm versus18:50
14/11/07versus
11/14/07
milesversus
kilometers
3,000+Labels, strings, paragraphs of text.
Travelervs.
Travellervs.
Passengers
1,500+Images
Images
Remove text as much as possible
Consider cultural differences in images choices
English
French
Japanese
Translation
Small words can expand 200-300%
Rule of thumb: 40%
Watch for wrapping issues (or lack thereof)
Consider during design comp stage
Universality
Follow Web Standards
Follow Web Standards
P.O.S.H.
plain old semantic HTML
Constant balancing act
Reduces display defects
Reset Styles
Validate CSS
Reminder that it is an evolving code base
IE6 Support
<!--[if IE 6]><style type="text/css" media="all"> @import url(/style/layout/layoutIE6Fix.css);</style><![endif]-->
Firefox 3, OSX
IE 5.2, OSX
Amazon Kindle
Progressive Enhancement
Content is KING!
Start with semantic markup
Get working functionality with HTML only
Enhance display with CSS
Enhance behavior with JavaScript
Separation of Layers
No in-line styles or in-line JavaScript
If it only works with JavaScript, create it with JavaScript
Graded Browser Support
http://developer.yahoo.com/yui/articles/gbs/
Varying levels of support
Isn’t required to be identical
Not all or nothing
Graded Browser Support
A-Grade
White-list (well-known, measurable market share)
Tested by QA Team
C-Grade
Blacklist (incapable browsers, call drivers)
X-Grade
Everyone else
Maintain High Qualityhttp://www.flickr.com/photos/harvypascua/46114061
High Quality
Validation
Build time tests (automated)
static code analysis
CSS validation
JSP compile
Constant developer vigilance
Sometimes constraints are good
Constraints
Custom tags for some HTML elements
anchors, images, form elements
Only allow subset of attributes
no: onclick, id
required: various content
Able to enforce all inputs have labels
Free CSS and JS support
Free shared functionality
Debug Tools
Logging
Runtime in-application debugging
Expose data to testers
Debug various types of modules
Content
Error message placement
File Structure
Developer first
Build for deploy later
move files around
combine them
reformat them
strip comments
CSS Files
Split between multiple files
Typography
Color
Layout
Modules
Nav
Each declaration on its own line
Promote Re-Use (DRY)http://flickr.com/photos/kingdesmond/477389196
Composite View
Separates “layout” of page from content
Allows to plug in different modules into page
Used in Apache Tiles
Leverage in-house framework
Try and gain as much re-use of JSP code
Layout
Header
Footer
Rail Body
Module
Page Definition
header.jsp --> Header
results.jsp --> Body
sortbar.jsp --> Rail
footer.jsp --> Footer
Page Composition
PageDef
B/EMagic
Browser
DRY
Avoid targeting IDs for CSS or JS
Custom attribute for JavaScript Data
Separation of Layers
Helper code for small “controls”
with the CSS to go with them
Take advantage of lazy developers
Consistent Experiencehttp://www.flickr.com/photos/kiad/491754035/
Consistent Experience
Make learning how to use the site easier for users.
Reduce the number of patterns.
Stick with the ones that work best.
Meet users expectations on...
messaging
error placements
interfaces
Consistent Experience
Review the site for common patterns
Introduce a Pattern Library
Build common “controls”
Follow the 80/20 Rule
“Simple things should be simple and
complex things should be possible.”
—Alan Kay
80/20 Rule
Make it easy to do the the common task for 80% of your users
Make it possible to do everything for the other 20% that need to
Hide/Reveal
Micro-content
80/20 Rule
Patterns:
Hide Reveal
Tabs Pattern
Pulling in content via Ajax
“Micro-content” bubbles
What’s Next?http://flickr.com/photos/reinvented/179863733/
Slides: http://markmeeker.com/events/ajaxworld2008
Email: [email protected]
Blog: http://markmeeker.com
Orbitz Jobs: http://www.orbitz.com/startmycareer
Questions?