SlideShare a Scribd company logo
Responsive
WordPress Theming
Jesse Friedman
Author, Professor, Developer - @professor
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
· Showing and Hiding Content based on
    user device




User some road blocks
          Admin’s
Will have
· Showing and Hiding Content based on
    user device
  · Media and maintaining a fluid layout




User some road blocks
          Admin’s
Will have
· Showing and Hiding Content based on
    user device
  · Media and maintaining a fluid layout

  · Multiple Columns




User some road blocks
          Admin’s
Will have
· Showing and Hiding Content based on
    user device
  · Media and maintaining a fluid layout

  · Multiple Columns
  · Menus


User some road blocks
          Admin’s
Will have
Featured Images
Leveraging WordPress
Featured Images
Leveraging WordPress
Featured Images
Leveraging WordPress
add_image_size(   'slider', 800, 600, true );
add_image_size(   'sm-slider', 400, 300, true);
add_image_size(   'post-thumb', 600, 350, true );
add_image_size(   'sm-post-thumb', 300, 175, true );




  Featured Images
  Leveraging WordPress
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
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()
WordPress PHP Mobile Detect
WordPress PHP Mobile Detect
<?php
	 if ( isiPhone() ) echo '<img src=".../optimized-iphone.jpg">';
	 elseif ( isMobile() ) echo '<img src=".../mobile.jpg">';	
	 elseif ( isTablet() ) echo '<img src=".../tablet.jpg">';
	 else echo '<img src=".../regular-image.jpg">';
?>
Shortcodes
Empowering User Admins to choose when to
show content
function j2theme_nomobile( $atts, $content="" ) {
  global $detect;
  if( ! $detect->is_Mobile() )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
Shortcodes
Empowering User Admins to choose when to
show content
function j2theme_onlymobile( $atts, $content="" ){
  global $detect;	
  if( $detect->is_Mobile() )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
?’s
Jesse Friedman
Author, Professor, Developer - @professor

More Related Content

Similar to Responsive WordPress Theming WordCamp Boston 2012

Building Ruby on Rails apps on Windows Azure (MIX 2010 at Last Vegas))
Building Ruby on Rails apps on Windows Azure (MIX 2010 at Last Vegas))Building Ruby on Rails apps on Windows Azure (MIX 2010 at Last Vegas))
Building Ruby on Rails apps on Windows Azure (MIX 2010 at Last Vegas))
Sriram Krishnan
 
Basics of Ext JS
Basics of Ext JSBasics of Ext JS
Basics of Ext JS
ikhwanhayat
 
Osdc09 Apr09 openQRM Workshop
Osdc09 Apr09 openQRM WorkshopOsdc09 Apr09 openQRM Workshop
Osdc09 Apr09 openQRM Workshop
Virttoo org
 
Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!
Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!
Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!
FITC
 

Similar to Responsive WordPress Theming WordCamp Boston 2012 (20)

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
 
Android_Bootcamp_PPT_GDSC_ITS_Engineering
Android_Bootcamp_PPT_GDSC_ITS_EngineeringAndroid_Bootcamp_PPT_GDSC_ITS_Engineering
Android_Bootcamp_PPT_GDSC_ITS_Engineering
 
Building Ruby on Rails apps on Windows Azure (MIX 2010 at Last Vegas))
Building Ruby on Rails apps on Windows Azure (MIX 2010 at Last Vegas))Building Ruby on Rails apps on Windows Azure (MIX 2010 at Last Vegas))
Building Ruby on Rails apps on Windows Azure (MIX 2010 at Last Vegas))
 
Basics of Ext JS
Basics of Ext JSBasics of Ext JS
Basics of Ext JS
 
Containerize vs Virtualize
Containerize vs VirtualizeContainerize vs Virtualize
Containerize vs Virtualize
 
Osdc09 Apr09 openQRM Workshop
Osdc09 Apr09 openQRM WorkshopOsdc09 Apr09 openQRM Workshop
Osdc09 Apr09 openQRM Workshop
 
