Implementing a Scalable Mobile Strategy

1,876 views

Published on

Talk about creating and scaling your Web strategy by keeping development reasonable, building and designing once, and properly communicating on your team

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,876
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
19
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Implementing a Scalable Mobile Strategy

  1. 1. Tim Wright, @csskarmaWednesday, August 31, 2011
  2. 2. About me. • BU  App  Dev • CSSkarma • Smashing  Magazine  &  SitePointWednesday, August 31, 2011
  3. 3. What we’ll talk about • IE  6/7 • Guiding  principles • Proper  detection • PerformanceWednesday, August 31, 2011
  4. 4. The Goal. scale  your  mobile  strategy.Wednesday, August 31, 2011
  5. 5. The Goal. Web scale  your  mobile  strategy.Wednesday, August 31, 2011
  6. 6. Let’s step back.Wednesday, August 31, 2011
  7. 7. Let’s step back. Why  do  we  hate  IE  6/7?Wednesday, August 31, 2011
  8. 8. Let’s step back. body  {   color:  red;  /*  normal  */   color:  green9;  /*  IE8  and  below  */   *color:  yellow;  /*  IE7  and  below  */   _color:  orange;  /*  IE6  */ }Wednesday, August 31, 2011
  9. 9. Let’s step back. <!-­‐-­‐[if  IE]> <link  href="ie.css"  rel="stylesheet"  media="all"> <![endif]-­‐-­‐> <!-­‐-­‐[if  lte  IE  7]> <link  href="ie7.css"  rel="stylesheet"  media="all"> <![endif]-­‐-­‐> <!-­‐-­‐[if  lt  IE  7]> <link  href="ie6.css"  rel="stylesheet"  media="all"> <![endif]-­‐-­‐>Wednesday, August 31, 2011
  10. 10. Let’s step back. <!-­‐-­‐[if  lt  IE  7  ]>  <body  class="ie6">  <![endif]-­‐-­‐> <!-­‐-­‐[if  IE  7  ]>  <body  class="ie7">  <![endif]-­‐-­‐> <!-­‐-­‐[if  IE  8  ]>  <body  class="ie8">  <![endif]-­‐-­‐> <!-­‐-­‐[if  (gte  IE  9)|!(IE)]><!-­‐-­‐>  <body>  <!-­‐-­‐<![endif]-­‐-­‐>Wednesday, August 31, 2011
  11. 11. Let’s step back. For  IE. HTML body  element CSS hacks/conditionals JS detectionWednesday, August 31, 2011
  12. 12. Let’s step back. We’re  doing  it  for  mobile  too...Wednesday, August 31, 2011
  13. 13. Let’s step back. example.com m.example.comWednesday, August 31, 2011
  14. 14. Let’s step back. device  list HTML mobile  HTML switching CSS mobile  CSS mechanism JS mobile  JSWednesday, August 31, 2011
  15. 15. Let’s step back. c’mon,  really?Wednesday, August 31, 2011
  16. 16. Guiding principles.Wednesday, August 31, 2011
  17. 17. Guiding principles. 1 4 2 3Wednesday, August 31, 2011
  18. 18. Guiding principles. 1 More  stuff  is  harder   to  manage. 4 2 3Wednesday, August 31, 2011
  19. 19. Guiding principles. 1 More  stuff  is  harder   to  manage. 4 2 Build  it  once,  build it  right 3Wednesday, August 31, 2011
  20. 20. Guiding principles. 1 More  stuff  is  harder   to  manage. 4 2 Build  it  once,  build it  right 3 Think  &  CommunicateWednesday, August 31, 2011
  21. 21. Guiding principles. 1 More  stuff  is  harder   to  manage 4 Talk  about success 2 Build  it  once,  build it  right 3 Think  &  CommunicateWednesday, August 31, 2011
  22. 22. 1 More  stuff  is  harder   to  manageWednesday, August 31, 2011
  23. 23. 1 More  stuff  is  harder   to  manageWednesday, August 31, 2011
  24. 24. 1 More  stuff  is  harder   to  manageWednesday, August 31, 2011
  25. 25. 1 More  stuff  is  harder   to  manage.Wednesday, August 31, 2011
  26. 26. 1 More  stuff  is  harder   to  manage.Wednesday, August 31, 2011
  27. 27. 1 More  stuff  is  harder   to  manage.Wednesday, August 31, 2011
  28. 28. 1 More  stuff  is  harder   to  manage.Wednesday, August 31, 2011
  29. 29. 1 More  stuff  is  harder   to  manage.Wednesday, August 31, 2011
  30. 30. 1 More  stuff  is  harder   to  manage.Wednesday, August 31, 2011
  31. 31. 1 More  stuff  is  harder   to  manage.Wednesday, August 31, 2011
  32. 32. 1 More  stuff  is  harder   to  manage. think it. Don’t overWednesday, August 31, 2011
  33. 33. 1 More  stuff  is  harder   to  manageWednesday, August 31, 2011
  34. 34. 1 XX More  stuff  is  harder   to  manage.Wednesday, August 31, 2011
  35. 35. 1 XX More  stuff  is  harder   to  manage. X X XX X XXWednesday, August 31, 2011
  36. 36. 1 XX More  stuff  is  harder   to  manage. X X XX X XXWednesday, August 31, 2011
  37. 37. 1 More  stuff  is  harder   to  manage.Wednesday, August 31, 2011
  38. 38. 1 More  stuff  is  harder   to  manage. Policy  for  targe.ng  mobile  users Good  performance -­‐  cut  down  h2p  requests -­‐  op5mize  JS  &  CSS Quick  access  to  informa5onWednesday, August 31, 2011
  39. 39. 1 More  stuff  is  harder   to  manage.Wednesday, August 31, 2011
  40. 40. 1 More  stuff  is  harder   to  manage.Wednesday, August 31, 2011
  41. 41. 1 More  stuff  is  harder   to  manage. Policy  for  targe.ng  mobile  users Good  performance -­‐  cut  down  h2p  requests -­‐  op5mize  JS  &  CSS Quick  access  to  informa5onWednesday, August 31, 2011
  42. 42. 1 More  stuff  is  harder   to  manage. all Policy  for  targe.ng  mobile  users Good  performance -­‐  cut  down  h2p  requests -­‐  op5mize  JS  &  CSS Quick  access  to  informa5onWednesday, August 31, 2011
  43. 43. 1 XX More  stuff  is  harder   to  manage. X X XX X XXWednesday, August 31, 2011
  44. 44. 1 More  stuff  is  harder   to  manage.Wednesday, August 31, 2011
  45. 45. 1 More  stuff  is  harder   to  manage.Wednesday, August 31, 2011
  46. 46. 1 More  stuff  is  harder   to  manage.Wednesday, August 31, 2011
  47. 47. 1 More  stuff  is  harder   to  manage.Wednesday, August 31, 2011
  48. 48. 1 More  stuff  is  harder   to  manage. this  is  fun!Wednesday, August 31, 2011
  49. 49. 1 More  stuff  is  harder   to  manage. this  is  kinda  sucks :-­‐( fake  happinessWednesday, August 31, 2011
  50. 50. 1 More  stuff  is  harder   to  manage. Solution?Wednesday, August 31, 2011
  51. 51. 1 More  stuff  is  harder   to  manage. Solution?  have  less  stuff.Wednesday, August 31, 2011
  52. 52. 2 Build  it  once,  build  it right.Wednesday, August 31, 2011
  53. 53. 2 Build  it  once,  build  it right. structural  layerWednesday, August 31, 2011
  54. 54. 2 Build  it  once,  build  it right. presentation  layerWednesday, August 31, 2011
  55. 55. 2 Build  it  once,  build  it right. behavior  layerWednesday, August 31, 2011
  56. 56. 2 Build  it  once,  build  it right. progressive enhancement, again?Wednesday, August 31, 2011
  57. 57. 2 Build  it  once,  build  it right. What  are  we  really  doing  here?Wednesday, August 31, 2011
  58. 58. 2 Build  it  once,  build  it right. vs.Wednesday, August 31, 2011
  59. 59. 2 Build  it  once,  build  it right. Changing  the  design?Wednesday, August 31, 2011
  60. 60. 2 Build  it  once,  build  it right. Changing  the  design? CSS media  queries.Wednesday, August 31, 2011
  61. 61. 2 Build  it  once,  build  it right. Changing  the  interaction?Wednesday, August 31, 2011
  62. 62. 2 Build  it  once,  build  it right. Changing  the  interaction? JS feature  detec5onWednesday, August 31, 2011
  63. 63. 2 Build  it  once,  build  it right. A  combina5on  of  media queries  &   JS feature detectionWednesday, August 31, 2011
  64. 64. 2 Build  it  once,  build  it right. modernizr. script  loaders. native  detectionWednesday, August 31, 2011
  65. 65. 2 Build  it  once,  build  it right. What  about  performance?Wednesday, August 31, 2011
  66. 66. 2 Build  it  once,  build  it right. Performance always matters.Wednesday, August 31, 2011
  67. 67. 2 Build  it  once,  build  it right. be2er  communica5on  =  be2er   performanceWednesday, August 31, 2011
  68. 68. 3 Think  &  CommunicateWednesday, August 31, 2011
  69. 69. 3 Think  &  CommunicateDon’t  solve  back-end  problems   with  JavaScriptWednesday, August 31, 2011
  70. 70. 3 Think  &  Communicate 10  jQuery  plugins  in  a  cms  does   not  necessitate  a  Web  strategyWednesday, August 31, 2011
  71. 71. 3 Think  &  Communicate slideshows.Wednesday, August 31, 2011
  72. 72. 3 Think  &  Communicate alumni.usc.eduWednesday, August 31, 2011
  73. 73. 3 Think  &  CommunicateWednesday, August 31, 2011
  74. 74. 3 Think  &  Communicate well,  there’s  your  problemWednesday, August 31, 2011
  75. 75. 3 Think  &  Communicate data  (images) server-­‐side fallback ajax  call only  display  what  you  needWednesday, August 31, 2011
  76. 76. 3 Think  &  CommunicateDon’t  solve  front-end  problems   with  PHPWednesday, August 31, 2011
  77. 77. 3 Think  &  Communicate detection.Wednesday, August 31, 2011
  78. 78. 3 Think  &  Communicate user agent  detectionWednesday, August 31, 2011
  79. 79. 3 Think  &  Communicate feature  detectionWednesday, August 31, 2011
  80. 80. 3 Think  &  Communicate Ask  yourself  some questions...Wednesday, August 31, 2011
  81. 81. 3 Think  &  Communicate What  is  mobile  about  this  site?Wednesday, August 31, 2011
  82. 82. 3 Think  &  Communicate vs.Wednesday, August 31, 2011
  83. 83. 3 Think  &  Communicate Why  would  I  remove  content?Wednesday, August 31, 2011
  84. 84. 3 XX More  stuff  is  harder   to  manage. X X XX X XXWednesday, August 31, 2011
  85. 85. 3 Think  &  Communicate Nobody  wants  to  look  at  useless   content.Wednesday, August 31, 2011
  86. 86. 3 Think  &  CommunicateWhy  is  this  performing  poorly?Wednesday, August 31, 2011
  87. 87. 3 Think  &  Communicate plugins. jQuery  loops. http  requests.Wednesday, August 31, 2011
  88. 88. 3 Think  &  Communicate solution?Wednesday, August 31, 2011
  89. 89. 3 Think  &  Communicate solution?  talk  to  people.Wednesday, August 31, 2011
  90. 90. 4 Talk  about  your successWednesday, August 31, 2011
  91. 91. 4 Talk  about  your success ...  educate  about your  failures.Wednesday, August 31, 2011
  92. 92. 4 Talk  about  your   successWednesday, August 31, 2011
  93. 93. 4Bestbout  your   Talk  a Web site of success mobile 2011 by edustyle.netWednesday, August 31, 2011
  94. 94. 4Bestbout  your   Talk  a Web site of success mobile 2011 by edustyle.netWednesday, August 31, 2011
  95. 95. 4 Talk  about  your   success Best mobile Web site of 2011 by edustyle.netWednesday, August 31, 2011
  96. 96. 4 Talk  about  your success m. vs. /m detection (presto engine) switching mechanism cookies? double design double developmentWednesday, August 31, 2011
  97. 97. What we talked about • IE  6/7 • Guiding  principles • Feature  detection • PerformanceWednesday, August 31, 2011
  98. 98. Hang  some  ?’s on  the  strategyWednesday, August 31, 2011
  99. 99. Questions?Wednesday, August 31, 2011
  100. 100. Contact twitter:  @csskarma e-mail:  timwright12@gmail.com web:  csskarma.com h2p://bit.ly/sxsw-­‐csskarmaWednesday, August 31, 2011

×