2012.02.drupal camp.singapore.mobile.v.1
DESCRIPTION
Drupal Camp Singapore Mobile Development Options for DrupalTRANSCRIPT
Mobile Web Development Options
Twitter: @akucharski
We are hiring!
About Me
• Co-Presenter• Andy Kucharski
• @akucharski
• Promet Source• Founder
• Provides Strategy and Management Direction
About Me – miss wintertime
About Daniel Honrade
• Co-Presenter• @danielhonrade
• JQuery mobile drupal
• created a mobile jquery custom subtheme
• project: www.mcmcauto.com
• Promet Source
• Lead Drupal Themer
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
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 •
I want a mobile site...
• What is a mobile site?
• What does it mean?
• Why do you want one?
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
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
Drupal as a multiplatform CMS
Mobile App
Services
Contributed Modules
Drupal Core
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
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
Separate Templates
• Switch Theme – performance hit• Detect device and present proper theme
• Advantages• Control
• Disadvantages• Multiple themes to maintain
• Detection not always reliable
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
Sample: www.mcmcauto.com
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
• style_screen_min1200_max6000.css
• style.css
Responsive
App
Call Screen
Pull down menu allows Users to assign calls to
drivers.
User can click on any call to view in entirety & make revisions.
Dispatch's Driver map
Hold curser over orange dot to display cab number.
All iPads have GPS tracking to manage cab’s location.
Use Hybrid Development Platform – we chose PhoneGap
Questions?www.prometsource.com
Twitter: @akucharski
We are hiring!