The document discusses different approaches for delivering content to mobile devices using Drupal. It outlines strategies like responsive design, separate themes, and mobile applications. For each approach, it provides pros and cons as well as recommended use cases. It also highlights example implementations and tools that can be used to build mobile content on Drupal. The key message is that there is no one-size-fits-all solution and the best approach depends on an organization's specific user experience and business requirements.

1. Mobile IS Mainstream
Bryan House
VP Marketing
Acquia
@bryanhouse

2. Agenda
• Context
• Content for interactive experiences
• Approaches to mobile content delivery
• Summary
© 2011 Acquia, Inc. All rights reserved.

3. Context
Desktop
© 2011 Acquia, Inc. All rights reserved.

4. Context
Mobile Apps
© 2011 Acquia, Inc. All rights reserved.

5. Context
Smart phone browsers
© 2011 Acquia, Inc. All rights reserved.

6. Context
Mobile device browsers
© 2011 Acquia, Inc. All rights reserved.

7. Context
Tablet Apps
© 2011 Acquia, Inc. All rights reserved.

8. Context
Tablet Browsers
© 2011 Acquia, Inc. All rights reserved.

9. Drupal is uniquely capable of
addressing a broad range of
content needs across multiple
mobile device platforms
© 2011 Acquia, Inc. All rights reserved.

10. Content for Interactive, Mobile Experiences
© 2011 Acquia, Inc. All rights reserved.

11. Content for Interactive, Mobile Experiences
Ad banners
Breaking
News Story Upcoming
Events
Social
“What’s Hot” “Pulse”
© 2011 Acquia, Inc. All rights reserved.

12. Content for Interactive, Mobile Experiences
Ad banners
• Images
• URLs
• Tracking
• Multivariate testing
Breaking
News Story Upcoming
• Article Events
• Image • Calendar
• Taxonomy / tagging • Event information
• Related Stories • Location data
Social
“What’s Hot” “Pulse”
• Article • Blog posts
• Video • Twitter posts
• Ratings • Facebook info
• User comments
• Opinion poll
© 2011 Acquia, Inc. All rights reserved.

13. Breaking
News Story
Ad banners
Upcoming
Events
“What’s Hot”
Social
“Pulse”
© 2011 Acquia, Inc. All rights reserved.

14. Content Types
Breaking
News Story
Content Type Fields
• Title
Article • Author
• Published
• Image Title
Image • Description
• Rights Owner
Related • Title
• Author
Stories • Link
© 2011 Acquia, Inc. All rights reserved.

15. Nodes & Content Types
Breaking
News Story
Content Type Fields Nodes Views
• Title
• Author
Article • Published
• Image Title
Image • Description
• Rights Owner
Related • Title
• Author
Stories • Link
© 2011 Acquia, Inc. All rights reserved.

16. How Drupal Manages Users
Administrator Authenticated Anonymous
Users Users
Roles authors editors Groups of like users
Unlimited
Permissions Create Page Edit Page custom roles,
Operations allowed by role
permissions &
views
Views My Posts All Posts Determined by permissions
© 2011 Acquia, Inc. All rights reserved.

17. © 2011 Acquia, Inc. All rights reserved.

18. © 2011 Acquia, Inc. All rights reserved.

19. © 2011 Acquia, Inc. All rights reserved.

20. Services-based CMS Can Power It All
© 2011 Acquia, Inc. All rights reserved.

21. What’s the Best Approach to Mobile?
• What are your user experience needs?
• How fast do you need to deploy mobile sites?
• What’s your tolerance for complexity?
• Can your mobile content strategy drive your
existing website design and content?
• Are you ready for mobile app development?
© 2011 Acquia, Inc. All rights reserved.

22. ns
Architecture Options
CMS
Database
© 2011 Acquia, Inc. All rights reserved.

23. ns
Architecture Options
Reverse Proxy Responsive Design Separate Themes
Reverse
Proxy
Mobile / Desktop
Desktop Theme Desktop Mobile
Theme
Templates
CMS
Database
© 2011 Acquia, Inc. All rights reserved.

24. ns
Architecture Options
Applications Reverse Proxy Responsive Design Separate Themes
Reverse
Proxy
Mobile / Desktop
Desktop Theme Desktop Mobile
Theme
APIs Templates
CMS
Database
© 2011 Acquia, Inc. All rights reserved.

25. Reverse Proxy Options
Pros
• Fastest solution: launch quickly.
• Rapid development and iteration.
• Independent and non-disruptive solution.
• Great for testing, iterating, and experimenting with potential
solutions.
Cons
• Limited -- can’t truly tailor your user experience to mobile. More about
making your current site work well on mobile.
• Lack of device-dependent response
• May not handle richer elements to satisfaction
© 2011 Acquia, Inc. All rights reserved.

26. Reverse Proxy Options
Recommended use cases
• Delivering the same content, just redesigned
and trimmed-down.
• Rapid deployment, iterative testing and
experimentation.
• Targeted delivery to smartphone browsers.
Not recommended for
• Uniquely mobile experiences.
• App development.
© 2011 Acquia, Inc. All rights reserved.

27. Mobify: Case study
Wired
Desktop iPhone
© 2011 Acquia, Inc. All rights reserved.

28. Mobify: Case study
Threadless
Desktop iPhone
© 2011 Acquia, Inc. All rights reserved.

