Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Mobilzing WordPress         @curtismchale       http://get10up.com
Why?
Why?• mobile devices are everywhere
Why?• mobile devices are everywhere• iPhone, iPad, iPod Touch
Why?• mobile devices are everywhere• iPhone, iPad, iPod Touch• Android
Why?• mobile devices are everywhere• iPhone, iPad, iPod Touch• Android• Windows Phone 7
Why?• mobile devices are everywhere• iPhone, iPad, iPod Touch• Android• Windows Phone 7• .........
Constraints
Smaller Screen
Smaller Screen• sidebars
Smaller Screen• sidebars• footer
Smaller Screen• sidebars• footer• only essential information
Constrained Bandwidth
Constrained Bandwidth• high resolutions images look good but are  slow
Constrained Bandwidth• high resolutions images look good but are  slow• every line of code adds to the download  package
Constrained Total     Usage
Constrained Total         Usage• what’s the monthly limit of data?
Usage Assumptions
Usage Assumptions• no hover
Usage Assumptions• no hover• no rollover
Usage Assumptions• no hover• no rollover• different orientations
Usage Assumptions• no hover• no rollover• different orientations• different screen dimensions
Usage Assumptions• no hover• no rollover• different orientations• different screen dimensions• more distractions?
No iOS Filesystem
No iOS Filesystem
No iOS Filesystem
No iOS Filesystem
No iOS Filesystem
Options
Options• WP Touch (Pro)
Options• WP Touch (Pro)• CSS Media Queries
Options• WP Touch (Pro)• CSS Media Queries• Mobify
Options• WP Touch (Pro)• CSS Media Queries• Mobify• others (         WordPress Mobile Pack, Mobile Press...)
WP Touch
WP Touch• Free, $39 - $199
WP Touch• Free, $39 - $199• intercepts the page request to provide  mobile only theme
WP Touch• Free, $39 - $199• intercepts the page request to provide  mobile only theme• Used on WordPress.com
Prowl
Web App Mode
iPad Popovers
Premium Support
Premium Support
and...
and...• Stats Codes
and...• Stats Codes• Developer Mode
and...• Stats Codes• Developer Mode• iPad dang fancy comments
Theme Structure
Theme Structure
Theme Structure
Device Classes
Device Classes• Themes specific to iPad, iPhone, Android...
Device Classes• Themes specific to iPad, iPhone, Android...
Adding Classes
Adding Classes
Modified Loop
Modified Loop
WP Touch Pro Issues
WP Touch Pro Issues• Theme level functionality doesn’t work
WP Touch Pro Issues• Theme level functionality doesn’t work
WP Touch Pro Issues• Theme level functionality doesn’t work• use a plugin
WP Touch Pro Issues
WP Touch Pro Issues• bbPress
WP Touch Pro Issues• bbPress• BuddyPress
WP Touch Pro Issues• bbPress• BuddyPress• Usability
WP Touch Pro Issues• bbPress• BuddyPress• Usability •   many issues are simply options in WP Touch
WP Touch Pro Issues• bbPress• BuddyPress• Usability •   many issues are simply options in WP Touch• sites look the same
WP Touch Pro Issues• bbPress• BuddyPress• Usability •   many issues are simply options in WP Touch• sites look the same • ...
CSS Media Queries
CSS Media Queries• also talked about as ‘responsive design’
Frameworks
Frameworks• Less Framework 4
Frameworks• Less Framework 4 •   http://lessframework.com/
Frameworks• Less Framework 4 •   http://lessframework.com/• 1140 CSS Grid
Frameworks• Less Framework 4 •   http://lessframework.com/• 1140 CSS Grid •   http://cssgrid.net/
CSS
CSS
Print Styles
Small Screens
PHP Checking
PHP Checking
JS Checking
JS Checking
Theme Functions Work
Theme Functions Work
Issues
Issues• already on a constrained pipe now we’ve  got lots of CSS to download
Issues• already on a constrained pipe now we’ve  got lots of CSS to download• resizing images with CSS
Issues• already on a constrained pipe now we’ve  got lots of CSS to download• resizing images with CSS• all about optimiza...
Issues• already on a constrained pipe now we’ve  got lots of CSS to download• resizing images with CSS• all about optimiza...
Works
Works• bbPress• WordPress• BuddyPress• WP Multi-site• WP eCommerce & Shopp• .....
A List Apart
A List Apart
Shelf - Theme Foundry
Shelf - Theme Foundry
Mobify
Mobify• hosted solution
Mobify• hosted solution• paid
Works??
Works??• Web WYSIWYG to select content
Works??• Web WYSIWYG to select content• redirects to mobify
Works??• Web WYSIWYG to select content• redirects to mobify• compresses HTML and CSS
Works??• Web WYSIWYG to select content• redirects to mobify• compresses HTML and CSS• WordPress plugin
Issues
Issues• Pricey pricey
Issues• Pricey pricey
Issues
Issues• speed since we’ve got all this redirect   mumbo  jumbo
Issues• speed since we’ve got all this redirect   mumbo  jumbo• iOS uploads?
Good For
Good For• bbPress• WordPress• BuddyPress• WP Multi-site• WP eCommerce/Shopp• .....
Testing
OS X Development
OS X Development• iPhone/iPad = xCode
OS X Development• iPhone/iPad = xCode• Android = SDK
OS X Development• iPhone/iPad = xCode• Android = SDK• Parallels + Windows Phone Dev Tools
Windows Development
Windows Development• iPhone = iBBDemo2
Windows Development• iPhone = iBBDemo2• Android = SDK
Windows Development• iPhone = iBBDemo2• Android = SDK• Windows Phone Developer Tools
Test In Hand
I Like
I Like• WP Touch Pro• Media Queries
Mobilzing WordPress      @curtismchale    http://get10up.com
Mobilizing wordpress WordCamp Edmonton 2011
Mobilizing wordpress WordCamp Edmonton 2011
Mobilizing wordpress WordCamp Edmonton 2011
Mobilizing wordpress WordCamp Edmonton 2011
Mobilizing wordpress WordCamp Edmonton 2011
Mobilizing wordpress WordCamp Edmonton 2011
Mobilizing wordpress WordCamp Edmonton 2011
Mobilizing wordpress WordCamp Edmonton 2011
Mobilizing wordpress WordCamp Edmonton 2011
Mobilizing wordpress WordCamp Edmonton 2011
Mobilizing wordpress WordCamp Edmonton 2011
Mobilizing wordpress WordCamp Edmonton 2011
Mobilizing wordpress WordCamp Edmonton 2011
Mobilizing wordpress WordCamp Edmonton 2011
Mobilizing wordpress WordCamp Edmonton 2011
Mobilizing wordpress WordCamp Edmonton 2011
Mobilizing wordpress WordCamp Edmonton 2011
Mobilizing wordpress WordCamp Edmonton 2011
Upcoming SlideShare
Loading in …5
×

