Coding the UI: Lessons Learned from Orbitz and ebookers

AjaxWorld - October, 2008

Transcript

1. AJAX*World* October,'2008 Mark*Meeker* CODING THE UI: LEARNED FROM ORBITZ & EBOOKERS LESSONS
3. Dozens of apps, hundreds of VMs, thousands of services. UI
4. webapp (controller layer) JSP (page templating) JavaScript JSP 2.0 XHTML 1.0 CSS CSS 2.1
5. “As far as the customer is concerned, the interface is the product.” - Jef Raskin
6. “Browsers are the most hostile software development environments possible.” - Douglas Crockford
7. 1,971 Revisions to 1 .css file since Oct. 2006 2.9 edits per day (if working weekends)
8. 2007 - updates.orbitz.com 2008 - ebookers.com 2005 - CheapTickets.com 2006 - mobile.orbitz.com 2001 - Orbitz.com 2002 - OrbitzForBusiness.com
10. 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
11. “Good judgement is the result of experience … Experience is the result of bad judgement.” —Fred Brooks
12. Fresh start? http://flickr.com/photos/jeremybrooks/833157523/
13. Wishlist Internationalization Universality Maintain High Quality Code Promote Code Re-Use Consistent Experience http://flickr.com/photos/litandmore/2664900676/
14. Internationalization http://www.flickr.com/photos/nickjacksonza/256651959/
15. 6:50pm versus 18:50
16. 14/11/07 versus 11/14/07
17. miles versus kilometers
18. 3,000+ Labels, strings, paragraphs of text.
19. Traveler vs. Traveller vs. Passengers
20. 1,500+ Images
21. Images Remove text as much as possible Consider cultural differences in images choices
22. English
23. French
24. Japanese
25. Translation Small words can expand 200-300% Rule of thumb: 40% Watch for wrapping issues (or lack thereof) Consider during design comp stage
26. Universality
28. Follow Web Standards
29. 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
30. IE6 Support <!--[if IE 6]> <style type="text/css" media="all"> @import url(/style/layout/layoutIE6Fix.css); </style> <![endif]-->
31. Firefox 3, OSX
32. IE 5.2, OSX
35. Amazon Kindle
36. Progressive Enhancement Content is KING! Start with semantic markup Get working functionality with HTML only Enhance display with CSS Enhance behavior with JavaScript
37. Separation of Layers No in-line styles or in-line JavaScript If it only works with JavaScript, create it with JavaScript
38. Graded Browser Support http://developer.yahoo.com/yui/articles/gbs/ Varying levels of support Isn’t required to be identical Not all or nothing
39. 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
40. Maintain High Quality http://www.flickr.com/photos/harvypascua/46114061
41. High Quality Validation Build time tests (automated) static code analysis CSS validation JSP compile Constant developer vigilance Sometimes constraints are good
42. 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
45. Debug Tools Logging Runtime in-application debugging Expose data to testers Debug various types of modules Content Error message placement
46. File Structure Developer first Build for deploy later move files around combine them reformat them strip comments
47. CSS Files Split between multiple files Typography Color Layout Modules Nav Each declaration on its own line
48. Promote Re-Use (DRY) http://flickr.com/photos/kingdesmond/477389196
49. 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
50. Layout Header Footer Rail Body
51. Module
53. Page Definition header.jsp --> Header results.jsp --> Body sortbar.jsp --> Rail footer.jsp --> Footer
54. Page Composition Page Def B/E Magic Browser
56. 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
57. Consistent Experience http://www.flickr.com/photos/kiad/491754035/
58. 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
63. Consistent Experience Review the site for common patterns Introduce a Pattern Library Build common “controls”
64. Follow the 80/20 Rule
65. “Simple things should be simple and complex things should be possible.” —Alan Kay
66. 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
68. Hide/Reveal
69. Micro-content
70. 80/20 Rule Patterns: Hide Reveal Tabs Pattern Pulling in content via Ajax “Micro-content” bubbles
71. What’s Next? http://flickr.com/photos/reinvented/179863733/
72. Slides: http://markmeeker.com/events/ajaxworld2008 Email: mark@markmeeker.com Blog: http://markmeeker.com Orbitz Jobs: http://www.orbitz.com/startmycareer Questions?