29. Mobify: Case study
The New Yorker
Desktop iPhone
© 2011 Acquia, Inc. All rights reserved.

30. Responsive design
Pros
• Flexible.
• Greatly reuse same work repeatedly.
• Relatively quick to setup and deploy.
Not too many new technologies to learn.
Cons
• Requires re-thinking content and presentation. Still deliver everything
to the browser. May mean starting over on theme.
• No truly mobile experience.
• Demands attention to detail across all targeted devices during
development.
© 2011 Acquia, Inc. All rights reserved.

31. Responsive design
Recommended use cases
• Blogs, marketing, event sites.
• Targeting wide variety of devices with the
same content and assets. Best for desktop
and tablets.
• Accommodate the widest variety of
contexts.
• Able to redesign site from ground-up.
Not recommended for
• Sites with many “regions” or “blocks” of content.
• Very low-bandwidth delivery requirements.
• App development.
© 2011 Acquia, Inc. All rights reserved.

32. Responsive design: Case study
Four Kitchens
Desktop
© 2011 Acquia, Inc. All rights reserved.

33. Responsive design: Case study
Four Kitchens
iPad iPhone
© 2011 Acquia, Inc. All rights reserved.

34. Responsive design: Case study
LaunchKit
Desktop
© 2011 Acquia, Inc. All rights reserved.

35. Responsive design: Case study
LaunchKit
iPad iPhone
© 2011 Acquia, Inc. All rights reserved.

36. Mobile Tools
Pros
• Relatively low learning curve
• Use familiar technology and workflows
• Flexible device detection and redirection
• High-level of control over device-specific displays
• Strong community support, integration with several modules.
Cons
• Time consuming to create and manage full themes
• Requires contextual use of the block engine (different block settings,
order, etc. per theme)
• Requires a lot of testing. Several gotchas when it comes to browser
redirection, persisting mobile vs. desktop selection, etc.
© 2011 Acquia, Inc. All rights reserved.

37. Mobile Tools
Recommended use cases
• Targeted, uniquely mobile experience across a
wide variety of devices, using existing site
content.
• Experience unique to device type
(e.g. smartphone vs. tablet vs. mobile device).
• Managing entire web platform using Drupal-based tools.
Not recommended for
• Rapid deployment and iteration
• App development
© 2011 Acquia, Inc. All rights reserved.

38. Mobile Tools: Case study
Green Map
Desktop iPhone
© 2011 Acquia, Inc. All rights reserved.

39. Mobile Tools: Case study
7x7SF
Desktop iPhone
© 2011 Acquia, Inc. All rights reserved.

40. Mobile Tools: Case study
New Hope 360
Desktop iPhone
© 2011 Acquia, Inc. All rights reserved.

41. Mobile Tools: Case study
ATT Mobile
iPhone
© 2011 Acquia, Inc. All rights reserved.

42. Apps
Pros
• Fast, light-weight, controlled user experience.
• Some solid tools for development on both sides
(app and Drupal).
• Access to more of the native device capabilities.
Cons
• Longer time to market.
• Steep learning curve.
• Complex ramp-up for integration (web services).
• Difficult to iterate and rapidly respond (e.g. add new functionality).
© 2011 Acquia, Inc. All rights reserved.

43. Apps
Recommended use cases
• Experience targeted at specific device capabilities.
• Context requiring deeper access to device capabilities,
e.g. camera, video.
• Contexts that require off-line portability.
• Quick, responsive, refined applications.
Not recommended for
• Rapid deployment and iteration.
• Low-cost and low-overhead.
• Delivery to a wide range of devices.
© 2011 Acquia, Inc. All rights reserved.

44. Apps: Case study
DrupalCon Chicago
© 2011 Acquia, Inc. All rights reserved.

45. Apps: Case study
FringeFest
© 2011 Acquia, Inc. All rights reserved.

46. Apps: Case study
BeerCloud
© 2011 Acquia, Inc. All rights reserved.

47. Tools
Mobile Tools
• Mobile Tools module
• WURFL module - Integrates with Mobile Tools. Helps in detecting the
device capabilities of the mobile device visiting the website.
• Context - Integrates with Mobile Tools to provide Mobile context (turn
blocks on/off, etc. based on mobile device). Probably wouldn’t work
well with tools like Varnish
Themes
• Fusion mobile - Fusion sub-theme targeted at mobile delivery.
• Mobile jQuery - Built on the jQuery Mobile platform.
© 2011 Acquia, Inc. All rights reserved.

48. Tools
Apps
• Titanium Appcelerator - A platform for developing mobile and
desktop applications using web technologies.
• Services module - A standardized solution of integrating external
applications with Drupal.
• Views Datasource - A set of plugins for Drupal Views for rendering
node content in a number of shareable, reusable formats based on
XML, JSON and XHTML
© 2011 Acquia, Inc. All rights reserved.

49. Summary
• One-size does not fit all
• Understand your business requirements
• Match an approach to your user experience needs
• Experiment, test and iterate
© 2011 Acquia, Inc. All rights reserved.

50. Acquia Partners
© 2011 Acquia, Inc. All rights reserved.

51. Thank You
Contact:
Bryan House | bryan@acquia.com | @bryanhouse
© 2011 Acquia, Inc. All rights reserved.