Acquia Webinar presentation about creating mobile websites with Drupal

1. Mobile-izing Your Organization With Drupal
Go Mobile or Go Home
0

2. ABOUT NORTHPOINT
■ 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
1
1

3. SOME OF OUR TOP MOBILE SITES INCLUDE
■ 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
2

4. ROADMAP
■ 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
3

5. MATT DORMAN
■ NorthPoint Project Manager
■ Expertise
■ Mobile Applications (iOS / Android apps)
■ Publishing Workflows with Drupal
■ Enterprise Web Content
Management Migrations
■ Content / Site Architecture
4

6. MOBILE PENETRATION
■ Facebook: 200M mobile users, 2x more active than Desktop users
■ Twitter Mobile: 50% of total active users, 40% of all tweets
■ Opportunities
4
■ Only 21% of Google’s largest
advertisers have a website that is
Millions of Terabytes per month
optimized for mobile
3
■ Communicate directly
with consumers
2
■ Social Networking
■ E-Commerce
1
■ Additional Advertising Medium
■ Gaming
0
2009 2011 2014 2012 2013 2014
Mobile traffic prediction
5

7. ADOPTION WITHIN THE DRUPAL COMMUNITY
6

8. DRUPAL AS A MULTIPLATFORM CMS
■ 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
7
7

9. STAGES OF CREATING A MOBILE PROJECT
• Target audience
• Targeted devices
Strategy
• Business goals
• …
• Focus groups
Product Development
• Defining functionality
• Product flow
• …
• Usability
• Information Architecture
IA/Design
• User Experience
• Navigation
• Reusability
• Scalability
Architecting
• Extendability
• Simplicity
• …
• Drupal module development
• Contrib modules
Implementation
• Extending
• …
• Device testing
• Functional testing
Testing
• Usability testing
8

10. ARCHITECTING YOUR MOBILE DRUPAL
SITE
9

11. “APP” VS MOBILE WEBSITE
iPhone/Android/… App
Mobile Website
CSS
HTML
JavaScript
Drupal supports both strategies!
10

12. CASE STUDY: EAT THIS, NOT THAT!
■ 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
11
11

13. CREATING AN APPLICATION WITH DRUPAL BACKEND
DB
Drupal
Core Contrib
Drupal Services
12
12

14. TOM DERYCKERE
■ Senior Drupal Consultant
■ Expertise
Profile
■ Solr Search
■ Site Migrations
■ Mobile Development
■ ird-party integration
■ Belgian cuisine
■ Module Maintainer
drupal.org/user/25564
■ Mobile Tools
twitter.com/twom
■ WURFL
www.mobiledrupal.com
■ Bango Analytics
■ Zendesk
■ Blog: http://www.mobiledrupal.com
13

15. 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
14

16. CREATING A RESPONSIVE TEMPLATE
■ Media Queries
DB
■ Fluid CSS
■ Use Drupal Build Modes
Drupal
■ Context Module
Core Contrib
• Easy setup
Templating
• Large reuse of existing infrastructure
Mobile/Desktop
• 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
15

17. USE CASE: PRODUCT COMPANY
■ Focus on getting crucial information available on mobile devices
- Product information
- Contact details
- Use cases
■ No specific contextual functionality
Mobile specific
- User tasks are similar as on desktop
■ Need for very high usability and nice design
- Good responsive design must attract customers
Website size
16

18. CREATING A MOBILE AND DESKTOP TEMPLATE
■ Create a theme specific for mobile and desktop
DB
■ Share functionality across mobile and desktop
Drupal
• Easy to setup
Core Contrib
• Large reuse of existing infrastructure
Templating
• Multi-content distribution
Mobile Desktop
• 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
17

19. USE CASE: BIG HOSPITAL
■ Highly-contextual mobile site
- Navigation through campus
- Make simple appointments through mobile
- Shared content store
- Strip down some desktop functionality
Mobile specific
■ Complex Information Architecture
■ Reuse of content needed
- Doctors’ contacts
- Divisions
- General information
Website size
18

20. Mobile Configuration
MULTISITE INSTALLATION Users
Content
Shared Configuration DB DB
Desktop Configuration
■ Create a theme specific for mobile and desktop
■ Maintain separate configurations for mobile and desktop
Drupal
• Room to create a highly-optimized mobile Core
experience
Shared contrib/custom/features
• Large reuse of existing infrastructure
Desktop contrib Mobile contrib
• Multi-content distribution
Templating
Mobile Desktop
• Harder to setup and maintain
19

21. Mobile Configuration
OVERVIEW ARCHITECTURE Users
Content
Shared Configuration DB DB
Desktop Configuration
DB
DB
Drupal
DB
Core
Drupal
Drupal Shared contrib/custom/features
Core Contrib
Core Contrib
Desktop contrib Mobile contrib
Drupal Templating
Templating
Templating
Core Contrib
Mobile/Desktop
Mobile Desktop
Drupal Services Mobile Desktop
Separate templates &
App
Responsive
Separate templates
separate configuration
20

