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
[email protected]://twitter.com/twomhttp://www.mobiledrupal.com
http://london2011.drupal.org/conference/sessions/bridging-gap-between-desktop-and-mobile-publishing-drupal
Top Related