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
55

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
63
Modern Browser Support
Avatar for Mark Meeker meeker
0
77
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
81
Merging Ajax and Accessibility
Avatar for Mark Meeker meeker
0
44

Other Decks in Technology

See All in Technology
オブザーバビリティと育てた ID管理・認証認可基盤の歩み / The Journey of an ID Management, Authentication, and Authorization Platform Nurtured with Observability
Avatar for 株式会社カミナシ kaminashi
1
1k
AI-Readyを目指した非構造化データのメダリオンアーキテクチャ
Avatar for R-Miura r_miura
1
340
SRE × マネジメントレイヤーが挑戦した組織・会社のオブザーバビリティ改革 ― ビジネス価値と信頼性を両立するリアルな挑戦
Avatar for coconala_engineer coconala_engineer
0
280
スタートアップの現場で実践しているテストマネジメント #jasst_kyushu
Avatar for Makky makky_tyuyan
0
140
Okta Identity Governanceで実現する最小権限の原則 / Implementing the Principle of Least Privilege with Okta Identity Governance
Avatar for Tatsumi Nishikawa tatsumin39
0
180
知覚とデザイン
Avatar for Rinchoku rinchoku
1
610
現場の壁を乗り越えて、 「計装注入」が拓く オブザーバビリティ / Beyond the Field Barriers: Instrumentation Injection and the Future of Observability
Avatar for Kento Kimura aoto
PRO
1
650
OPENLOGI Company Profile for engineer
Avatar for OPENLOGI hr01
1
45k
生成AI時代のPythonセキュリティとガバナンス
Avatar for abenben abenben
0
140
ヘンリー会社紹介資料（エンジニア向け） / company deck for engineer
Avatar for Henry, Inc. henryofficial
0
400
AI時代、“平均値”ではいられない
Avatar for uhyo uhyo
8
2.6k
組織全員で向き合うAI Readyなデータ利活用
Avatar for harry gappy50
4
1.3k

Featured

See All Featured
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
57
5.9k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
8.9k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
190
11k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
1.7k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
75
5.1k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
791
250k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
116
20k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.2k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
36
7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
34
2.3k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.5k

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?