2012.02.drupal camp.Singapore.mobile.v.1

Mobile Web Development Options

[email protected]

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

[email protected]

Twitter: @akucharski

We are hiring!