SlideShare a Scribd company logo
1 of 115
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

Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 

Recently uploaded (20)

Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 

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