Briding the Gap between Desktop and Mobile publishing
Upcoming SlideShare
Loading in...5
×
 

Briding the Gap between Desktop and Mobile publishing

on

  • 33,142 views

Presentation given during Drupalcon London 2011 on creating mobile websites with Drupal.

Presentation given during Drupalcon London 2011 on creating mobile websites with Drupal.

Statistics

Views

Total Views
33,142
Views on SlideShare
4,444
Embed Views
28,698

Actions

Likes
9
Downloads
97
Comments
0

30 Embeds 28,698

http://www.mobiledrupal.com 9605
http://www.eldeto.com 9137
http://mobiledrupal.com 8718
http://iui.mobiledrupal.com 688
http://mobile.mobiledrupal.com 205
http://www.secretmanage.com 77
http://feeds2.feedburner.com 73
http://translate.googleusercontent.com 63
http://translate.googleusercontent.com 63
http://prlog.ru 18
http://webcache.googleusercontent.com 8
http://drupal.org 7
http://feeds.feedburner.com 7
http://do.leapfrog.cl 5
http://feedly.com 4
http://www.sitespoweredbydrupal.com 3
http://deryckere8.rssing.com 2
http://www.drupalons.fr 2
http://www.mobilephoneemulator.com 2
http://reader.aol.com 1
https://www.google.be 1
http://www.google.com 1
http://emulateurmobile.com 1
http://10.237.125.73 1
http://translate.google.com 1
http://10.10.206.47:82 1
http://10.10.206.43:82 1
http://127.0.0.1:8795 1
http://10.10.206.50:82 1
http://10.70.168.173 1
More...

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
  • Hi all,Thank you for attending this session on mobile Drupal. I have been talking about Mobile Drupal since beginning 2010 and must say that the mobile landscape has changed a lot.I hope you will enjoy this session and the other sessions that are being presented here at Drupalcon
  • The transistion has been in many areas and the industry has changed… So many of the things I told in the past
  • So before we really delf into
  • Mobile Development has many faces and covers many aspects of web and software development. Each topic has it’s own specific knowledge base and good knowledge of these topics is important to get the big picture and make the right deicsiions
  • I would like to give more context before delving into technology.In my eyes, one of the biggest mistakes is to focus on technology to soon in the project. This keeps the focus away on the real problem….Also the things I am going to talk about here can not be the ideal solutio for your problem
  • After having

