0
Mobilize Drupal Sitesprajwala@azrisolutions.com          Azri
AGENDA    Me and my company    Why Mobile Web is important    Example Drupal sites on Mobile    Mobile Tools    Respo...
‘Me’        My village       HUZURABADAzri
More about ‘Me’• I build applications on Drupal• I am an active contributor of code on  Drupal, jQuery and PHP communities...
My Company                       We are based inWe code on We build products & solutions using                Azri
Why Mobile Web isPowerful Search Implementations on       important ?              Drupal              Azri
Azri
Azri
Some Drupal Sites on Mobile           Azri
Whitehouse.gov     Azri
newhope360.com     Azri
Consumersearch.com      Azri
Drupalcampdeccan.org       Azri
How to mobilize Drupal site?           Azri
  Mobile Tools module  A Custom mobile theme  For extra special layouts, need Panels                  Azri
Mobile Tools Detection of user agent Automatic redirection to mobile site Automatic theme switching, based ondevice typ...
Custom Mobile ThemeBuild mobile theme using  Fusion Mobile  Nokia Mobile Theme  Mobile Garland                Azri
Custom Layout for mobile  Mobile layouts with Panels and Mobile  Tools  Resize image content with CCK  display settings...
Responsive Design      Azri
Azri
Azri
Responsive Themes  Omega  http://drupal.org/project/omega  Adaptive Themes  http://drupal.org/project/adaptivethe  me   ...
Media Queries@media screen and (min-width: 480px) {    .content {    float: left; } .social_icons {    display: none } // ...
Recommended Widths  320px  480px  600px  768px  900px  1200px           Azri
Mobile Native Apps  Use Services module and build API  Use Titanium to build Mobile Apps  which interact with Drupal API...
Titanium  Azri
Titanium Project      Azri
App.js Azri
Call to Drupal API       Azri
Referencehttp://www.chapterthree.com/blog/elly- jonez/drupal-and-mobile-are-friendshttp://drupal.org/project/mobile_toolsh...
Questions?  Questions?           prajwala@azrisolutions.com           chakrapani@azrisolutions.com    Azri
Upcoming SlideShare
Loading in...5
×

Mobilize drupal

1,012

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,012
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×