Mobile-izing Your Organization with Drupal

  • 5,850 views
Uploaded on

Slides from the Acquia and Northpoint Solutions webinar on mobile-izing your organization with Drupal.

Slides from the Acquia and Northpoint Solutions webinar on mobile-izing your organization with Drupal.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,850
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
0
Comments
0
Likes
4

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. Webinar Audio Options
    Listen to streaming audio via your computer’s audio
    WebEx Audio Broadcast pop-up
    Unable to listen via your computer’s audio
    Request phone access
    Technical support
    US & Canada 866-229-3239
    International support 408-435-7088
    International phone access numbers:
    http://support.webex.com/support/phone-numbers.html
  • 2. Scalable Enterprise Development using Drupal and Acquia SearchPresented by Acquia and Drupal Construction
    Matt Ackley
    Acquia
    @mbackley
    Mike Taylor
    Drupal Construction
    @DrupalConstruct
  • 3. Webinar Audio Options
    Listen to streaming audio via your computer’s audio
    • WebEx Audio Broadcast pop-up
    Unable to listen via your computer’s audio
    • Request phone access
    Technical support
    • US & Canada 866-229-3239
    • 4. International support 408-435-7088
    • 5. International phone access numbers: http://support.webex.com/support/phone-numbers.html
  • Housekeeping
    Today’s webinar is being recorded. Slides and recording will be posted in next 48 hours at:
    http://acquia.com/resources/recorded_webinars
    Submit questions via Q&A Tab in WebEx, we’ll answer as many as we can
    Give it a try & tell us where you joining from today
  • 6. Upcoming Webinars
    Thursday March 31st1pm ET / 5pm UTC
    • Scalable Enterprise Development with Drupal & Acquia Search
    Register Today - http://acquia.com/webinars
  • 7. Upcoming Training Events - March & April 2011http://training.acquia.com/events
    • April 1-6, Toronto, ON
    • 8. April 4-6, Bristol, UK
    • 9. April 4-8, San Francisco CA
    • 10. April 8-13, Montreal, PQ
    • 11. April 15-20, Calgary, AB
    • 12. April 25-29th, Washington DC
    • 13. Courses include:
    Drupal in a Day
    Site Building with Drupal
    Drupal Module Development
    DrupalTheming
    The Views & CCK Modules
    The Panels Module
    Development Best Practices
    Register for Drupal Training in your area
  • 14. Do you love working with Drupal?
    If so, Acquia is hiring:
    Engineering & design
    Client advisors and consulting
    Inside sales
    Check out openings at
    http://acquia.com/careers
  • 15. Encourage You to Tweet During the Webinar
    @Acquia
    @DrupalConstruct
    #drupal
  • 16. Scalable Enterprise Development using Drupal and Acquia SearchPresented by Acquia and Drupal Construction
    Matt Ackley
    Acquia
    @mbackley
    Mike Taylor
    Drupal Construction
    @DrupalConstruct
  • 17. © 2010 Acquia, Inc. All rights reserved.
    People consume your content in many ways
  • 18. © 2010 Acquia, Inc. All rights reserved.
    Through your corporate site
    Corporate Site
  • 19. Product microsites
    Corporate Site
    ProductSites
    © 2010 Acquia, Inc. All rights reserved.
  • 20. Mobile versions of sites
    Mobile Websites
    Corporate Site
    ProductSites
    © 2010 Acquia, Inc. All rights reserved.
  • 21. Various social media channels
    Mobile Websites
    Social Media Channels
    Corporate Site
    ProductSites
    © 2010 Acquia, Inc. All rights reserved.
  • 22. iPhone and iPad applications
    IOS
    Mobile Websites
    Social Media Channels
    Corporate Site
    ProductSites
    © 2010 Acquia, Inc. All rights reserved.
  • 23. Android devices
    IOS
    Android OS
    Mobile Websites
    Social Media Channels
    Corporate Site
    Android Phones and Tablets
    ProductSites
    © 2010 Acquia, Inc. All rights reserved.
  • 24. Other mobile operating systems
    IOS
    Android OS
    Mobile Websites
    Social Media Channels
    Corporate Site
    Android Phones and Tablets
    ProductSites
    © 2010 Acquia, Inc. All rights reserved.
  • 25. Currently all of these mediums of communication haven’t been tied together
    © 2010 Acquia, Inc. All rights reserved.
  • 26. IOS
    Android OS
    Mobile Websites
    Social Media Channels
    Corporate Site
    ProductSites
    Currently most of these systems aren’t integrated
    © 2010 Acquia, Inc. All rights reserved.
  • 27. Different systems were chosen at different times for different needs
    Corporate
    Sites
    [scale]
    Product
    Sites
    “Marketing”
    Sites
    [complexity & longevity]
    © 2010 Acquia, Inc. All rights reserved.
  • 28. Drupal is known for powering content through browsers
    Corporate Site
    ProductSites
    © 2010 Acquia, Inc. All rights reserved.
  • 29. Drupal Can Power them allon a Single, Integrated Platform
    IOS
    Android OS
    Mobile Websites
    Social Media Channels
    Corporate Site
    ProductSites
    © 2010 Acquia, Inc. All rights reserved.
  • 30. IOS
    Android OS
    Blackberry
    Mobile Sites
    Today’s Conversation is How to use Drupal to Power All of Your Mobile Experiences
    © 2010 Acquia, Inc. All rights reserved.
  • 31. Mobile-izing Your Organization With Drupal
    Go Mobile or Go Home
  • 32. ABOUT NORTHPOINT
    • Founded in 2003
    • 33. Headquartered in New York with a second office in Boston
    • 34. 100 employees split between offices
    • 35. Content Solutions Focus
    • 36. Re-platforming CMSs
    • 37. Mobile Websites and Applications
    • 38. Information Architecture and Content Strategy
    • 39. Search Engine Optimization (SEO)
    • 40. Website and Microsite Development
    • 41. Community Development / User-Generated Content platforms
    • 42. Website Scalability / Performance Management
    • 43. Content Syndication and Video Serving
    • 44. Scalability
    24
  • 45. 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
    25
  • 46. ROADMAP
    • Introductions
    • 47. Mobile Penetration / Stats
    • 48. Before Development begins
    • 49. You have a Plan, now Development begins
    • 50. Unleashing the Power of Drupal
    • 51. Drupal Strategies & Architecture
    • 52. Drupal Tools & How Tos
    • 53. Mobile Testing Techniques / Tools
    • 54. Q & A
    26
  • 55. MATT DORMAN
    • NorthPoint Project Manager
    • 56. Expertise
    • 57. Mobile Applications (iOS / Android apps)
    • 58. Publishing Workflows with Drupal
    • 59. Enterprise Web Content Management Migrations
    • 60. Content / Site Architecture
  • MOBILE PENETRATION
    • Facebook: 200M mobile users, 2x more active than Desktop users
    • 61. Twitter Mobile: 50% of total active users, 40% of all tweets
    • 62. Opportunities
    • 63. Only 21% of Google’s largest advertisers have a website that is optimized for mobile
    • 64. Communicate directly with consumers
    • 65. Social Networking
    • 66. E-Commerce
    • 67. Additional Advertising Medium
    • 68. Gaming
    4
    3
    2
    Millions of Terabytes per month
    1
    0
    2014
    2013
    2012
    2011
    2014
    2009
    Mobile traffic prediction
    28
  • 69. ADOPTION WITHIN THE DRUPAL COMMUNITY
  • 70. DRUPAL AS A MULTIPLATFORM CMS
    • Drupal not only targets Desktops, but also tablets and mobile devices
    • 71. Flexible content model & templating engine allows Drupal to target multiple devices
    • 72. Advantages of using Drupal as a multiplatform CMS
    • 73. One content store for multiple platforms
    • 74. Available tools
    • 75. Mobile Tools
    • 76. WURFL
    • 77. Fusion Mobile
    • 78. Context Module
    • 79. Services
    30
  • 80. STAGES OF CREATING A MOBILE PROJECT
  • 81. Architecting your mobile Drupal site
  • 82. “APP” VS MOBILE WEBSITE
    iPhone/Android/… App
    Mobile Website
    Drupal supports bothstrategies!
  • 83. CASE STUDY: EAT THIS, NOT THAT!
    • Feed Your Apps
    • 84. Web Service Powered by Drupal
    • 85. Authentication
    • 86. Sync Content for Offline Usage
    • 87. Read and write to Drupal
    • 88. Case Study: Eat This, Not That!
    FROM A BOOK
    TO A WEBSITE
    TO A $7.99 iPHONE APP
    34
  • 89. CREATING AN APPLICATION WITH DRUPAL BACKEND
    35
  • 90. CASE STUDY: MEDIUM-SIZED NON-PROFIT
    • Give access to information to members on all devices
    • 91. Focus on availability of content
    • 92. Consistency of design across platforms is important
    • 93. No specific contextual mobile functionality
    • 94. Value device reach more than design
    Mobile specific
    Website size
  • 95. CREATING A RESPONSIVE TEMPLATE
    • Media Queries
    • 96. Fluid CSS
    • 97. Use Drupal Build Modes
    • 98. Context Module
    • 99. Easy setup
    • 100. Large reuse of existinginfrastructure
    • 101. Multi-content distribution
    • 102. No mobile first approach
    • 103. Desktop-focused default theming behavior needs many changes to fit mobile context
    • 104. Hard to create real mobile “experiences” or contextual apps
  • USE CASE: PRODUCT COMPANY
    • Focus on getting crucial information available on mobile devices
    - Product information
    - Contact details
    - Use cases
    • No specific contextual functionality
    - User tasks are similar as on desktop
    • Need for very high usability and nice design
    - Good responsive design must attract customers
    Mobile specific
    Size content store
  • 105. CREATING A MOBILE AND DESKTOP TEMPLATE
    • Create a theme specific for mobile and desktop
    • 106. Share functionality across mobile and desktop
    • 107. Easy to setup
    • 108. Large reuse of existinginfrastructure
    • 109. Multi-content distribution
    • 110. No mobile first approach
    • 111. Desktop-focused default theming behavior needsmanychanges to fit mobile context
    • 112. Hard tocreate real mobile experiences or contextualapps
  • USE CASE: BIG HOSPITAL
    • Highly-contextual mobile site
    - Navigation through campus
    - Make simple appointments through mobile
    - Shared content store
    - Strip down some desktop functionality
    • Complex Information Architecture
    • 113. Reuse of content needed
    - Doctors’ contacts
    - Divisions
    - General information
    Mobile specific
    Size content store
  • 114. MULTISITE INSTALLATION
    • Create a theme specific for mobile and desktop
    • 115. Maintain separate configurationsfor mobile and desktop
    • 116. Room to create a highly-optimized mobile experience
    • 117. Large reuse of existinginfrastructure
    • 118. Multi-content distribution
    • 119. Harder tosetup andmaintain
  • OVERVIEW ARCHITECTURE
    Separate templates & separate configuration
    App
    Responsive
    Separate templates
  • 120. Implementation: Creating the mobile siteStep-By-Step approach
  • 121. TOM DERYCKERE
  • STEP-BY-STEP: FROM DESKTOP TO MOBILE
  • 134.
  • 135. MOBILE TOOLS
    • http://drupal.org/project/mobile_tools
    • 136. Basic Functionality
    Device detection
    Device redirection
    Theme 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
  • 137.
  • 138. MOBILE TEMPLATE SET-UP
    Create your own mobile theme or start from existing contributions
    Fusion Mobile
    jQuery Mobile
    Nokia Mobile
    A Cloudy Day Mobile
  • 139. USING MOBILE TOOLS TO CONFIGURE MOBILE THEME
    Tell whento switch theme
    1
    Select the mobile theme
    2
    Additional mobile headers
    3
  • 140. MOBILE-SPECIFIC HEADERS ADDED BY MOBILE TOOLS
    <meta name = "viewport" content = "user-scalable=no, width=device-width, maximum-scale=1.0" />
    • Default iPhoneviewport is 900px
    • 141. Set viewportto device width
    • 142. Do notallowzooming
    <link rel="apple-touch-icon" href="”sites/all/themes/northpoint_mobile/webclip.png>
  • 143. HIDE SCROLLBAR USING JAVASCRIPT WIDGET
  • 144.
  • 145. DEVICE DETECTION: READ USER AGENT STRING
    • Simple detection
    • 146. Parse user agent string and search for “iPad”, “Android”, “Nokia”, “Blackberry”
    • 147. Only information about the device manufacturer
    • 148. Advanced detection
    • 149. User device library to match user agent string with
    • 150. Contains more information like Screen Size, device capabilities
    • 151. http://drupal.org/project/WURFL
  • MOBILE TOOLS CONFIGURATION
  • 152.
  • 153. REDIRECTION SCHEME SHOULD BE SIMPLE
    http://m.domain.tld or http://www.domain.mobi
    http://www.domain.com
  • 154. CONFIGURE REDIRECTION
    Choice to have site on two domains or one domain
    Add URLs
    1
    Enable Redirection
    2
    Add Exceptions
    3
  • 155. OVERRIDE REDIRECTION
    • Give users control
    • 156. Add override arguments to your URL
    ?device=desktop
    ?device=mobile
    ?device=auto
    ?device=<device-group>
    http://mobile_tools.local?device=desktop
  • 157.
  • 158. CONFIGURE MOBILE LAYOUTS: BLOCKS
    • Using Blocks configuration page
    • 159. Configure blocks appearing in your Desktop regions
    • 160. Configure blocks appearing in your Mobile regions
    Desktop
    Mobile
  • 161. CONFIGURE MOBILE LAYOUTS: CONTEXT MODULE
  • 162.
  • 163. CONTENT ADAPTATION
    • Different adaptations are possible for mobile devices
    • 164. Video adaptation
    • 165. Image resizing
    • 166. Text summarization (e.g.: provide shorter versions)
    • 167. Functional adaptation (e.g. reducing number of form fields)
  • IMAGE RESIZING USING IMAGECACHE
    ImageCache presets
    ImageCache configuration for mobile logo
  • 168. CONFIGURE YOUR BUILD MODE
    Fields
    Formatter
  • 169.
  • 170. Q&A and testing
  • 171. TESTING
    Test all your targeted devices
    Simulators
    • iPhone simulator /Android Simulator
    • 172. Blackberry Simulators
    • 173. Opera Mini Simulator
    Device banks
    • Nokia Remote Access
    • 174. Commercial solutions available
    Performance Testing
    Speeds can vary from 70-135 Kbits/s while new 4G standards will allow for peak values up to 100 Mbit/s
    Usability Testing
    • Evaluate your designs and improve
    • 175. Test on task completion
    • 176. Evaluate usage
  • KNOW YOUR DEVICES UPFRONT!
    • Enables good client communication. No surprises at the end
    • 177. Know what to develop for
    • 178. Know what to test
    • 179. Different projects will have different lists
  • STAGES OF CREATING A MOBILE PROJECT
  • 180. DRUPAL POWERS MOBILE.NORTHPOINT® ENABLES IT.
    MobileBlogs
    Mobile products
    Mobile Enterprise
    Mobile Apps
    Mobile MediaDistribution
    MobileEducation
    MobileMicrosites
  • 181. TALK TO US. CHALLENGE US.
    CALL US at 212.819.1700
    VISIT US at www.northps.com
    FOLLOW US @northps
  • 182. and the Acquia Network
    Full mobile content strategy, you want to talk to NorthPoint
    Looking to get started quick and make a mobile version of your website?
    Through an Acquia Network subscription you get access to Mobify
    Mobify provides developers with tools to easily make mobile versions of their website
    Basic subscriptions start at $349/year, learn more at:
    http://network.acquia.com
    © 2010 Acquia, Inc. All rights reserved.
  • 183. Acquia Makes Drupal Deployment Simple
    Plus,expert guidance
    Drupal training
    Architectural, operational best practices
    Implementation & professional services
    A total platform as a serviceOr, get individual elements
    High-performance cloud
    Enterprise-class SLAs
    Acquia Cloud Services
    24x7
    support
    Remote
    administration
    Complete system care
    © Acquia, Inc. All Rights Reserved.
  • 184. Questions
    For more information, visit:
    http://acquia.com
    http://www.northps.com/
    http://twitter.com/acquia
    http://acquia.com/facebook
    Contactus:
    sales@acquia.com
    jpenner@northps.com
    888.9.ACQUIA
    Try Drupal 7 today, for free
    Sign up at http://drupalgardens.com
    Sign up for a free 30-day Acquia Network Trial
    http://acquia.com/trial
    Recording of today’s event and slides
    will be posted at:
    http://acquia.com/resources/recorded_webinars