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.

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

2. MOBILE CAN’T BE IGNORED
Thursday, May 10, 12

3. Today, more mobile
devices are sold than
PCs.
Thursday, May 10, 12

4. Thursday, May 10, 12
83 %
Of American adults own a cell phone…

5. Thursday, May 10, 12
42 %
Of cell phone owners have smartphones…

6. By next year, mobile will
overtake PCs for web
access.
source: Gartner; http://www.gartner.com/it/
Thursday, May 10, 12 page.jsp?id=1278413

7. THAT WEB SITE
Thursday, May 10, 12

8. THAT YOU ARE WORKING ON RIGHT NOW
Thursday, May 10, 12

9. BUSTING YOUR BUTT TO LAUNCH BY Q4
Thursday, May 10, 12

10. WITHIN 6 SHORT MONTHS OF LAUNCHING
Thursday, May 10, 12

11. MORE VISITORS WILL VISIT IT FROM A MOBILE
DEVICE THAN INTERNET EXPLORER 8.
Thursday, May 10, 12

12. June 2012
Thursday, May 10, 12

13. May 2012
Thursday, May 10, 12

14. Dec 2012
Thursday, May 10, 12

15. Aug 2012
Thursday, May 10, 12

16. Thursday, May 10, 12

17. Thursday, May 10, 12

18. Thursday, May 10, 12

19. Thursday, May 10, 12

20. DRUPAL CAN HELP TODAY.
Thursday, May 10, 12

21. 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

23. MINIMIZE EFFORT TO MOBILIZE YOUR SITE
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

26. FROM DESKTOP…
Thursday, May 10, 12

27. TO TABLET…
Thursday, May 10, 12

28. …TO SMART PHONES.
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

30. DEEPEN ENGAGEMENT WITH NATIVE APPS
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

32. Your
Brand!
Thursday, May 10, 12

33. Apps Matter Because they Deepen Engagement
Thursday, May 10, 12

34. Every day, CSIS’s iPhone App serves more
page views than the Publications section of
their web site.
Thursday, May 10, 12

35. Thursday, May 10, 12

36. Managing Mobile needs to be as Simple as Managing
the Web
Thursday, May 10, 12

37. CREATE A TAILORED EXPERIENCE
Thursday, May 10, 12

38. DSCA LIVE DEMO
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

41. Thursday, May 10, 12

42. RESERVE SLIDES
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

45. GIS Can Be Limiting...
Thursday, May 10, 12

46. Because Sometimes Your Visualization Needs to Ignore Reality
Thursday, May 10, 12

47. PLACE HOLDER SLIDES TO BE CONSIDERED FROM
CGAP PRESO
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

53. Easily Import New Maps
Thursday, May 10, 12

54. Manage Regions from within the UI
Thursday, May 10, 12

55. Integrated With Views as View Display Format
Thursday, May 10, 12

56. Integrated With Views as View Display Format
With Customizable Settings for Display
Thursday, May 10, 12