SlideShare a Scribd company logo
1 of 124
Maintaining
Responsive Integrity
Jesse Friedman
Author, Professor, Developer - @professor
· Director of Web Interface and Development

                      · Professor at Johnson & Wales University

                      · Author: Web Designers Guide to WordPress

                      · Writer: Designers Web Handbook, Web
                        Designers Idea Book Volume 2, .NET
                        Magazine, netmagazine.com, HOW and more




Jesse Friedman
Author, Professor, Developer - @professor
· Director of Web Interface and Development

                      · Professor at Johnson & Wales University

                      · Author: Web Designers Guide to WordPress

                      · Writer: Designers Web Handbook, Web
                        Designers Idea Book Volume 2, .NET
                        Magazine, netmagazine.com, HOW and more

                           · Co-organizer WordPress Providence
                             Meetup and WordCamp Providence 2012




Jesse Friedman
Author, Professor, Developer - @professor
Tweet a photo, link or text
         about something you learned
         today. cc/ @professor use
         #wcchi.

         2 Hard Copies and 3 Digital


Want a Free Copy?
Responsive
So what’s the difference between a
 CMS based Responsive site and a
            static one?
HTML, CSS, JavaScript
I C ES S
    T R
   A P
 T D
S R
W O
I C ES S
    T R
   A P
 T D
S R
W O
S S
       R E
    D P
 O R
W
FRAMEWORKS,
FRAMEWORKS,
GRID SYSTEMS,
FRAMEWORKS,
GRID SYSTEMS,
ALL THAT STUFF,
FRAMEWORKS,
GRID SYSTEMS,
ALL THAT STUFF,
STILL WORKS!
User Admin
    us·er ad·min
User Admin
           us·er ad·min



A person responsible for running
    and operating a system
User Admin
    us·er ad·min
User Admin
           us·er ad·min



In other words, the person who’s
    gonna gaff up your design
User Admin of your design
May compromise the integrity
User Admin of your design
May compromise the integrity
Userexpected to maintain responsive content
         Admin’s
Can’t be
Userexpected to maintain responsive content
         Admin’s
Can’t be
User some road blocks
          Admin’s
Will have
· Media and maintaining a fluid layout




User some road blocks
          Admin’s
Will have
· Media and maintaining a fluid layout
  · Menus




User some road blocks
          Admin’s
Will have
· Media and maintaining a fluid layout
  · Menus

  · Multiple Columns




User some road blocks
          Admin’s
Will have
· Media and maintaining a fluid layout
  · Menus

  · Multiple Columns
  · Showing and Hiding Content based on
    user device


User some road blocks
          Admin’s
Will have
Content is KING!
Empowering User Admins to choose when to
show content
What if at the server level you could say:




 Content is KING!
 Empowering User Admins to choose when to
 show content
What if at the server level you could say:

       On a mobile device? do this:




 Content is KING!
 Empowering User Admins to choose when to
 show content
What if at the server level you could say:

       On a mobile device? do this:
                  THIS




 Content is KING!
 Empowering User Admins to choose when to
 show content
What if at the server level you could say:

       On a mobile device? do this:
                  THIS

               else do this:



 Content is KING!
 Empowering User Admins to choose when to
 show content
What if at the server level you could say:

       On a mobile device? do this:
                  THIS

               else do this:
               OTHER THIS

 Content is KING!
 Empowering User Admins to choose when to
 show content
WordPress wp_is_mobile();
WordPress wp_is_mobile();
<?php
	 if ( wp_is_mobile() ) the_post_thumbnail( 'post-thumb' );
	 else the_post_thumbnail ( 'post-large' );
