Drupal Camp Singapore Mobile Development Options for Drupal

1. Mobile Web Development Options
andy@promethost.com
Twitter: @akucharski
We are hiring!

2. About Me
• Co-Presenter
• Andy Kucharski
• @akucharski
• Promet Source
• Founder
• Provides Strategy and
Management Direction

3. About Me – miss wintertime

4. AboutDaniel Honrade
• Co-Presenter
• @danielhonrade
• JQuery mobile drupal
• created a mobile jquery
custom subtheme
• project:
www.mcmcauto.com
• Promet Source
• Lead Drupal Themer

5. Promet Source background
• Company Background
• Founded in 2003
• 30 + employees
• Offices in Chicago IL, Sunnyvale, CA, Cebu, Phillipines
• Company Offerings
• Promet Source
• Web Development
• Mobile Application Development

6. Promet Mobile Work
• M.DOT sites (Drupal)
• Responsive Design and Theming (Drupal)
• Mobile Application Development
• Native development for:
• IOS
• Android
• Hybrid development with Phonegap
• Full Service Drupal Agency

7. I want a mobile site...
• What is a mobile site?
• What does it mean?
• Why do you want one?

8. Mobile Application Opportunities
• By 2013, mobile phones will overtake PCs as the most-common
Web access device worldwide
• Transportation CIO’s made Mobility one of their top priorities for
next two years

9. Fun mobile stats
• Q4 2011
• 60 Million Android devices activated by Google
• 37 Million Apple iPhones sold
• Apple stats
• Apple sold 37 million iPhones in the quarter, a 128%
• iPad sales hit 15.4 million, a rise of 111%.
• Mac sales were 5.2 million, an increase of 26%.
• Apple sold 15.4 million iPods, a number which is down 21% as the iPhone
cannibalizes sales of more limited-function devices.
• Apple now has $97.6 billion in cash on hand.
• “Drupal” searched 60,000 times last month on mobile devices with full
internet browser

10. Drupal as a multiplatform CMS
Mobile App
Services
Contributed Modules
Drupal Core

11. Simple Option – use a third party to create a m.dot site
• M.Dot – separate Domain
• Use a third party such as Mobify or MoovWeb
• They provide tools to transform your layouts
• They will host your mobile site
• They will provide javascript to redirect upon
mobile detection

12. Simple Option – use a third party to create a m.dot site
• Advantages
• Fast and easy
• Free options available
• Disadvantages
• Multiple platforms
• Loose some control to the third party
• Commercial support may get pricey

13. Separate Templates
• Switch Theme – performance hit
• Detect device and present proper theme
• Advantages
• Control
• Disadvantages
• Multiple themes to maintain
• Detection not always reliable

14. Promet's Setup for Mobile Browsing
• Mobile JQuery module - uses theme from www.mobilejquery.com
• setup as base theme
• create a subtheme - separate folder
• configure necessary blocks for mobile only
• Browscap module - device detection
• maintains a table or list of current devices for detection
• Mobile Tools module - admin ui for theme switching
• Options for mobile url or theme switching

15. Sample: www.mcmcauto.com

16. Promet's Responsive Design/Theme Setup
• OM base theme & subtheme
• OM Tools - collection of tools
• system tools - jquery mediaqueries
• options:
• media - screen, print, projector, etc.
• minimum browser width in px
• maximum browser width in px
• Responsive CSS files
• style360.css
• style_screen_min100_max640.css
• style_screen_min641_max800.css
• style_screen_min801_max1024.css
• style_screen_min1025_max6000.css

17. Responsive

18. App

19. Call Screen
User can click on any call to view in
entirety & make revisions. Pull down menu allows
Users to assign calls to
drivers.

20. Dispatch's Driver map
Hold curser over orange dot to
display cab number.
All iPads have GPS tracking to
manage cab’s location.

21. Use Hybrid Development Platform – we chose PhoneGap

22. Questions?
www.prometsource.com
andy@promethost.com
Twitter: @akucharski
We are hiring!