1
ABOUT NORTHPOINT
1
■ Founded in 2003
■ Headquartered in New York with a second office in Boston
■ 100 employees split between offices
■ Content Solutions Focus ■ Re-platforming CMSs ■ Mobile Websites and Applications ■ Information Architecture and Content Strategy ■ Search Engine Optimization (SEO) ■ Website and Microsite Development ■ Community Development / User-Generated Content platforms ■ Website Scalability / Performance Management ■ Content Syndication and Video Serving ■ Scalability
■ Generously loaned content for Stages of creating a mobile project
MOBILE PENETRATION
2
■ Facebook: 200M mobile users, 2x more active than Desktop users
■ Twitter Mobile: 50% of total active users, 40% of all tweets
■ Opportunities
■ Only 21% of Google’s largest advertisers have a website that is optimized for mobile ■ Communicate directly with consumers ■ Social Networking ■ E-Commerce ■ Additional Advertising Medium ■ Gaming
Mill
ions
of T
erab
ytes
per
mon
th
1
2
3
4
0
Mobile traffic prediction
2014 2013 2012 2011 2014 2009
ADOPTION WITHIN THE DRUPAL COMMUNITY
DRUPAL AS A MULTIPLATFORM CMS
4
■ Drupal not only targets Desktops, but also tablets and mobile devices
■ Flexible content model & templating engine allows Drupal to target multiple devices
■ Advantages of using Drupal as a multiplatform CMS
■ One content store for multiple platforms
■ Available tools ■ Mobile Tools ■ WURFL ■ Fusion Mobile ■ Context Module ■ Services
WHITEHOUSE.GOV
5
Tom Cochrane Director of New Media Technologies Executive Office of the President
TIMESHUTTER
• A travel photography iPhone App that allows user to view SF's major landmarks with “then and now” image transiOons and slideshows
6
DRUPALCON
• hPp://palanOr.net/blog/mobilizing-‐drupalcon-‐chicago
7
PUBLISHER
8
• Publisher App • http://drupal.org/
project/services • hPps://github.com/workhabiOnc/drupal-‐ios-‐sdk
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
ARCHITECTING YOUR MOBILE DRUPAL SITE
“APP” VS MOBILE WEBSITE
Drupal supports both strategies!
iPhone/Android/… App Mobile Website
CREATING AN APPLICATION WITH DRUPAL BACKEND
12
CREATING A RESPONSIVE TEMPLATE ■ Media Queries
■ Fluid CSS
■ Use Drupal Build Modes
■ Context Module
• Easy setup • Large reuse of existing infrastructure • Multi-content distribution
• 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
CREATING A MOBILE AND DESKTOP TEMPLATE
■ Create a theme specific for mobile and desktop
■ Share functionality across mobile and desktop
• Easy to setup • Large reuse of existing infrastructure • Multi-content distribution
• 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
MULTISITE INSTALLATION
• Room to create a highly-optimized mobile experience
• Large reuse of existing infrastructure • Multi-content distribution
• Harder to setup and maintain
■ Create a theme specific for mobile and desktop
■ Maintain separate configurations for mobile and desktop
OVERVIEW ARCHITECTURE
App Responsive Separate templates Separate templates &
separate configuration
IMPLEMENTATION: CREATING THE MOBILE SITE
STEP-BY-STEP APPROACH
STEP-‐BY-‐STEP: FROM DESKTOP TO MOBILE
Content Adaptation
Select Layout
Redirection
Device Detection
Mobile Template Set-Up
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
Content Adaptation
Select Layout
Redirection
Device Detection
Mobile Template Set-Up
MOBILE TEMPLATE SET-‐UP Create your own mobile theme or start from existing contributions
Fusion Mobile A Cloudy Day Mobile Nokia Mobile jQuery Mobile
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
HIDE SCROLLBAR USING JAVASCRIPT WIDGET
Content Adaptation
Select Layout
Redirection
Device Detection
Mobile Template Set-Up
DEVICE DETECTION: READ USER AGENT STRING
■ Simple detection
■ Parse user agent string and search for “iPad”, “Android”, “Nokia”, “Blackberry”
■ Only information about the device manufacturer
■ Advanced detection
■ User device library to match user agent string with
■ Contains more information like Screen Size, device capabilities
■ http://drupal.org/project/WURFL
MOBILE TOOLS CONFIGURATION
Content Adaptation
Select Layout
Redirection
Device Detection
Mobile Template Set-Up
REDIRECTION SCHEME SHOULD BE SIMPLE
http://m.domain.tld or http://www.domain.mobi http://www.domain.com
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
Content Adaptation
Select Layout
Redirection
Device Detection
Mobile Template Set-Up
CONFIGURE MOBILE LAYOUTS: BLOCKS
■ Using Blocks configuration page
■ Configure blocks appearing in your Desktop regions
■ Configure blocks appearing in your Mobile regions
Desktop Mobile
CONFIGURE MOBILE LAYOUTS: CONTEXT MODULE
Content Adaptation
Select Layout
Redirection
Device Detection
Mobile Template Set-Up
CONTENT ADAPTATION ■ Different adaptations are possible for mobile devices
■ Video adaptation ■ Image resizing ■ Text summarization (e.g.: provide shorter versions) ■ Functional adaptation (e.g. reducing number of form fields)
IMAGE RESIZING USING IMAGECACHE
ImageCache presets
ImageCache configuration for mobile logo
CONFIGURE YOUR BUILD MODE
Fields Formatter
Content Adaptation
Select Layout
Redirection
Device Detection
Mobile Template Set-Up
Q&A AND TESTING
TESTING 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
Test all your targeted devices Simulators iPhone simulator /Android
Simulator
Blackberry Simulators Opera Mini Simulator Device banks Nokia Remote Access Commercial solutions available
Device OS Resolu6on 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
… ..
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
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
Enough talk!
Show me the
demo!
46
DRUPALCON • Appcelerator Otanium framework – Pure JS as a cross plahorm API using a custom VM
• Offline storage, DB • Integrate with DC website, sync content
• Build a reusable library • Views datasource – JSON
• Embedded reviews 47
Time Shutter San Francisco
A Drupal-Powered iPhone App
NIH Mobile User Group April 13, 2011
ISL ConsulOng
• Founded in 1993 • Privately held web services firm • New York Partner ClearMetrics • Built ~ 50 Drupal sites • Major clients
– Fortune 500 firms: Chevron McDonalds, Thomson, Yahoo!
– Non-‐profits like Common Sense Media, NewsTrust, PSR
– Winner of numerous awards including BOTI, AdTech, WMA
– Diversifying into products • Skillscan • Chevron Toy Cars • Woody Allen audio • Time ShuPer
CollaboraOon
• Drupal Development – Ankur Rishi – Jeff Turner – Robert Hinrichs – Judy Chun
• iPhone Development – Ricky Tsao – Mark Ferree
• CreaOve Director – Catharine Oshiro
• WriOng – Dinah Darvas, Beth Edelman, Karen Payne,
et. al • Photography
– Michael Maloney, Kerry Ho, et al. • Old Postcards
– Edward H. Mitchell, Pacific Novelty Co. and a dozen other firms, 1900-‐1920
• Old Map – David Rumsey Map CollecOon
Time ShuPer San Francisco • A travel photography iPhone App
that allows user to view SF's major landmarks with “then and now” image transiOons and slideshows
• Geo-‐coded map with color locaOons
• Original guidebook capOons • Users can take, store and share
own photos made at locaOon • Picked as a "New and
Noteworthy" release on the iTunes App Store home page
• Free • 50,000+ downloads
Time ShuPer San Francisco App 2 • Offers something different
– Old photograph superimposed on camera view align user’s shots
• The App scales images for transiOons
– New shot with old image to email, post on Facebook, TwiPer, Flickr
• Scalable technology – Drupal-‐powered content
management to make adding places to create new Apps easy
– Currently 3 App versions • SF Free iPhone • SF Paid iPhone ($1.99) • SF iPad
– New York version in May 2011
• CompeOOon – Whatwasthere.com (iPhone App too) – Historypin.com – LookBackMaps (iPhone App too)
+
LiPle Lesson
• Solr Power – IniOally had a “Related Images” box driven by manually adding the relevant images
– Using Solr’s “More like this” feature provided equally good results
• With a liPle tweaking, and while imperfect, well worth the Ome savings
Big Lessons • Drupal immature for mobile “transacOons”
– Services module provides framework but not real integraOon • ParOally why 1.0 is a self-‐contained App • Kyle Browning’s Ptools module (Drupal iOS SDK) tries to improve on
processing for iPhone over XML RPC or JSON servers
• Mobile theme support also very limited – Drupal loads the whole node not just elements you need – Hopeful about jQuery mobile module
• Mobile is a completely different design sensibility – Need to begin with a ver$cal 320 x 480 screen – Thumb vs. mouse or keyboard to control App – LiPle control over context (sunshine kills)
• TesOng even more important than on a website – Less control over environment leads to more problems
• Fortunately an App is soxware and updates easily
Time ShuPer Next Steps • Live IntegraOon
– Upload images directly via login • Create your own maps and views • Download images directly to refresh items live
– Will require some sort of CDN
– Download enhancements from within Apps • XML-‐feed based plus images (in App purchases)
– MulO-‐lingual versions
– iPad 2.0 version – Android version (due May 2011)
• Partnerships
PUBlisher
• Kyle Browning – [email protected]
• Workhabit
• Publisher App • iOS and Android libraries Integrate with Drupal WebServices
• Uses binary communicaOon instead of JSON or XML
Appendix
81
Background on publisher app