?>
What if at the server level you could say:
What if at the server level you could say:
isiPhone()
What if at the server level you could say:
isiPhone()
isBlackBerry()
What if at the server level you could say:
isiPhone()
isBlackBerry()
isHTC()
What if at the server level you could say:
isiPhone()
isBlackBerry()
isHTC()
isNexus()
What if at the server level you could say:
isiPhone()
isBlackBerry()
isHTC()
isNexus()
isDellStreak()
What if at the server level you could say:
isiPhone()
isBlackBerry()
isHTC()
isNexus()
isDellStreak()
isMotorola()
What if at the server level you could say:
isiPhone()
isBlackBerry()
isHTC()
isNexus()
isDellStreak()
isMotorola()
isSamsung()
What if at the server level you could say:
isiPhone()
isBlackBerry()
isHTC()
isNexus()
isDellStreak()
isMotorola()
isSamsung()
isSony()
What if at the server level you could say:
isiPhone()
isBlackBerry()
isHTC()
isNexus()
isDellStreak()
isMotorola()
isSamsung()
isSony()
isAsus()
What if at the server level you could say:
isiPhone()
isBlackBerry()
isHTC()
isNexus()
isDellStreak()
isMotorola()
isSamsung()
isSony()
isAsus()
isPalm()
What if at the server level you could say:
isiPhone()
isBlackBerry()
isHTC()
isNexus()
isDellStreak()
isMotorola()
isSamsung()
isSony()
isAsus()
isPalm()
isGenericPhone()
What if at the server level you could say:
isiPhone()
isBlackBerry()
isHTC()
isNexus()
isDellStreak()
isMotorola()
isSamsung()
isSony()
isAsus()
isPalm()
isGenericPhone()
isAcerTablet()
What if at the server level you could say:
isiPhone()
isBlackBerry()
isHTC()
isNexus()
isDellStreak()
isMotorola()
isSamsung()
isSony()
isAsus()
isPalm()
isGenericPhone()
isAcerTablet()
isYarvikTablet()
What if at the server level you could say:
isiPhone()
isBlackBerry()
isHTC()
isNexus()
isDellStreak()
isMotorola()
isSamsung()
isSony()
isAsus()
isPalm()
isGenericPhone()
isAcerTablet()
isYarvikTablet()
isGenericTablet()
What if at the server level you could say:
isiPhone()
isBlackBerry()
isHTC()
isNexus()
isDellStreak()
isMotorola()
isSamsung()
isSony()
isAsus()
isPalm()
isGenericPhone()
isAcerTablet()
isYarvikTablet()
isGenericTablet()
isBlackBerryTablet()
What if at the server level you could say:
isiPhone()
isBlackBerry()
isHTC()
isNexus()
isDellStreak()
isMotorola()
isSamsung()
isSony()
isAsus()
isPalm()
isGenericPhone()
isAcerTablet()
isYarvikTablet()
isGenericTablet()
isBlackBerryTablet()
isiPad()
What if at the server level you could say:
isiPhone()
isBlackBerry()
isHTC()
isNexus()
isDellStreak()
isMotorola()
isSamsung()
isSony()
isAsus()
isPalm()
isGenericPhone()
isAcerTablet()
isYarvikTablet()
isGenericTablet()
isBlackBerryTablet()
isiPad()
isKindle()
What if at the server level you could say:
isiPhone()             isSamsungTablet()
isBlackBerry()
isHTC()
isNexus()
isDellStreak()
isMotorola()
isSamsung()
isSony()
isAsus()
isPalm()
isGenericPhone()
isAcerTablet()
isYarvikTablet()
isGenericTablet()
isBlackBerryTablet()
isiPad()
isKindle()
What if at the server level you could say:
isiPhone()             isSamsungTablet()
isBlackBerry()         isHTCtablet()
isHTC()
isNexus()
isDellStreak()
isMotorola()
isSamsung()
isSony()
isAsus()
isPalm()
isGenericPhone()
isAcerTablet()
isYarvikTablet()
isGenericTablet()
isBlackBerryTablet()
isiPad()
isKindle()
What if at the server level you could say:
isiPhone()             isSamsungTablet()
isBlackBerry()         isHTCtablet()
isHTC()                isMotorolaTablet()
isNexus()
isDellStreak()
isMotorola()
isSamsung()
isSony()
isAsus()
isPalm()
isGenericPhone()
isAcerTablet()
isYarvikTablet()
isGenericTablet()
isBlackBerryTablet()
isiPad()
isKindle()
What if at the server level you could say:
isiPhone()             isSamsungTablet()
isBlackBerry()         isHTCtablet()
isHTC()                isMotorolaTablet()
isNexus()              isAsusTablet()
isDellStreak()
isMotorola()
isSamsung()
isSony()
isAsus()
isPalm()
isGenericPhone()
isAcerTablet()
isYarvikTablet()
isGenericTablet()
isBlackBerryTablet()
isiPad()
isKindle()
What if at the server level you could say:
isiPhone()             isSamsungTablet()
isBlackBerry()         isHTCtablet()
isHTC()                isMotorolaTablet()
isNexus()              isAsusTablet()
isDellStreak()         isNookTablet()
isMotorola()
isSamsung()
isSony()
isAsus()
isPalm()
isGenericPhone()
isAcerTablet()
isYarvikTablet()
isGenericTablet()
isBlackBerryTablet()
isiPad()
isKindle()
What if at the server level you could say:
isiPhone()             isSamsungTablet()
isBlackBerry()         isHTCtablet()
isHTC()                isMotorolaTablet()
isNexus()              isAsusTablet()
isDellStreak()         isNookTablet()
isMotorola()           isAcerTablet()
isSamsung()
isSony()
isAsus()
isPalm()
isGenericPhone()
isAcerTablet()
isYarvikTablet()
isGenericTablet()
isBlackBerryTablet()
isiPad()
isKindle()
What if at the server level you could say:
isiPhone()             isSamsungTablet()
isBlackBerry()         isHTCtablet()
isHTC()                isMotorolaTablet()
isNexus()              isAsusTablet()
isDellStreak()         isNookTablet()
isMotorola()           isAcerTablet()
isSamsung()            isYarvikTablet()
isSony()
isAsus()
isPalm()
isGenericPhone()
isAcerTablet()
isYarvikTablet()
isGenericTablet()
isBlackBerryTablet()
isiPad()
isKindle()
What if at the server level you could say:
isiPhone()             isSamsungTablet()
isBlackBerry()         isHTCtablet()
isHTC()                isMotorolaTablet()
isNexus()              isAsusTablet()
isDellStreak()         isNookTablet()
isMotorola()           isAcerTablet()
isSamsung()            isYarvikTablet()
isSony()               isGenericTablet()
isAsus()
isPalm()
isGenericPhone()
isAcerTablet()
isYarvikTablet()
isGenericTablet()
isBlackBerryTablet()
isiPad()
isKindle()
What if at the server level you could say:
isiPhone()             isSamsungTablet()
isBlackBerry()         isHTCtablet()
isHTC()                isMotorolaTablet()
isNexus()              isAsusTablet()
isDellStreak()         isNookTablet()
isMotorola()           isAcerTablet()
isSamsung()            isYarvikTablet()
isSony()               isGenericTablet()
isAsus()               isAndroidOS()
isPalm()
isGenericPhone()
isAcerTablet()
isYarvikTablet()
isGenericTablet()
isBlackBerryTablet()
isiPad()
isKindle()
What if at the server level you could say:
isiPhone()             isSamsungTablet()
isBlackBerry()         isHTCtablet()
isHTC()                isMotorolaTablet()
isNexus()              isAsusTablet()
isDellStreak()         isNookTablet()
isMotorola()           isAcerTablet()
isSamsung()            isYarvikTablet()
isSony()               isGenericTablet()
isAsus()               isAndroidOS()
isPalm()               isBlackBerryOS()
isGenericPhone()
isAcerTablet()
isYarvikTablet()
isGenericTablet()
isBlackBerryTablet()
isiPad()
isKindle()
What if at the server level you could say:
isiPhone()             isSamsungTablet()
isBlackBerry()         isHTCtablet()
isHTC()                isMotorolaTablet()
isNexus()              isAsusTablet()
isDellStreak()         isNookTablet()
isMotorola()           isAcerTablet()
isSamsung()            isYarvikTablet()
isSony()               isGenericTablet()
isAsus()               isAndroidOS()
isPalm()               isBlackBerryOS()
isGenericPhone()       isPalmOS()
isAcerTablet()
isYarvikTablet()
isGenericTablet()
isBlackBerryTablet()
isiPad()
isKindle()
What if at the server level you could say:
isiPhone()             isSamsungTablet()
isBlackBerry()         isHTCtablet()
isHTC()                isMotorolaTablet()
isNexus()              isAsusTablet()
isDellStreak()         isNookTablet()
isMotorola()           isAcerTablet()
isSamsung()            isYarvikTablet()
isSony()               isGenericTablet()
isAsus()               isAndroidOS()
isPalm()               isBlackBerryOS()
isGenericPhone()       isPalmOS()
isAcerTablet()         isSymbianOS()
isYarvikTablet()
isGenericTablet()
isBlackBerryTablet()
isiPad()
isKindle()
What if at the server level you could say:
isiPhone()             isSamsungTablet()
isBlackBerry()         isHTCtablet()
isHTC()                isMotorolaTablet()
isNexus()              isAsusTablet()
isDellStreak()         isNookTablet()
isMotorola()           isAcerTablet()
isSamsung()            isYarvikTablet()
isSony()               isGenericTablet()
isAsus()               isAndroidOS()
isPalm()               isBlackBerryOS()
isGenericPhone()       isPalmOS()
isAcerTablet()         isSymbianOS()
isYarvikTablet()       isWindowsMobileOS()
isGenericTablet()
isBlackBerryTablet()
isiPad()
isKindle()
What if at the server level you could say:
isiPhone()             isSamsungTablet()
isBlackBerry()         isHTCtablet()
isHTC()                isMotorolaTablet()
isNexus()              isAsusTablet()
isDellStreak()         isNookTablet()
isMotorola()           isAcerTablet()
isSamsung()            isYarvikTablet()
isSony()               isGenericTablet()
isAsus()               isAndroidOS()
isPalm()               isBlackBerryOS()
isGenericPhone()       isPalmOS()
isAcerTablet()         isSymbianOS()
isYarvikTablet()       isWindowsMobileOS()
isGenericTablet()      isiOS()
isBlackBerryTablet()
isiPad()
isKindle()
What if at the server level you could say:
isiPhone()             isSamsungTablet()
isBlackBerry()         isHTCtablet()
isHTC()                isMotorolaTablet()
isNexus()              isAsusTablet()
isDellStreak()         isNookTablet()
isMotorola()           isAcerTablet()
isSamsung()            isYarvikTablet()
isSony()               isGenericTablet()
isAsus()               isAndroidOS()
isPalm()               isBlackBerryOS()
isGenericPhone()       isPalmOS()
isAcerTablet()         isSymbianOS()
isYarvikTablet()       isWindowsMobileOS()
isGenericTablet()      isiOS()
isBlackBerryTablet()   isFlashLiteOS()
isiPad()
isKindle()
What if at the server level you could say:
isiPhone()             isSamsungTablet()
isBlackBerry()         isHTCtablet()
isHTC()                isMotorolaTablet()
isNexus()              isAsusTablet()
isDellStreak()         isNookTablet()
isMotorola()           isAcerTablet()
isSamsung()            isYarvikTablet()
isSony()               isGenericTablet()
isAsus()               isAndroidOS()
isPalm()               isBlackBerryOS()
isGenericPhone()       isPalmOS()
isAcerTablet()         isSymbianOS()
isYarvikTablet()       isWindowsMobileOS()
isGenericTablet()      isiOS()
isBlackBerryTablet()   isFlashLiteOS()
isiPad()               isJavaOS()
isKindle()
What if at the server level you could say:
isiPhone()             isSamsungTablet()
isBlackBerry()         isHTCtablet()
isHTC()                isMotorolaTablet()
isNexus()              isAsusTablet()
isDellStreak()         isNookTablet()
isMotorola()           isAcerTablet()
isSamsung()            isYarvikTablet()
isSony()               isGenericTablet()
isAsus()               isAndroidOS()
isPalm()               isBlackBerryOS()
isGenericPhone()       isPalmOS()
isAcerTablet()         isSymbianOS()
isYarvikTablet()       isWindowsMobileOS()
isGenericTablet()      isiOS()
isBlackBerryTablet()   isFlashLiteOS()
isiPad()               isJavaOS()
isKindle()             isNokiaOS()
What if at the server level you could say:
isiPhone()             isSamsungTablet()     iswebOS()
isBlackBerry()         isHTCtablet()
isHTC()                isMotorolaTablet()
isNexus()              isAsusTablet()
isDellStreak()         isNookTablet()
isMotorola()           isAcerTablet()
isSamsung()            isYarvikTablet()
isSony()               isGenericTablet()
isAsus()               isAndroidOS()
isPalm()               isBlackBerryOS()
isGenericPhone()       isPalmOS()
isAcerTablet()         isSymbianOS()
isYarvikTablet()       isWindowsMobileOS()
isGenericTablet()      isiOS()
isBlackBerryTablet()   isFlashLiteOS()
isiPad()               isJavaOS()
isKindle()             isNokiaOS()
What if at the server level you could say:
isiPhone()             isSamsungTablet()     iswebOS()
isBlackBerry()         isHTCtablet()         isbadaOS()
isHTC()                isMotorolaTablet()
isNexus()              isAsusTablet()
isDellStreak()         isNookTablet()
isMotorola()           isAcerTablet()
isSamsung()            isYarvikTablet()
isSony()               isGenericTablet()
isAsus()               isAndroidOS()
isPalm()               isBlackBerryOS()
isGenericPhone()       isPalmOS()
isAcerTablet()         isSymbianOS()
isYarvikTablet()       isWindowsMobileOS()
isGenericTablet()      isiOS()
isBlackBerryTablet()   isFlashLiteOS()
isiPad()               isJavaOS()
isKindle()             isNokiaOS()
What if at the server level you could say:
isiPhone()             isSamsungTablet()     iswebOS()
isBlackBerry()         isHTCtablet()         isbadaOS()
isHTC()                isMotorolaTablet()    isBREWOS()
isNexus()              isAsusTablet()
isDellStreak()         isNookTablet()
isMotorola()           isAcerTablet()
isSamsung()            isYarvikTablet()
isSony()               isGenericTablet()
isAsus()               isAndroidOS()
isPalm()               isBlackBerryOS()
isGenericPhone()       isPalmOS()
isAcerTablet()         isSymbianOS()
isYarvikTablet()       isWindowsMobileOS()
isGenericTablet()      isiOS()
isBlackBerryTablet()   isFlashLiteOS()
isiPad()               isJavaOS()
isKindle()             isNokiaOS()
What if at the server level you could say:
isiPhone()             isSamsungTablet()     iswebOS()
isBlackBerry()         isHTCtablet()         isbadaOS()
isHTC()                isMotorolaTablet()    isBREWOS()
isNexus()              isAsusTablet()        isChrome()
isDellStreak()         isNookTablet()
isMotorola()           isAcerTablet()
isSamsung()            isYarvikTablet()
isSony()               isGenericTablet()
isAsus()               isAndroidOS()
isPalm()               isBlackBerryOS()
isGenericPhone()       isPalmOS()
isAcerTablet()         isSymbianOS()
isYarvikTablet()       isWindowsMobileOS()
isGenericTablet()      isiOS()
isBlackBerryTablet()   isFlashLiteOS()
isiPad()               isJavaOS()
isKindle()             isNokiaOS()
What if at the server level you could say:
isiPhone()             isSamsungTablet()     iswebOS()
isBlackBerry()         isHTCtablet()         isbadaOS()
isHTC()                isMotorolaTablet()    isBREWOS()
isNexus()              isAsusTablet()        isChrome()
isDellStreak()         isNookTablet()        isDolfin()
isMotorola()           isAcerTablet()
isSamsung()            isYarvikTablet()
isSony()               isGenericTablet()
isAsus()               isAndroidOS()
isPalm()               isBlackBerryOS()
isGenericPhone()       isPalmOS()
isAcerTablet()         isSymbianOS()
isYarvikTablet()       isWindowsMobileOS()
isGenericTablet()      isiOS()
isBlackBerryTablet()   isFlashLiteOS()
isiPad()               isJavaOS()
isKindle()             isNokiaOS()
What if at the server level you could say:
isiPhone()             isSamsungTablet()     iswebOS()
isBlackBerry()         isHTCtablet()         isbadaOS()
isHTC()                isMotorolaTablet()    isBREWOS()
isNexus()              isAsusTablet()        isChrome()
isDellStreak()         isNookTablet()        isDolfin()
isMotorola()           isAcerTablet()        isOpera()
isSamsung()            isYarvikTablet()
isSony()               isGenericTablet()
isAsus()               isAndroidOS()
isPalm()               isBlackBerryOS()
isGenericPhone()       isPalmOS()
isAcerTablet()         isSymbianOS()
isYarvikTablet()       isWindowsMobileOS()
isGenericTablet()      isiOS()
isBlackBerryTablet()   isFlashLiteOS()
isiPad()               isJavaOS()
isKindle()             isNokiaOS()
What if at the server level you could say:
isiPhone()             isSamsungTablet()     iswebOS()
isBlackBerry()         isHTCtablet()         isbadaOS()
isHTC()                isMotorolaTablet()    isBREWOS()
isNexus()              isAsusTablet()        isChrome()
isDellStreak()         isNookTablet()        isDolfin()
isMotorola()           isAcerTablet()        isOpera()
isSamsung()            isYarvikTablet()      isSkyfire()
isSony()               isGenericTablet()
isAsus()               isAndroidOS()
isPalm()               isBlackBerryOS()
isGenericPhone()       isPalmOS()
isAcerTablet()         isSymbianOS()
isYarvikTablet()       isWindowsMobileOS()
isGenericTablet()      isiOS()
isBlackBerryTablet()   isFlashLiteOS()
isiPad()               isJavaOS()
isKindle()             isNokiaOS()
What if at the server level you could say:
isiPhone()             isSamsungTablet()     iswebOS()
isBlackBerry()         isHTCtablet()         isbadaOS()
isHTC()                isMotorolaTablet()    isBREWOS()
isNexus()              isAsusTablet()        isChrome()
isDellStreak()         isNookTablet()        isDolfin()
isMotorola()           isAcerTablet()        isOpera()
isSamsung()            isYarvikTablet()      isSkyfire()
isSony()               isGenericTablet()     isIE()
isAsus()               isAndroidOS()
isPalm()               isBlackBerryOS()
isGenericPhone()       isPalmOS()
isAcerTablet()         isSymbianOS()
isYarvikTablet()       isWindowsMobileOS()
isGenericTablet()      isiOS()
isBlackBerryTablet()   isFlashLiteOS()
isiPad()               isJavaOS()
isKindle()             isNokiaOS()
What if at the server level you could say:
isiPhone()             isSamsungTablet()     iswebOS()
isBlackBerry()         isHTCtablet()         isbadaOS()
isHTC()                isMotorolaTablet()    isBREWOS()
isNexus()              isAsusTablet()        isChrome()
isDellStreak()         isNookTablet()        isDolfin()
isMotorola()           isAcerTablet()        isOpera()
isSamsung()            isYarvikTablet()      isSkyfire()
isSony()               isGenericTablet()     isIE()
isAsus()               isAndroidOS()         isFirefox()
isPalm()               isBlackBerryOS()
isGenericPhone()       isPalmOS()
isAcerTablet()         isSymbianOS()
isYarvikTablet()       isWindowsMobileOS()
isGenericTablet()      isiOS()
isBlackBerryTablet()   isFlashLiteOS()
isiPad()               isJavaOS()
isKindle()             isNokiaOS()
What if at the server level you could say:
isiPhone()             isSamsungTablet()     iswebOS()
isBlackBerry()         isHTCtablet()         isbadaOS()
isHTC()                isMotorolaTablet()    isBREWOS()
isNexus()              isAsusTablet()        isChrome()
isDellStreak()         isNookTablet()        isDolfin()
isMotorola()           isAcerTablet()        isOpera()
isSamsung()            isYarvikTablet()      isSkyfire()
isSony()               isGenericTablet()     isIE()
isAsus()               isAndroidOS()         isFirefox()
isPalm()               isBlackBerryOS()      isBolt()
isGenericPhone()       isPalmOS()
isAcerTablet()         isSymbianOS()
isYarvikTablet()       isWindowsMobileOS()
isGenericTablet()      isiOS()
isBlackBerryTablet()   isFlashLiteOS()
isiPad()               isJavaOS()
isKindle()             isNokiaOS()
What if at the server level you could say:
isiPhone()             isSamsungTablet()     iswebOS()
isBlackBerry()         isHTCtablet()         isbadaOS()
isHTC()                isMotorolaTablet()    isBREWOS()
isNexus()              isAsusTablet()        isChrome()
isDellStreak()         isNookTablet()        isDolfin()
isMotorola()           isAcerTablet()        isOpera()
isSamsung()            isYarvikTablet()      isSkyfire()
isSony()               isGenericTablet()     isIE()
isAsus()               isAndroidOS()         isFirefox()
isPalm()               isBlackBerryOS()      isBolt()
isGenericPhone()       isPalmOS()            isTeaShark()
isAcerTablet()         isSymbianOS()
isYarvikTablet()       isWindowsMobileOS()
isGenericTablet()      isiOS()
isBlackBerryTablet()   isFlashLiteOS()
isiPad()               isJavaOS()
isKindle()             isNokiaOS()
What if at the server level you could say:
isiPhone()             isSamsungTablet()     iswebOS()
isBlackBerry()         isHTCtablet()         isbadaOS()
isHTC()                isMotorolaTablet()    isBREWOS()
isNexus()              isAsusTablet()        isChrome()
isDellStreak()         isNookTablet()        isDolfin()
isMotorola()           isAcerTablet()        isOpera()
isSamsung()            isYarvikTablet()      isSkyfire()
isSony()               isGenericTablet()     isIE()
isAsus()               isAndroidOS()         isFirefox()
isPalm()               isBlackBerryOS()      isBolt()
isGenericPhone()       isPalmOS()            isTeaShark()
isAcerTablet()         isSymbianOS()         isBlazer()
isYarvikTablet()       isWindowsMobileOS()
isGenericTablet()      isiOS()
isBlackBerryTablet()   isFlashLiteOS()
isiPad()               isJavaOS()
isKindle()             isNokiaOS()
What if at the server level you could say:
isiPhone()             isSamsungTablet()     iswebOS()
isBlackBerry()         isHTCtablet()         isbadaOS()
isHTC()                isMotorolaTablet()    isBREWOS()
isNexus()              isAsusTablet()        isChrome()
isDellStreak()         isNookTablet()        isDolfin()
isMotorola()           isAcerTablet()        isOpera()
isSamsung()            isYarvikTablet()      isSkyfire()
isSony()               isGenericTablet()     isIE()
isAsus()               isAndroidOS()         isFirefox()
isPalm()               isBlackBerryOS()      isBolt()
isGenericPhone()       isPalmOS()            isTeaShark()
isAcerTablet()         isSymbianOS()         isBlazer()
isYarvikTablet()       isWindowsMobileOS()   isSafari()
isGenericTablet()      isiOS()
isBlackBerryTablet()   isFlashLiteOS()
isiPad()               isJavaOS()
isKindle()             isNokiaOS()
What if at the server level you could say:
isiPhone()             isSamsungTablet()     iswebOS()
isBlackBerry()         isHTCtablet()         isbadaOS()
isHTC()                isMotorolaTablet()    isBREWOS()
isNexus()              isAsusTablet()        isChrome()
isDellStreak()         isNookTablet()        isDolfin()
isMotorola()           isAcerTablet()        isOpera()
isSamsung()            isYarvikTablet()      isSkyfire()
isSony()               isGenericTablet()     isIE()
isAsus()               isAndroidOS()         isFirefox()
isPalm()               isBlackBerryOS()      isBolt()
isGenericPhone()       isPalmOS()            isTeaShark()
isAcerTablet()         isSymbianOS()         isBlazer()
isYarvikTablet()       isWindowsMobileOS()   isSafari()
isGenericTablet()      isiOS()               isMidori()
isBlackBerryTablet()   isFlashLiteOS()
isiPad()               isJavaOS()
isKindle()             isNokiaOS()
What if at the server level you could say:
isiPhone()             isSamsungTablet()     iswebOS()
isBlackBerry()         isHTCtablet()         isbadaOS()
isHTC()                isMotorolaTablet()    isBREWOS()
isNexus()              isAsusTablet()        isChrome()
isDellStreak()         isNookTablet()        isDolfin()
isMotorola()           isAcerTablet()        isOpera()
isSamsung()            isYarvikTablet()      isSkyfire()
isSony()               isGenericTablet()     isIE()
isAsus()               isAndroidOS()         isFirefox()
isPalm()               isBlackBerryOS()      isBolt()
isGenericPhone()       isPalmOS()            isTeaShark()
isAcerTablet()         isSymbianOS()         isBlazer()
isYarvikTablet()       isWindowsMobileOS()   isSafari()
isGenericTablet()      isiOS()               isMidori()
isBlackBerryTablet()   isFlashLiteOS()       isGenericBrowser()
isiPad()               isJavaOS()
isKindle()             isNokiaOS()
Featured Images
Leveraging WordPress
Featured Images
Leveraging WordPress
Featured Images
Leveraging WordPress
add_image_size(   'desktop', 800, 600, true );
add_image_size(   'tablet', 600, 350, true );
add_image_size(   'iphone', 400, 300, true);
add_image_size(   'mobile', 300, 175, true );




