How to take your WordPress site mobile.

1. Mobilzing WordPress
@curtismchale
http://get10up.com

2. Why?

3. Why?
• mobile devices are everywhere

4. Why?
• mobile devices are everywhere
• iPhone, iPad, iPod Touch

5. Why?
• mobile devices are everywhere
• iPhone, iPad, iPod Touch
• Android

6. Why?
• mobile devices are everywhere
• iPhone, iPad, iPod Touch
• Android
• Windows Phone 7

7. Why?
• mobile devices are everywhere
• iPhone, iPad, iPod Touch
• Android
• Windows Phone 7
• .........

8. Constraints

9. Smaller Screen

10. Smaller Screen
• sidebars

11. Smaller Screen
• sidebars
• footer

12. Smaller Screen
• sidebars
• footer
• only essential information

18. Constrained Bandwidth

19. Constrained Bandwidth
• high resolutions images look good but are
slow

20. Constrained Bandwidth
• high resolutions images look good but are
slow
• every line of code adds to the download
package

21. Constrained Total
Usage

22. Constrained Total
Usage
• what’s the monthly limit of data?

23. Usage Assumptions

24. Usage Assumptions
• no hover

25. Usage Assumptions
• no hover
• no rollover

26. Usage Assumptions
• no hover
• no rollover
• different orientations

27. Usage Assumptions
• no hover
• no rollover
• different orientations
• different screen dimensions

28. Usage Assumptions
• no hover
• no rollover
• different orientations
• different screen dimensions
• more distractions?

29. No iOS Filesystem

30. No iOS Filesystem

31. No iOS Filesystem

32. No iOS Filesystem

33. No iOS Filesystem

34. Options

35. Options
• WP Touch (Pro)

36. Options
• WP Touch (Pro)
• CSS Media Queries

37. Options
• WP Touch (Pro)
• CSS Media Queries
• Mobify

38. Options
• WP Touch (Pro)
• CSS Media Queries
• Mobify
• others (
WordPress Mobile Pack, Mobile Press...)

39. WP Touch

40. WP Touch
• Free, $39 - $199

41. WP Touch
• Free, $39 - $199
• intercepts the page request to provide
mobile only theme

42. WP Touch
• Free, $39 - $199
• intercepts the page request to provide
mobile only theme
• Used on WordPress.com

43. Prowl

44. Web App Mode

45. iPad Popovers

46. Premium Support

47. Premium Support

48. and...

49. and...
• Stats Codes

50. and...
• Stats Codes
• Developer Mode

51. and...
• Stats Codes
• Developer Mode
• iPad dang fancy comments

52. Theme Structure

53. Theme Structure

54. Theme Structure

55. Device Classes

56. Device Classes
• Themes specific to iPad, iPhone, Android...

57. Device Classes
• Themes specific to iPad, iPhone, Android...

58. Adding Classes

59. Adding Classes

60. Modified Loop

61. Modified Loop

62. WP Touch Pro Issues

63. WP Touch Pro Issues
• Theme level functionality doesn’t work

64. WP Touch Pro Issues
• Theme level functionality doesn’t work

65. WP Touch Pro Issues
• Theme level functionality doesn’t work
• use a plugin

66. WP Touch Pro Issues

67. WP Touch Pro Issues
• bbPress

68. WP Touch Pro Issues
• bbPress
• BuddyPress

69. WP Touch Pro Issues
• bbPress
• BuddyPress
• Usability

70. WP Touch Pro Issues
• bbPress
• BuddyPress
• Usability
• many issues are simply options in WP Touch

71. WP Touch Pro Issues
• bbPress
• BuddyPress
• Usability
• many issues are simply options in WP Touch
• sites look the same

72. 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

77. CSS Media Queries

78. CSS Media Queries
• also talked about as ‘responsive design’

79. Frameworks

80. Frameworks
• Less Framework 4

81. Frameworks
• Less Framework 4
• http://lessframework.com/

82. Frameworks
• Less Framework 4
• http://lessframework.com/
• 1140 CSS Grid

83. Frameworks
• Less Framework 4
• http://lessframework.com/
• 1140 CSS Grid
• http://cssgrid.net/

84. CSS

85. CSS

87. Print Styles

88. Small Screens

89. PHP Checking

90. PHP Checking

91. JS Checking

92. JS Checking

93. Theme Functions Work

94. Theme Functions Work

95. Issues

96. Issues
• already on a constrained pipe now we’ve
got lots of CSS to download

97. Issues
• already on a constrained pipe now we’ve
got lots of CSS to download
• resizing images with CSS

98. Issues
• already on a constrained pipe now we’ve
got lots of CSS to download
• resizing images with CSS
• all about optimization

99. 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

100. Works

101. Works
• bbPress
• WordPress
• BuddyPress
• WP Multi-site
• WP eCommerce & Shopp
• .....

102. A List Apart

103. A List Apart

105. Shelf - Theme Foundry

106. Shelf - Theme Foundry

108. Mobify

109. Mobify
• hosted solution

110. Mobify
• hosted solution
• paid

111. Works??

112. Works??
• Web WYSIWYG to select content

113. Works??
• Web WYSIWYG to select content
• redirects to mobify

114. Works??
• Web WYSIWYG to select content
• redirects to mobify
• compresses HTML and CSS

115. Works??
• Web WYSIWYG to select content
• redirects to mobify
• compresses HTML and CSS
• WordPress plugin

116. Issues

117. Issues
• Pricey pricey

118. Issues
• Pricey pricey

119. Issues

120. Issues
• speed since we’ve got all this redirect mumbo
jumbo

121. Issues
• speed since we’ve got all this redirect mumbo
jumbo
• iOS uploads?

122. Good For

123. Good For
• bbPress
• WordPress
• BuddyPress
• WP Multi-site
• WP eCommerce/Shopp
• .....

130. Testing

131. OS X Development

132. OS X Development
• iPhone/iPad = xCode

133. OS X Development
• iPhone/iPad = xCode
• Android = SDK

134. OS X Development
• iPhone/iPad = xCode
• Android = SDK
• Parallels + Windows Phone Dev Tools

135. Windows Development

136. Windows Development
• iPhone = iBBDemo2

137. Windows Development
• iPhone = iBBDemo2
• Android = SDK

138. Windows Development
• iPhone = iBBDemo2
• Android = SDK
• Windows Phone Developer Tools

139. Test In Hand

140. I Like

141. I Like
• WP Touch Pro
• Media Queries

142. Mobilzing WordPress
@curtismchale
http://get10up.com