Bridging the Gap Between Desktop and Mobile Publishing

with Drupal

Drupalcon London 2011Tom Deryckere

twom

Transcoding desktop sites

Highly Customized apps or websites

Support for low end devices

Focus on High End

Closed Solutions Open Standards

Selling Mobile

Audience already solved

Android

Android

HTML5/CSS3

2 yearsPeople recall WML

WML WTF?

iPhone Browser

Opera Mini

Nokia/symbian

Tables

Many high end devices

Audience easily impressedSmall room

Many specialists

Big room

Only Speaker

About MeStarted developing Drupal sites to share Sheet Music:• www.guitarfiles.be (D5)• www.wikifonia.org (D6)

Moved to New York in 2009 and worked for Belgium mobile startup• OSMOBI provided mobile websites for > 1000 Drupal sites• High adoption / Low revenue

In 2010 full time Drupal consultant for Northpoint Solutions (New York)• We pioneered several mobile sites and mobile apps for the

pharmaceutical industry, hospitals, media industry and mayor mobile carriers

In 2011 (now) Director of Technology at ConsumerSearch• Part of About.com, a business unit of the New York Times• Complete site available mobile (high end devices)

Modules maintained

Mobile• Mobile Tools• Wurfl• Bango MetricsOther• Foursquare Connect• Soundcloud ConnectAbandoned• Osmobi• Osmobil Mobile Theme

ConsumerSearch.com

Part of About.com and The New York TimesFind information about consumer productsHigh quality content driven by dedicated editorial teamFirst D5 now D6Great Drupal team!

Mobile website in 2011

“People search for information everywhere”

ConsumerSearch Mobile Traffic

• 5% mobile traffic in 2010• Today 10.49% mobile traffic• Slow but steady increase in mobile traffic

• CPC is higher for mobile• CTR is typically lower

Mobile

Desktop

Specifics of the mobile site• 1 url for mobile and desktop

• We deliver the same content for mobile and desktop• Seamless experience

• Custom Akamai (caching) config file• Device detection using user agent string matching

• Mobile Theme• Template overwrites• Targetting high end devices

• Get rid of default js and css

• Some pages still go to desktop site (gradually add mobile pages)

Mobile App?

NativeArriving soonFocus on very specific tasks and interactionsiPhone first, Android laterComplementary to mobile website!

The many faces of mobile

Usability & Navigation

(responsive) Design

Product Development

Web Standards

Native Apps

Cross-Platform development

Multi-platform distribution

vs

Web Apps and

Media Queries

Javascript FrameworksjQuery

Sencha TouchSproutcoreHTML5 & CSS3

Location Based Apps

Mobile Testing

Online / Offline

Mobile SEO

…GET A STRATEGYBefore thinking technology …

Support for which devices?Cross platform?Free service?App store revenues?Content repurposing?

Strategy

Technology

Graphics intensive?Content Driven?Existing knowledge?Current technology?Budget?

Linkable?Which functionality

Strategy Technologies

Dedicated iPhone App for sale in the App Store

Optimize reach by cross Platform Native App

Browser based webapp for high end devices

iOS / Services

Appcellerator/PhoneGap / Services

HTML5/CSS3/Drupal

Browser based webapp all devices XHTML/Drupal

Multi-platform website Responsive/Adaptive design

STAGES OF CREATING A MOBILE PROJECT

Strategy

•Target audience•Targeted devices•Business goals•…

Product Development

•Focus groups•Defining functionality•Product flow•…

IA/Design

•Usability•Information Architecture•User Experience•Navigation

Architecting

•Reusability•Scalability•Extendability•Simplicity•…

Implementation•Drupal module development•Contrib modules•Extending•…

Testing

•Device testing•Functional testing•Usability testing

This Session: Drupal as a mobile CMS

Look at Drupal Core components

Views

Panels

Context

Theming Layer

Caching

Services

Multi-Sites

Adoption within the Drupal Community

Main functionality provided by Drupal modules- Device Detection

- Theme switching

- Redirecting (+cookies)

- Mobile Themes

- Integration with other modules- Context - Panels- Views- Build modes

Make a mobile version of your Desktop site

Making a mobile only website

Highly customized….

Views

Panels…CCK

…

“Just” build a site.

ARCHITECTING FOR MOBILE

CREATING AN APPLICATION WITH DRUPAL BACKEND

CASE STUDY: MEDIUM-SIZED NON-PROFIT • Give access to information to members on all devices• Focus on availability of content • Consistency of design across platforms is important• No specific contextual mobile functionality• Value device reach more than design

Website size

Mobile specific

Creating a responsive template

• Media Queries

• Fluid CSS

• Context Module

Easy setupLarge reuse of existing infrastructureMulti-content distribution

No mobile first approachDesktop-focused default theming behavior needs many changes to fit mobile contextHard to create real mobile “experiences” or contextual apps

Use Case: Product CompanyFocus on getting crucial information available on mobile devices- Product information- Contact details- Use cases

No specific contextual functionality- User tasks are similar as on desktop

Need for very high usability and nice design- Good responsive design must attract customers

Website size

Mobile specific

Creating a Mobile and Desktop Template

• Create a theme specific for mobile and desktop