Featured Images
Leveraging WordPress
WordPress PHP Mobile Detect
WordPress PHP Mobile Detect
<?php
	 if ( isiPhone() ) post_thumbnail( 'iphone' );
	 elseif ( isMobile() ) post_thumbnail( 'mobile' );	
	 elseif ( isTablet() ) post_thumbnail( 'tablet' );
	 else post_thumbnail( 'desktop' );
?>
Dropping Static Width and Height Attributes
Dropping Static Width and Height Attributes

 $( '.attachment-post-thumb' )
.removeAttr( 'width' ).removeAttr( 'height' );

 $( '.content img' )
.removeAttr( 'width' ).removeAttr( 'height' );
Multi-Column
Using the screen up
Multi-Column
Remember responsive isn’t just mobile
Multi-Column
Remember responsive isn’t just mobile
Multi-Column
Remember responsive isn’t just mobile
Multi-Column
Remember responsive isn’t just mobile
Menus
Mobile and Desktop Menu Locations
$main_menu = array(
  'theme_location' => 'desktop_header',
);

$mobile_menu = array(
  'theme_location' => 'mobile_header',
);

if ( wp_is_mobile() ) wp_nav_menu( $mobile_menu ); 	
else wp_nav_menu( $main_menu );



  Featured Images
  Leveraging WordPress
