SlideShare a Scribd company logo
1 of 100
Download to read offline
Tim Wright, @csskarma
Wednesday, August 31, 2011
About me.

               • BU	
  App	
  Dev
               • CSSkarma
               • Smashing	
  Magazine	
  &	
  SitePoint



Wednesday, August 31, 2011
What we’ll talk about

               • IE	
  6/7
               • Guiding	
  principles
               • Proper	
  detection
               • Performance


Wednesday, August 31, 2011
The Goal.

                             scale	
  your	
  mobile	
  strategy.




Wednesday, August 31, 2011
The Goal.

                                              Web
                             scale	
  your	
  mobile	
  strategy.




Wednesday, August 31, 2011
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	
  */
                             	
   color:	
  green9;	
  /*	
  IE8	
  and	
  below	
  */
                             	
   *color:	
  yellow;	
  /*	
  IE7	
  and	
  below	
  */
                             	
   _color:	
  orange;	
  /*	
  IE6	
  */
                             }




Wednesday, August 31, 2011
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
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
Let’s step back.
                  For	
  IE.
                             HTML     body	
  element



                             CSS    hacks/conditionals



                              JS        detection



Wednesday, August 31, 2011
Let’s step back.

        We’re	
  doing	
  it	
  for	
  mobile	
  too...




Wednesday, August 31, 2011
Let’s step back.

                              example.com
                             m.example.com



Wednesday, August 31, 2011
Let’s step back.
                                               device	
  list




                  HTML                        mobile	
  HTML
                                  switching

                      CSS                      mobile	
  CSS
                                  mechanism

                             JS                 mobile	
  JS


Wednesday, August 31, 2011
Let’s step back.

                             c’mon,	
  really?




Wednesday, August 31, 2011
Guiding principles.




Wednesday, August 31, 2011
Guiding principles.

                             1
                         4       2
                             3
Wednesday, August 31, 2011
Guiding principles.

                             1
                             More	
  stuff	
  is	
  harder	
  
                             to	
  manage.



                         4        2
                             3
Wednesday, August 31, 2011
Guiding principles.

                             1
                             More	
  stuff	
  is	
  harder	
  
                             to	
  manage.



                         4        2         Build	
  it	
  once,	
  build
                                            it	
  right




                             3
Wednesday, August 31, 2011
Guiding principles.

                             1
                             More	
  stuff	
  is	
  harder	
  
                             to	
  manage.



                         4         2        Build	
  it	
  once,	
  build
                                            it	
  right




                             3   Think	
  &	
  Communicate



Wednesday, August 31, 2011
Guiding principles.

                                 1    More	
  stuff	
  is	
  harder	
  
                                      to	
  manage



                         4   Talk	
  about
                             success
                                             2       Build	
  it	
  once,	
  build
                                                     it	
  right




                                 3      Think	
  &	
  Communicate



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.




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.
                                       Don’t over




Wednesday, August 31, 2011
1             More	
  stuff	
  is	
  harder	
  
                             to	
  manage




Wednesday, August 31, 2011
1                       XX
                             More	
  stuff	
  is	
  harder	
  
                             to	
  manage.




Wednesday, August 31, 2011
1                       XX
                             More	
  stuff	
  is	
  harder	
  
                             to	
  manage.

                                     X
                                     X XX
                                     X XX
Wednesday, August 31, 2011
1                       XX
                             More	
  stuff	
  is	
  harder	
  
                             to	
  manage.

                                     X
                                     X XX
                                     X XX
Wednesday, August 31, 2011
1             More	
  stuff	
  is	
  harder	
  
                             to	
  manage.




Wednesday, August 31, 2011
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	
  informa5on



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.
                             Policy	
  for	
  targe.ng	
  mobile	
  users
                               Good	
  performance
                                -­‐	
  cut	
  down	
  h2p	
  requests
                                -­‐	
  op5mize	
  JS	
  &	
  CSS
                               Quick	
  access	
  to	
  informa5on



Wednesday, August 31, 2011
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	
  informa5on



Wednesday, August 31, 2011
1                       XX
                             More	
  stuff	
  is	
  harder	
  
                             to	
  manage.

                                     X
                                     X XX
                                     X XX
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. this	
  is	
  fun!




