Mobile Web Development Options                   andy@promethost.com                    Twitter: @akucharski              ...
About Me           • Co-Presenter            • Andy Kucharski            • @akucharski           • Promet Source          ...
About Me – miss wintertime
AboutDaniel Honrade                      • Co-Presenter                         • @danielhonrade                         •...
Promet Source background• Company Background  • Founded in 2003  • 30 + employees  • Offices in Chicago IL, Sunnyvale, CA,...
Promet Mobile Work• M.DOT sites (Drupal)• Responsive Design and Theming (Drupal)• Mobile Application Development  • Native...
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...
Fun mobile stats• Q4 2011  • 60 Million Android devices activated by Google  • 37 Million Apple iPhones sold• Apple stats ...
Drupal as a multiplatform CMS                                    Mobile App                                     Services  ...
Simple Option – use a third party to create a m.dot site• M.Dot – separate Domain  •   Use a third party such as Mobify or...
Simple Option – use a third party to create a m.dot site• Advantages  • Fast and easy  • Free options available• Disadvant...
Separate Templates• Switch Theme – performance hit  • Detect device and present proper theme• Advantages  • Control• Disad...
Promets Setup for Mobile Browsing• Mobile JQuery module - uses theme from www.mobilejquery.com  • setup as base theme  • c...
Sample: www.mcmcauto.com
Promets Responsive Design/Theme Setup• OM base theme & subtheme• OM Tools - collection of tools  • system tools - jquery m...
Responsive
App
Call Screen User can click on any call to view in     entirety & make revisions.          Pull down menu allows           ...
Dispatchs Driver map                                        Hold curser over orange dot to                                ...
Use Hybrid Development Platform – we chose PhoneGap
Questions?www.prometsource.com          andy@promethost.com           Twitter: @akucharski                 We are hiring!
Upcoming SlideShare
Loading in...5
×

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

255

Published on

Drupal Camp Singapore Mobile Development Options for Drupal.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
255
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. Mobile Web Development Options andy@promethost.com Twitter: @akucharski We are hiring!
  2. 2. About Me • Co-Presenter • Andy Kucharski • @akucharski • Promet Source • Founder • Provides Strategy and Management Direction
  3. 3. About Me – miss wintertime
  4. 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. 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. 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. 7. I want a mobile site...• What is a mobile site?• What does it mean?• Why do you want one?
  8. 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. 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. 10. Drupal as a multiplatform CMS Mobile App Services Contributed Modules Drupal Core
  11. 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. 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. 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. 14. Promets 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. 15. Sample: www.mcmcauto.com
  16. 16. Promets 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. 17. Responsive
  18. 18. App
  19. 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. 20. Dispatchs Driver map Hold curser over orange dot to display cab number. All iPads have GPS tracking to manage cab’s location.
  21. 21. Use Hybrid Development Platform – we chose PhoneGap
  22. 22. Questions?www.prometsource.com andy@promethost.com Twitter: @akucharski We are hiring!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×