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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Mobile-izing Your Organization with Drupal

6,037

Published 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.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,037
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
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<br />Listen to streaming audio via your computer’s audio<br />WebEx Audio Broadcast pop-up<br />Unable to listen via your computer’s audio<br />Request phone access<br />Technical support<br />US & Canada 866-229-3239<br />International support 408-435-7088<br />International phone access numbers: <br />http://support.webex.com/support/phone-numbers.html<br />
  • 2. Scalable Enterprise Development using Drupal and Acquia SearchPresented by Acquia and Drupal Construction<br />Matt Ackley<br />Acquia<br />@mbackley<br />Mike Taylor<br />Drupal Construction<br />@DrupalConstruct<br />
  • 3. Webinar Audio Options<br />Listen to streaming audio via your computer’s audio<br /><ul><li>WebEx Audio Broadcast pop-up</li></ul>Unable to listen via your computer’s audio<br /><ul><li>Request phone access</li></ul>Technical support<br /><ul><li>US & Canada 866-229-3239
  • 4. International support 408-435-7088
  • 5. International phone access numbers: http://support.webex.com/support/phone-numbers.html</li></li></ul><li>Housekeeping<br />Today’s webinar is being recorded. Slides and recording will be posted in next 48 hours at:<br />http://acquia.com/resources/recorded_webinars<br />Submit questions via Q&A Tab in WebEx, we’ll answer as many as we can<br />Give it a try & tell us where you joining from today<br />
  • 6. Upcoming Webinars<br />Thursday March 31st1pm ET / 5pm UTC<br /><ul><li>Scalable Enterprise Development with Drupal & Acquia Search</li></ul>Register Today - http://acquia.com/webinars<br />
  • 7. Upcoming Training Events - March & April 2011http://training.acquia.com/events<br /><ul><li>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:</li></ul>Drupal in a Day<br />Site Building with Drupal<br />Drupal Module Development<br />DrupalTheming<br />The Views & CCK Modules<br />The Panels Module<br />Development Best Practices<br />Register for Drupal Training in your area<br />
  • 14. Do you love working with Drupal?<br />If so, Acquia is hiring:<br />Engineering & design<br />Client advisors and consulting<br />Inside sales<br />Check out openings at<br />http://acquia.com/careers<br />
  • 15. Encourage You to Tweet During the Webinar<br />@Acquia<br />@DrupalConstruct<br />#drupal<br />
  • 16. Scalable Enterprise Development using Drupal and Acquia SearchPresented by Acquia and Drupal Construction<br />Matt Ackley<br />Acquia<br />@mbackley<br />Mike Taylor<br />Drupal Construction<br />@DrupalConstruct<br />
  • 17. © 2010 Acquia, Inc. All rights reserved.<br />People consume your content in many ways<br />
  • 18. © 2010 Acquia, Inc. All rights reserved.<br />Through your corporate site<br />Corporate Site<br />
  • 19. Product microsites<br />Corporate Site<br />ProductSites<br />© 2010 Acquia, Inc. All rights reserved.<br />
  • 20. Mobile versions of sites<br />Mobile Websites<br />Corporate Site<br />ProductSites<br />© 2010 Acquia, Inc. All rights reserved.<br />
  • 21. Various social media channels<br />Mobile Websites<br />Social Media Channels<br />Corporate Site<br />ProductSites<br />© 2010 Acquia, Inc. All rights reserved.<br />
  • 22. iPhone and iPad applications<br />IOS<br />Mobile Websites<br />Social Media Channels<br />Corporate Site<br />ProductSites<br />© 2010 Acquia, Inc. All rights reserved.<br />
  • 23. Android devices<br />IOS<br />Android OS<br />Mobile Websites<br />Social Media Channels<br />Corporate Site<br />Android Phones and Tablets<br />ProductSites<br />© 2010 Acquia, Inc. All rights reserved.<br />
  • 24. Other mobile operating systems<br />IOS<br />Android OS<br />Mobile Websites<br />Social Media Channels<br />Corporate Site<br />Android Phones and Tablets<br />ProductSites<br />© 2010 Acquia, Inc. All rights reserved.<br />
  • 25. Currently all of these mediums of communication haven’t been tied together<br />© 2010 Acquia, Inc. All rights reserved.<br />
  • 26. IOS<br />Android OS<br />Mobile Websites<br />Social Media Channels<br />Corporate Site<br />ProductSites<br />Currently most of these systems aren’t integrated<br />© 2010 Acquia, Inc. All rights reserved.<br />
  • 27. Different systems were chosen at different times for different needs<br />Corporate<br />Sites<br />[scale]<br />Product<br />Sites<br />“Marketing”<br />Sites<br />[complexity & longevity]<br />© 2010 Acquia, Inc. All rights reserved.<br />
  • 28. Drupal is known for powering content through browsers<br />Corporate Site<br />ProductSites<br />© 2010 Acquia, Inc. All rights reserved.<br />
  • 29. Drupal Can Power them allon a Single, Integrated Platform<br />IOS<br />Android OS<br />Mobile Websites<br />Social Media Channels<br />Corporate Site<br />ProductSites<br />© 2010 Acquia, Inc. All rights reserved.<br />
  • 30. IOS<br />Android OS<br />Blackberry<br />Mobile Sites<br />Today’s Conversation is How to use Drupal to Power All of Your Mobile Experiences<br />© 2010 Acquia, Inc. All rights reserved.<br />
  • 31. Mobile-izing Your Organization With Drupal<br />Go Mobile or Go Home<br />
  • 32. ABOUT NORTHPOINT<br /><ul><li> 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</li></ul>24<br />
  • 45. SOME OF OUR TOP MOBILE SITES INCLUDE<br /><ul><li> Media/Publishing</li></ul>We developed one of the top 10 food applications on the iPhone store<br /><ul><li> Pharmaceutical</li></ul>We created the mobile application for the #1 headache/pain reliever medicine <br /><ul><li> Not-for-Profit</li></ul>We developed the mobile strategy for the number one children’s hospital in the U.S.<br /><ul><li> Telecommunications</li></ul>We provided the 3G mobile launch site for one of the top wireless carriers<br />25<br />
  • 46. ROADMAP<br /><ul><li> 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</li></ul>26<br />
  • 55. MATT DORMAN<br /><ul><li>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</li></li></ul><li>MOBILE PENETRATION<br /><ul><li>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</li></ul>4<br />3<br />2<br />Millions of Terabytes per month<br />1<br />0<br />2014<br />2013<br />2012<br />2011<br />2014<br />2009<br />Mobile traffic prediction<br />28<br />
  • 69. ADOPTION WITHIN THE DRUPAL COMMUNITY<br />
  • 70. DRUPAL AS A MULTIPLATFORM CMS<br /><ul><li> 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</li></ul>30<br />
  • 80. STAGES OF CREATING A MOBILE PROJECT<br />
  • 81. Architecting your mobile Drupal site<br />
  • 82. “APP” VS MOBILE WEBSITE<br />iPhone/Android/… App<br />Mobile Website<br />Drupal supports bothstrategies!<br />
  • 83. CASE STUDY: EAT THIS, NOT THAT!<br /><ul><li> 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!</li></ul>FROM A BOOK<br />TO A WEBSITE<br />TO A $7.99 iPHONE APP<br />34<br />
  • 89. CREATING AN APPLICATION WITH DRUPAL BACKEND<br />35<br />
  • 90. CASE STUDY: MEDIUM-SIZED NON-PROFIT <br /><ul><li>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</li></ul>Mobile specific<br />Website size<br />
  • 95. CREATING A RESPONSIVE TEMPLATE<br /><ul><li> 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</li></li></ul><li>USE CASE: PRODUCT COMPANY<br /><ul><li>Focus on getting crucial information available on mobile devices</li></ul>- Product information<br />- Contact details<br />- Use cases<br /><ul><li> No specific contextual functionality</li></ul>- User tasks are similar as on desktop<br /><ul><li>Need for very high usability and nice design</li></ul>- Good responsive design must attract customers<br />Mobile specific<br />Size content store<br />
  • 105. CREATING A MOBILE AND DESKTOP TEMPLATE<br /><ul><li> 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</li></li></ul><li>USE CASE: BIG HOSPITAL<br /><ul><li>Highly-contextual mobile site</li></ul>- Navigation through campus<br />- Make simple appointments through mobile<br />- Shared content store<br />- Strip down some desktop functionality<br /><ul><li>Complex Information Architecture
  • 113. Reuse of content needed</li></ul>- Doctors’ contacts<br />- Divisions<br />- General information<br />Mobile specific<br />Size content store<br />
  • 114. MULTISITE INSTALLATION<br /><ul><li> 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</li></li></ul><li>OVERVIEW ARCHITECTURE<br />Separate templates & separate configuration<br />App<br />Responsive<br />Separate templates<br />
  • 120. Implementation: Creating the mobile siteStep-By-Step approach<br />
  • 121. TOM DERYCKERE<br /><ul><li> Senior Drupal Consultant
  • 122. Expertise
  • 123. Solr Search
  • 124. Site Migrations
  • 125. Mobile Development
  • 126. Third-party integration
  • 127. Belgian cuisine
  • 128. Module Maintainer
  • 129. Mobile Tools
  • 130. WURFL
  • 131. Bango Analytics
  • 132. Zendesk
  • 133. Blog: http://www.mobiledrupal.com</li></li></ul><li>STEP-BY-STEP: FROM DESKTOP TO MOBILE<br />
  • 134.
  • 135. MOBILE TOOLS<br /><ul><li>http://drupal.org/project/mobile_tools
  • 136. Basic Functionality</li></ul>Device detection<br />Device redirection<br />Theme switching <br />Detection of device groups<br />Mobile user roles<br />Force full view | mobile <br />Set custom homepage<br />Custom number of FrontPage nodes<br />Hide mobile browser scrollbar<br />Viewport header<br />Provide mobile build modes<br />Provide mobile contexts<br />Provide panel context<br />
  • 137.
  • 138. MOBILE TEMPLATE SET-UP<br />Create your own mobile theme or start from existing contributions<br />Fusion Mobile<br />jQuery Mobile<br />Nokia Mobile<br />A Cloudy Day Mobile<br />
  • 139. USING MOBILE TOOLS TO CONFIGURE MOBILE THEME<br />Tell whento switch theme<br />1<br />Select the mobile theme<br />2<br />Additional mobile headers<br />3<br />
  • 140. MOBILE-SPECIFIC HEADERS ADDED BY MOBILE TOOLS<br /><meta name = "viewport" content = "user-scalable=no, width=device-width, maximum-scale=1.0" /><br /><ul><li>Default iPhoneviewport is 900px
  • 141. Set viewportto device width
  • 142. Do notallowzooming</li></ul><link rel="apple-touch-icon" href="”sites/all/themes/northpoint_mobile/webclip.png><br />
  • 143. HIDE SCROLLBAR USING JAVASCRIPT WIDGET<br />
  • 144.
  • 145. DEVICE DETECTION: READ USER AGENT STRING<br /><ul><li>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</li></li></ul><li>MOBILE TOOLS CONFIGURATION<br />
  • 152.
  • 153. REDIRECTION SCHEME SHOULD BE SIMPLE<br />http://m.domain.tld or http://www.domain.mobi<br />http://www.domain.com<br />
  • 154. CONFIGURE REDIRECTION<br />Choice to have site on two domains or one domain<br />Add URLs <br />1<br />Enable Redirection<br />2<br />Add Exceptions<br />3<br />
  • 155. OVERRIDE REDIRECTION<br /><ul><li>Give users control
  • 156. Add override arguments to your URL</li></ul>?device=desktop<br />?device=mobile<br />?device=auto<br />?device=<device-group><br />http://mobile_tools.local?device=desktop<br />
  • 157.
  • 158. CONFIGURE MOBILE LAYOUTS: BLOCKS<br /><ul><li>Using Blocks configuration page
  • 159. Configure blocks appearing in your Desktop regions
  • 160. Configure blocks appearing in your Mobile regions</li></ul>Desktop<br />Mobile<br />
  • 161. CONFIGURE MOBILE LAYOUTS: CONTEXT MODULE<br />
  • 162.
  • 163. CONTENT ADAPTATION<br /><ul><li>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)</li></li></ul><li>IMAGE RESIZING USING IMAGECACHE<br />ImageCache presets<br />ImageCache configuration for mobile logo<br />
  • 168. CONFIGURE YOUR BUILD MODE<br />Fields<br />Formatter<br />
  • 169.
  • 170. Q&A and testing<br />
  • 171. TESTING<br />Test all your targeted devices<br />Simulators<br /><ul><li>iPhone simulator /Android Simulator
  • 172. Blackberry Simulators
  • 173. Opera Mini Simulator</li></ul>Device banks<br /><ul><li>Nokia Remote Access
  • 174. Commercial solutions available</li></ul>Performance Testing<br />Speeds can vary from 70-135 Kbits/s while new 4G standards will allow for peak values up to 100 Mbit/s<br />Usability Testing<br /><ul><li>Evaluate your designs and improve
  • 175. Test on task completion
  • 176. Evaluate usage</li></li></ul><li>KNOW YOUR DEVICES UPFRONT!<br /><ul><li>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</li></li></ul><li>STAGES OF CREATING A MOBILE PROJECT<br />
  • 180. DRUPAL POWERS MOBILE.NORTHPOINT® ENABLES IT.<br />MobileBlogs<br />Mobile products<br />Mobile Enterprise<br />Mobile Apps<br />Mobile MediaDistribution<br />MobileEducation<br />MobileMicrosites<br />
  • 181. TALK TO US. CHALLENGE US.<br />CALL US at 212.819.1700<br />VISIT US at www.northps.com<br />FOLLOW US @northps<br />
  • 182. and the Acquia Network<br />Full mobile content strategy, you want to talk to NorthPoint<br />Looking to get started quick and make a mobile version of your website?<br />Through an Acquia Network subscription you get access to Mobify<br />Mobify provides developers with tools to easily make mobile versions of their website<br />Basic subscriptions start at $349/year, learn more at: <br />http://network.acquia.com<br />© 2010 Acquia, Inc. All rights reserved.<br />
  • 183. Acquia Makes Drupal Deployment Simple<br />Plus,expert guidance<br />Drupal training<br />Architectural, operational best practices<br />Implementation & professional services<br />A total platform as a serviceOr, get individual elements<br />High-performance cloud<br />Enterprise-class SLAs<br />Acquia Cloud Services<br />24x7<br />support<br />Remote<br />administration<br />Complete system care<br />© Acquia, Inc. All Rights Reserved.<br />
  • 184. Questions<br />For more information, visit:<br />http://acquia.com<br />http://www.northps.com/<br />http://twitter.com/acquia<br />http://acquia.com/facebook<br />Contactus:<br />sales@acquia.com<br />jpenner@northps.com<br /> 888.9.ACQUIA<br />Try Drupal 7 today, for free <br />Sign up at http://drupalgardens.com<br />Sign up for a free 30-day Acquia Network Trial<br />http://acquia.com/trial<br />Recording of today’s event and slides<br />will be posted at:<br />http://acquia.com/resources/recorded_webinars<br />

×