Your SlideShare is downloading. ×
0
Coding the UI:
Lessons Learned from
ebookers and Orbitz


Mark Meeker                 AjaxWorld
Architect, UI Engineering ...
UI




Dozens of apps, hundreds of VMs,
     thousands of services.
CSS                        JavaScript

CSS 2.1



                   JSP
XHTML 1.0                             JSP 2.0
   ...
“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,971
Revisions to 1 .css file since Oct. 2006

2.9 edits per day (if working weekends)
2001 - Orbitz.com

2002 - OrbitzForBusiness.com



2005 - CheapTickets.com

2006 - mobile.orbitz.com




2007 - updates.or...
Experience
Single JSP files measuring in thousands of lines
Massive amounts of repeated markup
561 files with <html> tag
Min...
“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




 ...
Internationalization
                 http://www.flickr.com/photos/nickjacksonza/256651959/
6:50pm
versus
 18:50
14/11/07
 versus
11/14/07
miles
   versus
kilometers
3,000+
Labels, strings, paragraphs of text.
Traveler
    vs.
 Traveller
    vs.
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 du...
Universality
Follow Web Standards
Follow Web Standards
P.O.S.H.
  plain old semantic HTML
Constant balancing act
Reduces display defects
  Reset Styles
Vali...
IE6 Support


 <!--[if IE 6]>
 <style type=quot;text/cssquot; media=quot;allquot;>
          @import url(/style/layout/lay...
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 d...
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 identic...
Graded Browser Support
A-Grade
  White-list (well-known, measurable market share)
  Tested by QA Team
C-Grade
  Blacklist ...
Maintain High Quality
                  http://www.flickr.com/photos/harvypascua/46114061
High Quality
 Validation
 Build time tests (automated)
   static code analysis
   CSS validation
   JSP compile
 Constant ...
Constraints
Custom tags for some HTML elements
  anchors, images, form elements
Only allow subset of attributes
  no: oncl...
Debug Tools
Logging
Runtime in-application debugging
  Expose data to testers
  Debug various types of modules
  Content
 ...
File Structure
 Developer first
 Build for deploy later
   move files around
   combine them
   reformat them
   strip comme...
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
...
Layout

                Header



         Rail       Body



                Footer
Module
Page Definition
header.jsp --> Header

results.jsp --> Body

sortbar.jsp --> Rail

footer.jsp --> Footer
Page Composition


             B/E    Page
  Browser            Def
            Magic
DRY
Avoid targeting IDs for CSS or JS
Custom attribute for JavaScript Data
Separation of Layers
Helper code for small “con...
Consistent Experience
                 http://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 on...
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...
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/
Questions?
Slides:
    http://markmeeker.com/events/ajaxworld2008
Email:
  mark@markmeeker.com
Blog:
   http://markmeeker....
Coding Ui
Coding Ui
Coding Ui
Coding Ui
Coding Ui
Coding Ui
Coding Ui
Coding Ui
Coding Ui
Coding Ui
Coding Ui
Coding Ui
Coding Ui
Coding Ui
Upcoming SlideShare
Loading in...5
×

Coding Ui

591

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
591
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Coding Ui"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×