This document discusses how to mobilize Drupal sites. It begins with an introduction of the speaker and their company. It then explains why mobile web is important and provides examples of responsive Drupal sites. It outlines mobile tools like the Mobile Tools module and responsive themes. It demonstrates a responsive theme with Omega and discusses building mobile native apps that interface with Drupal through APIs and Titanium. It concludes with references and inviting questions.

1. Mobilize Drupal Sites
prajwala@azrisolutions.com
Azri

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. ‘Me’
My village
HUZURABAD
Azri

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. My Company
We are based in
We code on
We build products & solutions using
Azri

6. Why Mobile Web is
Powerful Search Implementations on
important ?
Drupal
Azri

7. Azri

8. Azri

9. Some Drupal Sites on Mobile
Azri

10. Whitehouse.gov
Azri

11. newhope360.com
Azri

12. Consumersearch.com
Azri

13. Drupalcampdeccan.org
Azri

14. How to mobilize Drupal site?
Azri

15. 
Mobile Tools module

A Custom mobile theme

For extra special layouts, need 'Panels'
Azri

16. Mobile Tools

Detection of user agent

Automatic redirection to mobile site

Automatic theme switching, based on
device type (iphone, Android, ...)

Integration with Panels, Node Displays

Adding mobile context to
permissioning system

Change number of nodes display for
mobile Azri

17. Custom Mobile Theme
Build mobile theme using

Fusion Mobile

Nokia Mobile Theme

Mobile Garland
Azri

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. Responsive Design
Azri

20. Azri

21. Azri

22. Responsive Themes

Omega
http://drupal.org/project/omega

Adaptive Themes
http://drupal.org/project/adaptivethe
me
Azri

23. Media Queries
@media screen and (min-width: 480px) {
.content {
float: left;
}
.social_icons {
display: none
}
// and so on...
}
Azri

24. Recommended Widths

320px

480px

600px

768px

900px

1200px
Azri

25. Mobile Native Apps

Use Services module and build API

Use Titanium to build Mobile Apps
which interact with Drupal API
Azri

26. Titanium
Azri

27. Titanium Project
Azri

28. App.js
Azri

29. Call to Drupal API
Azri

30. Reference
http://www.chapterthree.com/blog/elly-
jonez/drupal-and-mobile-are-friends
http://drupal.org/project/mobile_tools
http://drupal.org/project/fusion_mobile
http://www.alistapart.com/articles/resp
onsive-web-design/
Azri

31. Questions?
Questions?
prajwala@azrisolutions.com
chakrapani@azrisolutions.com
Azri