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

Other Decks in Technology

See All in Technology
AI Agent Agentic Workflow の可観測性 / Observability of AI Agent Agentic Workflow
Avatar for yuzujoe yuzujoe
1
1.1k
わが10年の叡智をぶつけたカオスなクラウドインフラが、なくなるということ。
Avatar for Hisashi SOGA sogaoh
PRO
1
560
1万人を変え日本を変える!!多層構造型ふりかえりの大規模組織変革 / 20260108 Kazuki Mori
Avatar for SHIFT EVOLVE shift_evolve
PRO
6
1.4k
Qiita Bash アドカレ LT #1
Avatar for Kaoru okaru
0
190
AI Agent Standards and Protocols: a Walkthrough of MCP, A2A, and more...
Avatar for Guillaume Laforge glaforge
0
280
ファインディにおけるフロントエンド技術選定の歴史
Avatar for puku0x puku0x
2
1.5k
製造業から学んだ「本質を守り現場に合わせるアジャイル実践」
Avatar for yaskamito kamitokusari
0
640
Sansan Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
3.6k
AIと融ける人間の冒険
Avatar for pujisi pujisi
0
120
会社紹介資料 / Sansan Company Profile
Avatar for Sansan, Inc. sansan33
PRO
11
390k
SES向け、生成AI時代におけるエンジニアリングとセキュリティ
Avatar for LongbowXXX longbowxxx
0
320
AI との良い付き合い方を僕らは誰も知らない (WSS 2026 静岡版)
Avatar for Asei Sugiyama asei
1
310

Featured

See All Featured
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
55k
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
780
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.1k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
44
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
4.5k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.1k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.2k
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
410
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k

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?