briding the gap between desktop and mobile publishing
DESCRIPTION
Presentation given during Drupalcon London 2011 on creating mobile websites with Drupal.TRANSCRIPT
![Page 1: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/1.jpg)
Bridging the Gap Between Desktop and Mobile Publishing
with Drupal
Drupalcon London 2011Tom Deryckere
twom
![Page 2: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/2.jpg)
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
![Page 3: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/3.jpg)
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)
![Page 4: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/4.jpg)
Modules maintained
Mobile• Mobile Tools• Wurfl• Bango MetricsOther• Foursquare Connect• Soundcloud ConnectAbandoned• Osmobi• Osmobil Mobile Theme
![Page 5: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/5.jpg)
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”
![Page 6: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/6.jpg)
![Page 7: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/7.jpg)
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
![Page 8: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/8.jpg)
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)
![Page 9: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/9.jpg)
Mobile App?
NativeArriving soonFocus on very specific tasks and interactionsiPhone first, Android laterComplementary to mobile website!
![Page 10: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/10.jpg)
![Page 11: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/11.jpg)
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
![Page 12: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/12.jpg)
…GET A STRATEGYBefore thinking technology …
![Page 13: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/13.jpg)
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
![Page 14: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/14.jpg)
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
![Page 15: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/15.jpg)
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
![Page 16: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/16.jpg)
This Session: Drupal as a mobile CMS
Look at Drupal Core components
Views
Panels
Context
Theming Layer
Caching
Services
Multi-Sites
![Page 17: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/17.jpg)
Adoption within the Drupal Community
![Page 18: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/18.jpg)
Main functionality provided by Drupal modules- Device Detection
- Theme switching
- Redirecting (+cookies)
- Mobile Themes
- Integration with other modules- Context - Panels- Views- Build modes
![Page 19: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/19.jpg)
Make a mobile version of your Desktop site
Making a mobile only website
Highly customized….
Views
Panels…CCK
…
“Just” build a site.
![Page 20: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/20.jpg)
ARCHITECTING FOR MOBILE
![Page 21: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/21.jpg)
CREATING AN APPLICATION WITH DRUPAL BACKEND
![Page 22: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/22.jpg)
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
![Page 23: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/23.jpg)
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
![Page 24: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/24.jpg)
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
![Page 25: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/25.jpg)
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
![Page 26: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/26.jpg)
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
![Page 27: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/27.jpg)
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
![Page 28: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/28.jpg)
OVERVIEW ARCHITECTURE
App Responsive Separate templates
![Page 29: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/29.jpg)
Your Drupal friends (and enemies)
Context
Views
Panels
Mobile Tools
Theming layer
![Page 30: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/30.jpg)
CONTEXT MODULE
![Page 31: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/31.jpg)
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
![Page 32: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/32.jpg)
Context: Mobile Context
Provided by Mobile Tools
![Page 33: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/33.jpg)
Naming conventions
Use naming conventions (mobile_<name_desktop_context>)Disable non mobile contexts using
~mobile_*Or
Mobile context rule
![Page 34: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/34.jpg)
Desktop context
![Page 35: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/35.jpg)
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”
![Page 36: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/36.jpg)
VIEWS
![Page 37: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/37.jpg)
Views
Often very heavy on the “tables”Requirement to provide a mobile view on the same path as the desktop view
e.g. /overview
![Page 38: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/38.jpg)
Use multiple displays with same pathConfigure access restrictions
![Page 39: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/39.jpg)
PANELS
![Page 40: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/40.jpg)
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
![Page 41: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/41.jpg)
Panels configuration
Create a panel for all these pages
![Page 42: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/42.jpg)
Create variant
![Page 43: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/43.jpg)
Mobile selection rule
![Page 44: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/44.jpg)
Save panel
![Page 45: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/45.jpg)
Create your mobile panel (as usual)
![Page 46: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/46.jpg)
THEMINGoverride
Cleanup CSS / JS
Offen struggle with contrib modules
Create separate mobile theme
![Page 47: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/47.jpg)
Lot’s of things to say about this
Responsive/adaptive designCSS3• Gradients• Rounded corders• Flexible grids• Media queries …
HTML5• Caching• Local storage• Geo• …
![Page 48: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/48.jpg)
MOBILE TOOLS
![Page 49: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/49.jpg)
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
![Page 50: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/50.jpg)
Using Mobile Tools to configure mobile theme
Tell when to switch theme
Select the mobile theme
1
2
Additional mobile headers
3
![Page 51: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/51.jpg)
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
![Page 52: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/52.jpg)
Configure Redirection
Choice to have site on two domains or one domain
1
2
3
Add URLs
Enable Redirection
Add Exceptions
![Page 53: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/53.jpg)
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
![Page 54: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/54.jpg)
CACHINGDevice detection?
Caching often happens outside Drupal!
![Page 55: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/55.jpg)
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
![Page 56: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/56.jpg)
Q&A AND TESTING
![Page 57: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/57.jpg)
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
![Page 58: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/58.jpg)
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
… ..
![Page 59: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/59.jpg)
QUESTIONS?
![Page 60: Briding the Gap between Desktop and Mobile publishing](https://reader035.vdocuments.us/reader035/viewer/2022062319/554bc9fab4c905706a8b45cd/html5/thumbnails/60.jpg)
Thank you
[email protected]://twitter.com/twomhttp://www.mobiledrupal.com
http://london2011.drupal.org/conference/sessions/bridging-gap-between-desktop-and-mobile-publishing-drupal