1. #wpldn
Mobile WordPress Theme
by Jack Barham

2. Jack Barham
• Jack of all trades (master of some)
• Web: http://airboxmedia.com
• Twitter: @JackBarham

3. Jack Barham
• Freelance front end developer and designer
• Skywire - Front end developer
• Isobar Mobile (Aegis Group) - Front end
developer
• Various consultancies (WordPress &
Mobile)

4. Jack Barham
While at Isobar Mobile I developed mobile sites for
DHL, Toyota,Vodafone, Kelloggs & Carat

5. HTML Mobile Template
Template built for projects at Isobar Mobile
http://mobile.airboxmedia.com

6. AirPress Mobile
This talk will walk through the template themes
for AirPress Mobile
http://wpmobile.airboxmedia.com

7. AirPress Mobile
This talk will walk through the template themes
for AirPress Mobile
• Why use a mobile theme/template
• Planning & Wireframing
• Design
• Setup for development
• Development files (header, footer, functions, css, jQuery)
• Testing & Debugging
• Links to download both themes
http://wpmobile.airboxmedia.com

8. Why Mobile?
RESPONSIVE is always the first option, however...
• Can you build a responsive website
• Test the waters
• Cost
• Development time
• Easy to implement
• Different content
• Directly transferable to responsive
http://wpmobile.airboxmedia.com

9. Planning & Wireframing
• Make a note of ALL your requirements
• Find out about your target audience
• Gather assets (earlier the better)
• Which features do you need
• Which features can you drop
• Navigation options
• Layout options
• Sketch your layouts
http://wpmobile.airboxmedia.com

10. Design
• Layout 640 x 960 (1136 for iPhone 5)
• Resolution on 72dpi
• ‘Save for web’ at double size
• THINK DOUBLE
http://wpmobile.airboxmedia.com

11. Setup
Multi Device Switcher Adobe Shadow / Edge
inspect
• WordPress Plugin • Google Chrome plugin
• Select themes for multiple devices • Syncs all devices with the app installed
• Manual User Agent • Works on iOS and Android
• Add new User Agents • Syncs localhosts (via xip.io)
• http://wordpress.org/extend/plugins/ • http://html.adobe.com/edge/inspect/
multi-device-switcher/installation/
http://wpmobile.airboxmedia.com

12. Setup
If you display different content then try
Advanced Custom Fields plugin
• Free (with paid extras)
• Very easy to use (front / back)
• Great documentation
• Allows extra fields in Posts an Pages
• <?php get_field(‘field_name’); ?>
• http://www.advancedcustomfields.com/
http://wpmobile.airboxmedia.com

13. Development
Mobile specific features within the template files:
header.php
• META - Viewport
• JavaScript - Modernizer
• Navigation - Search
• Navigation - Menu Items
• Navigation - Social Links
http://wpmobile.airboxmedia.com

14. Development
Mobile specific features within the template files:
index.php, loop.php, single.php
• Sidebar location
• Post information (meta)
• Post Thumbnails
http://wpmobile.airboxmedia.com

15. Development
Mobile specific features within the template files:
page.php, page-name.php
• Hard coded mobile features
• Gallery - Flexslider from Woothemes:
http://www.woothemes.com/flexslider/
• Orientation
• 360 Spin
• Video
http://wpmobile.airboxmedia.com

16. Development
Mobile specific features within the template files:
style.css
• Mobile Reset
• max-width
• Typography
• Media Queries
• Background size
• Forms
http://wpmobile.airboxmedia.com

17. Development
Mobile specific features within the template files:
functions.php
• Remove header junk
• Widgets
• Menu
• Pagination
• Browser Classes
http://wpmobile.airboxmedia.com

18. Development
Mobile specific features within the template files:
scrips.js
• Location: /library/js/scrips.js
• Navigation toggle (with toggle class)
• Remove HTML height & width
• Orientation Class
http://wpmobile.airboxmedia.com

19. Testing
• Test on as many devices as possible
• iPhone & iPod Touch
• Retina and non-retina screens
• Galaxy SII (Good all-rounder for Android)
• BlackBerry = Internet Explorer
• Windows 7 Phone
• Nokia Symbian
• Backup plan
http://wpmobile.airboxmedia.com

20. Thank You!
• Jack Barham
• Web: http://airboxmedia.com
• Twitter: @JackBarham
• Fully Responsive & Mobile themes will be ready
early 2013 and FREE
• Download both themes and this presentation:
http://airboxmedia.com/wpldn.php