Shortcodes
Empowering User Admins to choose when to
show content
Shortcodes
Empowering User Admins to choose when to
show content
function j2theme_nomobile( $atts, $content="" ) {
  global $detect;
  if( ! isMobile() )return "{$content}";
}
add_shortcode( 'nomobile', 'j2theme_nomobile' );




  Shortcodes
  Empowering User Admins to choose when to
  show content
Shortcodes
Empowering User Admins to choose when to
show content
function j2theme_onlymobile( $atts, $content="" ){
  global $detect;	
  if( isMobile() )return "{$content}";
}
add_shortcode( 'onlymobile', 'j2theme_onlymobile' );




   Shortcodes
   Empowering User Admins to choose when to
   show content
Shortcodes
Empowering User Admins to choose when to
show content
What Does it all Mean
Greater control over content to build custom
but unified experiences for everyone
Less HTTP requests




What Does it all Mean
Greater control over content to build custom
but unified experiences for everyone
Less HTTP requests

   No need for display:none;




What Does it all Mean
Greater control over content to build custom
but unified experiences for everyone
Less HTTP requests

   No need for display:none;
  Maintain same content for everyone




What Does it all Mean
Greater control over content to build custom
but unified experiences for everyone
Less HTTP requests

    No need for display:none;
   Maintain same content for everyone
Removal of calls to files you don’t need


 What Does it all Mean
 Greater control over content to build custom
 but unified experiences for everyone
REMEMBER!
It’s about giving control
back to the User Admin
HTTP://WORDPRESS.ORG/EXTEND/PLUGINS/WP-MOBILE-DETECT/
WP Mobile Detect Plugin




HTTP://WORDPRESS.ORG/EXTEND/PLUGINS/WP-MOBILE-DETECT/
?’s
Jesse Friedman
Author, Professor, Developer - @professor

More Related Content

Similar to Maintaining Responsive Integrity with Device Detection

NodeJS for Novices - 28/Oct/13 - Winnipeg, MB
NodeJS for Novices - 28/Oct/13 - Winnipeg, MBNodeJS for Novices - 28/Oct/13 - Winnipeg, MB
NodeJS for Novices - 28/Oct/13 - Winnipeg, MBDavid Wesst
 
Use Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile AppsUse Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile AppsNathan Smith
 
Angular js mobile jsday 2014 - Verona 14 may
Angular js mobile   jsday 2014 - Verona 14 mayAngular js mobile   jsday 2014 - Verona 14 may
Angular js mobile jsday 2014 - Verona 14 mayLuciano Amodio
 
(In)Security Implication in the JS Universe
(In)Security Implication in the JS Universe(In)Security Implication in the JS Universe
(In)Security Implication in the JS UniverseStefano Di Paola
 
Get Ahead with HTML5 on Moible
Get Ahead with HTML5 on MoibleGet Ahead with HTML5 on Moible
Get Ahead with HTML5 on Moiblemarkuskobler
 
Refactoring Wunderlist. UA Mobile 2016.
Refactoring Wunderlist. UA Mobile 2016.Refactoring Wunderlist. UA Mobile 2016.
Refactoring Wunderlist. UA Mobile 2016.UA Mobile
 
Clear AppSec Visibility with AppSpider and ThreadFix
 Clear AppSec Visibility with AppSpider and ThreadFix Clear AppSec Visibility with AppSpider and ThreadFix
Clear AppSec Visibility with AppSpider and ThreadFixDenim Group
 
Using Ember to Make a Bazillion Dollars
Using Ember to Make a Bazillion DollarsUsing Ember to Make a Bazillion Dollars
Using Ember to Make a Bazillion DollarsMike Pack
 
Survive JavaScript - Strategies and Tricks
Survive JavaScript - Strategies and TricksSurvive JavaScript - Strategies and Tricks
Survive JavaScript - Strategies and TricksJuho Vepsäläinen
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX DesignersAshlimarie
 
PHP and Platform Independance in the Cloud
PHP and Platform Independance in the CloudPHP and Platform Independance in the Cloud
PHP and Platform Independance in the CloudZendCon
 
JavaScript UI Architecture: Be all that you can be
JavaScript UI Architecture: Be all that you can beJavaScript UI Architecture: Be all that you can be
JavaScript UI Architecture: Be all that you can beKyle Simpson
 
Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web DesignClarissa Peterson
 
Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016Doris Chen
 
Best And Worst Practices Building Ria with Adobe and Microsoft
Best And Worst Practices Building Ria with Adobe and MicrosoftBest And Worst Practices Building Ria with Adobe and Microsoft
Best And Worst Practices Building Ria with Adobe and MicrosoftJosh Holmes
 
