Tim Wright, @csskarmaWednesday, August 31, 2011
About me.               • BU	  App	  Dev               • CSSkarma               • Smashing	  Magazine	  &	  SitePointWedne...
What we’ll talk about               • IE	  6/7               • Guiding	  principles               • Proper	  detection    ...
The Goal.                             scale	  your	  mobile	  strategy.Wednesday, August 31, 2011
The Goal.                                              Web                             scale	  your	  mobile	  strategy.We...
Let’s step back.Wednesday, August 31, 2011
Let’s step back.                             Why	  do	  we	  hate	  IE	  6/7?Wednesday, August 31, 2011
Let’s step back.                             body	  {                             	   color:	  red;	  /*	  normal	  */    ...
Let’s step back.       <!-­‐-­‐[if	  IE]>       <link	  href="ie.css"	  rel="stylesheet"	  media="all">       <![endif]-­‐...
Let’s step back.       <!-­‐-­‐[if	  lt	  IE	  7	  ]>	  <body	  class="ie6">	  <![endif]-­‐-­‐>       <!-­‐-­‐[if	  IE	  7...
Let’s step back.                  For	  IE.                             HTML     body	  element                           ...
Let’s step back.        We’re	  doing	  it	  for	  mobile	  too...Wednesday, August 31, 2011
Let’s step back.                              example.com                             m.example.comWednesday, August 31, 2...
Let’s step back.                                               device	  list                  HTML                        ...
Let’s step back.                             c’mon,	  really?Wednesday, August 31, 2011
Guiding principles.Wednesday, August 31, 2011
Guiding principles.                             1                         4       2                             3Wednesday...
Guiding principles.                             1                             More	  stuff	  is	  harder	                  ...
Guiding principles.                             1                             More	  stuff	  is	  harder	                  ...
Guiding principles.                             1                             More	  stuff	  is	  harder	                  ...
Guiding principles.                                 1    More	  stuff	  is	  harder	                                       ...
1             More	  stuff	  is	  harder	                               to	  manageWednesday, August 31, 2011
1             More	  stuff	  is	  harder	                               to	  manageWednesday, August 31, 2011
1             More	  stuff	  is	  harder	                               to	  manageWednesday, August 31, 2011
1             More	  stuff	  is	  harder	                               to	  manage.Wednesday, August 31, 2011
1             More	  stuff	  is	  harder	                               to	  manage.Wednesday, August 31, 2011
1             More	  stuff	  is	  harder	                               to	  manage.Wednesday, August 31, 2011
1             More	  stuff	  is	  harder	                               to	  manage.Wednesday, August 31, 2011
1             More	  stuff	  is	  harder	                               to	  manage.Wednesday, August 31, 2011
1             More	  stuff	  is	  harder	                               to	  manage.Wednesday, August 31, 2011
1             More	  stuff	  is	  harder	                               to	  manage.Wednesday, August 31, 2011
1             More	  stuff	  is	  harder	                               to	  manage. think it.                             ...
1             More	  stuff	  is	  harder	                               to	  manageWednesday, August 31, 2011
1                       XX                             More	  stuff	  is	  harder	                               to	  manag...
1                       XX                             More	  stuff	  is	  harder	                               to	  manag...
1                       XX                             More	  stuff	  is	  harder	                               to	  manag...
1             More	  stuff	  is	  harder	                               to	  manage.Wednesday, August 31, 2011
1             More	  stuff	  is	  harder	                               to	  manage.                             Policy	  f...
1             More	  stuff	  is	  harder	                               to	  manage.Wednesday, August 31, 2011
1             More	  stuff	  is	  harder	                               to	  manage.Wednesday, August 31, 2011
1             More	  stuff	  is	  harder	                               to	  manage.                             Policy	  f...
1             More	  stuff	  is	  harder	                               to	  manage.                                       ...
1                       XX                             More	  stuff	  is	  harder	                               to	  manag...
1             More	  stuff	  is	  harder	                               to	  manage.Wednesday, August 31, 2011
1             More	  stuff	  is	  harder	                               to	  manage.Wednesday, August 31, 2011
1             More	  stuff	  is	  harder	                               to	  manage.Wednesday, August 31, 2011
1             More	  stuff	  is	  harder	                               to	  manage.Wednesday, August 31, 2011
1             More	  stuff	  is	  harder	                               to	  manage. this	  is	  fun!Wednesday, August 31, ...
1             More	  stuff	  is	  harder	                               to	  manage. this	  is	  kinda	  sucks             ...
1             More	  stuff	  is	  harder	                               to	  manage.    Solution?Wednesday, August 31, 2011
1             More	  stuff	  is	  harder	                               to	  manage.    Solution?	  have	  less	  stuff.Wedn...
2                Build	  it	  once,	  build	  it                             right.Wednesday, August 31, 2011
2                Build	  it	  once,	  build	  it                             right.                             structural...
2                Build	  it	  once,	  build	  it                             right.                     presentation	  lay...
2                Build	  it	  once,	  build	  it                             right.                             behavior	 ...
2                Build	  it	  once,	  build	  it                             right.           progressive enhancement,    ...
2                Build	  it	  once,	  build	  it                             right.               What	  are	  we	  really...
2                Build	  it	  once,	  build	  it                             right.                                       ...
2                Build	  it	  once,	  build	  it                             right.                             Changing	 ...
2                Build	  it	  once,	  build	  it                             right.                             Changing	 ...
2                Build	  it	  once,	  build	  it                             right.                       Changing	  the	 ...
2                 Build	  it	  once,	  build	  it                              right.                       Changing	  the...
2                Build	  it	  once,	  build	  it                             right.    A	  combina5on	  of	  media queries...
2                Build	  it	  once,	  build	  it                             right.                                  moder...
2                Build	  it	  once,	  build	  it                             right.        What	  about	  performance?Wedn...
2                Build	  it	  once,	  build	  it                             right.                Performance always     ...
2                Build	  it	  once,	  build	  it                             right.        be2er	  communica5on	  =	  be2e...
3                Think	  &	  CommunicateWednesday, August 31, 2011
3                Think	  &	  CommunicateDon’t	  solve	  back-end	  problems	            with	  JavaScriptWednesday, August...
3                Think	  &	  Communicate  10	  jQuery	  plugins	  in	  a	  cms	  does	     not	  necessitate	  a	  Web	  s...
3                Think	  &	  Communicate                                slideshows.Wednesday, August 31, 2011
3                Think	  &	  Communicate                                  alumni.usc.eduWednesday, August 31, 2011
3                Think	  &	  CommunicateWednesday, August 31, 2011
3                Think	  &	  Communicate well,	  there’s	  your	  problemWednesday, August 31, 2011
3                Think	  &	  Communicate                                         data	  (images)                server-­‐s...
3                Think	  &	  CommunicateDon’t	  solve	  front-end	  problems	                   with	  PHPWednesday, Augus...
3                Think	  &	  Communicate                                 detection.Wednesday, August 31, 2011
3                Think	  &	  Communicate                       user agent	  detectionWednesday, August 31, 2011
3                Think	  &	  Communicate                             feature	  detectionWednesday, August 31, 2011
3                Think	  &	  Communicate                             Ask	  yourself	  some                              qu...
3                Think	  &	  Communicate   What	  is	  mobile	  about	  this	  site?Wednesday, August 31, 2011
3                Think	  &	  Communicate                                         vs.Wednesday, August 31, 2011
3                Think	  &	  Communicate     Why	  would	  I	  remove	  content?Wednesday, August 31, 2011
3                          XX                             More	  stuff	  is	  harder	                               to	  ma...
3                Think	  &	  Communicate    Nobody	  wants	  to	  look	  at	  useless	                  content.Wednesday,...
3                Think	  &	  CommunicateWhy	  is	  this	  performing	  poorly?Wednesday, August 31, 2011
3                Think	  &	  Communicate                                  plugins.                               jQuery	  ...
3                Think	  &	  Communicate                                solution?Wednesday, August 31, 2011
3                Think	  &	  Communicate                solution?	  talk	  to	  people.Wednesday, August 31, 2011
4                Talk	  about	  your                             successWednesday, August 31, 2011
4                Talk	  about	  your                             success                             ...	  educate	  about...
4                Talk	  about	  your	                               successWednesday, August 31, 2011
4Bestbout	  your	                 Talk	  a             Web site of               success                         mobile   ...
4Bestbout	  your	                 Talk	  a             Web site of               success                         mobile   ...
4                Talk	  about	  your	                               success                                       Best mob...
4                Talk	  about	  your                             success                             m. vs. /m            ...
What we talked about                   • IE	  6/7                   • Guiding	  principles                   • Feature	  d...
Hang	  some                                	  ?’s                             on	  the	  strategyWednesday, August 31, 2011
Questions?Wednesday, August 31, 2011
Contact         twitter:	  @csskarma         e-mail:	  timwright12@gmail.com         web:	  csskarma.com                  ...
Upcoming SlideShare
Loading in...5
×

Implementing a Scalable Mobile Strategy

1,534

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,534
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
18
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×