Briding the Gap between Desktop and Mobile publishing

Bridging the Gap Between Desktop and Mobile Publishing with Drupal
Drupalcon London 2011Tom Deryckere
twom

Selling Mobile
Support for low end devices
Transcoding desktop sites
HTML5/CSS3
Closed Solutions
Open Standards
Highly Customized apps or websites
Android
People recall WML
2 years
iPhone Browser
Focus on High End
OperaMini
Audience already solved
Nokia/symbian
Android
Audience easily impressed
Small room
WML WTF?
Tables
Only Speaker
Many high end devices
Many specialists
Big room

About Me
Started 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 Metrics
Other
Foursquare Connect
Soundcloud Connect
Abandoned
Osmobi
Osmobil Mobile Theme

ConsumerSearch.com
Part of About.com and The New York Times
Find information about consumer products
High quality content driven by dedicated editorial team
First D5 now D6
Great Drupal team!
Mobile website in 2011
“People search for information everywhere”

ConsumerSearch Mobile Traffic
Desktop
Mobile
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

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) configfile
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?
Native
Arriving soon
Focus on very specific tasks and interactions
iPhone first, Android later
Complementary to mobile website!

The many faces of mobile
Mobile Testing
NativeApps
vs
(responsive) Design
Web Apps
and
Online / Offline
Media Queries
Usability
& Navigation
Javascript Frameworks
jQuerySencha Touch
Sproutcore
Web Standards
HTML5 & CSS3
Location Based Apps
Product Development
Cross-Platform development
Multi-platform distribution
Mobile SEO

…get a strategy
Before thinking technology …

Support for which devices?
Cross platform?
Free service?
App store revenues?
Content repurposing?
Graphics intensive?
Content Driven?
Existing knowledge?
Current technology?
Budget?
Linkable?
Which functionality
Strategy
Technology

Strategy
Technologies
Dedicated iPhone App for sale in the App Store
iOS / Services
Optimize reach by cross Platform Native App
Appcellerator/PhoneGap / Services
Browser based webapp for high end devices
HTML5/CSS3/Drupal
Browser based webapp all devices
XHTML/Drupal
Multi-platform website
Responsive/Adaptive design

STAGES OF CREATING A MOBILE PROJECT

This Session: Drupal as a mobile CMS
Theming Layer
Services
Panels
Look at Drupal Core components
Views
Multi-Sites
Caching
Context

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

Panels…
Highly customized….
CCK
Make a mobile version of your Desktop site
Views
…
Making a mobile only website
“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
Mobile specific
Website size

Creating a responsive template
Media Queries
Fluid CSS
Context Module
Easy setup
Large reuse of existing infrastructure
Multi-content distribution
No mobile first approach
Desktop-focused default themingbehaviorneedsmany changes to fit mobile context
Hard tocreate real mobile “experiences” or contextualapps

Use Case: Product Company
Focus 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
Mobile specific
Website size

Creating a Mobile and Desktop Template
Create a theme specific for mobile and desktop
Share functionality across mobile and desktop
Easy to setup
No mobile first approach
Desktop-focused default theming behavior needs many changes to fit mobile context
Hard 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 experience
Harder to setup and maintain

OVERVIEW ARCHITECTURE
App
Responsive
Separate templates

Your Drupal friends (and enemies)
Context
Panels
Theming layer
Views
MobileTools

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
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 path
Configure 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)

Theming
override
Cleanup CSS / JS
Offen struggle with contrib modules
Create separate mobile theme

Lot’s of things to say about this
Responsive/adaptive design
CSS3
Gradients
Rounded corders
Flexible grids
Media queries …
HTML5
Caching
Local storage
Geo
…

Mobile Tools

Mobile Tools
http://drupal.org/project/mobile_tools
Basic Functionality
Device detection
Device redirection
Theme switching
Detection of device groups
Mobile user roles
Force full view | mobile
Set custom homepage
Custom number of FrontPage nodes
Hide mobile browser scrollbar
Viewport header
Provide mobile build modes
Provide mobile contexts
Provide panel context

Using Mobile Tools to configure mobile theme
Tell whento switch theme
1
Select the mobile theme
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" />
Default iPhoneviewport is 900px
Set viewportto device width
Do notallowzooming
<link rel="apple-touch-icon" href="”sites/all/themes/northpoint_mobile/webclip.png>

Configure Redirection
Choice to have site on two domains or one domain
Add URLs
1
Enable Redirection
2
Add Exceptions
3

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

Caching
Device 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
Test all your targeted devices
Simulators
iPhone simulator /Android Simulator
Blackberry Simulators
Opera Mini Simulator
Device banks
Nokia Remote Access
Commercial solutions available
Performance Testing
Speeds 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

Know your devices upfront!
Enables good client communication. No surprises at the end
Know what to develop for
Know what to test
Different projects will have different lists

Questions?

Thank you
tom.deryckere@gmail.com
http://twitter.com/twom
http://www.mobiledrupal.com
http://london2011.drupal.org/conference/sessions/bridging-gap-between-desktop-and-mobile-publishing-drupal

http://www.mobiledrupal.com	9605
http://mobiledrupal.com	8718
http://www.eldeto.com	5143
http://iui.mobiledrupal.com	537
http://mobile.mobiledrupal.com	142
http://www.secretmanage.com	77
http://feeds2.feedburner.com	69
http://translate.googleusercontent.com	63
http://translate.googleusercontent.com	63
http://feeds.feedburner.com	7
http://drupal.org	7
http://webcache.googleusercontent.com	6
http://do.leapfrog.cl	5
http://www.sitespoweredbydrupal.com	3
http://prlog.ru	3
http://www.mobilephoneemulator.com	2
http://10.237.125.73	1
http://10.10.206.47:82	1
http://10.10.206.43:82	1
http://translate.google.com	1
http://127.0.0.1:8795	1
http://10.10.206.50:82	1
http://emulateurmobile.com	1

Briding the Gap between Desktop and Mobile publishing

by Tom Deryckere

Accessibility

Categories

Upload Details

Usage Rights

23 Embeds 24,457

Statistics

Briding the Gap between Desktop and Mobile publishing Presentation Transcript