Proxy deep-dive java-one_20151027_001
Proxy deep-dive java-one_20151027_001Proxy deep-dive java-one_20151027_001
Proxy deep-dive java-one_20151027_001Sven Ruppert
 
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS featuresIntro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS featuresAndreas Bovens
 
Vaadin Introduction, 7.3 edition
Vaadin Introduction, 7.3 editionVaadin Introduction, 7.3 edition
Vaadin Introduction, 7.3 editionJoonas Lehtinen
 

Similar to Maintaining Responsive Integrity with Device Detection (20)

NodeJS for Novices - 28/Oct/13 - Winnipeg, MB
NodeJS for Novices - 28/Oct/13 - Winnipeg, MBNodeJS for Novices - 28/Oct/13 - Winnipeg, MB
NodeJS for Novices - 28/Oct/13 - Winnipeg, MB
 
Use Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile AppsUse Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile Apps
 
Angular js mobile jsday 2014 - Verona 14 may
Angular js mobile   jsday 2014 - Verona 14 mayAngular js mobile   jsday 2014 - Verona 14 may
Angular js mobile jsday 2014 - Verona 14 may
 
(In)Security Implication in the JS Universe
(In)Security Implication in the JS Universe(In)Security Implication in the JS Universe
(In)Security Implication in the JS Universe
 
Get Ahead with HTML5 on Moible
Get Ahead with HTML5 on MoibleGet Ahead with HTML5 on Moible
Get Ahead with HTML5 on Moible
 
Refactoring Wunderlist. UA Mobile 2016.
Refactoring Wunderlist. UA Mobile 2016.Refactoring Wunderlist. UA Mobile 2016.
Refactoring Wunderlist. UA Mobile 2016.
 
Clear AppSec Visibility with AppSpider and ThreadFix
 Clear AppSec Visibility with AppSpider and ThreadFix Clear AppSec Visibility with AppSpider and ThreadFix
Clear AppSec Visibility with AppSpider and ThreadFix
 
Using Ember to Make a Bazillion Dollars
Using Ember to Make a Bazillion DollarsUsing Ember to Make a Bazillion Dollars
Using Ember to Make a Bazillion Dollars
 
Survive JavaScript - Strategies and Tricks
Survive JavaScript - Strategies and TricksSurvive JavaScript - Strategies and Tricks
Survive JavaScript - Strategies and Tricks
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
 
PHP and Platform Independance in the Cloud
PHP and Platform Independance in the CloudPHP and Platform Independance in the Cloud
PHP and Platform Independance in the Cloud
 
JavaScript UI Architecture: Be all that you can be
JavaScript UI Architecture: Be all that you can beJavaScript UI Architecture: Be all that you can be
JavaScript UI Architecture: Be all that you can be
 
Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web Design
 
2016 mORMot
2016 mORMot2016 mORMot
2016 mORMot
 
Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016
 
Best practices android_2010
Best practices android_2010Best practices android_2010
Best practices android_2010
 
Best And Worst Practices Building Ria with Adobe and Microsoft
Best And Worst Practices Building Ria with Adobe and MicrosoftBest And Worst Practices Building Ria with Adobe and Microsoft
Best And Worst Practices Building Ria with Adobe and Microsoft
 
Proxy deep-dive java-one_20151027_001
Proxy deep-dive java-one_20151027_001Proxy deep-dive java-one_20151027_001
Proxy deep-dive java-one_20151027_001
 
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS featuresIntro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
 
Vaadin Introduction, 7.3 edition
Vaadin Introduction, 7.3 editionVaadin Introduction, 7.3 edition
Vaadin Introduction, 7.3 edition
 

Recently uploaded

Benefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other FrameworksBenefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other FrameworksSoftradix Technologies
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024Scott Keck-Warren
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking MenDelhi Call girls
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar
 
Key Features Of Token Development (1).pptx
Key  Features Of Token  Development (1).pptxKey  Features Of Token  Development (1).pptx
Key Features Of Token Development (1).pptxLBM Solutions
 
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...HostedbyConfluent
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationSafe Software
 
How to Remove Document Management Hurdles with X-Docs?
How to Remove Document Management Hurdles with X-Docs?How to Remove Document Management Hurdles with X-Docs?
How to Remove Document Management Hurdles with X-Docs?XfilesPro
 
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 3652toLead Limited
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsMemoori
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 
Azure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & ApplicationAzure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & ApplicationAndikSusilo4
 
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Alan Dix
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls
 

Recently uploaded (20)

Benefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other FrameworksBenefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other Frameworks
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
 
Key Features Of Token Development (1).pptx
Key  Features Of Token  Development (1).pptxKey  Features Of Token  Development (1).pptx
Key Features Of Token Development (1).pptx
 
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
 
How to Remove Document Management Hurdles with X-Docs?
How to Remove Document Management Hurdles with X-Docs?How to Remove Document Management Hurdles with X-Docs?
How to Remove Document Management Hurdles with X-Docs?
 
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial Buildings
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 
Azure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & ApplicationAzure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & Application
 
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 

