Drupal as a Framework for Mobile Development

Drupal as a Framework for Mobile Development
by Rachel Jaro
Solutions Architect
Promet Source

Overview
3 Classifications of mobile development
mDot
Native
Hybrid
Drupal and the Mobile World
Design and Development with Drupal using the 3 classifications above

Airplane
Source: http://www.cagate.net/

The Taxi App
iPad on the road

Mobile Development in the Old Days

New World
Native or installable mobile application
mDotor mobile browser based application
Hybrid or app that uses both browser interfaces and native mobile components

mDot: Overview
Mobile view
Browser view

Designing with mDot in mind
Have a Content strategy
content defines the design
Responsive web design
responsive architecture, where people responds to each actions. environment reacts to the user.
Mobile First
design for mobile first rather than desktop environment

mDot: Content Strategy
Know the most important element
Personalize - Better filters, better experience

mDot: Responsive web design
the site must be build with flexible not fixed layouts foundation
Ex. use em, percentages and float
images must be flexible as well. set max-width property of css to 100%
img. object {max-width: 100%}
#do-theevent {width: 65%}
Choose if you want media queries or mobile detection

mDot: Media Queries
<link media="screen and (max-device-width: 480px)">
<link media="screen and (max-device-width: 1024px)">
<link media="screen and (orientation: portrait)">
<link media="screen and (orientation: landscape)">
<link media="screen and (-webkit-min-device-pixel-ratio:2)">

mDot: Mobile first
Reasons for designing mobile first rather than desktop environment.
forces us to simplify
forces you to focus.
forces you to think like a user

mDot: and Drupal development
Process:
Detection of mobile
Redirecting or providing the right media queries
Theme switching

mDot: Development
Modules
Drupal.org/project/Mobile_tools
3rd party detection tools
Wurfl
browsecap

mDot: Development
Recommended startup themes
Fusion_mobile
Nokia_mobile

Native: Overview
And more…

Drupal and the Native App
XML
format
SERVICES MODULE
Device choice of
Language:
Java
Objective-C
etc

Hybrid and Drupal
iPad app for Drivers
Drupal Site

Drupal and the Hybrid Approach
JSON
format
SERVICES MODULE
HTML
JS
CSS

Demo
Sneak peak at the code

Development Requirements
Choose from cross platform tools
Install iOSsdk and xcode
Setup drupaland install services module

Hybrid: Cross Platform Tools
Phonegap + (jQuery Mobile or Sencha Touch)
Titanium/Appcelerator
Others
Rhomobile
Monodroid
MoSync
WidgetPad

Hybrid Library Comparison
Phonegap
Easier to install
Easier testing in browser
Support for more mobile browser
Titanium
Easier to get a native look
Better performance
Can be extended to add in any native feature
More comparison at
http://savagelook.com/blog/portfolio/appcelerator-vs-phonegap-vs-adobe-air

Drupal Integration w/ Services Module
3 components of Services module
server modules – receive and render request
auth modules - authentication
services modules – process and return data
Source:
Drupal.org/project/services

Services: Server
JSON (JS Notation Object)
XML-RPC
JSON-RPC
Sources:
Drupal.org/project/json_server

Server: Authentication
API Keys
Session

Services: Services
Node
Views
Users
File
Taxonomy
System
Search
Your Custom Services module

Custom services
implement hook_service()
write callback functions

Demo
p.loc/greenlight2/ipadtest/
p.loc/greenlight2/xcode/Greenlight-xcode4/Greenlight/www

Keys to Successful Hybrid App
don’t simply release a hybrid version of the mobile web site, make the experience feel like a native app
optimize performance of your Drupal site

Questions?
Rachel Jaro
rachel@promethost.com
Twitter: petixe
D.o: primerg
We’re hiring!

http://www.prometsource.com	73
http://petixe.com	41
http://www.slideshare.net	1
http://prometsource.prometdev.com	1

Drupal as a Framework for Mobile Development

by Rachel Jaro on May 24, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 116

Statistics

Drupal as a Framework for Mobile Development — Presentation Transcript