Download as PDF, PPTX
Uploaded byTom Deryckere
Mobile-izing Your Organization with Drupal: Acquia webinar
This document discusses how to develop mobile-friendly websites using Drupal. It provides an overview of Northpoint, a digital agency specialized in Drupal development, and their experience building mobile sites. It then covers best practices for architecting a Drupal site for multiple devices, including responsive design, mobile modules, and creating mobile applications that interface with a Drupal backend. Case studies are presented for different types of organizations.
More Related Content
Similar to Mobile-izing Your Organization with Drupal: Acquia webinar
Mobile-izing Your Organization with Drupal: Acquia webinar
- 1. Mobile-izing Your OrganizationWith 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 OURTOP 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 THEDRUPAL COMMUNITY 6
- 8. DRUPAL AS AMULTIPLATFORM 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 CREATINGA 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 MOBILEDRUPAL SITE 9
- 11. “APP” VS MOBILEWEBSITE iPhone/Android/… App Mobile Website CSS HTML JavaScript Drupal supports both strategies! 10
- 12. CASE STUDY: EATTHIS, 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 APPLICATIONWITH 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-SIZEDNON-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 RESPONSIVETEMPLATE ■ 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: PRODUCTCOMPANY ■ 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 MOBILEAND 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: BIGHOSPITAL ■ 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 MOBILESITE STEP-BY-STEP APPROACH 21
- 23. STEP-BY-STEP: FROM DESKTOPTO 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 Createyour own mobile theme or start from existing contributions Fusion Mobile Nokia Mobile jQuery Mobile A Cloudy Day Mobile 26
- 28. USING MOBILE TOOLSTO CONFIGURE MOBILE THEME Tell when to switch theme 1 Select the mobile theme 2 Additional mobile headers 3 27
- 29. MOBILE-SPECIFIC HEADERS ADDEDBY 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 USINGJAVASCRIPT WIDGET 29
- 31. Mobile Template Set-Up Device Detection Redirection Select Layout Content Adaptation 30
- 32. DEVICE DETECTION: READUSER 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.
- 34. Mobile Template Set-Up Device Detection Redirection Select Layout Content Adaptation 33
- 35. REDIRECTION SCHEME SHOULDBE SIMPLE http://m.domain.tld or http://www.domain.com http://www.domain.mobi 34
- 36. CONFIGURE REDIRECTION q Choiceto have site on two domains or one domain Add URLs 1 Enable Redirection 2 Add Exceptions 3 35
- 37. OVERRIDE REDIRECTION ■ Giveusers 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 ■ Differentadaptations 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 USINGIMAGECACHE ImageCache presets ImageCache configuration for mobile logo 42
- 44. CONFIGURE YOUR BUILDMODE Fields Formatter 43
- 45. Mobile Template Set-Up Device Detection Redirection Select Layout Content Adaptation 44
- 46.
- 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 DEVICESUPFRONT! ■ 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 CREATINGA 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