Maintaining Responsive Integrity with Device Detection

  • 2. Jesse Friedman Author, Professor, Developer - @professor
  • 3. · Director of Web Interface and Development · Professor at Johnson & Wales University · Author: Web Designers Guide to WordPress · Writer: Designers Web Handbook, Web Designers Idea Book Volume 2, .NET Magazine, netmagazine.com, HOW and more Jesse Friedman Author, Professor, Developer - @professor
  • 4. · Director of Web Interface and Development · Professor at Johnson & Wales University · Author: Web Designers Guide to WordPress · Writer: Designers Web Handbook, Web Designers Idea Book Volume 2, .NET Magazine, netmagazine.com, HOW and more · Co-organizer WordPress Providence Meetup and WordCamp Providence 2012 Jesse Friedman Author, Professor, Developer - @professor
  • 5. Tweet a photo, link or text about something you learned today. cc/ @professor use #wcchi. 2 Hard Copies and 3 Digital Want a Free Copy?
  • 6. Responsive So what’s the difference between a CMS based Responsive site and a static one?
  • 8. I C ES S T R A P T D S R W O
  • 9. I C ES S T R A P T D S R W O
  • 10. S S R E D P O R W
  • 11.
  • 12.
  • 16. FRAMEWORKS, GRID SYSTEMS, ALL THAT STUFF, STILL WORKS!
  • 17. User Admin us·er ad·min
  • 18. User Admin us·er ad·min A person responsible for running and operating a system
  • 19. User Admin us·er ad·min
  • 20. User Admin us·er ad·min In other words, the person who’s gonna gaff up your design
  • 21. User Admin of your design May compromise the integrity
  • 22. User Admin of your design May compromise the integrity
  • 23. Userexpected to maintain responsive content Admin’s Can’t be
  • 24. Userexpected to maintain responsive content Admin’s Can’t be
  • 25. User some road blocks Admin’s Will have
  • 26. · Media and maintaining a fluid layout User some road blocks Admin’s Will have
  • 27. · Media and maintaining a fluid layout · Menus User some road blocks Admin’s Will have
  • 28. · Media and maintaining a fluid layout · Menus · Multiple Columns User some road blocks Admin’s Will have
  • 29. · Media and maintaining a fluid layout · Menus · Multiple Columns · Showing and Hiding Content based on user device User some road blocks Admin’s Will have
  • 30. Content is KING! Empowering User Admins to choose when to show content
  • 31. What if at the server level you could say: Content is KING! Empowering User Admins to choose when to show content
  • 32. What if at the server level you could say: On a mobile device? do this: Content is KING! Empowering User Admins to choose when to show content
  • 33. What if at the server level you could say: On a mobile device? do this: THIS Content is KING! Empowering User Admins to choose when to show content
  • 34. What if at the server level you could say: On a mobile device? do this: THIS else do this: Content is KING! Empowering User Admins to choose when to show content
  • 35. What if at the server level you could say: On a mobile device? do this: THIS else do this: OTHER THIS Content is KING! Empowering User Admins to choose when to show content
  • 36.
  • 38. WordPress wp_is_mobile(); <?php if ( wp_is_mobile() ) the_post_thumbnail( 'post-thumb' ); else the_post_thumbnail ( 'post-large' ); ?>
  • 39.
  • 40. What if at the server level you could say:
  • 41. What if at the server level you could say: isiPhone()
  • 42. What if at the server level you could say: isiPhone() isBlackBerry()
  • 43. What if at the server level you could say: isiPhone() isBlackBerry() isHTC()
  • 44. What if at the server level you could say: isiPhone() isBlackBerry() isHTC() isNexus()
  • 45. What if at the server level you could say: isiPhone() isBlackBerry() isHTC() isNexus() isDellStreak()
  • 46. What if at the server level you could say: isiPhone() isBlackBerry() isHTC() isNexus() isDellStreak() isMotorola()
  • 47. What if at the server level you could say: isiPhone() isBlackBerry() isHTC() isNexus() isDellStreak() isMotorola() isSamsung()
  • 48. What if at the server level you could say: isiPhone() isBlackBerry() isHTC() isNexus() isDellStreak() isMotorola() isSamsung() isSony()
  • 49. What if at the server level you could say: isiPhone() isBlackBerry() isHTC() isNexus() isDellStreak() isMotorola() isSamsung() isSony() isAsus()
  • 50. What if at the server level you could say: isiPhone() isBlackBerry() isHTC() isNexus() isDellStreak() isMotorola() isSamsung() isSony() isAsus() isPalm()
  • 51. What if at the server level you could say: isiPhone() isBlackBerry() isHTC() isNexus() isDellStreak() isMotorola() isSamsung() isSony() isAsus() isPalm() isGenericPhone()
  • 52. What if at the server level you could say: isiPhone() isBlackBerry() isHTC() isNexus() isDellStreak() isMotorola() isSamsung() isSony() isAsus() isPalm() isGenericPhone() isAcerTablet()
  • 53. What if at the server level you could say: isiPhone() isBlackBerry() isHTC() isNexus() isDellStreak() isMotorola() isSamsung() isSony() isAsus() isPalm() isGenericPhone() isAcerTablet() isYarvikTablet()
  • 54. What if at the server level you could say: isiPhone() isBlackBerry() isHTC() isNexus() isDellStreak() isMotorola() isSamsung() isSony() isAsus() isPalm() isGenericPhone() isAcerTablet() isYarvikTablet() isGenericTablet()
  • 55. What if at the server level you could say: isiPhone() isBlackBerry() isHTC() isNexus() isDellStreak() isMotorola() isSamsung() isSony() isAsus() isPalm() isGenericPhone() isAcerTablet() isYarvikTablet() isGenericTablet() isBlackBerryTablet()
  • 56. What if at the server level you could say: isiPhone() isBlackBerry() isHTC() isNexus() isDellStreak() isMotorola() isSamsung() isSony() isAsus() isPalm() isGenericPhone() isAcerTablet() isYarvikTablet() isGenericTablet() isBlackBerryTablet() isiPad()
  • 57. What if at the server level you could say: isiPhone() isBlackBerry() isHTC() isNexus() isDellStreak() isMotorola() isSamsung() isSony() isAsus() isPalm() isGenericPhone() isAcerTablet() isYarvikTablet() isGenericTablet() isBlackBerryTablet() isiPad() isKindle()
  • 58. What if at the server level you could say: isiPhone() isSamsungTablet() isBlackBerry() isHTC() isNexus() isDellStreak() isMotorola() isSamsung() isSony() isAsus() isPalm() isGenericPhone() isAcerTablet() isYarvikTablet() isGenericTablet() isBlackBerryTablet() isiPad() isKindle()
  • 59. What if at the server level you could say: isiPhone() isSamsungTablet() isBlackBerry() isHTCtablet() isHTC() isNexus() isDellStreak() isMotorola() isSamsung() isSony() isAsus() isPalm() isGenericPhone() isAcerTablet() isYarvikTablet() isGenericTablet() isBlackBerryTablet() isiPad() isKindle()
  • 60. What if at the server level you could say: isiPhone() isSamsungTablet() isBlackBerry() isHTCtablet() isHTC() isMotorolaTablet() isNexus() isDellStreak() isMotorola() isSamsung() isSony() isAsus() isPalm() isGenericPhone() isAcerTablet() isYarvikTablet() isGenericTablet() isBlackBerryTablet() isiPad() isKindle()
  • 61. What if at the server level you could say: isiPhone() isSamsungTablet() isBlackBerry() isHTCtablet() isHTC() isMotorolaTablet() isNexus() isAsusTablet() isDellStreak() isMotorola() isSamsung() isSony() isAsus() isPalm() isGenericPhone() isAcerTablet() isYarvikTablet() isGenericTablet() isBlackBerryTablet() isiPad() isKindle()
  • 62. What if at the server level you could say: isiPhone() isSamsungTablet() isBlackBerry() isHTCtablet() isHTC() isMotorolaTablet() isNexus() isAsusTablet() isDellStreak() isNookTablet() isMotorola() isSamsung() isSony() isAsus() isPalm() isGenericPhone() isAcerTablet() isYarvikTablet() isGenericTablet() isBlackBerryTablet() isiPad() isKindle()
  • 63. What if at the server level you could say: isiPhone() isSamsungTablet() isBlackBerry() isHTCtablet() isHTC() isMotorolaTablet() isNexus() isAsusTablet() isDellStreak() isNookTablet() isMotorola() isAcerTablet() isSamsung() isSony() isAsus() isPalm() isGenericPhone() isAcerTablet() isYarvikTablet() isGenericTablet() isBlackBerryTablet() isiPad() isKindle()
  • 64. What if at the server level you could say: isiPhone() isSamsungTablet() isBlackBerry() isHTCtablet() isHTC() isMotorolaTablet() isNexus() isAsusTablet() isDellStreak() isNookTablet() isMotorola() isAcerTablet() isSamsung() isYarvikTablet() isSony() isAsus() isPalm() isGenericPhone() isAcerTablet() isYarvikTablet() isGenericTablet() isBlackBerryTablet() isiPad() isKindle()
  • 65. What if at the server level you could say: isiPhone() isSamsungTablet() isBlackBerry() isHTCtablet() isHTC() isMotorolaTablet() isNexus() isAsusTablet() isDellStreak() isNookTablet() isMotorola() isAcerTablet() isSamsung() isYarvikTablet() isSony() isGenericTablet() isAsus() isPalm() isGenericPhone() isAcerTablet() isYarvikTablet() isGenericTablet() isBlackBerryTablet() isiPad() isKindle()
  • 66. What if at the server level you could say: isiPhone() isSamsungTablet() isBlackBerry() isHTCtablet() isHTC() isMotorolaTablet() isNexus() isAsusTablet() isDellStreak() isNookTablet() isMotorola() isAcerTablet() isSamsung() isYarvikTablet() isSony() isGenericTablet() isAsus() isAndroidOS() isPalm() isGenericPhone() isAcerTablet() isYarvikTablet() isGenericTablet() isBlackBerryTablet() isiPad() isKindle()
  • 67. What if at the server level you could say: isiPhone() isSamsungTablet() isBlackBerry() isHTCtablet() isHTC() isMotorolaTablet() isNexus() isAsusTablet() isDellStreak() isNookTablet() isMotorola() isAcerTablet() isSamsung() isYarvikTablet() isSony() isGenericTablet() isAsus() isAndroidOS() isPalm() isBlackBerryOS() isGenericPhone() isAcerTablet() isYarvikTablet() isGenericTablet() isBlackBerryTablet() isiPad() isKindle()
  • 68. What if at the server level you could say: isiPhone() isSamsungTablet() isBlackBerry() isHTCtablet() isHTC() isMotorolaTablet() isNexus() isAsusTablet() isDellStreak() isNookTablet() isMotorola() isAcerTablet() isSamsung() isYarvikTablet() isSony() isGenericTablet() isAsus() isAndroidOS() isPalm() isBlackBerryOS() isGenericPhone() isPalmOS() isAcerTablet() isYarvikTablet() isGenericTablet() isBlackBerryTablet() isiPad() isKindle()
  • 69. What if at the server level you could say: isiPhone() isSamsungTablet() isBlackBerry() isHTCtablet() isHTC() isMotorolaTablet() isNexus() isAsusTablet() isDellStreak() isNookTablet() isMotorola() isAcerTablet() isSamsung() isYarvikTablet() isSony() isGenericTablet() isAsus() isAndroidOS() isPalm() isBlackBerryOS() isGenericPhone() isPalmOS() isAcerTablet() isSymbianOS() isYarvikTablet() isGenericTablet() isBlackBerryTablet() isiPad() isKindle()
  • 70. What if at the server level you could say: isiPhone() isSamsungTablet() isBlackBerry() isHTCtablet() isHTC() isMotorolaTablet() isNexus() isAsusTablet() isDellStreak() isNookTablet() isMotorola() isAcerTablet() isSamsung() isYarvikTablet() isSony() isGenericTablet() isAsus() isAndroidOS() isPalm() isBlackBerryOS() isGenericPhone() isPalmOS() isAcerTablet() isSymbianOS() isYarvikTablet() isWindowsMobileOS() isGenericTablet() isBlackBerryTablet() isiPad() isKindle()
  • 71. What if at the server level you could say: isiPhone() isSamsungTablet() isBlackBerry() isHTCtablet() isHTC() isMotorolaTablet() isNexus() isAsusTablet() isDellStreak() isNookTablet() isMotorola() isAcerTablet() isSamsung() isYarvikTablet() isSony() isGenericTablet() isAsus() isAndroidOS() isPalm() isBlackBerryOS() isGenericPhone() isPalmOS() isAcerTablet() isSymbianOS() isYarvikTablet() isWindowsMobileOS() isGenericTablet() isiOS() isBlackBerryTablet() isiPad() isKindle()
  • 72. What if at the server level you could say: isiPhone() isSamsungTablet() isBlackBerry() isHTCtablet() isHTC() isMotorolaTablet() isNexus() isAsusTablet() isDellStreak() isNookTablet() isMotorola() isAcerTablet() isSamsung() isYarvikTablet() isSony() isGenericTablet() isAsus() isAndroidOS() isPalm() isBlackBerryOS() isGenericPhone() isPalmOS() isAcerTablet() isSymbianOS() isYarvikTablet() isWindowsMobileOS() isGenericTablet() isiOS() isBlackBerryTablet() isFlashLiteOS() isiPad() isKindle()
  • 73. What if at the server level you could say: isiPhone() isSamsungTablet() isBlackBerry() isHTCtablet() isHTC() isMotorolaTablet() isNexus() isAsusTablet() isDellStreak() isNookTablet() isMotorola() isAcerTablet() isSamsung() isYarvikTablet() isSony() isGenericTablet() isAsus() isAndroidOS() isPalm() isBlackBerryOS() isGenericPhone() isPalmOS() isAcerTablet() isSymbianOS() isYarvikTablet() isWindowsMobileOS() isGenericTablet() isiOS() isBlackBerryTablet() isFlashLiteOS() isiPad() isJavaOS() isKindle()
  • 74. What if at the server level you could say: isiPhone() isSamsungTablet() isBlackBerry() isHTCtablet() isHTC() isMotorolaTablet() isNexus() isAsusTablet() isDellStreak() isNookTablet() isMotorola() isAcerTablet() isSamsung() isYarvikTablet() isSony() isGenericTablet() isAsus() isAndroidOS() isPalm() isBlackBerryOS() isGenericPhone() isPalmOS() isAcerTablet() isSymbianOS() isYarvikTablet() isWindowsMobileOS() isGenericTablet() isiOS() isBlackBerryTablet() isFlashLiteOS() isiPad() isJavaOS() isKindle() isNokiaOS()
  • 75. What if at the server level you could say: isiPhone() isSamsungTablet() iswebOS() isBlackBerry() isHTCtablet() isHTC() isMotorolaTablet() isNexus() isAsusTablet() isDellStreak() isNookTablet() isMotorola() isAcerTablet() isSamsung() isYarvikTablet() isSony() isGenericTablet() isAsus() isAndroidOS() isPalm() isBlackBerryOS() isGenericPhone() isPalmOS() isAcerTablet() isSymbianOS() isYarvikTablet() isWindowsMobileOS() isGenericTablet() isiOS() isBlackBerryTablet() isFlashLiteOS() isiPad() isJavaOS() isKindle() isNokiaOS()
  • 76. What if at the server level you could say: isiPhone() isSamsungTablet() iswebOS() isBlackBerry() isHTCtablet() isbadaOS() isHTC() isMotorolaTablet() isNexus() isAsusTablet() isDellStreak() isNookTablet() isMotorola() isAcerTablet() isSamsung() isYarvikTablet() isSony() isGenericTablet() isAsus() isAndroidOS() isPalm() isBlackBerryOS() isGenericPhone() isPalmOS() isAcerTablet() isSymbianOS() isYarvikTablet() isWindowsMobileOS() isGenericTablet() isiOS() isBlackBerryTablet() isFlashLiteOS() isiPad() isJavaOS() isKindle() isNokiaOS()
  • 77. What if at the server level you could say: isiPhone() isSamsungTablet() iswebOS() isBlackBerry() isHTCtablet() isbadaOS() isHTC() isMotorolaTablet() isBREWOS() isNexus() isAsusTablet() isDellStreak() isNookTablet() isMotorola() isAcerTablet() isSamsung() isYarvikTablet() isSony() isGenericTablet() isAsus() isAndroidOS() isPalm() isBlackBerryOS() isGenericPhone() isPalmOS() isAcerTablet() isSymbianOS() isYarvikTablet() isWindowsMobileOS() isGenericTablet() isiOS() isBlackBerryTablet() isFlashLiteOS() isiPad() isJavaOS() isKindle() isNokiaOS()
  • 78. What if at the server level you could say: isiPhone() isSamsungTablet() iswebOS() isBlackBerry() isHTCtablet() isbadaOS() isHTC() isMotorolaTablet() isBREWOS() isNexus() isAsusTablet() isChrome() isDellStreak() isNookTablet() isMotorola() isAcerTablet() isSamsung() isYarvikTablet() isSony() isGenericTablet() isAsus() isAndroidOS() isPalm() isBlackBerryOS() isGenericPhone() isPalmOS() isAcerTablet() isSymbianOS() isYarvikTablet() isWindowsMobileOS() isGenericTablet() isiOS() isBlackBerryTablet() isFlashLiteOS() isiPad() isJavaOS() isKindle() isNokiaOS()
  • 79. What if at the server level you could say: isiPhone() isSamsungTablet() iswebOS() isBlackBerry() isHTCtablet() isbadaOS() isHTC() isMotorolaTablet() isBREWOS() isNexus() isAsusTablet() isChrome() isDellStreak() isNookTablet() isDolfin() isMotorola() isAcerTablet() isSamsung() isYarvikTablet() isSony() isGenericTablet() isAsus() isAndroidOS() isPalm() isBlackBerryOS() isGenericPhone() isPalmOS() isAcerTablet() isSymbianOS() isYarvikTablet() isWindowsMobileOS() isGenericTablet() isiOS() isBlackBerryTablet() isFlashLiteOS() isiPad() isJavaOS() isKindle() isNokiaOS()
  • 80. What if at the server level you could say: isiPhone() isSamsungTablet() iswebOS() isBlackBerry() isHTCtablet() isbadaOS() isHTC() isMotorolaTablet() isBREWOS() isNexus() isAsusTablet() isChrome() isDellStreak() isNookTablet() isDolfin() isMotorola() isAcerTablet() isOpera() isSamsung() isYarvikTablet() isSony() isGenericTablet() isAsus() isAndroidOS() isPalm() isBlackBerryOS() isGenericPhone() isPalmOS() isAcerTablet() isSymbianOS() isYarvikTablet() isWindowsMobileOS() isGenericTablet() isiOS() isBlackBerryTablet() isFlashLiteOS() isiPad() isJavaOS() isKindle() isNokiaOS()
  • 81. What if at the server level you could say: isiPhone() isSamsungTablet() iswebOS() isBlackBerry() isHTCtablet() isbadaOS() isHTC() isMotorolaTablet() isBREWOS() isNexus() isAsusTablet() isChrome() isDellStreak() isNookTablet() isDolfin() isMotorola() isAcerTablet() isOpera() isSamsung() isYarvikTablet() isSkyfire() isSony() isGenericTablet() isAsus() isAndroidOS() isPalm() isBlackBerryOS() isGenericPhone() isPalmOS() isAcerTablet() isSymbianOS() isYarvikTablet() isWindowsMobileOS() isGenericTablet() isiOS() isBlackBerryTablet() isFlashLiteOS() isiPad() isJavaOS() isKindle() isNokiaOS()
  • 82. What if at the server level you could say: isiPhone() isSamsungTablet() iswebOS() isBlackBerry() isHTCtablet() isbadaOS() isHTC() isMotorolaTablet() isBREWOS() isNexus() isAsusTablet() isChrome() isDellStreak() isNookTablet() isDolfin() isMotorola() isAcerTablet() isOpera() isSamsung() isYarvikTablet() isSkyfire() isSony() isGenericTablet() isIE() isAsus() isAndroidOS() isPalm() isBlackBerryOS() isGenericPhone() isPalmOS() isAcerTablet() isSymbianOS() isYarvikTablet() isWindowsMobileOS() isGenericTablet() isiOS() isBlackBerryTablet() isFlashLiteOS() isiPad() isJavaOS() isKindle() isNokiaOS()
  • 83. What if at the server level you could say: isiPhone() isSamsungTablet() iswebOS() isBlackBerry() isHTCtablet() isbadaOS() isHTC() isMotorolaTablet() isBREWOS() isNexus() isAsusTablet() isChrome() isDellStreak() isNookTablet() isDolfin() isMotorola() isAcerTablet() isOpera() isSamsung() isYarvikTablet() isSkyfire() isSony() isGenericTablet() isIE() isAsus() isAndroidOS() isFirefox() isPalm() isBlackBerryOS() isGenericPhone() isPalmOS() isAcerTablet() isSymbianOS() isYarvikTablet() isWindowsMobileOS() isGenericTablet() isiOS() isBlackBerryTablet() isFlashLiteOS() isiPad() isJavaOS() isKindle() isNokiaOS()
  • 84. What if at the server level you could say: isiPhone() isSamsungTablet() iswebOS() isBlackBerry() isHTCtablet() isbadaOS() isHTC() isMotorolaTablet() isBREWOS() isNexus() isAsusTablet() isChrome() isDellStreak() isNookTablet() isDolfin() isMotorola() isAcerTablet() isOpera() isSamsung() isYarvikTablet() isSkyfire() isSony() isGenericTablet() isIE() isAsus() isAndroidOS() isFirefox() isPalm() isBlackBerryOS() isBolt() isGenericPhone() isPalmOS() isAcerTablet() isSymbianOS() isYarvikTablet() isWindowsMobileOS() isGenericTablet() isiOS() isBlackBerryTablet() isFlashLiteOS() isiPad() isJavaOS() isKindle() isNokiaOS()
  • 85. What if at the server level you could say: isiPhone() isSamsungTablet() iswebOS() isBlackBerry() isHTCtablet() isbadaOS() isHTC() isMotorolaTablet() isBREWOS() isNexus() isAsusTablet() isChrome() isDellStreak() isNookTablet() isDolfin() isMotorola() isAcerTablet() isOpera() isSamsung() isYarvikTablet() isSkyfire() isSony() isGenericTablet() isIE() isAsus() isAndroidOS() isFirefox() isPalm() isBlackBerryOS() isBolt() isGenericPhone() isPalmOS() isTeaShark() isAcerTablet() isSymbianOS() isYarvikTablet() isWindowsMobileOS() isGenericTablet() isiOS() isBlackBerryTablet() isFlashLiteOS() isiPad() isJavaOS() isKindle() isNokiaOS()
  • 86. What if at the server level you could say: isiPhone() isSamsungTablet() iswebOS() isBlackBerry() isHTCtablet() isbadaOS() isHTC() isMotorolaTablet() isBREWOS() isNexus() isAsusTablet() isChrome() isDellStreak() isNookTablet() isDolfin() isMotorola() isAcerTablet() isOpera() isSamsung() isYarvikTablet() isSkyfire() isSony() isGenericTablet() isIE() isAsus() isAndroidOS() isFirefox() isPalm() isBlackBerryOS() isBolt() isGenericPhone() isPalmOS() isTeaShark() isAcerTablet() isSymbianOS() isBlazer() isYarvikTablet() isWindowsMobileOS() isGenericTablet() isiOS() isBlackBerryTablet() isFlashLiteOS() isiPad() isJavaOS() isKindle() isNokiaOS()
  • 87. What if at the server level you could say: isiPhone() isSamsungTablet() iswebOS() isBlackBerry() isHTCtablet() isbadaOS() isHTC() isMotorolaTablet() isBREWOS() isNexus() isAsusTablet() isChrome() isDellStreak() isNookTablet() isDolfin() isMotorola() isAcerTablet() isOpera() isSamsung() isYarvikTablet() isSkyfire() isSony() isGenericTablet() isIE() isAsus() isAndroidOS() isFirefox() isPalm() isBlackBerryOS() isBolt() isGenericPhone() isPalmOS() isTeaShark() isAcerTablet() isSymbianOS() isBlazer() isYarvikTablet() isWindowsMobileOS() isSafari() isGenericTablet() isiOS() isBlackBerryTablet() isFlashLiteOS() isiPad() isJavaOS() isKindle() isNokiaOS()
  • 88. What if at the server level you could say: isiPhone() isSamsungTablet() iswebOS() isBlackBerry() isHTCtablet() isbadaOS() isHTC() isMotorolaTablet() isBREWOS() isNexus() isAsusTablet() isChrome() isDellStreak() isNookTablet() isDolfin() isMotorola() isAcerTablet() isOpera() isSamsung() isYarvikTablet() isSkyfire() isSony() isGenericTablet() isIE() isAsus() isAndroidOS() isFirefox() isPalm() isBlackBerryOS() isBolt() isGenericPhone() isPalmOS() isTeaShark() isAcerTablet() isSymbianOS() isBlazer() isYarvikTablet() isWindowsMobileOS() isSafari() isGenericTablet() isiOS() isMidori() isBlackBerryTablet() isFlashLiteOS() isiPad() isJavaOS() isKindle() isNokiaOS()
  • 89. What if at the server level you could say: isiPhone() isSamsungTablet() iswebOS() isBlackBerry() isHTCtablet() isbadaOS() isHTC() isMotorolaTablet() isBREWOS() isNexus() isAsusTablet() isChrome() isDellStreak() isNookTablet() isDolfin() isMotorola() isAcerTablet() isOpera() isSamsung() isYarvikTablet() isSkyfire() isSony() isGenericTablet() isIE() isAsus() isAndroidOS() isFirefox() isPalm() isBlackBerryOS() isBolt() isGenericPhone() isPalmOS() isTeaShark() isAcerTablet() isSymbianOS() isBlazer() isYarvikTablet() isWindowsMobileOS() isSafari() isGenericTablet() isiOS() isMidori() isBlackBerryTablet() isFlashLiteOS() isGenericBrowser() isiPad() isJavaOS() isKindle() isNokiaOS()
  • 93. add_image_size( 'desktop', 800, 600, true ); add_image_size( 'tablet', 600, 350, true ); add_image_size( 'iphone', 400, 300, true); add_image_size( 'mobile', 300, 175, true ); Featured Images Leveraging WordPress
  • 94.
  • 96. WordPress PHP Mobile Detect <?php if ( isiPhone() ) post_thumbnail( 'iphone' ); elseif ( isMobile() ) post_thumbnail( 'mobile' ); elseif ( isTablet() ) post_thumbnail( 'tablet' ); else post_thumbnail( 'desktop' ); ?>
  • 97.
  • 98. Dropping Static Width and Height Attributes
  • 99. Dropping Static Width and Height Attributes $( '.attachment-post-thumb' ) .removeAttr( 'width' ).removeAttr( 'height' ); $( '.content img' ) .removeAttr( 'width' ).removeAttr( 'height' );
  • 105.
  • 106. Menus Mobile and Desktop Menu Locations
  • 107. $main_menu = array( 'theme_location' => 'desktop_header', ); $mobile_menu = array( 'theme_location' => 'mobile_header', ); if ( wp_is_mobile() ) wp_nav_menu( $mobile_menu ); else wp_nav_menu( $main_menu ); Featured Images Leveraging WordPress
  • 108.
  • 109. Shortcodes Empowering User Admins to choose when to show content
  • 110. Shortcodes Empowering User Admins to choose when to show content
  • 111. function j2theme_nomobile( $atts, $content="" ) { global $detect; if( ! isMobile() )return "{$content}"; } add_shortcode( 'nomobile', 'j2theme_nomobile' ); Shortcodes Empowering User Admins to choose when to show content
  • 112. Shortcodes Empowering User Admins to choose when to show content
  • 113. function j2theme_onlymobile( $atts, $content="" ){ global $detect; if( isMobile() )return "{$content}"; } add_shortcode( 'onlymobile', 'j2theme_onlymobile' ); Shortcodes Empowering User Admins to choose when to show content
  • 114. Shortcodes Empowering User Admins to choose when to show content
  • 115. What Does it all Mean Greater control over content to build custom but unified experiences for everyone
  • 116. Less HTTP requests What Does it all Mean Greater control over content to build custom but unified experiences for everyone
  • 117. Less HTTP requests No need for display:none; What Does it all Mean Greater control over content to build custom but unified experiences for everyone
  • 118. Less HTTP requests No need for display:none; Maintain same content for everyone What Does it all Mean Greater control over content to build custom but unified experiences for everyone
  • 119. Less HTTP requests No need for display:none; Maintain same content for everyone Removal of calls to files you don’t need What Does it all Mean Greater control over content to build custom but unified experiences for everyone
  • 120.
  • 121. REMEMBER! It’s about giving control back to the User Admin
  • 123. WP Mobile Detect Plugin HTTP://WORDPRESS.ORG/EXTEND/PLUGINS/WP-MOBILE-DETECT/
  • 124. ?’s Jesse Friedman Author, Professor, Developer - @professor

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n
  42. \n
  43. \n
  44. \n
  45. \n
  46. \n
  47. \n
  48. \n
  49. \n
  50. \n
  51. \n
  52. \n
  53. \n
  54. \n
  55. \n
  56. \n
  57. \n
  58. \n
  59. \n
  60. \n
  61. \n
  62. \n
  63. \n
  64. \n
  65. \n
  66. \n
  67. \n
  68. \n
  69. \n
  70. \n
  71. \n
  72. \n
  73. \n
  74. \n
  75. \n
  76. \n
  77. \n
  78. \n
  79. \n
  80. \n
  81. \n
  82. \n
  83. \n
  84. \n
  85. \n
  86. \n
  87. \n
  88. \n
  89. \n
  90. \n
  91. \n
  92. \n
  93. \n
  94. \n
  95. \n
  96. \n
  97. \n
  98. \n
  99. \n
  100. \n
  101. \n
  102. \n
  103. \n
  104. \n
  105. \n
  106. \n
  107. \n