Introduction <ul><li>Who is this chap?
What's this going to cover? </li><ul><li>'Entry level' Drupal mobile integration – a starting point for you to explore mor...
Themeing
Module Stuff  </li></ul><li>Experts – don't leave.  </li><ul><li>Your input is much appreciated
What am I doing wrong? </li></ul></ul></ul>
Why Mobile? <ul><li>Mobile browsing is big & getting bigger </li><ul><li>Surpassing or surpassed 'desktop' access to the w...
Do you need a mobile site? <ul><li>Does your site have data that people need to access 'on the go' </li><ul><ul><li>Lookin...
Examples: </li><ul><li>Tourism Sites </li><ul><li>Listings, Upcoming Events, Nearest Information Kiosks </li></ul><li>Broc...
Key Information </li></ul></ul></ul>
Mobile Site Recipes <ul><li>Lots of alternatives </li><ul><li>3 rd  party vs D.I.Y. </li></ul><li>Ingredients I used: </li...
Theme: Mobile
Modules:  </li><ul><li>Mobile Tools
Device Detection: </li><ul><li>Browscap
Wurfl </li></ul></ul></ul></ul>
2 recipes; same ingredients <ul><li>Really Simple </li><ul><li>Keep the same URL, but switch theme for a mobile device
Issues with Performance? </li></ul><li>Simple </li><ul><li>Switch theme and URL for a mobile device
Slightly more complicated but not really
Buggy in parts </li></ul></ul>
In my presentation I went to a browser where I had Drupal 6 installed. I went through the process of enabling the Mobile T...
Information Architecture <ul><li>Mobile visitors: </li><ul><li>Who are they, and what do they want? </li><ul><li>Contact D...
Upcoming SlideShare
Loading in...5
×

Mobilizing your Drupal Site - Vancouver League of Drupallers

4,223

Published on

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.

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

No Downloads
Views
Total Views
4,223
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

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

  1. 2. Introduction <ul><li>Who is this chap?
  2. 3. What's this going to cover? </li><ul><li>'Entry level' Drupal mobile integration – a starting point for you to explore more </li><ul><li>Downloading & Installing Modules
  3. 4. Themeing
  4. 5. Module Stuff </li></ul><li>Experts – don't leave. </li><ul><li>Your input is much appreciated
  5. 6. What am I doing wrong? </li></ul></ul></ul>
  6. 7. Why Mobile? <ul><li>Mobile browsing is big & getting bigger </li><ul><li>Surpassing or surpassed 'desktop' access to the web </li></ul><li>Clients are asking for it </li><ul><li>Noticeable increase in mobile interest </li></ul></ul>
  7. 8. Do you need a mobile site? <ul><li>Does your site have data that people need to access 'on the go' </li><ul><ul><li>Looking for answers, facts, details </li></ul></ul><li>Not Screen Size but Context
  8. 9. Examples: </li><ul><li>Tourism Sites </li><ul><li>Listings, Upcoming Events, Nearest Information Kiosks </li></ul><li>Brochure Sites </li><ul><li>Contact Details / Location Information
  9. 10. Key Information </li></ul></ul></ul>
  10. 11. Mobile Site Recipes <ul><li>Lots of alternatives </li><ul><li>3 rd party vs D.I.Y. </li></ul><li>Ingredients I used: </li><ul><li>Drupal 6
  11. 12. Theme: Mobile
  12. 13. Modules: </li><ul><li>Mobile Tools
  13. 14. Device Detection: </li><ul><li>Browscap
  14. 15. Wurfl </li></ul></ul></ul></ul>
  15. 16. 2 recipes; same ingredients <ul><li>Really Simple </li><ul><li>Keep the same URL, but switch theme for a mobile device
  16. 17. Issues with Performance? </li></ul><li>Simple </li><ul><li>Switch theme and URL for a mobile device
  17. 18. Slightly more complicated but not really
  18. 19. Buggy in parts </li></ul></ul>
  19. 20. 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.
  20. 21. Information Architecture <ul><li>Mobile visitors: </li><ul><li>Who are they, and what do they want? </li><ul><li>Contact Details, Directions to... </li></ul></ul><li>Special Architecture for Special people </li><ul><li>Structure content differently
  21. 22. Remove fluff – get to the goods as quick as possible </li></ul><li>Mobile Web Initiative – Best Practices </li><ul><ul><li>http://www.w3.org/Mobile/
  22. 23. http://www.w3.org/2005/MWI/BPWG/ </li></ul></ul></ul>
  23. 28. Theming Considerations <ul><li>User </li><ul><li>Less Text, Clear Calls to Action, Simple Navigation </li></ul><li>Performance </li><ul><li>Less Imagery, less HTTP requests </li></ul><li>Platforms </li><ul><li>Sub Themes for different platforms: Blackberry vs iPhone vs ...
  24. 29. Platform specific coding (meta tags etc.) </li></ul></ul>
  25. 30. Building your Mobile Site <ul><li>These are some problems I encountered when creating a mobile site </li><ul><li>Homepage
  26. 31. Primary Links
  27. 32. Views
  28. 33. Content Types </li><ul><li>Field Level Considerations </li><ul><li>Image Fields – different sizes
  29. 34. Google Maps – static image maps
  30. 35. Phone Numbers <a href=”tel:1.222..... </li></ul></ul></ul></ul>
  31. 36. 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
  32. 37. Custom Modules? <ul><li>Mobile tools provides global session variables you can use in your custom modules </li><ul><li>e.g. To do mobile specific form_alters </li></ul><li>What are the variables? </li><ul><li>Look in mobile_tools.module file:
  33. 38. $_SESSION['mobile-tools-site-type'] </li></ul></ul>
  34. 39. 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'); } }
  35. 40. Development Tools <ul><li>Useful blog post: http://tinyurl.com/55sk3m
  36. 41. Android/Nokia – Download SDK </li><ul><li>Android: http://tinyurl.com/dhcpvy
  37. 42. Nokia: http://tinyurl.com/yd9w7en </li></ul><li>Blackberry/Windows Mobile – download simulator (Windows only) </li><ul><li>Microsoft: http://tinyurl.com/23lx9yc
  38. 43. Blackberry: http://tinyurl.com/5ogpad </li></ul></ul>
  39. 44. Development Tools <ul><li>iPhone </li><ul><li>Safari Web Browser
  40. 45. Apple Developers SDK
  41. 46. http://www.marketcircle.com/iphoney/ - doesn't seem to resize correctly :( </li></ul><li>Opera Mobile </li><ul><li>http://www.opera.com/mobile/demo/ </li></ul></ul>
  42. 47. Development Resources <ul><li>Mobile Internet Architecture </li><ul><li>http://www.slideshare.net/xian/mobile-information-architecture </li></ul><li>Safari HTML Reference – meta tags </li><ul><li>http://developer.apple.com/safari/library/documentation/appleapplications/reference/safarihtmlref/articles/metatags.html </li></ul><li>Drupal Mobile </li><ul><li>http://mobiledrupal.com
  43. 48. http://mobiledrupal.com/content/overview-mobile-modules-drupal </li><ul><li>Little bit outdated (links to some modules that aren't supported anymore) but still good & useful </li></ul></ul></ul>
  44. 49. The End <ul><li>Thank you for your patience
  45. 50. Does anyone have any Questions? </li><ul><li>Does anyone have any Answers? </li></ul></ul>

×