What's New in Android
What's New in AndroidWhat's New in Android
What's New in Android
 
Imagine a world without mocks
Imagine a world without mocksImagine a world without mocks
Imagine a world without mocks
 
Rack Middleware
Rack MiddlewareRack Middleware
Rack Middleware
 
Animate Me, if you don't do it for me do it for chet (DroidCon Paris)
Animate Me, if you don't do it for me do it for chet (DroidCon Paris)Animate Me, if you don't do it for me do it for chet (DroidCon Paris)
Animate Me, if you don't do it for me do it for chet (DroidCon Paris)
 
Web Typography with sIFR 3 at Drupalcamp Copenhagen
Web Typography with sIFR 3 at Drupalcamp CopenhagenWeb Typography with sIFR 3 at Drupalcamp Copenhagen
Web Typography with sIFR 3 at Drupalcamp Copenhagen
 
Continuous Integration and Deployment Best Practices on AWS
Continuous Integration and Deployment Best Practices on AWSContinuous Integration and Deployment Best Practices on AWS
Continuous Integration and Deployment Best Practices on AWS
 
TPSE Thailand 2015 - Rethinking Web with React and Flux
TPSE Thailand 2015 - Rethinking Web with React and FluxTPSE Thailand 2015 - Rethinking Web with React and Flux
TPSE Thailand 2015 - Rethinking Web with React and Flux
 
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
 
HTML5, CSS3, and other fancy buzzwords
HTML5, CSS3, and other fancy buzzwordsHTML5, CSS3, and other fancy buzzwords
HTML5, CSS3, and other fancy buzzwords
 
Crossing the Bridge: Connecting Rails and your Front-end Framework
Crossing the Bridge: Connecting Rails and your Front-end FrameworkCrossing the Bridge: Connecting Rails and your Front-end Framework
Crossing the Bridge: Connecting Rails and your Front-end Framework
 
Hack in the Box Keynote 2006
Hack in the Box Keynote 2006Hack in the Box Keynote 2006
Hack in the Box Keynote 2006
 
Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!
Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!
Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!
 
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
 
Test First Refresh Second: Test-Driven Development in Grails
Test First Refresh Second: Test-Driven Development in GrailsTest First Refresh Second: Test-Driven Development in Grails
Test First Refresh Second: Test-Driven Development in Grails
 

Recently uploaded

Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Peter Udo Diehl
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
UXDXConf
 

Recently uploaded (20)

Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi IbrahimzadeFree and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
 
What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024
 
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
 
Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyDemystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John Staveley
 
UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1
 
In-Depth Performance Testing Guide for IT Professionals
In-Depth Performance Testing Guide for IT ProfessionalsIn-Depth Performance Testing Guide for IT Professionals
In-Depth Performance Testing Guide for IT Professionals
 
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
 
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualitySoftware Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
 
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
 
Connecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAKConnecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAK
 
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya HalderCustom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджера
 
AI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří KarpíšekAI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří Karpíšek
 
Designing for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastDesigning for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at Comcast
 
IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024
 
UiPath Test Automation using UiPath Test Suite series, part 2
UiPath Test Automation using UiPath Test Suite series, part 2UiPath Test Automation using UiPath Test Suite series, part 2
UiPath Test Automation using UiPath Test Suite series, part 2
 
Intelligent Gimbal FINAL PAPER Engineering.pdf
Intelligent Gimbal FINAL PAPER Engineering.pdfIntelligent Gimbal FINAL PAPER Engineering.pdf
Intelligent Gimbal FINAL PAPER Engineering.pdf
 
Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a button
 
Motion for AI: Creating Empathy in Technology
Motion for AI: Creating Empathy in TechnologyMotion for AI: Creating Empathy in Technology
Motion for AI: Creating Empathy in Technology
 

