• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Mobile-izing Your Organization with Drupal: Acquia webinar
 

Mobile-izing Your Organization with Drupal: Acquia webinar

on

  • 41,428 views

Acquia Webinar presentation about creating mobile websites with Drupal

Acquia Webinar presentation about creating mobile websites with Drupal

Statistics

Views

Total Views
41,428
Views on SlideShare
11,321
Embed Views
30,107

Actions

Likes
29
Downloads
308
Comments
0

34 Embeds 30,107

http://www.mobiledrupal.com 13340
http://mobiledrupal.com 9785
http://www.eldeto.com 6261
http://mobile.mobiledrupal.com 206
http://iui.mobiledrupal.com 188
http://feeds2.feedburner.com 78
http://translate.googleusercontent.com 77
http://devs.dream-portal.net 45
http://www.teawik.com 35
http://blog.tech4him.com 23
http://einfachbloggen.tumblr.com 17
http://feeds.feedburner.com 7
http://static.slidesharecdn.com 6
http://www.tailleurspoursites.fr 6
http://webcache.googleusercontent.com 5
http://drupal.org 4
http://www.mobilephoneemulator.com 2
http://quirktools.com 2
http://drupalservers.net 2
http://www.google.com 2
http://drupal7.tailleurpoursite.fr 2
http://www.tumblr.com 2
http://tweets.quevin.com 1
http://www.slideshare.net 1
http://localhost 1
http://www.mediacurrent.com 1
http://www.drupalunion.com 1
http://emulateurmobile.com 1
http://mailreader.163.com 1
http://translate.yandex.net 1
http://reader.youdao.com 1
http://twitter.com 1
http://www.xuyongjun.com 1
http://10.70.168.173 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Mobile-izing Your Organization with Drupal: Acquia webinar Mobile-izing Your Organization with Drupal: Acquia webinar Presentation Transcript

    • Mobile-izing Your Organization With DrupalGo Mobile or Go Home 0
    • 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
    • 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
    • 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
    • MATT DORMAN■  NorthPoint Project Manager■  Expertise ■  Mobile Applications (iOS / Android apps) ■  Publishing Workflows with Drupal ■  Enterprise Web Content Management Migrations ■  Content / Site Architecture 4
    • 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
    • ADOPTION WITHIN THE DRUPAL COMMUNITY 6
    • 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
    • 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
    • ARCHITECTING YOUR MOBILE DRUPAL SITE 9
    • “APP” VS MOBILE WEBSITE iPhone/Android/… App Mobile Website CSS HTML JavaScript Drupal supports both strategies! 10
    • 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
    • CREATING AN APPLICATION WITH DRUPAL BACKEND DB Drupal Core Contrib Drupal Services 12 12
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • IMPLEMENTATION:CREATING THE MOBILE SITE STEP-BY-STEP APPROACH 21
    • STEP-BY-STEP: FROM DESKTOP TO MOBILE 22
    • Mobile Template Set-Up Device Detection Redirection Select Layout Content Adaptation 23
    • 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
    • Mobile Template Set-Up Device Detection Redirection Select Layout Content Adaptation 25
    • MOBILE TEMPLATE SET-UPCreate your own mobile theme or start from existing contributions Fusion Mobile Nokia Mobile jQuery Mobile A Cloudy Day Mobile 26
    • USING MOBILE TOOLS TO CONFIGURE MOBILE THEME Tell when to switch theme 1 Select the mobile theme 2 Additional mobile headers 3 27
    • 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
    • HIDE SCROLLBAR USING JAVASCRIPT WIDGET 29
    • Mobile Template Set-Up Device Detection Redirection Select Layout Content Adaptation 30
    • 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
    • MOBILE TOOLS CONFIGURATION 32
    • Mobile Template Set-Up Device Detection Redirection Select Layout Content Adaptation 33
    • REDIRECTION SCHEME SHOULD BE SIMPLE http://m.domain.tld or http://www.domain.comhttp://www.domain.mobi 34
    • CONFIGURE REDIRECTIONq  Choice to have site on two domains or one domain Add URLs 1 Enable Redirection 2 Add Exceptions 3 35
    • 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
    • Mobile Template Set-Up Device Detection Redirection Select Layout Content Adaptation 37
    • 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
    • CONFIGURE MOBILE LAYOUTS: CONTEXT MODULE 39
    • Mobile Template Set-Up Device Detection Redirection Select Layout Content Adaptation 40
    • 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
    • IMAGE RESIZING USING IMAGECACHE ImageCache presets ImageCache configuration for mobile logo 42
    • CONFIGURE YOUR BUILD MODE Fields Formatter 43
    • Mobile Template Set-Up Device Detection Redirection Select Layout Content Adaptation 44
    • Q&AAND TESTING 45
    • 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
    • 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
    • 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
    • DRUPAL POWERS MOBILE. NORTHPOINT® ENABLES IT. MobileMobile Blogs tsproduc Mobile Enterp rise Mobile Apps Mobile Media Distribution Mobile Education Mobi le Micro sites 49
    • TALK TO US. CHALLENGE US. CALL US at 212.819.1700 VISIT US at www.northps.com FOLLOW US @northps 50