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

948 views

Published on

How to take your WordPress site mobile.

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
948
On SlideShare
0
From Embeds
0
Number of Embeds
194
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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

    ×