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

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

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
90
Merging Ajax and Accessibility
Avatar for Mark Meeker meeker
0
46

Other Decks in Technology

See All in Technology
Startups on Rails: 2026 at RubyConf Thailand
Avatar for Irina Nazarova irinanazarova
0
120
Claude Codeが爆速進化してプラグイン追従がつらいので半自動化した話 ver.2
Avatar for ryu rfdnxbro
0
170
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
Avatar for Sansan, Inc. sansan33
PRO
0
3k
製造業ドメインにおける LLMプロダクト構築： 複雑な文脈へのアプローチ
Avatar for recruiting@caddi.jp caddi_eng
1
460
Claude Codeの進化と各機能の活かし方
Avatar for Oikon oikon48
12
4.6k
Introduction to Sansan for Engineers / エンジニア向け会社紹介
Avatar for Sansan, Inc. sansan33
PRO
6
72k
研究開発部メンバーの働き⽅ / Sansan R&D Profile
Avatar for Sansan, Inc. sansan33
PRO
4
22k
Databricksアシスタントが自分で考えて動く時代に! エージェントモード体験もくもく会
Avatar for Takaaki Yayoi taka_aki
0
330
All About Sansan – for New Global Engineers
Avatar for Sansan, Inc. sansan33
PRO
1
1.4k
どこで打鍵するのが良い？ IaCの実行基盤選定について
Avatar for NRI Netcom nrinetcom
PRO
2
170
us-east-1 に障害が起きた時に、 ap-northeast-1 にどんな影響があるか 説明できるようになろう！
Avatar for Kazuki Miura miu_crescent
PRO
3
1.1k
Windows ネットワークを再確認する
Avatar for Murachi Akira murachiakira
PRO
0
280

Featured

See All Featured
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
68
Abbi's Birthday
Avatar for Violet Bock coloredviolet
2
5.1k
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
2.4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
22k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.6k
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
230
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
66k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.4k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
14k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
61k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
66k

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?