Mobile-izing Your Organization with Drupal: Acquia webinar

42,734 views

Published on

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
42,734
On SlideShare
0
From Embeds
0
Number of Embeds
30,540
Actions
Shares
0
Downloads
316
Comments
0
Likes
29
Embeds 0
No embeds

No notes for slide

Mobile-izing Your Organization with Drupal: Acquia webinar

  1. 1. Mobile-izing Your Organization With DrupalGo Mobile or Go Home 0
  2. 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. 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. 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. 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. 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. 7. ADOPTION WITHIN THE DRUPAL COMMUNITY 6
  8. 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. 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. 10. ARCHITECTING YOUR MOBILE DRUPAL SITE 9
  11. 11. “APP” VS MOBILE WEBSITE iPhone/Android/… App Mobile Website CSS HTML JavaScript Drupal supports both strategies! 10
  12. 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. 13. CREATING AN APPLICATION WITH DRUPAL BACKEND DB Drupal Core Contrib Drupal Services 12 12
  14. 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. 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. 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. 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. 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. 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. 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. 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. 22. IMPLEMENTATION:CREATING THE MOBILE SITE STEP-BY-STEP APPROACH 21
  23. 23. STEP-BY-STEP: FROM DESKTOP TO MOBILE 22
  24. 24. Mobile Template Set-Up Device Detection Redirection Select Layout Content Adaptation 23
  25. 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. 26. Mobile Template Set-Up Device Detection Redirection Select Layout Content Adaptation 25
  27. 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. 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. 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. 30. HIDE SCROLLBAR USING JAVASCRIPT WIDGET 29
  31. 31. Mobile Template Set-Up Device Detection Redirection Select Layout Content Adaptation 30
  32. 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. 33. MOBILE TOOLS CONFIGURATION 32
  34. 34. Mobile Template Set-Up Device Detection Redirection Select Layout Content Adaptation 33
  35. 35. REDIRECTION SCHEME SHOULD BE SIMPLE http://m.domain.tld or http://www.domain.comhttp://www.domain.mobi 34
  36. 36. CONFIGURE REDIRECTIONq  Choice to have site on two domains or one domain Add URLs 1 Enable Redirection 2 Add Exceptions 3 35
  37. 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. 38. Mobile Template Set-Up Device Detection Redirection Select Layout Content Adaptation 37
  39. 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. 40. CONFIGURE MOBILE LAYOUTS: CONTEXT MODULE 39
  41. 41. Mobile Template Set-Up Device Detection Redirection Select Layout Content Adaptation 40
  42. 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. 43. IMAGE RESIZING USING IMAGECACHE ImageCache presets ImageCache configuration for mobile logo 42
  44. 44. CONFIGURE YOUR BUILD MODE Fields Formatter 43
  45. 45. Mobile Template Set-Up Device Detection Redirection Select Layout Content Adaptation 44
  46. 46. Q&AAND TESTING 45
  47. 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. 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. 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. 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. 51. TALK TO US. CHALLENGE US. CALL US at 212.819.1700 VISIT US at www.northps.com FOLLOW US @northps 50

×