Responsive WordPress Theming WordCamp Boston 2012

  • 2. Jesse Friedman Author, Professor, Developer - @professor
  • 3. Responsive So what’s the difference between a CMS based Responsive site and a static one?
  • 5. I C ES S T R A P T D S R W O
  • 6. I C ES S T R A P T D S R W O
  • 7. S S R E D P O R W
  • 8.
  • 9.
  • 13. FRAMEWORKS, GRID SYSTEMS, ALL THAT STUFF, STILL WORKS!
  • 14. User Admin us·er ad·min
  • 15. User Admin us·er ad·min A person responsible for running and operating a system
  • 16. User Admin us·er ad·min
  • 17. User Admin us·er ad·min In other words, the person who’s gonna gaff up your design
  • 18. User Admin of your design May compromise the integrity
  • 19. User Admin of your design May compromise the integrity
  • 20. Userexpected to maintain responsive content Admin’s Can’t be
  • 21. Userexpected to maintain responsive content Admin’s Can’t be
  • 22. User some road blocks Admin’s Will have
  • 23. · Showing and Hiding Content based on user device User some road blocks Admin’s Will have
  • 24. · Showing and Hiding Content based on user device · Media and maintaining a fluid layout User some road blocks Admin’s Will have
  • 25. · Showing and Hiding Content based on user device · Media and maintaining a fluid layout · Multiple Columns User some road blocks Admin’s Will have
  • 26. · Showing and Hiding Content based on user device · Media and maintaining a fluid layout · Multiple Columns · Menus User some road blocks Admin’s Will have
  • 30. add_image_size( 'slider', 800, 600, true ); add_image_size( 'sm-slider', 400, 300, true); add_image_size( 'post-thumb', 600, 350, true ); add_image_size( 'sm-post-thumb', 300, 175, true ); Featured Images Leveraging WordPress
  • 36.
  • 37.
  • 38. Menus Mobile and Desktop Menu Locations
  • 39. Content is KING! Empowering User Admins to choose when to show content
  • 40. What if at the server level you could say: Content is KING! Empowering User Admins to choose when to show content
  • 41. 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
  • 42. 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
  • 43. 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
  • 44. 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
  • 45.
  • 47. WordPress wp_is_mobile(); <?php if ( wp_is_mobile() ) the_post_thumbnail( 'post-thumb' ); else the_post_thumbnail ( 'post-large' ); ?>
  • 48.
  • 49. What if at the server level you could say:
  • 50. What if at the server level you could say: isiPhone()
  • 51. What if at the server level you could say: isiPhone() isBlackBerry()
  • 52. What if at the server level you could say: isiPhone() isBlackBerry() isHTC()
  • 53. What if at the server level you could say: isiPhone() isBlackBerry() isHTC() isNexus()
  • 54. What if at the server level you could say: isiPhone() isBlackBerry() isHTC() isNexus() isDellStreak()
  • 55. What if at the server level you could say: isiPhone() isBlackBerry() isHTC() isNexus() isDellStreak() isMotorola()
  • 56. What if at the server level you could say: isiPhone() isBlackBerry() isHTC() isNexus() isDellStreak() isMotorola() isSamsung()
  • 57. What if at the server level you could say: isiPhone() isBlackBerry() isHTC() isNexus() isDellStreak() isMotorola() isSamsung() isSony()
  • 58. What if at the server level you could say: isiPhone() isBlackBerry() isHTC() isNexus() isDellStreak() isMotorola() isSamsung() isSony() isAsus()
  • 59. What if at the server level you could say: isiPhone() isBlackBerry() isHTC() isNexus() isDellStreak() isMotorola() isSamsung() isSony() isAsus() isPalm()
  • 60. What if at the server level you could say: isiPhone() isBlackBerry() isHTC() isNexus() isDellStreak() isMotorola() isSamsung() isSony() isAsus() isPalm() isGenericPhone()
  • 61. What if at the server level you could say: isiPhone() isBlackBerry() isHTC() isNexus() isDellStreak() isMotorola() isSamsung() isSony() isAsus() isPalm() isGenericPhone() isAcerTablet()
  • 62. What if at the server level you could say: isiPhone() isBlackBerry() isHTC() isNexus() isDellStreak() isMotorola() isSamsung() isSony() isAsus() isPalm() isGenericPhone() isAcerTablet() isYarvikTablet()
  • 63. What if at the server level you could say: isiPhone() isBlackBerry() isHTC() isNexus() isDellStreak() isMotorola() isSamsung() isSony() isAsus() isPalm() isGenericPhone() isAcerTablet() isYarvikTablet() isGenericTablet()
  • 64. What if at the server level you could say: isiPhone() isBlackBerry() isHTC() isNexus() isDellStreak() isMotorola() isSamsung() isSony() isAsus() isPalm() isGenericPhone() isAcerTablet() isYarvikTablet() isGenericTablet() isBlackBerryTablet()
  • 65. 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()
  • 66. 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()
  • 67. 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()
  • 68. 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()
  • 69. 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()
  • 70. 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()
  • 71. 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()
  • 72. 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()
  • 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() isAsus() isPalm() isGenericPhone() isAcerTablet() isYarvikTablet() isGenericTablet() isBlackBerryTablet() isiPad() 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() isPalm() isGenericPhone() isAcerTablet() isYarvikTablet() isGenericTablet() isBlackBerryTablet() isiPad() isKindle()
  • 75. 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()
  • 76. 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()
  • 77. 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()
  • 78. 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()
  • 79. 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()
  • 80. 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()
  • 81. 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()
  • 82. 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()
  • 83. 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()
  • 84. 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()
  • 85. 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()
  • 86. 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()
  • 87. 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()
  • 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() isSamsung() isYarvikTablet() isSony() isGenericTablet() isAsus() isAndroidOS() isPalm() isBlackBerryOS() isGenericPhone() isPalmOS() isAcerTablet() isSymbianOS() isYarvikTablet() isWindowsMobileOS() isGenericTablet() isiOS() 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() isSony() isGenericTablet() isAsus() isAndroidOS() isPalm() isBlackBerryOS() isGenericPhone() isPalmOS() isAcerTablet() isSymbianOS() isYarvikTablet() isWindowsMobileOS() isGenericTablet() isiOS() isBlackBerryTablet() isFlashLiteOS() isiPad() isJavaOS() isKindle() isNokiaOS()
  • 90. 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()
  • 91. 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()
  • 92. 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()
  • 93. 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()
  • 94. 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()
  • 95. 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()
  • 96. 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()
  • 97. 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()
  • 98. 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()
  • 99.
  • 101. WordPress PHP Mobile Detect <?php if ( isiPhone() ) echo '<img src=".../optimized-iphone.jpg">'; elseif ( isMobile() ) echo '<img src=".../mobile.jpg">'; elseif ( isTablet() ) echo '<img src=".../tablet.jpg">'; else echo '<img src=".../regular-image.jpg">'; ?>
  • 102. Shortcodes Empowering User Admins to choose when to show content
  • 103. function j2theme_nomobile( $atts, $content="" ) { global $detect; if( ! $detect->is_Mobile() )return "{$content}"; } add_shortcode( 'nomobile', 'j2theme_nomobile' ); Shortcodes Empowering User Admins to choose when to show content
  • 104. Shortcodes Empowering User Admins to choose when to show content
  • 105. Shortcodes Empowering User Admins to choose when to show content
  • 106. function j2theme_onlymobile( $atts, $content="" ){ global $detect; if( $detect->is_Mobile() )return "{$content}"; } add_shortcode( 'onlymobile', 'j2theme_onlymobile' ); Shortcodes Empowering User Admins to choose when to show content
  • 107. Shortcodes Empowering User Admins to choose when to show content
  • 108. What Does it all Mean Greater control over content to build custom but unified experiences for everyone
  • 109. Less HTTP requests What Does it all Mean Greater control over content to build custom but unified experiences for everyone
  • 110. 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
  • 111. 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
  • 112. 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
  • 113.
  • 114. REMEMBER! It’s about giving control back to the User Admin
  • 115. ?’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