Briding the Gap between Desktop and Mobile publishing Briding the Gap between Desktop and Mobile publishing Presentation Transcript

  • Bridging the Gap Between Desktop and Mobile Publishing with Drupal
    Drupalcon London 2011Tom Deryckere
    twom
  • Selling Mobile
    Support for low end devices
    Transcoding desktop sites
    HTML5/CSS3
    Closed Solutions
    Open Standards
    Highly Customized apps or websites
    Android
    People recall WML
    2 years
    iPhone Browser
    Focus on High End
    OperaMini
    Audience already solved
    Nokia/symbian
    Android
    Audience easily impressed
    Small room
    WML WTF?
    Tables
    Only Speaker
    Many high end devices
    Many specialists
    Big room
  • About Me
    Started developing Drupal sites to share Sheet Music:
    • www.guitarfiles.be (D5)
    • www.wikifonia.org (D6)
    Moved to New York in 2009 and worked for Belgium mobile startup
    • OSMOBI provided mobile websites for > 1000 Drupal sites
    • High adoption / Low revenue
    In 2010 full time Drupal consultant for Northpoint Solutions (New York)
    • We pioneered several mobile sites and mobile apps for the pharmaceutical industry, hospitals, media industry and mayor mobile carriers
    In 2011 (now) Director of Technology at ConsumerSearch
    • Part of About.com, a business unit of the New York Times
    • Complete site available mobile (high end devices)
  • Modules maintained
    Mobile
    • Mobile Tools
    • Wurfl
    • Bango Metrics
    Other
    • Foursquare Connect
    • Soundcloud Connect
    Abandoned
    • Osmobi
    • Osmobil Mobile Theme
  • ConsumerSearch.com
    Part of About.com and The New York Times
    Find information about consumer products
    High quality content driven by dedicated editorial team
    First D5 now D6
    Great Drupal team!
    Mobile website in 2011
    “People search for information everywhere”
  • ConsumerSearch Mobile Traffic
    Desktop
    Mobile
    • 5% mobile traffic in 2010
    • Today 10.49% mobile traffic
    • Slow but steady increase in mobile traffic
    • CPC is higher for mobile
    • CTR is typically lower
  • Specifics of the mobile site
    • 1 url for mobile and desktop
    • We deliver the same content for mobile and desktop
    • Seamless experience
    • Custom Akamai (caching) configfile
    • Device detection using user agent string matching
    • Mobile Theme
    • Template overwrites
    • Targetting high end devices
    • Get rid of default js and css
    • Some pages still go to desktop site (gradually add mobile pages)
  • Mobile App?
    Native
    Arriving soon
    Focus on very specific tasks and interactions
    iPhone first, Android later
    Complementary to mobile website!
  • The many faces of mobile
    Mobile Testing
    NativeApps
    vs
    (responsive) Design
    Web Apps
    and
    Online / Offline
    Media Queries
    Usability
    & Navigation
    Javascript Frameworks
    jQuerySencha Touch
    Sproutcore
    Web Standards
    HTML5 & CSS3
    Location Based Apps
    Product Development
    Cross-Platform development
    Multi-platform distribution
    Mobile SEO
  • …get a strategy
    Before thinking technology …
  • Support for which devices?
    Cross platform?
    Free service?
    App store revenues?
    Content repurposing?
    Graphics intensive?
    Content Driven?
    Existing knowledge?
    Current technology?
    Budget?
    Linkable?
    Which functionality
    Strategy
    Technology
  • Strategy
    Technologies
    Dedicated iPhone App for sale in the App Store
    iOS / Services
    Optimize reach by cross Platform Native App
    Appcellerator/PhoneGap / Services
    Browser based webapp for high end devices
    HTML5/CSS3/Drupal
    Browser based webapp all devices
    XHTML/Drupal
    Multi-platform website
    Responsive/Adaptive design
  • STAGES OF CREATING A MOBILE PROJECT
  • This Session: Drupal as a mobile CMS
    Theming Layer
    Services
    Panels
    Look at Drupal Core components
    Views
    Multi-Sites
    Caching
    Context
  • Adoption within the Drupal Community
  • Main functionality provided by Drupal modules
    • Device Detection
    • Theme switching
    • Redirecting (+cookies)
    • Mobile Themes
    • Integration with other modules
    • Context
    • Panels
    • Views
    • Build modes
  • Panels…
    Highly customized….
    CCK
    Make a mobile version of your Desktop site
    Views

    Making a mobile only website
    “Just” build a site.
  • Architecting for mobile
  • CREATING AN APPLICATION WITH DRUPAL BACKEND
  • 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
    • Context Module
    Easy setup
    Large reuse of existing infrastructure
    Multi-content distribution
    No mobile first approach
    Desktop-focused default themingbehaviorneedsmany changes to fit mobile context
    Hard tocreate real mobile “experiences” or contextualapps
  • 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
    Website size
  • 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 existing infrastructure
    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: 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
    Website size
  • Multisite installation
    Create a theme specific for mobile and desktop
    Maintain separate configurations for mobile and desktop
    Room to create a highly-optimized mobile experience
    Large reuse of existing infrastructure
    Multi-content distribution
    Harder to setup and maintain
  • OVERVIEW ARCHITECTURE
    App
    Responsive
    Separate templates
  • Your Drupal friends (and enemies)
    Context
    Panels
    Theming layer
    Views
    MobileTools
  • Context Module
  • Context
    http://drupal.org/project/context
    Provide a way to configure parts of your site based on certain parameters.
    Flexible way to configure blocks on your website
    E.g.: Configure blocks in your regions based on URL
  • Context: Mobile Context
    Provided by Mobile Tools
  • Naming conventions
    Use naming conventions (mobile_<name_desktop_context>)
    Disable non mobile contexts using
    ~mobile_*
    Or
    Mobile context rule
  • Desktop context
  • Caveat
    What if the region names are not corresponding?
    => Small plugin that loads the regions of the mobile theme when the context starts with “mobile”
  • Views
  • Views
    Often very heavy on the “tables”
    Requirement to provide a mobile view on the same path as the desktop view
    e.g. /overview
  • Use multiple displays with same path
    Configure access restrictions
  • Panels
  • Panels
    http://drupal.org/project/panels
    Multipurpose tools to create flexible layouts
    Possibility to overwrite pages such as nodes
    Concept of variations:
    • Different panel configurations depending on the context
  • Panels configuration
    Create a panel for all these pages
  • Create variant
  • Mobile selection rule
  • Save panel
  • Create your mobile panel (as usual)
  • Theming
    override
    Cleanup CSS / JS
    Offen struggle with contrib modules
    Create separate mobile theme
  • Lot’s of things to say about this
    Responsive/adaptive design
    CSS3
    • Gradients
    • Rounded corders
    • Flexible grids
    • Media queries …
    HTML5
    • Caching
    • Local storage
    • Geo
  • Mobile Tools
  • 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
  • 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>
  • 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
  • Caching
    Device detection?
    Caching often happens outside Drupal!
  • Caching strategies
    All Drupal (with or without memcache)
    • Drupal stores pages in the page cache
    • In hook_boot() device can be detected
    • Mobile Tools has example code using page_cache_fastpath()
    Drupal + Varnish/Akamai
    • Drupal is not called for cached pages
    • Need for specific Varnish/Akamai config files
    Drupal + Boost
    • Drupal is not called for cached pages
    • Need for specific .htaccess file
  • 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
  • Questions?
  • Thank you
    tom.deryckere@gmail.com
    http://twitter.com/twom
    http://www.mobiledrupal.com
    http://london2011.drupal.org/conference/sessions/bridging-gap-between-desktop-and-mobile-publishing-drupal