go mobile with drupal - responsivewd, mobile theme or site, phonegap or native?

Go Mobile with Drupal

Reach more users on mobileat a fraction of the cost of proprietary software

tom@geekpolis.comfacebook.com/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

tom@geekpolis.comfacebook.com/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??

Facebook

Linkedin

native

dedicated mobile site =>

Thank You

Tom Tran,Geekpolis

tom@geekpolis.comfacebook.com/webtommetwitter.com/webtommelinkedin.com/webtommewww.geekpolis.com