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

Mobile-izing Your Organization with Drupal

on

  • 4,351 views

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.

Statistics

Views

Total Views
4,351
Views on SlideShare
4,351
Embed Views
0

Actions

Likes
4
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

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 Mobile-izing Your Organization with Drupal Presentation Transcript

    • 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
    • Scalable Enterprise Development using Drupal and Acquia SearchPresented by Acquia and Drupal Construction
      Matt Ackley
      Acquia
      @mbackley
      Mike Taylor
      Drupal Construction
      @DrupalConstruct
    • 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
    • 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
    • Upcoming Webinars
      Thursday March 31st1pm ET / 5pm UTC
      • Scalable Enterprise Development with Drupal & Acquia Search
      Register Today - http://acquia.com/webinars
    • Upcoming Training Events - March & April 2011http://training.acquia.com/events
      • April 1-6, Toronto, ON
      • April 4-6, Bristol, UK
      • April 4-8, San Francisco CA
      • April 8-13, Montreal, PQ
      • April 15-20, Calgary, AB
      • April 25-29th, Washington DC
      • 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
    • 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
    • Encourage You to Tweet During the Webinar
      @Acquia
      @DrupalConstruct
      #drupal
    • Scalable Enterprise Development using Drupal and Acquia SearchPresented by Acquia and Drupal Construction
      Matt Ackley
      Acquia
      @mbackley
      Mike Taylor
      Drupal Construction
      @DrupalConstruct
    • © 2010 Acquia, Inc. All rights reserved.
      People consume your content in many ways
    • © 2010 Acquia, Inc. All rights reserved.
      Through your corporate site
      Corporate Site
    • Product microsites
      Corporate Site
      ProductSites
      © 2010 Acquia, Inc. All rights reserved.
    • Mobile versions of sites
      Mobile Websites
      Corporate Site
      ProductSites
      © 2010 Acquia, Inc. All rights reserved.
    • Various social media channels
      Mobile Websites
      Social Media Channels
      Corporate Site
      ProductSites
      © 2010 Acquia, Inc. All rights reserved.
    • iPhone and iPad applications
      IOS
      Mobile Websites
      Social Media Channels
      Corporate Site
      ProductSites
      © 2010 Acquia, Inc. All rights reserved.
    • Android devices
      IOS
      Android OS
      Mobile Websites
      Social Media Channels
      Corporate Site
      Android Phones and Tablets
      ProductSites
      © 2010 Acquia, Inc. All rights reserved.
    • 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.
    • Currently all of these mediums of communication haven’t been tied together
      © 2010 Acquia, Inc. All rights reserved.
    • 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.
    • 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.
    • Drupal is known for powering content through browsers
      Corporate Site
      ProductSites
      © 2010 Acquia, Inc. All rights reserved.
    • 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.
    • 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.
    • Mobile-izing Your Organization With Drupal
      Go Mobile or Go Home
    • 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
      24
    • 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
    • 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
      26
    • MATT DORMAN
      • NorthPoint Project Manager
      • Expertise
      • Mobile Applications (iOS / Android apps)
      • Publishing Workflows with Drupal
      • Enterprise Web Content Management Migrations
      • Content / Site Architecture
    • MOBILE PENETRATION
      • Facebook: 200M mobile users, 2x more active than Desktop users
      • Twitter Mobile: 50% of total active users, 40% of all tweets
      • Opportunities
      • Only 21% of Google’s largest advertisers have a website that is optimized for mobile
      • Communicate directly with consumers
      • Social Networking
      • E-Commerce
      • Additional Advertising Medium
      • Gaming
      4
      3
      2
      Millions of Terabytes per month
      1
      0
      2014
      2013
      2012
      2011
      2014
      2009
      Mobile traffic prediction
      28
    • ADOPTION WITHIN THE DRUPAL COMMUNITY
    • 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
      30
    • STAGES OF CREATING A MOBILE PROJECT
    • Architecting your mobile Drupal site
    • “APP” VS MOBILE WEBSITE
      iPhone/Android/… App
      Mobile Website
      Drupal supports bothstrategies!
    • 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 This, Not That!
      FROM A BOOK
      TO A WEBSITE
      TO A $7.99 iPHONE APP
      34
    • CREATING AN APPLICATION WITH DRUPAL BACKEND
      35
    • 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
    • CREATING A RESPONSIVE TEMPLATE
      • Media Queries
      • Fluid CSS
      • Use Drupal Build Modes
      • Context Module
      • Easy setup
      • Large reuse of existinginfrastructure
      • 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
    • 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
    • CREATING A MOBILE AND DESKTOP TEMPLATE
      • Create a theme specific for mobile and desktop
      • Share functionality across mobile and desktop
      • Easy to setup
      • Large reuse of existinginfrastructure
      • Multi-content distribution
      • No mobile first approach
      • Desktop-focused default theming behavior needsmanychanges to fit mobile context
      • 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
      • Reuse of content needed
      - Doctors’ contacts
      - Divisions
      - General information
      Mobile specific
      Size content store
    • MULTISITE INSTALLATION
      • Create a theme specific for mobile and desktop
      • Maintain separate configurationsfor mobile and desktop
      • Room to create a highly-optimized mobile experience
      • Large reuse of existinginfrastructure
      • Multi-content distribution
      • Harder tosetup andmaintain
    • OVERVIEW ARCHITECTURE
      Separate templates & separate configuration
      App
      Responsive
      Separate templates
    • Implementation: Creating the mobile siteStep-By-Step approach
    • TOM DERYCKERE
      • Senior Drupal Consultant
      • Expertise
      • Solr Search
      • Site Migrations
      • Mobile Development
      • Third-party integration
      • Belgian cuisine
      • Module Maintainer
      • Mobile Tools
      • WURFL
      • Bango Analytics
      • Zendesk
      • Blog: http://www.mobiledrupal.com
    • STEP-BY-STEP: FROM DESKTOP TO MOBILE
    • MOBILE TOOLS
      • http://drupal.org/project/mobile_tools
      • 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
    • MOBILE TEMPLATE SET-UP
      Create your own mobile theme or start from existing contributions
      Fusion Mobile
      jQuery Mobile
      Nokia Mobile
      A Cloudy Day Mobile
    • USING MOBILE TOOLS TO CONFIGURE MOBILE THEME
      Tell whento switch theme
      1
      Select the mobile theme
      2
      Additional mobile headers
      3
    • 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
      • Set viewportto device width
      • Do notallowzooming
      <link rel="apple-touch-icon" href="”sites/all/themes/northpoint_mobile/webclip.png>
    • HIDE SCROLLBAR USING JAVASCRIPT WIDGET
    • 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
    • MOBILE TOOLS CONFIGURATION
    • REDIRECTION SCHEME SHOULD BE SIMPLE
      http://m.domain.tld or http://www.domain.mobi
      http://www.domain.com
    • CONFIGURE REDIRECTION
      Choice to have site on two domains or one domain
      Add URLs
      1
      Enable Redirection
      2
      Add Exceptions
      3
    • 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
    • CONFIGURE MOBILE LAYOUTS: BLOCKS
      • Using Blocks configuration page
      • Configure blocks appearing in your Desktop regions
      • Configure blocks appearing in your Mobile regions
      Desktop
      Mobile
    • CONFIGURE MOBILE LAYOUTS: CONTEXT MODULE
    • 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)
    • IMAGE RESIZING USING IMAGECACHE
      ImageCache presets
      ImageCache configuration for mobile logo
    • CONFIGURE YOUR BUILD MODE
      Fields
      Formatter
    • Q&A and testing
    • TESTING
      Test all your targeted devices
      Simulators
      • iPhone simulator /Android Simulator
      • Blackberry Simulators
      • Opera Mini Simulator
      Device banks
      • Nokia Remote Access
      • 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
      • Test on task completion
      • Evaluate usage
    • 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 lists
    • STAGES OF CREATING A MOBILE PROJECT
    • DRUPAL POWERS MOBILE.NORTHPOINT® ENABLES IT.
      MobileBlogs
      Mobile products
      Mobile Enterprise
      Mobile Apps
      Mobile MediaDistribution
      MobileEducation
      MobileMicrosites
    • TALK TO US. CHALLENGE US.
      CALL US at 212.819.1700
      VISIT US at www.northps.com
      FOLLOW US @northps
    • 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.
    • 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.
    • 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