Mobilizing wordpress WordCamp Edmonton 2011

959 views

Published on

How to take your WordPress site mobile.

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

Mobilizing wordpress WordCamp Edmonton 2011

  1. 1. Mobilzing WordPress @curtismchale http://get10up.com
  2. 2. Why?
  3. 3. Why?• mobile devices are everywhere
  4. 4. Why?• mobile devices are everywhere• iPhone, iPad, iPod Touch
  5. 5. Why?• mobile devices are everywhere• iPhone, iPad, iPod Touch• Android
  6. 6. Why?• mobile devices are everywhere• iPhone, iPad, iPod Touch• Android• Windows Phone 7
  7. 7. Why?• mobile devices are everywhere• iPhone, iPad, iPod Touch• Android• Windows Phone 7• .........
  8. 8. Constraints
  9. 9. Smaller Screen
  10. 10. Smaller Screen• sidebars
  11. 11. Smaller Screen• sidebars• footer
  12. 12. Smaller Screen• sidebars• footer• only essential information
  13. 13. Constrained Bandwidth
  14. 14. Constrained Bandwidth• high resolutions images look good but are slow
  15. 15. Constrained Bandwidth• high resolutions images look good but are slow• every line of code adds to the download package
  16. 16. Constrained Total Usage
  17. 17. Constrained Total Usage• what’s the monthly limit of data?
  18. 18. Usage Assumptions
  19. 19. Usage Assumptions• no hover
  20. 20. Usage Assumptions• no hover• no rollover
  21. 21. Usage Assumptions• no hover• no rollover• different orientations
  22. 22. Usage Assumptions• no hover• no rollover• different orientations• different screen dimensions
  23. 23. Usage Assumptions• no hover• no rollover• different orientations• different screen dimensions• more distractions?
  24. 24. No iOS Filesystem
  25. 25. No iOS Filesystem
  26. 26. No iOS Filesystem
  27. 27. No iOS Filesystem
  28. 28. No iOS Filesystem
  29. 29. Options
  30. 30. Options• WP Touch (Pro)
  31. 31. Options• WP Touch (Pro)• CSS Media Queries
  32. 32. Options• WP Touch (Pro)• CSS Media Queries• Mobify
  33. 33. Options• WP Touch (Pro)• CSS Media Queries• Mobify• others ( WordPress Mobile Pack, Mobile Press...)
  34. 34. WP Touch
  35. 35. WP Touch• Free, $39 - $199
  36. 36. WP Touch• Free, $39 - $199• intercepts the page request to provide mobile only theme
  37. 37. WP Touch• Free, $39 - $199• intercepts the page request to provide mobile only theme• Used on WordPress.com
  38. 38. Prowl
  39. 39. Web App Mode
  40. 40. iPad Popovers
  41. 41. Premium Support
  42. 42. Premium Support
  43. 43. and...
  44. 44. and...• Stats Codes
  45. 45. and...• Stats Codes• Developer Mode
  46. 46. and...• Stats Codes• Developer Mode• iPad dang fancy comments
  47. 47. Theme Structure
  48. 48. Theme Structure
  49. 49. Theme Structure
  50. 50. Device Classes
  51. 51. Device Classes• Themes specific to iPad, iPhone, Android...
  52. 52. Device Classes• Themes specific to iPad, iPhone, Android...
  53. 53. Adding Classes
  54. 54. Adding Classes
  55. 55. Modified Loop
  56. 56. Modified Loop
  57. 57. WP Touch Pro Issues
  58. 58. WP Touch Pro Issues• Theme level functionality doesn’t work
  59. 59. WP Touch Pro Issues• Theme level functionality doesn’t work
  60. 60. WP Touch Pro Issues• Theme level functionality doesn’t work• use a plugin
  61. 61. WP Touch Pro Issues
  62. 62. WP Touch Pro Issues• bbPress
  63. 63. WP Touch Pro Issues• bbPress• BuddyPress
  64. 64. WP Touch Pro Issues• bbPress• BuddyPress• Usability
  65. 65. WP Touch Pro Issues• bbPress• BuddyPress• Usability • many issues are simply options in WP Touch
  66. 66. WP Touch Pro Issues• bbPress• BuddyPress• Usability • many issues are simply options in WP Touch• sites look the same
  67. 67. WP Touch Pro Issues• bbPress• BuddyPress• Usability • many issues are simply options in WP Touch• sites look the same • only because they haven’t done any customization
  68. 68. CSS Media Queries
  69. 69. CSS Media Queries• also talked about as ‘responsive design’
  70. 70. Frameworks
  71. 71. Frameworks• Less Framework 4
  72. 72. Frameworks• Less Framework 4 • http://lessframework.com/
  73. 73. Frameworks• Less Framework 4 • http://lessframework.com/• 1140 CSS Grid
  74. 74. Frameworks• Less Framework 4 • http://lessframework.com/• 1140 CSS Grid • http://cssgrid.net/
  75. 75. CSS
  76. 76. CSS
  77. 77. Print Styles
  78. 78. Small Screens
  79. 79. PHP Checking
  80. 80. PHP Checking
  81. 81. JS Checking
  82. 82. JS Checking
  83. 83. Theme Functions Work
  84. 84. Theme Functions Work
  85. 85. Issues
  86. 86. Issues• already on a constrained pipe now we’ve got lots of CSS to download
  87. 87. Issues• already on a constrained pipe now we’ve got lots of CSS to download• resizing images with CSS
  88. 88. Issues• already on a constrained pipe now we’ve got lots of CSS to download• resizing images with CSS• all about optimization
  89. 89. Issues• already on a constrained pipe now we’ve got lots of CSS to download• resizing images with CSS• all about optimization• non-semtanic CSS
  90. 90. Works
  91. 91. Works• bbPress• WordPress• BuddyPress• WP Multi-site• WP eCommerce & Shopp• .....
  92. 92. A List Apart
  93. 93. A List Apart
  94. 94. Shelf - Theme Foundry
  95. 95. Shelf - Theme Foundry
  96. 96. Mobify
  97. 97. Mobify• hosted solution
  98. 98. Mobify• hosted solution• paid
  99. 99. Works??
  100. 100. Works??• Web WYSIWYG to select content
  101. 101. Works??• Web WYSIWYG to select content• redirects to mobify
  102. 102. Works??• Web WYSIWYG to select content• redirects to mobify• compresses HTML and CSS
  103. 103. Works??• Web WYSIWYG to select content• redirects to mobify• compresses HTML and CSS• WordPress plugin
  104. 104. Issues
  105. 105. Issues• Pricey pricey
  106. 106. Issues• Pricey pricey
  107. 107. Issues
  108. 108. Issues• speed since we’ve got all this redirect mumbo jumbo
  109. 109. Issues• speed since we’ve got all this redirect mumbo jumbo• iOS uploads?
  110. 110. Good For
  111. 111. Good For• bbPress• WordPress• BuddyPress• WP Multi-site• WP eCommerce/Shopp• .....
  112. 112. Testing
  113. 113. OS X Development
  114. 114. OS X Development• iPhone/iPad = xCode
  115. 115. OS X Development• iPhone/iPad = xCode• Android = SDK
  116. 116. OS X Development• iPhone/iPad = xCode• Android = SDK• Parallels + Windows Phone Dev Tools
  117. 117. Windows Development
  118. 118. Windows Development• iPhone = iBBDemo2
  119. 119. Windows Development• iPhone = iBBDemo2• Android = SDK
  120. 120. Windows Development• iPhone = iBBDemo2• Android = SDK• Windows Phone Developer Tools
  121. 121. Test In Hand
  122. 122. I Like
  123. 123. I Like• WP Touch Pro• Media Queries
  124. 124. Mobilzing WordPress @curtismchale http://get10up.com

×