• Share functionality across mobile and desktop

Easy to setupLarge reuse of existing infrastructureMulti-content distribution

No mobile first approachDesktop-focused default theming behavior needs many changes to fit mobile contextHard to create real mobile experiences or contextual apps

Use Case: Big Hospital

Highly-contextual mobile site- Navigation through campus- Make simple appointments through mobile- Shared content store- Strip down some desktop functionality

Complex Information Architecture

Reuse of content needed- Doctors’ contacts- Divisions- General information

Mobile specific

Website size

Multisite installation Create a theme specific for mobile and desktop

Maintain separate configurations for mobile and desktop

Room to create a highly-optimized mobile experienceLarge reuse of existing infrastructureMulti-content distribution

Harder to setup and maintain

OVERVIEW ARCHITECTURE

App Responsive Separate templates

Your Drupal friends (and enemies)

Context

Views

Panels

Mobile Tools

Theming layer

CONTEXT MODULE

Context

http://drupal.org/project/context

Provide a way to configure parts of your site based on certain parameters.

Flexible way to configure blocks on your website

E.g.: Configure blocks in your regions based on URL

Context: Mobile Context

Provided by Mobile Tools

Naming conventions

Use naming conventions (mobile_<name_desktop_context>)Disable non mobile contexts using

~mobile_*Or

Mobile context rule

Desktop context

Caveat

What if the region names are not corresponding?

=> Small plugin that loads the regions of the mobile theme when the context starts with “mobile”

VIEWS

Views

Often very heavy on the “tables”Requirement to provide a mobile view on the same path as the desktop view

e.g. /overview

Use multiple displays with same pathConfigure access restrictions

PANELS

Panels

http://drupal.org/project/panels

Multipurpose tools to create flexible layouts

Possibility to overwrite pages such as nodes

Concept of variations:• Different panel configurations depending on the

context

Panels configuration

Create a panel for all these pages

Create variant

Mobile selection rule

Save panel

Create your mobile panel (as usual)

THEMINGoverride

Cleanup CSS / JS

Offen struggle with contrib modules

Create separate mobile theme

Lot’s of things to say about this

Responsive/adaptive designCSS3• Gradients• Rounded corders• Flexible grids• Media queries …

HTML5• Caching• Local storage• Geo• …

MOBILE TOOLS

Mobile Tools http://drupal.org/project/mobile_tools

Basic FunctionalityDevice detectionDevice redirectionTheme switching Detection of device groupsMobile user rolesForce full view | mobile Set custom homepageCustom number of FrontPage nodesHide mobile browser scrollbarViewport headerProvide mobile build modesProvide mobile contextsProvide panel context

Using Mobile Tools to configure mobile theme

Tell when to switch theme

Select the mobile theme

1

2

Additional mobile headers

3

MOBILE-SPECIFIC HEADERS ADDED BY MOBILE TOOLS

<meta name = "viewport" content = "user-scalable=no, width=device-width, maximum-scale=1.0" />

<link rel="apple-touch-icon" href="”sites/all/themes/northpoint_mobile/webclip.png>

- Default iPhone viewport is 900px- Set viewport to device width- Do not allow zooming

Configure Redirection

Choice to have site on two domains or one domain

1

2

3

Add URLs

Enable Redirection

Add Exceptions

Override Redirection

Give users control

Add override arguments to your URL?device=desktop?device=mobile?device=auto?device=<device-group>

http://mobile_tools.local?device=desktop

CACHINGDevice detection?

Caching often happens outside Drupal!

Caching strategies

All Drupal (with or without memcache)• Drupal stores pages in the page cache• In hook_boot() device can be detected• Mobile Tools has example code using

page_cache_fastpath()

Drupal + Varnish/Akamai• Drupal is not called for cached pages• Need for specific Varnish/Akamai config files

Drupal + Boost• Drupal is not called for cached pages• Need for specific .htaccess file

Q&A AND TESTING

Testing

Performance TestingSpeeds can vary from 70-135 Kbits/s while new 4G standards will allow for peak values up to 100 Mbit/s

Usability Testing

Evaluate your designs and improve

Test on task completion

Evaluate usage

Test all your targeted devices

Simulators iPhone simulator /Android

Simulator Blackberry Simulators Opera Mini SimulatorDevice banks Nokia Remote Access Commercial solutions

available

Know your devices upfront!

Enables good client communication. No surprises at the endKnow what to develop forKnow what to testDifferent projects will have different lists

Device OS Resolution Browser js CSS-Gradient

css-rounded-corner

Fonts Replacements

Media Queries

Template

Iphone3G iOS 320x480 Webkit High end

iPhone4 iOS 640x980 Webkit High end

Samsung Galaxy

Android 480x800 Webkit High end

Tourch 9800

BB v6.x 360x480 Webkit High end

Nokia C6 Symbian^3

360x640 Webkit Low end

BB Pearl 9100

BB v4.6 360x400 BB 4.6 Low end

… ..

QUESTIONS?

Thank you

tom.deryckere@gmail.comhttp://twitter.com/twomhttp://www.mobiledrupal.com

http://london2011.drupal.org/conference/sessions/bridging-gap-between-desktop-and-mobile-publishing-drupal