mobile-izing your organization with drupal: acquia webinar
DESCRIPTION
Acquia Webinar presentation about creating mobile websites with DrupalTRANSCRIPT
![Page 1: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/1.jpg)
0
Mobile-izing Your Organization With Drupal Go Mobile or Go Home
![Page 2: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/2.jpg)
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
![Page 3: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/3.jpg)
2
SOME OF OUR TOP MOBILE SITES INCLUDE
2
■ Media/Publishing
We developed one of the top 10 food applications on the iPhone store
■ Pharmaceutical
We created the mobile application for the #1 headache/pain reliever medicine
■ Not-for-Profit
We developed the mobile strategy for the number one children’s hospital in the U.S.
■ Telecommunications
We provided the 3G mobile launch site for one of the top wireless carriers
![Page 4: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/4.jpg)
3
ROADMAP
3
■ Introductions
■ Mobile Penetration / Stats
■ Before Development begins
■ You have a Plan, now Development begins
■ Unleashing the Power of Drupal
■ Drupal Strategies & Architecture
■ Drupal Tools & How Tos
■ Mobile Testing Techniques / Tools
■ Q & A
![Page 5: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/5.jpg)
4
MATT DORMAN ■ NorthPoint Project Manager
■ Expertise
■ Mobile Applications (iOS / Android apps)
■ Publishing Workflows with Drupal
■ Enterprise Web Content Management Migrations
■ Content / Site Architecture
![Page 6: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/6.jpg)
5
MOBILE PENETRATION
5
■ 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
![Page 7: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/7.jpg)
6
ADOPTION WITHIN THE DRUPAL COMMUNITY
![Page 8: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/8.jpg)
7
DRUPAL AS A MULTIPLATFORM CMS
7
■ 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
![Page 9: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/9.jpg)
8
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 10: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/10.jpg)
9
ARCHITECTING YOUR MOBILE DRUPAL SITE
![Page 11: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/11.jpg)
10
“APP” VS MOBILE WEBSITE
CSSHTML
JavaScript
Drupal supports both strategies!
iPhone/Android/… App Mobile Website
![Page 12: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/12.jpg)
11
CASE STUDY: EAT THIS, NOT THAT!
11
■ Feed Your Apps
■ Web Service Powered by Drupal
■ Authentication
■ Sync Content for Offline Usage
■ Read and write to Drupal
■ Case Study: Eat $is, Not $at!
FROM A BOOK
TO A WEBSITE
TO A $7.99 iPHONE APP
![Page 13: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/13.jpg)
12
CREATING AN APPLICATION WITH DRUPAL BACKEND
12
DB
Core Contrib
Drupal Services
Drupal
![Page 14: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/14.jpg)
13
TOM DERYCKERE
Profile
www.mobiledrupal.com
twitter.com/twom
drupal.org/user/25564
■ Senior Drupal Consultant
■ Expertise ■ Solr Search
■ Site Migrations
■ Mobile Development
■ $ird-party integration
■ Belgian cuisine
■ Module Maintainer
■ Mobile Tools
■ WURFL
■ Bango Analytics
■ Zendesk
■ Blog: http://www.mobiledrupal.com
![Page 15: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/15.jpg)
14
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 16: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/16.jpg)
15
CREATING A RESPONSIVE TEMPLATE
DB
Core Contrib
Templating
Mobile/Desktop
Drupal
■ 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
![Page 17: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/17.jpg)
16
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
Website size
Mobile specific
![Page 18: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/18.jpg)
17
CREATING A MOBILE AND DESKTOP TEMPLATE
DB
Core Contrib
Templating
Mobile Desktop
Drupal
■ 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
![Page 19: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/19.jpg)
18
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 20: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/20.jpg)
19
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
DB
Core
Desktop contrib
Templating
DesktopMobile
Drupal
Mobile contrib
Shared contrib/custom/features
DB
UsersContent
Shared ConfigurationDesktop Configuration
Mobile Configuration
![Page 21: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/21.jpg)
20
OVERVIEW ARCHITECTURE
DB
Core Contrib
Drupal Services
Drupal
DB
Core Contrib
Templating
Mobile/Desktop
Drupal
DB
Core Contrib
Templating
Mobile Desktop
Drupal
DB
Core
Desktop contrib
Templating
DesktopMobile
Drupal
Mobile contrib
Shared contrib/custom/features
DB
UsersContent
Shared ConfigurationDesktop Configuration
Mobile Configuration
App Responsive Separate templates Separate templates &
separate configuration
![Page 22: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/22.jpg)
21
IMPLEMENTATION: CREATING THE MOBILE SITE
STEP-BY-STEP APPROACH
![Page 23: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/23.jpg)
22
STEP-BY-STEP: FROM DESKTOP TO MOBILE
![Page 24: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/24.jpg)
23
Content Adaptation
Select Layout
Redirection
Device Detection
Mobile Template Set-Up
![Page 25: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/25.jpg)
24
MOBILE TOOLS ■ http://drupal.org/project/mobile_tools
■ Basic Functionality § Device detection
§ Device redirection
§ $eme 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
![Page 26: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/26.jpg)
25
Content Adaptation
Select Layout
Redirection
Device Detection
Mobile Template Set-Up
![Page 27: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/27.jpg)
26
MOBILE TEMPLATE SET-UP
Create your own mobile theme or start from existing contributions
Fusion Mobile A Cloudy Day Mobile Nokia Mobile jQuery Mobile
![Page 28: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/28.jpg)
27
USING MOBILE TOOLS TO CONFIGURE MOBILE THEME
Tell when to switch theme
Select the mobile theme
1
2
Additional mobile headers
3
![Page 29: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/29.jpg)
28
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 viewport900px width
- Default iPhone viewport is 900px
- Set viewport to device width
- Do not allow zooming
![Page 30: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/30.jpg)
29
HIDE SCROLLBAR USING JAVASCRIPT WIDGET
![Page 31: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/31.jpg)
30
Content Adaptation
Select Layout
Redirection
Device Detection
Mobile Template Set-Up
![Page 32: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/32.jpg)
31
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
![Page 33: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/33.jpg)
32
MOBILE TOOLS CONFIGURATION
![Page 34: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/34.jpg)
33
Content Adaptation
Select Layout
Redirection
Device Detection
Mobile Template Set-Up
![Page 35: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/35.jpg)
34
REDIRECTION SCHEME SHOULD BE SIMPLE
http://m.domain.tld or http://www.domain.mobi http://www.domain.com
![Page 36: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/36.jpg)
35
CONFIGURE REDIRECTION
q Choice to have site on two domains or one domain
1
2
3
Add URLs
Enable Redirection
Add Exceptions
![Page 37: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/37.jpg)
36
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 38: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/38.jpg)
37
Content Adaptation
Select Layout
Redirection
Device Detection
Mobile Template Set-Up
![Page 39: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/39.jpg)
38
CONFIGURE MOBILE LAYOUTS: BLOCKS ■ Using Blocks configuration page
■ Configure blocks appearing in your Desktop regions
■ Configure blocks appearing in your Mobile regions
Desktop Mobile
![Page 40: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/40.jpg)
39
CONFIGURE MOBILE LAYOUTS: CONTEXT MODULE
![Page 41: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/41.jpg)
40
Content Adaptation
Select Layout
Redirection
Device Detection
Mobile Template Set-Up
![Page 42: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/42.jpg)
41
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)
![Page 43: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/43.jpg)
42
IMAGE RESIZING USING IMAGECACHE ImageCache presets
ImageCache configuration for mobile logo
![Page 44: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/44.jpg)
43
CONFIGURE YOUR BUILD MODE
Fields Formatter
![Page 45: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/45.jpg)
44
Content Adaptation
Select Layout
Redirection
Device Detection
Mobile Template Set-Up
![Page 46: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/46.jpg)
45
Q&A AND TESTING
![Page 47: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/47.jpg)
46
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
![Page 48: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/48.jpg)
47
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
… ..
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
![Page 49: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/49.jpg)
48
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 50: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/50.jpg)
49
DRUPAL POWERS MOBILE. NORTHPOINT® ENABLES IT.
Mobile Blogs
Mobile Apps
Mobile Media Distribution
Mobile
products Mobile Enterprise
Mobile Education Mobile Microsites
![Page 51: Mobile-izing Your Organization with Drupal: Acquia webinar](https://reader034.vdocuments.site/reader034/viewer/2022052315/554d2057b4c905ca208b4b2c/html5/thumbnails/51.jpg)
50
TALK TO US. CHALLENGE US.
CALL US at 212.819.1700
VISIT US at www.northps.com
FOLLOW US @northps