Mobile IS Mainstream

Mobile IS Mainstream

Bryan HouseVP Marketing Acquia@bryanhouse

© 2011 Acquia, Inc. All rights reserved.

Agenda

• Context

• Content for interactive experiences

• Approaches to mobile content delivery

• Summary


Context

Desktop


Context

Mobile Apps


Context

Smart phone browsers


Context

Mobile device browsers


Context

Tablet Apps


Context

Tablet Browsers


Drupal is uniquely capable of addressing a broad range of content needs across multiple mobile device platforms


Content for Interactive, Mobile Experiences



“What’s Hot”

BreakingNews Story

Ad banners

Social “Pulse”

Upcoming Events



“What’s Hot”

BreakingNews Story• Article• Image• Taxonomy / tagging• Related Stories

• Article• Video• Ratings

Ad banners

Social “Pulse”

Upcoming Events

• Images• URLs• Tracking• Multivariate testing

• Calendar• Event information• Location data

• Blog posts• Twitter posts• Facebook info• User comments• Opinion poll


Ad banners

Social “Pulse”

“What’s Hot”

BreakingNews Story

Upcoming Events

Content Types


• Title• Author• Published

Content Type

BreakingNews Story

Article

Image

RelatedStories

• Image Title• Description• Rights Owner

• Title• Author• Link

Fields

Nodes & Content Types


BreakingNews Story

Nodes

• Title• Author• Published

Content Type

Article

Image

RelatedStories

• Image Title• Description• Rights Owner

• Title• Author• Link

Fields Views


How Drupal Manages Users

Administrator AnonymousUsers

Authenticated Users

Roles Groups of like users

Create Page Edit Page

authors editors

Permissions Operations allowed by role

Views Determined by permissionsMy Posts All Posts

Unlimited custom roles, permissions & views





Services-based CMS Can Power It All


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?


Architecture Options

Database

CMS

Applications



Database

CMS

Applications

Templates

Desktop Theme Mobile / Desktop Theme Desktop Mobile

Reverse Proxy

Reverse Proxy Responsive Design Separate Themes



TemplatesAPIs

Desktop Theme Mobile / Desktop Theme Desktop Mobile

Reverse Proxy

Database

CMS

Applications

Applications

Reverse Proxy Responsive Design Separate Themes


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


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.


Mobify: Case study

Wired

Desktop iPhone


Mobify: Case study

Threadless

Desktop iPhone


Mobify: Case study

The New Yorker

Desktop iPhone


Responsive designPros• 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.


Responsive designRecommended use cases• Blogs, marketing, event sites.• Targeting wide variety of devices with the

same content and assets. Best for desktopand 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.


Responsive design: Case study

Four Kitchens

Desktop



Four Kitchens

iPad iPhone



LaunchKit

Desktop



LaunchKit

iPad iPhone


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.


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


Mobile Tools: Case study

Green Map

Desktop iPhone



7x7SF

Desktop iPhone



New Hope 360

Desktop iPhone



ATT Mobile

iPhone


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


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.


Apps: Case study

DrupalCon Chicago


Apps: Case study

FringeFest


Apps: Case study

BeerCloud


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.

http://drupal.org/project/mobile_tools

http://drupal.org/project/mobile_tools

http://drupal.org/project/wurfl

http://drupal.org/project/wurfl

http://drupal.org/project/context

http://drupal.org/project/context

http://drupal.org/project/fusion_mobile

http://drupal.org/project/fusion_mobile

http://drupal.org/project/mobile_jquery

http://drupal.org/project/mobile_jquery


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

http://www.appcelerator.com/

http://www.appcelerator.com/

http://drupal.org/project/services

http://drupal.org/project/services

http://drupal.org/project/views_datasource

http://drupal.org/project/views_datasource


Summary

• One-size does not fit all

• Understand your business requirements

• Match an approach to your user experience needs

• Experiment, test and iterate


Acquia Partners


Thank YouContact:

Bryan House | [email protected] | @bryanhouse

mailto:[email protected]

mailto:[email protected]

Mobile IS Mainstream

Technology

mobile sites

thesame content

blocks of content

mobile app development

nodes content types

rethinking content

agenda context content

interactive experiences