This document discusses 3 strategies for making Drupal sites mobile-friendly. The first strategy is to minimize effort by using responsive design to build sites that adapt to different devices with one code base. The second strategy is to deepen user engagement with native mobile apps that are managed from Drupal. The third strategy is to tailor the mobile experience by managing desktop and mobile content separately in Drupal. Examples are given of Drupal themes and modules that support these mobile strategies.
Driving Behavioral Change for Information Management through Data-Driven Gree...
3 Strategies for Going Mobile with Drupal
1. 3 STRATEGIES FOR GOING MOBILE WITH DRUPAL
Kurt
Voelker,
CTO,
Forum
One
Chris
Brown,
Technical
Account
Manager,
Acquia
Drupal
Drives
DC
-‐
May
2012
Thursday, May 10, 12
22. 3 STRATEGIES FOR GOING MOBILE WITH DRUPAL
1
Minimize
Effort
to
Mobilize
Your
Site
Build
once
and
sFll
serve
every
device
with
responsive
design
2 Deepen
Engagement
with
a
Na9ve
App
Manage
mobile
and
desktop
content
in
one
place
3 Tailor
the
Mobile
Experience
Manage
mobile
and
desktop
content
in
one
place
Thursday, May 10, 12
24. MOBILIZING YOUR SITE: THE OLD DAYS
• Create
a
completely
separate
site
-‐
“m
dot”
• Hand
select
content
and
apply
separate
layouts
and
styles
• Individual
styles
and
layouts
for
specific
devices
All of these are hard work that require continual servicing as
your site evolves.
Thursday, May 10, 12
25. content content
structure style
ONE CODE BASE. ALL SCREENS.
Thursday, May 10, 12
29. DRUPAL: RESPONSIVE FROM THE START
Today:
Several
base
themes
support
responsive
layout
out
of
the
box.
• Omega
• AdapFve
Theme
• Zen
Thursday, May 10, 12
31. Apps matter because people use them more often than a
mobile browser.
http://blog.flurry.com/bid/63907/Mobile-Apps-Put-the-Web-in-Their-Rear-view-Mirror
Thursday, May 10, 12
39. 3 STRATEGIES FOR GOING MOBILE WITH DRUPAL
1
Minimize
Effort
to
Mobilize
Your
Site
Build
once
and
sFll
serve
every
device
with
responsive
design
2 Deepen
Engagement
with
a
Na9ve
App
Manage
mobile
and
desktop
content
in
one
place
3 Tailor
the
Mobile
Experience
Manage
mobile
and
desktop
content
in
one
place
Thursday, May 10, 12
40. THANKS!
QUESTIONS AND ANSWERS
40
Thursday, May 10, 12
43. THE FREEDOMHOUSE.ORG BACK STORY
• Needed:
Data-‐rich,
visually
appealing,
easy
to
manage
THAT
is
also
mobile
accessible
• So
How?
- We
knew
flash
is
a
no
go
-‐
a
mobile
non-‐starter
- GIS
Mapping
tools
are
great
but
they
get
really
complicated
when
moving
beyond
“just
points
on
a
map”
-‐
and
ulFmately
we
saw
a
big
GIS
stack
is
overkill
- Much
more
difficult
to
integrate
with
Drupal
managed
data
- Much
more
difficult
to
make
interacFve
- Limited
to
“Real
Maps”
- Metro
maps
- Alaska
and
HI
• So
we
created
JS
Map
-‐
SVG
Based
Thursday, May 10, 12
44. Flash is a no-go for mobile
Thursday, May 10, 12
48. JS MAP: WHAT IT DOES
• Easily create interactive maps that display data
• Relates Drupal stored data to regions and shapes
• Cross-browser compatible requiring no plugins
• Mobile ready
Thursday, May 10, 12
49. Any node or
fieldable entities
mapped to regions
JS Map: Mobile Supported Mapping for Drupal
Thursday, May 10, 12
50. Control region
groupings and
display.
JS Map: Mobile Supported Mapping for Drupal
Thursday, May 10, 12
51. Re-use regions
across an entire
site.
Thursday, May 10, 12
52. Re-use regions
across an entire
site.
Thursday, May 10, 12