Optimizing Drupal for Mobile Devices

4,161 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
4,161
On SlideShare
0
From Embeds
0
Number of Embeds
323
Actions
Shares
0
Downloads
54
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Optimizing Drupal for Mobile Devices

  1. 1. Optimizing Drupal for Mobile Devices Sugree Phatanapherom [email_address] http://sugree.com/ @sugree
  2. 2. Mobile Devices <ul><li>Something small </li></ul><ul><li>Something slow </li></ul><ul><li>Something simple </li></ul><ul><li>Cellphone </li></ul><ul><li>Handheld </li></ul>
  3. 3. Motivation http://sugree.com/
  4. 4. Size <ul><li>HTML/Text 5.7K </li></ul><ul><li>JavaScript 24.4K </li></ul><ul><li>Stylesheet 9.1K </li></ul><ul><li>CSS Images 5.3K </li></ul><ul><li>Images 39.5K </li></ul><ul><li>Total 84.2K </li></ul>
  5. 5. Complexity
  6. 6. SE W810i
  7. 7. Motivation http://m.sugree.com/
  8. 8. Size <ul><li>HTML/Text 4.4K </li></ul><ul><li>JavaScript 12.1K </li></ul><ul><li>Images 37.7K </li></ul><ul><li>Total 54.3K </li></ul>
  9. 9. Complexity
  10. 10. SE W810i
  11. 11. How? <ul><li>Difficulty Level - VERY EASY </li></ul><ul><li>Behind success </li></ul><ul><ul><li>Theme </li></ul></ul><ul><ul><li>Multi-site </li></ul></ul>
  12. 12. CSS is not enough? <ul><li>Complexity </li></ul><ul><ul><li>Structure </li></ul></ul><ul><ul><li>CSS </li></ul></ul>
  13. 13. Mobile Theme <ul><li>http://drupal.org/project/mobile </li></ul>
  14. 14. page.tpl.php <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; lang=&quot;<?php print $language->language ?>&quot; xml:lang=&quot;<?php print $language->language ?>&quot;> <head> <title><?php print $head_title ?></title> <meta http-equiv=&quot;Content-Style-Type&quot; content=&quot;text/css&quot; /> <?php print $head ?> </head> <body <?php print theme(&quot;onload_attribute&quot;); ?>> <a href=&quot;<?php print url($_GET['q'], array('query' => NULL, 'fragment' => 'nav', 'absolute' => TRUE)); ?>&quot;><?php print t('skip to navigation');?></a> <?php if ($title != &quot;&quot;): ?> <h2 class=&quot;content-title&quot;><?php print $title ?></h2> <?php endif; ?> <?php if ($help != &quot;&quot;): ?> <p id=&quot;help&quot;><?php print $help ?></p> <?php endif; ?> <?php if ($messages != &quot;&quot;): ?> <div id=&quot;message&quot;><?php print $messages ?></div> <?php endif; ?> <?php print $content ?> <?php if ($tabs != &quot;&quot;): ?> <?php print $tabs ?> <?php endif; ?> <a name=&quot;nav&quot;></a> <?php print $left . $right; ?> <?php if ($footer_message) : ?> <?php print $footer;?> <?php endif; ?> <?php print $closure;?> </body> </html>
  15. 15. node.tpl.php <?php if ($page == 0): ?> <h2><a href=&quot;<?php print $node_url ?>&quot;><?php print $title ?></a></h2> <?php endif; ?> <?php print $content ?> <?php if ($signature): ?> <div class=&quot;user-signature clear-block&quot;><?php print $signature ?></div> <?php endif; ?> <?php print $submitted ?> <?php if ($links): ?> <?php print $links ?> <?php endif; ?>
  16. 16. Customization <ul><li>template.php </li></ul><ul><li>page.tpl.php </li></ul>
  17. 17. template.php <?php function mobile_regions() { return array( 'leaderboard' => t('leaderboard'), 'suckerfish' => t('suckerfish menu'), 'sidebar_left' => t('left sidebar'), 'sidebar_right' => t('right sidebar'), 'sidebar_outside' => t('outside sidebar'), 'content_top_left' => t('content top left'), 'content_top_right' => t('content top right'), 'content_bottom_left' => t('content bottom left'), 'content_bottom_right' => t('content bottom right'), 'header_left' => t('header left'), 'header_center' => t('header center'), 'header_right' => t('header right'), 'banner' => t('banner'), 'user1' => t('user1'), 'user2' => t('user2'), 'user3' => t('user3'), 'user4' => t('user4'), 'user5' => t('user5'), 'user6' => t('user6'), 'user7' => t('user7'), 'user8' => t('user8'), 'user9' => t('user9'), 'user10' => t('user10'), 'user11' => t('user11'), 'user12' => t('user12'), 'user13' => t('user13'), 'user14' => t('user14'), 'user15' => t('user15'), 'footer_left' => t('footer left'), 'footer_center' => t('footer center'), 'footer_right' => t('footer right') ); }
  18. 18. page.tpl.php <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; lang=&quot;<?php print $language ?>&quot; xml:lang=&quot;<?php print $language ?>&quot;> <head> <title><?php print $head_title ?></title> <meta http-equiv=&quot;Content-Style-Type&quot; content=&quot;text/css&quot; /> <?php print $head ?> <style type=&quot;text/css&quot;> body { background-color: #000000; color: #DDDDDD; width: 176px; } a { color: #BBBB00; } </style> </head>
  19. 19. page.tpl.php <?php print theme('menu_links', $primary_links) ?> <?php print theme('menu_links', $secondary_links) ?> <?php print $header_left ?> <?php print $header_center ?> <?php print $header_right ?> <?php print $banner ?> <?php print $sidebar_left ?> <?php print $sidebar_right ?> <?php print $sidebar_outside ?> <?php print $sidebar_top_left ?> <?php print $sidebar_top_right ?> <?php print $sidebar_bottom_left ?> <?php print $sidebar_bottom_right ?> <?php print $user1 ?> <?php print $user2 ?> <?php print $user3 ?> <?php print $user4 ?> <?php print $user5 ?> <?php print $user6 ?> <?php print $user7 ?> <?php print $user8 ?> <?php print $user9 ?> <?php print $user10 ?> <?php print $user11 ?> <?php print $user12 ?> <?php print $user13 ?> <?php print $user14 ?> <?php print $user15 ?> <?php print $footer_left ?> <?php print $footer_center ?> <?php print $footer_right ?> <?php print $closure;?> </body> </html>
  20. 20. Multi-site <ul><li>http://sugree.com/ </li></ul><ul><ul><li>Tapestry </li></ul></ul><ul><li>http://m.sugree.com/ </li></ul><ul><ul><li>Mobile </li></ul></ul>
  21. 21. settings.php # $conf = array( # 'site_name' => 'My Drupal site', # 'theme_default' => 'minnelli', # 'anonymous' => 'Visitor', # ); $conf = array( # 'site_name' => 'My Drupal site', 'theme_default' => 'mobile', # 'anonymous' => 'Visitor', ); <ul><li>sites/sugree.com/settings.php </li></ul><ul><li>sites/m.sugree.com/settings.php </li></ul>
  22. 22. All done? <ul><li>Yes </li></ul><ul><li>No </li></ul><ul><ul><li>Automatically redirect if necessary </li></ul></ul><ul><ul><ul><li>From http://sugree.com/ </li></ul></ul></ul><ul><ul><ul><li>To http://m.sugree.com/ </li></ul></ul></ul>
  23. 23. .htaccess RewriteCond %{HTTP_HOST} !^m.sugree.com$ RewriteCond %{HTTP_ACCEPT} &quot;text/vnd.wap.wml|application/vnd.wap.xhtml+xml&quot; [NC,OR] RewriteCond %{HTTP_USER_AGENT} &quot;acs|alav|alca|amoi|audi|aste|avan|benq|bird|blac|blaz|brew|cell|cldc|cmd-&quot; [NC,OR] RewriteCond %{HTTP_USER_AGENT} &quot;dang|doco|eric|hipt|inno|ipaq|java|jigs|kddi|keji|leno|lg-c|lg-d|lg-g|lge-&quot; [NC,OR] RewriteCond %{HTTP_USER_AGENT} &quot;maui|maxo|midp|mits|mmef|mobi|mot-|moto|mwbp|nec-|newt|noki|opwv&quot; [NC,OR] RewriteCond %{HTTP_USER_AGENT} &quot;palm|pana|pant|pdxg|phil|play|pluc|port|prox|qtek|qwap|sage|sams|sany&quot; [NC,OR] RewriteCond %{HTTP_USER_AGENT} &quot;sch-|sec-|send|seri|sgh-|shar|sie-|siem|smal|smar|sony|sph-|symb|t-mo&quot; [NC,OR] RewriteCond %{HTTP_USER_AGENT} &quot;teli|tim-|tsm-|upg1|upsi|vk-v|voda|w3cs|wap-|wapa|wapi&quot; [NC,OR] RewriteCond %{HTTP_USER_AGENT} &quot;wapp|wapr|webc|winw|winw|xda|xda-&quot; [NC,OR] RewriteCond %{HTTP_USER_AGENT} &quot;up.browser|up.link|windowssce|iemobile|mini|mmp&quot; [NC,OR] RewriteCond %{HTTP_USER_AGENT} &quot;symbian|midp|wap|phone|pocket|mobile|pda|psp&quot; [NC] RewriteRule ^(.*)$ http://m.sugree.com/$1 [L,R=302]
  24. 24. Any Questions?

×