• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Mobilizing your Drupal Site - Vancouver League of Drupallers
 

Mobilizing your Drupal Site - Vancouver League of Drupallers

on

  • 3,484 views

Presentation I gave on Thursday 27th May 2010 demonstrating the mobile_tools module and Mobile theme as a way to create a 'mobile verion' of a drupal website.

Presentation I gave on Thursday 27th May 2010 demonstrating the mobile_tools module and Mobile theme as a way to create a 'mobile verion' of a drupal website.

Statistics

Views

Total Views
3,484
Views on SlideShare
3,277
Embed Views
207

Actions

Likes
10
Downloads
0
Comments
0

4 Embeds 207

http://www.ventureweb.net 98
http://www.linkedin.com 75
http://www.slideshare.net 33
http://translate.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

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

    Mobilizing your Drupal Site - Vancouver League of Drupallers Mobilizing your Drupal Site - Vancouver League of Drupallers Presentation Transcript

    •  
    • Introduction
      • Who is this chap?
      • What's this going to cover?
        • 'Entry level' Drupal mobile integration – a starting point for you to explore more
          • Downloading & Installing Modules
          • Themeing
          • Module Stuff
        • Experts – don't leave.
          • Your input is much appreciated
          • What am I doing wrong?
    • Why Mobile?
      • Mobile browsing is big & getting bigger
        • Surpassing or surpassed 'desktop' access to the web
      • Clients are asking for it
        • Noticeable increase in mobile interest
    • Do you need a mobile site?
      • Does your site have data that people need to access 'on the go'
          • Looking for answers, facts, details
      • Not Screen Size but Context
      • Examples:
        • Tourism Sites
          • Listings, Upcoming Events, Nearest Information Kiosks
        • Brochure Sites
          • Contact Details / Location Information
          • Key Information
    • Mobile Site Recipes
      • Lots of alternatives
        • 3 rd party vs D.I.Y.
      • Ingredients I used:
        • Drupal 6
        • Theme: Mobile
        • Modules:
          • Mobile Tools
          • Device Detection:
            • Browscap
            • Wurfl
    • 2 recipes; same ingredients
      • Really Simple
        • Keep the same URL, but switch theme for a mobile device
        • Issues with Performance?
      • Simple
        • Switch theme and URL for a mobile device
        • Slightly more complicated but not really
        • Buggy in parts
    • In my presentation I went to a browser where I had Drupal 6 installed. I went through the process of enabling the Mobile Tools and Browscap modules, and the Mobile theme. I then demo'd the 'really simple' and 'simple' recipes from the previous slides. If you want to try it, download the modules and give it a go – it's really quite straightforward and self explanatory.
    • Information Architecture
      • Mobile visitors:
        • Who are they, and what do they want?
          • Contact Details, Directions to...
      • Special Architecture for Special people
        • Structure content differently
        • Remove fluff – get to the goods as quick as possible
      • Mobile Web Initiative – Best Practices
          • http://www.w3.org/Mobile/
          • http://www.w3.org/2005/MWI/BPWG/
    •  
    •  
    •  
    •  
    • Theming Considerations
      • User
        • Less Text, Clear Calls to Action, Simple Navigation
      • Performance
        • Less Imagery, less HTTP requests
      • Platforms
        • Sub Themes for different platforms: Blackberry vs iPhone vs ...
        • Platform specific coding (meta tags etc.)
    • Building your Mobile Site
      • These are some problems I encountered when creating a mobile site
        • Homepage
        • Primary Links
        • Views
        • Content Types
          • Field Level Considerations
            • Image Fields – different sizes
            • Google Maps – static image maps
            • Phone Numbers <a href=”tel:1.222.....
    • So in the demo, I quickly ran through how I overcame the 4 issues that I highlight in the previous slide. Homepage: Create a new homepage node, and in the settings.php file for your mobile domain, update the $conf variable $conf['site_frontpage'] = 'node/123'; Primary Links: Create a new menu specifically for your mobile website, and use the block for this menu to display only on your mobile theme Views: Create separate views for your mobile site and link to them in your mobile menus Content Types: Use node template files to control node displays in your mobile theme
    • Custom Modules?
      • Mobile tools provides global session variables you can use in your custom modules
        • e.g. To do mobile specific form_alters
      • What are the variables?
        • Look in mobile_tools.module file:
        • $_SESSION['mobile-tools-site-type']
    • So here in the demo, I just did some super basic code in a custom module: function yourTheme_init() { if($_SESSION['mobile-tools-site-type'] == 'mobile') { drupal_set_message('hello world'); } }
    • Development Tools
      • Useful blog post: http://tinyurl.com/55sk3m
      • Android/Nokia – Download SDK
        • Android: http://tinyurl.com/dhcpvy
        • Nokia: http://tinyurl.com/yd9w7en
      • Blackberry/Windows Mobile – download simulator (Windows only)
        • Microsoft: http://tinyurl.com/23lx9yc
        • Blackberry: http://tinyurl.com/5ogpad
    • Development Tools
      • iPhone
        • Safari Web Browser
        • Apple Developers SDK
        • http://www.marketcircle.com/iphoney/ - doesn't seem to resize correctly :(
      • Opera Mobile
        • http://www.opera.com/mobile/demo/
    • Development Resources
      • Mobile Internet Architecture
        • http://www.slideshare.net/xian/mobile-information-architecture
      • Safari HTML Reference – meta tags
        • http://developer.apple.com/safari/library/documentation/appleapplications/reference/safarihtmlref/articles/metatags.html
      • Drupal Mobile
        • http://mobiledrupal.com
        • http://mobiledrupal.com/content/overview-mobile-modules-drupal
          • Little bit outdated (links to some modules that aren't supported anymore) but still good & useful
    • The End
      • Thank you for your patience
      • Does anyone have any Questions?
        • Does anyone have any Answers?