Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Coding the UI: Lessons Learned from Orbitz and ...

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Mark Meeker Mark Meeker
October 08, 2008
Technology
0
56

Coding the UI: Lessons Learned from Orbitz and ebookers

AjaxWorld - October, 2008

Avatar for Mark Meeker

Mark Meeker

October 08, 2008
Tweet

More Decks by Mark Meeker

See All by Mark Meeker
Building a Mobile Device Lab
Avatar for Mark Meeker meeker
0
140
Building a Live Style Guide
Avatar for Mark Meeker meeker
1
80
Front-End Operations
Avatar for Mark Meeker meeker
2
130
Simplifying Massive Changes with a Live Style Guide
Avatar for Mark Meeker meeker
0
64
Modern Browser Support
Avatar for Mark Meeker meeker
0
78
Strategies for Accessibility
Avatar for Mark Meeker meeker
0
50
Real World Web Development
Avatar for Mark Meeker meeker
0
160
Open & Acccessible
Avatar for Mark Meeker meeker
0
88
Merging Ajax and Accessibility
Avatar for Mark Meeker meeker
0
46

Other Decks in Technology

See All in Technology
【Ubie】AIを活用した広告アセット「爆速」生成事例 | AI_Ops_Community_Vol.2
Avatar for Yoshiki yoshiki_0316
1
110
AIと新時代を切り拓く。これからのSREとメルカリIBISの挑戦
Avatar for ktykogm 0gm
2
3k
Oracle AI Database 移行・アップグレード勉強会 - RAT活用編
Avatar for oracle4engineer oracle4engineer
PRO
0
110
登壇駆動学習のすすめ — CfPのネタの見つけ方と書くときに意識していること
Avatar for おおいし bicstone
3
130
Agile Leadership Summit Keynote 2026
Avatar for seki at druby.org m_seki
1
660
日本の85%が使う公共SaaSは、どう育ったのか
Avatar for たけだ taketakekaho
1
240
配列に見る bash と zsh の違い
Avatar for kazzpapa3 kazzpapa3
3
160
Ruby版 JSXのRuxが気になる
Avatar for SansanTech sansantech
PRO
0
160
20260208_第66回 コンピュータビジョン勉強会
Avatar for KeiichiIto1978 keiichiito1978
0
190
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
10k
Greatest Disaster Hits in Web Performance
Avatar for Estela Franco guaca
0
280
OCI Database Management サービス詳細
Avatar for oracle4engineer oracle4engineer
PRO
1
7.4k

Featured

See All Featured
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
2.9k
How to make the Groovebox
Avatar for あそなす asonas
2
1.9k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Scaling GitHub
Avatar for Zach Holman holman
464
140k
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
120
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
67
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
0
230
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
5.8k
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
1
130
Docker and Python
Avatar for Tania Allard trallard
47
3.7k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
110

Transcript

  1. AJAX*World* October,'2008 Mark*Meeker* CODING THE UI: LEARNED FROM ORBITZ &

    EBOOKERS LESSONS
  2. None

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

  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

  27. None

  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

  33. None
  34. None

  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
  43. None
  44. None

  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

  52. None

  53. Page Definition header.jsp --> Header results.jsp --> Body sortbar.jsp -->

    Rail footer.jsp --> Footer

  54. Page Composition Page Def B/E Magic Browser

  55. None

  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
  59. None
  60. None
  61. None
  62. None

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

  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: [email protected] Blog: http://markmeeker.com Orbitz Jobs: http://www.orbitz.com/startmycareer Questions?