go mobile with drupal - responsivewd, mobile theme or site, phonegap or native?
DESCRIPTION
Approaches to make your Drupal application accessible on any mobile devices. Comparison between Web - Hybrid - Native applications.TRANSCRIPT
Go Mobile with Drupal
Reach more users on mobileat a fraction of the cost of proprietary software
[email protected]/webtommetwitter.com/webtommelinkedin.com/webtommewww.geekpolis.com
Tom Tran,Geekpolis
● About Geekpolis● Drupal: What/Who/Why?● Overview Web - Hybrid - Native● Mobile Web strategies
○ Responsive Web Design (Media queries, Fluid box)○ Device Detection
■ Separate Mobile site■ Mobile theme■ RESS (RWD + server side dynamic markup)
● Hybrid: Demo Titanium, PhoneGap● Comparing Web vs Hybrid vs Native
Program
Tom TranFounder Geekpolis
● Drupal development services● Drupal products for end-users
[email protected]/webtommetwitter.com/webtommelinkedin.com/webtomme
Consultant, Web Strategy at RICHLTD.com
● 2.000 unique visitors in 2008 to over 15.000 in 2011● Drupal webmaster, Design, Content marketing, CRM
Export Consultant at Vinapackingfilms.com
● Build Drupal based website and inbound marketing strategies● From 0 to 7 containers exported monthly in 2012
Marketing Director at JoomlArt.com
● Content strategy, Company Blog serving 250k site members● Branding, Communication and Positioning as global player
Active Community
● > 1 million members ● 15k + developers● 1k core developers● 100k attendees yearly on Drupal events
Collaborative Innovation● 15k+ free modules● 1000s themes available● since 2001
Web application or Native?
Approaches: Web, Hybrid, Native
Important factors to consider
● Visibility, Distribution● License, rights● Functionality of device● Code● Performance● Cost
Device functionality
- GPS, sharing of location- Geo-tagging photos taken from phone- Contact / Addressbook- Download history- Files- Compass
Responsive Web Design
Billboard Media
Fluid layouts, Fluid gridsMedia queries => define width breakpointsFluid, flexible images => picturefill.js
RESS (RWD + Server Side components)=> depends on user agent detection
Mobile Theme Switching
RESS (RWD + Server Side components)
Mobile Theme Switching
Dedicated Mobile site
Device detection
Dedicated mobile optimized site
Web Services
REST (REpresentational state transfer)
CREATE: HTTP PUT/articleREAD: HTTP GET/article/123 (or /123.json)UPDATE: HTTP POST /article/123 DELETE: HTTP DELETE /article/123
In Drupal: Modules enabling services/resources1. Services2. RESTws, 3. Views Datasource
REST (REpresentational state transfer)
Hybrid : Titanium
Hybrid : Phonegap
Phonegap
Web , Hybrid or Native??
native
dedicated mobile site =>
Thank You
Tom Tran,Geekpolis
[email protected]/webtommetwitter.com/webtommelinkedin.com/webtommewww.geekpolis.com