Wednesday, August 31, 2011
1             More	
  stuff	
  is	
  harder	
  
                             to	
  manage. this	
  is	
  kinda	
  sucks
                                                            :-­‐(



                   fake	
  happiness




Wednesday, August 31, 2011
1             More	
  stuff	
  is	
  harder	
  
                             to	
  manage.
    Solution?



Wednesday, August 31, 2011
1             More	
  stuff	
  is	
  harder	
  
                             to	
  manage.
    Solution?	
  have	
  less	
  stuff.



Wednesday, August 31, 2011
2                Build	
  it	
  once,	
  build	
  it
                             right.




Wednesday, August 31, 2011
2                Build	
  it	
  once,	
  build	
  it
                             right.

                             structural	
  layer

Wednesday, August 31, 2011
2                Build	
  it	
  once,	
  build	
  it
                             right.

                     presentation	
  layer

Wednesday, August 31, 2011
2                Build	
  it	
  once,	
  build	
  it
                             right.

                             behavior	
  layer

Wednesday, August 31, 2011
2                Build	
  it	
  once,	
  build	
  it
                             right.
           progressive enhancement,
                    again?



Wednesday, August 31, 2011
2                Build	
  it	
  once,	
  build	
  it
                             right.
               What	
  are	
  we	
  really	
  doing	
  here?




Wednesday, August 31, 2011
2                Build	
  it	
  once,	
  build	
  it
                             right.

                                               vs.



Wednesday, August 31, 2011
2                Build	
  it	
  once,	
  build	
  it
                             right.
                             Changing	
  the	
  design?




Wednesday, August 31, 2011
2                Build	
  it	
  once,	
  build	
  it
                             right.
                             Changing	
  the	
  design?

                                             CSS
                             media	
  queries.

Wednesday, August 31, 2011
2                Build	
  it	
  once,	
  build	
  it
                             right.
                       Changing	
  the	
  interaction?




Wednesday, August 31, 2011
2                 Build	
  it	
  once,	
  build	
  it
                              right.
                       Changing	
  the	
  interaction?

                                               JS
                             feature	
  detec5on

Wednesday, August 31, 2011
2                Build	
  it	
  once,	
  build	
  it
                             right.
    A	
  combina5on	
  of	
  media queries	
  &	
  
            JS feature detection




Wednesday, August 31, 2011
2                Build	
  it	
  once,	
  build	
  it
                             right.
                                  modernizr.
                                script	
  loaders.
                               native	
  detection


Wednesday, August 31, 2011
2                Build	
  it	
  once,	
  build	
  it
                             right.
        What	
  about	
  performance?



Wednesday, August 31, 2011
2                Build	
  it	
  once,	
  build	
  it
                             right.
                Performance always
                      matters.


Wednesday, August 31, 2011
2                Build	
  it	
  once,	
  build	
  it
                             right.
        be2er	
  communica5on	
  =	
  be2er	
  
                   performance


Wednesday, August 31, 2011
3                Think	
  &	
  Communicate




Wednesday, August 31, 2011
3                Think	
  &	
  Communicate
Don’t	
  solve	
  back-end	
  problems	
  
          with	
  JavaScript



Wednesday, August 31, 2011
3                Think	
  &	
  Communicate
  10	
  jQuery	
  plugins	
  in	
  a	
  cms	
  does	
  
   not	
  necessitate	
  a	
  Web	
  strategy



Wednesday, August 31, 2011
3                Think	
  &	
  Communicate

                                slideshows.




Wednesday, August 31, 2011
3                Think	
  &	
  Communicate




                                  alumni.usc.edu

Wednesday, August 31, 2011
3                Think	
  &	
  Communicate




Wednesday, August 31, 2011
3                Think	
  &	
  Communicate

 well,	
  there’s	
  
your	
  problem




Wednesday, August 31, 2011
3                Think	
  &	
  Communicate
                                         data	
  (images)
                server-­‐side
                  fallback
                                                                         ajax	
  call


                                only	
  display	
  what	
  you	
  need




Wednesday, August 31, 2011
3                Think	
  &	
  Communicate
Don’t	
  solve	
  front-end	
  problems	
  
                 with	
  PHP



Wednesday, August 31, 2011
3                Think	
  &	
  Communicate

                                 detection.




Wednesday, August 31, 2011
3                Think	
  &	
  Communicate

                       user agent	
  detection




Wednesday, August 31, 2011
3                Think	
  &	
  Communicate

                             feature	
  detection




Wednesday, August 31, 2011
3                Think	
  &	
  Communicate

                             Ask	
  yourself	
  some
                              questions...



Wednesday, August 31, 2011
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	
  manage.

                                     X
                                     X XX
                                     X XX
Wednesday, August 31, 2011
3                Think	
  &	
  Communicate
    Nobody	
  wants	
  to	
  look	
  at	
  useless	
  
                content.



Wednesday, August 31, 2011
3                Think	
  &	
  Communicate

Why	
  is	
  this	
  performing	
  poorly?



Wednesday, August 31, 2011
3                Think	
  &	
  Communicate
                                  plugins.
                               jQuery	
  loops.
                               http	
  requests.


Wednesday, August 31, 2011
3                Think	
  &	
  Communicate

                                solution?



Wednesday, August 31, 2011
3                Think	
  &	
  Communicate

                solution?	
  talk	
  to	
  people.



Wednesday, August 31, 2011
4                Talk	
  about	
  your
                             success




Wednesday, August 31, 2011
4                Talk	
  about	
  your
                             success

                             ...	
  educate	
  about
                             your	
  failures.

Wednesday, August 31, 2011
4                Talk	
  about	
  your	
  
                             success




Wednesday, August 31, 2011
4Bestbout	
  your	
  
               Talk	
  a
             Web site of
               success
                         mobile

                2011 by
             edustyle.net
Wednesday, August 31, 2011
4Bestbout	
  your	
  
               Talk	
  a
             Web site of
               success
                         mobile

                2011 by
             edustyle.net
Wednesday, August 31, 2011
4                Talk	
  about	
  your	
  
                             success



                                       Best mobile Web site of 2011 by
                                                edustyle.net
Wednesday, August 31, 2011
4                Talk	
  about	
  your
                             success
                             m. vs. /m
                             detection (presto engine)
                             switching mechanism
                             cookies?
                             double design
                             double development



Wednesday, August 31, 2011
What we talked about

                   • IE	
  6/7
                   • Guiding	
  principles
                   • Feature	
  detection
                   • Performance


Wednesday, August 31, 2011
Hang	
  some

                                	
  ?’s
                             on	
  the	
  strategy


Wednesday, August 31, 2011
Questions?




Wednesday, August 31, 2011
Contact

         twitter:	
  @csskarma
         e-mail:	
  timwright12@gmail.com
         web:	
  csskarma.com

                             h2p://bit.ly/sxsw-­‐csskarma

Wednesday, August 31, 2011

More Related Content

Viewers also liked

Mobile, Media & Touch
Mobile, Media & TouchMobile, Media & Touch
Mobile, Media & TouchTim Wright
 
USC dot EDU: A Responsive Design Case Study
USC dot EDU: A Responsive Design Case StudyUSC dot EDU: A Responsive Design Case Study
USC dot EDU: A Responsive Design Case StudyTim Wright
 
Design process
Design processDesign process
Design processTim Wright
 
Native Device vs. Mobile Web Applications
Native Device vs. Mobile Web ApplicationsNative Device vs. Mobile Web Applications
Native Device vs. Mobile Web ApplicationsTim Wright
 
Color & Typography
Color & TypographyColor & Typography
Color & TypographyTim Wright
 
Building an Atomic Design System
Building an Atomic Design SystemBuilding an Atomic Design System
Building an Atomic Design SystemTim Wright
 
A Look at the Future of HTML5
A Look at the Future of HTML5A Look at the Future of HTML5
A Look at the Future of HTML5Tim Wright
 
HTML 5: The Future of the Web
HTML 5: The Future of the WebHTML 5: The Future of the Web
HTML 5: The Future of the WebTim Wright
 

Viewers also liked (9)

Mobile, Media & Touch
Mobile, Media & TouchMobile, Media & Touch
Mobile, Media & Touch
 
USC dot EDU: A Responsive Design Case Study
USC dot EDU: A Responsive Design Case StudyUSC dot EDU: A Responsive Design Case Study
USC dot EDU: A Responsive Design Case Study
 
Design process
Design processDesign process
Design process
 
Native Device vs. Mobile Web Applications
Native Device vs. Mobile Web ApplicationsNative Device vs. Mobile Web Applications
Native Device vs. Mobile Web Applications
 
Color & Typography
Color & TypographyColor & Typography
Color & Typography
 
Building an Atomic Design System
Building an Atomic Design SystemBuilding an Atomic Design System
Building an Atomic Design System
 
Form design
Form designForm design
Form design
 
A Look at the Future of HTML5
A Look at the Future of HTML5A Look at the Future of HTML5
A Look at the Future of HTML5
 
HTML 5: The Future of the Web
HTML 5: The Future of the WebHTML 5: The Future of the Web
HTML 5: The Future of the Web
 

Similar to Managing Mobile: Guiding Principles for a Simpler Strategy

Ben McAllister - The Science of Good Design: A Dangerous Idea
Ben McAllister - The Science of Good Design: A Dangerous IdeaBen McAllister - The Science of Good Design: A Dangerous Idea
Ben McAllister - The Science of Good Design: A Dangerous Ideabolt peters
 
Wibiya founders at The Junction
Wibiya founders at The JunctionWibiya founders at The Junction
Wibiya founders at The JunctionDaniel Tal
 
Group 5 Presentation
Group 5 PresentationGroup 5 Presentation
Group 5 PresentationCTan9
 
Facebook EdgeRank REtechSouth Presentation
Facebook EdgeRank REtechSouth PresentationFacebook EdgeRank REtechSouth Presentation
Facebook EdgeRank REtechSouth PresentationBrad Carroll
 
2011 SBS Sydney | Didier Elzinga, Culture as a Competitive Advantage in Moder...
2011 SBS Sydney | Didier Elzinga, Culture as a Competitive Advantage in Moder...2011 SBS Sydney | Didier Elzinga, Culture as a Competitive Advantage in Moder...
2011 SBS Sydney | Didier Elzinga, Culture as a Competitive Advantage in Moder...Dachis Group
 
Bode core retreat 2011
Bode core retreat 2011Bode core retreat 2011
Bode core retreat 2011Terri Sallee
 
Sara Summers - Invisible Me: Emotional Intelligence & Observational Research
Sara Summers - Invisible Me: Emotional Intelligence & Observational ResearchSara Summers - Invisible Me: Emotional Intelligence & Observational Research
Sara Summers - Invisible Me: Emotional Intelligence & Observational Researchbolt peters
 
Chores keynote pdf
Chores keynote pdf Chores keynote pdf
Chores keynote pdf Delphanie
 
Web Wonders
Web WondersWeb Wonders
Web Wondersheymilly
 
Korea PDF Presentation
Korea PDF PresentationKorea PDF Presentation
Korea PDF PresentationDavid Cohn
 
Android Apps Success and Store trend
Android Apps Success and Store trendAndroid Apps Success and Store trend
Android Apps Success and Store trend01Booster
 
Design for Marketing Technical Services
Design for Marketing Technical ServicesDesign for Marketing Technical Services
Design for Marketing Technical ServicesJon Sandruck
 

Similar to Managing Mobile: Guiding Principles for a Simpler Strategy (20)

Ben McAllister - The Science of Good Design: A Dangerous Idea
Ben McAllister - The Science of Good Design: A Dangerous IdeaBen McAllister - The Science of Good Design: A Dangerous Idea
Ben McAllister - The Science of Good Design: A Dangerous Idea
 
Wibiya founders at The Junction
Wibiya founders at The JunctionWibiya founders at The Junction
Wibiya founders at The Junction
 
Group 5 Presentation
Group 5 PresentationGroup 5 Presentation
Group 5 Presentation
 
#LsmNYC Team - Roundtable
#LsmNYC Team - Roundtable#LsmNYC Team - Roundtable
#LsmNYC Team - Roundtable
 
Facebook EdgeRank REtechSouth Presentation
Facebook EdgeRank REtechSouth PresentationFacebook EdgeRank REtechSouth Presentation
Facebook EdgeRank REtechSouth Presentation
 
2011 SBS Sydney | Didier Elzinga, Culture as a Competitive Advantage in Moder...
2011 SBS Sydney | Didier Elzinga, Culture as a Competitive Advantage in Moder...2011 SBS Sydney | Didier Elzinga, Culture as a Competitive Advantage in Moder...
2011 SBS Sydney | Didier Elzinga, Culture as a Competitive Advantage in Moder...
 
Yeswecan
YeswecanYeswecan
Yeswecan
 
Bode core retreat 2011
Bode core retreat 2011Bode core retreat 2011
Bode core retreat 2011
 
Final Presentation
Final PresentationFinal Presentation
Final Presentation
 
Sara Summers - Invisible Me: Emotional Intelligence & Observational Research
Sara Summers - Invisible Me: Emotional Intelligence & Observational ResearchSara Summers - Invisible Me: Emotional Intelligence & Observational Research
Sara Summers - Invisible Me: Emotional Intelligence & Observational Research
 
Chores keynote pdf
Chores keynote pdf Chores keynote pdf
Chores keynote pdf
 
Web Wonders
Web WondersWeb Wonders
Web Wonders
 
Alternative Software Development Methodology
Alternative Software Development MethodologyAlternative Software Development Methodology
Alternative Software Development Methodology
 
Agile xptdd@gosoft
Agile xptdd@gosoftAgile xptdd@gosoft
Agile xptdd@gosoft
 
Agile xp tdd@gosoft
Agile xp tdd@gosoftAgile xp tdd@gosoft
Agile xp tdd@gosoft
 
Startups2011
Startups2011Startups2011
Startups2011
 
Coaching by question
Coaching by questionCoaching by question
Coaching by question
 
Korea PDF Presentation
Korea PDF PresentationKorea PDF Presentation
Korea PDF Presentation
 
Android Apps Success and Store trend
Android Apps Success and Store trendAndroid Apps Success and Store trend
Android Apps Success and Store trend
 
Design for Marketing Technical Services
Design for Marketing Technical ServicesDesign for Marketing Technical Services
Design for Marketing Technical Services
 

Recently uploaded

Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxLoriGlavin3
 
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxunit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxBkGupta21
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersRaghuram Pandurangan
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersNicole Novielli
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.Curtis Poe
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxhariprasad279825
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionDilum Bandara
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rick Flair
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxLoriGlavin3
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity PlanDatabarracks
 

Recently uploaded (20)

Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
 
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxunit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptx
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information Developers
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software Developers
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An Introduction
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity Plan
 

Managing Mobile: Guiding Principles for a Simpler Strategy

  • 2. About me. • BU  App  Dev • CSSkarma • Smashing  Magazine  &  SitePoint Wednesday, August 31, 2011
  • 3. What we’ll talk about • IE  6/7 • Guiding  principles • Proper  detection • Performance Wednesday, August 31, 2011
  • 4. The Goal. scale  your  mobile  strategy. Wednesday, August 31, 2011
  • 5. The Goal. Web scale  your  mobile  strategy. Wednesday, August 31, 2011
  • 7. Let’s step back. Why  do  we  hate  IE  6/7? Wednesday, August 31, 2011
  • 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. 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. 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. Let’s step back. For  IE. HTML body  element CSS hacks/conditionals JS detection Wednesday, August 31, 2011
  • 12. Let’s step back. We’re  doing  it  for  mobile  too... Wednesday, August 31, 2011
  • 13. Let’s step back. example.com m.example.com Wednesday, August 31, 2011
  • 14. Let’s step back. device  list HTML mobile  HTML switching CSS mobile  CSS mechanism JS mobile  JS Wednesday, August 31, 2011
  • 15. Let’s step back. c’mon,  really? Wednesday, August 31, 2011
  • 17. Guiding principles. 1 4 2 3 Wednesday, August 31, 2011
  • 18. Guiding principles. 1 More  stuff  is  harder   to  manage. 4 2 3 Wednesday, August 31, 2011
  • 19. Guiding principles. 1 More  stuff  is  harder   to  manage. 4 2 Build  it  once,  build it  right 3 Wednesday, August 31, 2011
  • 20. Guiding principles. 1 More  stuff  is  harder   to  manage. 4 2 Build  it  once,  build it  right 3 Think  &  Communicate Wednesday, August 31, 2011
  • 21. Guiding principles. 1 More  stuff  is  harder   to  manage 4 Talk  about success 2 Build  it  once,  build it  right 3 Think  &  Communicate Wednesday, August 31, 2011
  • 22. 1 More  stuff  is  harder   to  manage Wednesday, August 31, 2011
  • 23. 1 More  stuff  is  harder   to  manage Wednesday, August 31, 2011
  • 24. 1 More  stuff  is  harder   to  manage Wednesday, August 31, 2011
  • 25. 1 More  stuff  is  harder   to  manage. Wednesday, August 31, 2011
  • 26. 1 More  stuff  is  harder   to  manage. Wednesday, August 31, 2011
  • 27. 1 More  stuff  is  harder   to  manage. Wednesday, August 31, 2011
  • 28. 1 More  stuff  is  harder   to  manage. Wednesday, August 31, 2011
  • 29. 1 More  stuff  is  harder   to  manage. Wednesday, August 31, 2011
  • 30. 1 More  stuff  is  harder   to  manage. Wednesday, August 31, 2011
  • 31. 1 More  stuff  is  harder   to  manage. Wednesday, August 31, 2011
  • 32. 1 More  stuff  is  harder   to  manage. think it. Don’t over Wednesday, August 31, 2011
  • 33. 1 More  stuff  is  harder   to  manage Wednesday, August 31, 2011
  • 34. 1 XX More  stuff  is  harder   to  manage. Wednesday, August 31, 2011
  • 35. 1 XX More  stuff  is  harder   to  manage. X X XX X XX Wednesday, August 31, 2011
  • 36. 1 XX More  stuff  is  harder   to  manage. X X XX X XX Wednesday, August 31, 2011
  • 37. 1 More  stuff  is  harder   to  manage. Wednesday, August 31, 2011
  • 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  informa5on Wednesday, August 31, 2011
  • 39. 1 More  stuff  is  harder   to  manage. Wednesday, August 31, 2011
  • 40. 1 More  stuff  is  harder   to  manage. Wednesday, August 31, 2011
  • 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  informa5on Wednesday, August 31, 2011
  • 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  informa5on Wednesday, August 31, 2011
  • 43. 1 XX More  stuff  is  harder   to  manage. X X XX X XX Wednesday, August 31, 2011
  • 44. 1 More  stuff  is  harder   to  manage. Wednesday, August 31, 2011
  • 45. 1 More  stuff  is  harder   to  manage. Wednesday, August 31, 2011
  • 46. 1 More  stuff  is  harder   to  manage. Wednesday, August 31, 2011
  • 47. 1 More  stuff  is  harder   to  manage. Wednesday, August 31, 2011
  • 48. 1 More  stuff  is  harder   to  manage. this  is  fun! Wednesday, August 31, 2011
  • 49. 1 More  stuff  is  harder   to  manage. this  is  kinda  sucks :-­‐( fake  happiness Wednesday, August 31, 2011
  • 50. 1 More  stuff  is  harder   to  manage. Solution? Wednesday, August 31, 2011
  • 51. 1 More  stuff  is  harder   to  manage. Solution?  have  less  stuff. Wednesday, August 31, 2011
  • 52. 2 Build  it  once,  build  it right. Wednesday, August 31, 2011
  • 53. 2 Build  it  once,  build  it right. structural  layer Wednesday, August 31, 2011
  • 54. 2 Build  it  once,  build  it right. presentation  layer Wednesday, August 31, 2011
  • 55. 2 Build  it  once,  build  it right. behavior  layer Wednesday, August 31, 2011
  • 56. 2 Build  it  once,  build  it right. progressive enhancement, again? Wednesday, August 31, 2011
  • 57. 2 Build  it  once,  build  it right. What  are  we  really  doing  here? Wednesday, August 31, 2011
  • 58. 2 Build  it  once,  build  it right. vs. Wednesday, August 31, 2011
  • 59. 2 Build  it  once,  build  it right. Changing  the  design? Wednesday, August 31, 2011
  • 60. 2 Build  it  once,  build  it right. Changing  the  design? CSS media  queries. Wednesday, August 31, 2011
  • 61. 2 Build  it  once,  build  it right. Changing  the  interaction? Wednesday, August 31, 2011
  • 62. 2 Build  it  once,  build  it right. Changing  the  interaction? JS feature  detec5on Wednesday, August 31, 2011
  • 63. 2 Build  it  once,  build  it right. A  combina5on  of  media queries  &   JS feature detection Wednesday, August 31, 2011
  • 64. 2 Build  it  once,  build  it right. modernizr. script  loaders. native  detection Wednesday, August 31, 2011
  • 65. 2 Build  it  once,  build  it right. What  about  performance? Wednesday, August 31, 2011
  • 66. 2 Build  it  once,  build  it right. Performance always matters. Wednesday, August 31, 2011
  • 67. 2 Build  it  once,  build  it right. be2er  communica5on  =  be2er   performance Wednesday, August 31, 2011
  • 68. 3 Think  &  Communicate Wednesday, August 31, 2011
  • 69. 3 Think  &  Communicate Don’t  solve  back-end  problems   with  JavaScript Wednesday, August 31, 2011
  • 70. 3 Think  &  Communicate 10  jQuery  plugins  in  a  cms  does   not  necessitate  a  Web  strategy Wednesday, August 31, 2011
  • 71. 3 Think  &  Communicate slideshows. Wednesday, August 31, 2011
  • 72. 3 Think  &  Communicate alumni.usc.edu Wednesday, August 31, 2011
  • 73. 3 Think  &  Communicate Wednesday, August 31, 2011
  • 74. 3 Think  &  Communicate well,  there’s   your  problem Wednesday, August 31, 2011
  • 75. 3 Think  &  Communicate data  (images) server-­‐side fallback ajax  call only  display  what  you  need Wednesday, August 31, 2011
  • 76. 3 Think  &  Communicate Don’t  solve  front-end  problems   with  PHP Wednesday, August 31, 2011
  • 77. 3 Think  &  Communicate detection. Wednesday, August 31, 2011
  • 78. 3 Think  &  Communicate user agent  detection Wednesday, August 31, 2011
  • 79. 3 Think  &  Communicate feature  detection Wednesday, August 31, 2011
  • 80. 3 Think  &  Communicate Ask  yourself  some questions... Wednesday, August 31, 2011
  • 81. 3 Think  &  Communicate What  is  mobile  about  this  site? Wednesday, August 31, 2011
  • 82. 3 Think  &  Communicate vs. Wednesday, August 31, 2011
  • 83. 3 Think  &  Communicate Why  would  I  remove  content? Wednesday, August 31, 2011
  • 84. 3 XX More  stuff  is  harder   to  manage. X X XX X XX Wednesday, August 31, 2011
  • 85. 3 Think  &  Communicate Nobody  wants  to  look  at  useless   content. Wednesday, August 31, 2011
  • 86. 3 Think  &  Communicate Why  is  this  performing  poorly? Wednesday, August 31, 2011
  • 87. 3 Think  &  Communicate plugins. jQuery  loops. http  requests. Wednesday, August 31, 2011
  • 88. 3 Think  &  Communicate solution? Wednesday, August 31, 2011
  • 89. 3 Think  &  Communicate solution?  talk  to  people. Wednesday, August 31, 2011
  • 90. 4 Talk  about  your success Wednesday, August 31, 2011
  • 91. 4 Talk  about  your success ...  educate  about your  failures. Wednesday, August 31, 2011
  • 92. 4 Talk  about  your   success Wednesday, August 31, 2011
  • 93. 4Bestbout  your   Talk  a Web site of success mobile 2011 by edustyle.net Wednesday, August 31, 2011
  • 94. 4Bestbout  your   Talk  a Web site of success mobile 2011 by edustyle.net Wednesday, August 31, 2011
  • 95. 4 Talk  about  your   success Best mobile Web site of 2011 by edustyle.net Wednesday, August 31, 2011
  • 96. 4 Talk  about  your success m. vs. /m detection (presto engine) switching mechanism cookies? double design double development Wednesday, August 31, 2011
  • 97. What we talked about • IE  6/7 • Guiding  principles • Feature  detection • Performance Wednesday, August 31, 2011
  • 98. Hang  some  ?’s on  the  strategy Wednesday, August 31, 2011
  • 100. Contact twitter:  @csskarma e-mail:  timwright12@gmail.com web:  csskarma.com h2p://bit.ly/sxsw-­‐csskarma Wednesday, August 31, 2011