Your SlideShare is downloading. ×
Mobile-izing Your Organization with Drupal: Acquia webinar
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Mobile-izing Your Organization with Drupal: Acquia webinar

41,909
views

Published on

Acquia Webinar presentation about creating mobile websites with Drupal

Acquia Webinar presentation about creating mobile websites with Drupal

Published in: Technology

0 Comments
29 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
41,909
On Slideshare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
309
Comments
0
Likes
29
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Mobile-izing Your Organization With DrupalGo 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 ConfigurationMULTISITE 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 ConfigurationOVERVIEW 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 TemplatingCore 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-UPCreate 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.comhttp://www.domain.mobi 34
  • 36. CONFIGURE REDIRECTIONq  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&AAND TESTING 45
  • 47. TESTINGUsability 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 listsDevice OS Resolution Browser js CSS- css-rounded- Fonts Media Queries Template Gradien corner Replacement t sIphone3G iOS 320x480 Webkit High endiPhone4 iOS 640x980 Webkit High endSamsung Android 480x800 Webkit High endGalaxyTourch BB v6.x 360x480 Webkit High end9800Nokia C6 Symbian^3 360x640 Webkit Low endBB Pearl BB v4.6 360x400 BB 4.6 Low end9100… .. 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. MobileMobile Blogs tsproduc 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