22. IMPLEMENTATION:
CREATING THE MOBILE SITE
STEP-BY-STEP APPROACH
21

23. STEP-BY-STEP: FROM DESKTOP TO MOBILE
22

24. Mobile Template Set-Up
Device Detection
Redirection
Select Layout
Content Adaptation
23

25. 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
24

26. Mobile Template Set-Up
Device Detection
Redirection
Select Layout
Content Adaptation
25

27. MOBILE TEMPLATE SET-UP
Create your own mobile theme or start from existing contributions
Fusion Mobile
Nokia Mobile
jQuery Mobile
A Cloudy Day Mobile
26

28. USING MOBILE TOOLS TO CONFIGURE MOBILE THEME
Tell when to switch theme
1
Select the mobile theme
2
Additional mobile headers
3
27

29. MOBILE-SPECIFIC HEADERS ADDED BY MOBILE TOOLS
<meta name = "viewport" content = "user-scalable=no, width=device-
width, maximum-scale=1.0" />!
- Default iPhone viewport is 900px
Default viewport
900px width
- Set viewport to device width
- Do not allow zooming
<link rel="apple-touch-icon" href="”sites/all/themes/
northpoint_mobile/webclip.png>!
28

30. HIDE SCROLLBAR USING JAVASCRIPT WIDGET
29

31. Mobile Template Set-Up
Device Detection
Redirection
Select Layout
Content Adaptation
30

32. 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
31

33. MOBILE TOOLS CONFIGURATION
32

34. Mobile Template Set-Up
Device Detection
Redirection
Select Layout
Content Adaptation
33

35. REDIRECTION SCHEME SHOULD BE SIMPLE
http://m.domain.tld or
http://www.domain.com
http://www.domain.mobi
34

36. CONFIGURE REDIRECTION
q Choice to have site on two domains or one domain
Add URLs
1
Enable Redirection
2
Add Exceptions
3
35

37. 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
36

38. Mobile Template Set-Up
Device Detection
Redirection
Select Layout
Content Adaptation
37

39. CONFIGURE MOBILE LAYOUTS: BLOCKS
■ Using Blocks configuration page
■ Configure blocks appearing in your Desktop regions
■ Configure blocks appearing in your Mobile regions
Desktop
Mobile
38

40. CONFIGURE MOBILE LAYOUTS: CONTEXT MODULE
39

41. Mobile Template Set-Up
Device Detection
Redirection
Select Layout
Content Adaptation
40

42. 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)
41

43. IMAGE RESIZING USING IMAGECACHE
ImageCache presets
ImageCache configuration for mobile logo
42

44. CONFIGURE YOUR BUILD MODE
Fields
Formatter
43

45. Mobile Template Set-Up
Device Detection
Redirection
Select Layout
Content Adaptation
44

46. Q&A
AND TESTING
45

47. TESTING
Usability Testing
Test all your targeted devices
Performance Testing
§ Evaluate your Simulators
Speeds can vary from 70-135
designs and § iPhone simulator /Android Kbits/s while new 4G standards
improve
Simulator
will allow for peak values up to
§ Test on task 100 Mbit/s
§ Blackberry Simulators
completion
§ Opera Mini Simulator
§ Evaluate usage
Device banks
§ Nokia Remote Access
§ Commercial solutions available
46

48. 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
Device OS Resolution Browser js CSS- css-rounded- Fonts Media Queries Template
Gradien corner Replacement
t s
Iphone3G iOS 320x480 Webkit High end
iPhone4 iOS 640x980 Webkit High end
Samsung Android 480x800 Webkit High end
Galaxy
Tourch BB v6.x 360x480 Webkit High end
9800
Nokia C6 Symbian^3 360x640 Webkit Low end
BB Pearl BB v4.6 360x400 BB 4.6 Low end
9100
… ..
47

49. STAGES OF CREATING A MOBILE PROJECT
• Target audience
• Targeted devices
Strategy
• Business goals
• …
• Focus groups
Product Development
• Defining functionality
• Product flow
• …
• Usability
• Information Architecture
IA/Design
• User Experience
• Navigation
• Reusability
• Scalability
Architecting
• Extendability
• Simplicity
• …
• Drupal module development
• Contrib modules
Implementation
• Extending
• …
• Device testing
• Functional testing
Testing
• Usability testing
48

50. DRUPAL POWERS MOBILE.
NORTHPOINT® ENABLES IT.
Mobile
Mobile Blogs
ts
produc Mobile
Enterp
rise
Mobile Apps
Mobile
Media
Distribution
Mobile
Education
Mobi
le
Micro
sites
49

51. TALK TO US. CHALLENGE US.
CALL US at 212.819.1700
VISIT US at www.northps.com
FOLLOW US @northps
50