Mobilize drupal

1,380 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
1,380
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Mobilize drupal

  1. 1. Mobilize Drupal Sitesprajwala@azrisolutions.com Azri
  2. 2. AGENDA Me and my company Why Mobile Web is important Example Drupal sites on Mobile Mobile Tools Responsive Theme with Demo Mobile Native Apps Questions ???? Azri
  3. 3. ‘Me’ My village HUZURABADAzri
  4. 4. More about ‘Me’• I build applications on Drupal• I am an active contributor of code on Drupal, jQuery and PHP communities• One of my projects, a real-time collaboration suite was showcased at TechCrunch 50 in SF• I build Facebook Applications• ... Azri
  5. 5. My Company We are based inWe code on We build products & solutions using Azri
  6. 6. Why Mobile Web isPowerful Search Implementations on important ? Drupal Azri
  7. 7. Azri
  8. 8. Azri
  9. 9. Some Drupal Sites on Mobile Azri
  10. 10. Whitehouse.gov Azri
  11. 11. newhope360.com Azri
  12. 12. Consumersearch.com Azri
  13. 13. Drupalcampdeccan.org Azri
  14. 14. How to mobilize Drupal site? Azri
  15. 15.  Mobile Tools module A Custom mobile theme For extra special layouts, need Panels Azri
  16. 16. Mobile Tools Detection of user agent Automatic redirection to mobile site Automatic theme switching, based ondevice type (iphone, Android, ...) Integration with Panels, Node Displays Adding mobile context topermissioning system Change number of nodes display formobile Azri
  17. 17. Custom Mobile ThemeBuild mobile theme using Fusion Mobile Nokia Mobile Theme Mobile Garland Azri
  18. 18. Custom Layout for mobile Mobile layouts with Panels and Mobile Tools Resize image content with CCK display settings For images embeded in node use TinySrc module Azri
  19. 19. Responsive Design Azri
  20. 20. Azri
  21. 21. Azri
  22. 22. Responsive Themes Omega http://drupal.org/project/omega Adaptive Themes http://drupal.org/project/adaptivethe me Azri
  23. 23. Media Queries@media screen and (min-width: 480px) { .content { float: left; } .social_icons { display: none } // and so on...} Azri
  24. 24. Recommended Widths 320px 480px 600px 768px 900px 1200px Azri
  25. 25. Mobile Native Apps Use Services module and build API Use Titanium to build Mobile Apps which interact with Drupal API Azri
  26. 26. Titanium Azri
  27. 27. Titanium Project Azri
  28. 28. App.js Azri
  29. 29. Call to Drupal API Azri
  30. 30. Referencehttp://www.chapterthree.com/blog/elly- jonez/drupal-and-mobile-are-friendshttp://drupal.org/project/mobile_toolshttp://drupal.org/project/fusion_mobilehttp://www.alistapart.com/articles/resp onsive-web-design/ Azri
  31. 31. Questions? Questions? prajwala@azrisolutions.com chakrapani@azrisolutions.com Azri

×