WordPress London Meetup #wpldn - Mobile Themes by Jack Barham

906 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
906
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
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
  • WordPress London Meetup #wpldn - Mobile Themes by Jack Barham

    1. 1. #wpldn Mobile WordPress Theme by Jack Barham
    2. 2. Jack Barham• Jack of all trades (master of some)• Web: http://airboxmedia.com• Twitter: @JackBarham
    3. 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. 4. Jack BarhamWhile at Isobar Mobile I developed mobile sites for DHL, Toyota,Vodafone, Kelloggs & Carat
    5. 5. HTML Mobile TemplateTemplate built for projects at Isobar Mobile http://mobile.airboxmedia.com
    6. 6. AirPress MobileThis talk will walk through the template themes for AirPress Mobile http://wpmobile.airboxmedia.com
    7. 7. AirPress MobileThis 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. 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. 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. 10. Design • Layout 640 x 960 (1136 for iPhone 5) • Resolution on 72dpi • ‘Save for web’ at double size • THINK DOUBLEhttp://wpmobile.airboxmedia.com
    11. 11. SetupMulti 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. 12. SetupIf 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. 13. DevelopmentMobile 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. 14. DevelopmentMobile specific features within the template files: index.php, loop.php, single.php • Sidebar location • Post information (meta) • Post Thumbnails http://wpmobile.airboxmedia.com
    15. 15. DevelopmentMobile 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. 16. DevelopmentMobile specific features within the template files: style.css • Mobile Reset • max-width • Typography • Media Queries • Background size • Forms http://wpmobile.airboxmedia.com
    17. 17. DevelopmentMobile specific features within the template files: functions.php • Remove header junk • Widgets • Menu • Pagination • Browser Classes http://wpmobile.airboxmedia.com
    18. 18. DevelopmentMobile 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. 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. 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

    ×