Optimizing Drupal for Mobile Devices

Slide 1: Optimizing Drupal for Mobile Devices Sugree Phatanapherom sugree@gmail.com http://sugree.com/ @sugree

Slide 2: Mobile Devices  Something small  Cellphone  Something slow  Handheld  Something simple

Slide 3: Motivation http://sugree.com/

Slide 4: Size  HTML/Text 5.7K  JavaScript 24.4K  Stylesheet 9.1K  CSS Images 5.3K  Images 39.5K  Total 84.2K

Slide 5: Complexity

Slide 6: SE W810i

Slide 7: Motivation http://m.sugree.com/

Slide 8: Size  HTML/Text 4.4K  JavaScript 12.1K  Images 37.7K  Total 54.3K

Slide 9: Complexity

Slide 10: SE W810i

Slide 11: How?  Difficulty Level - VERY EASY  Behind success  Theme  Multi-site

Slide 12: CSS is not enough?  Complexity  Structure  CSS

Slide 13: Mobile Theme  http://drupal.org/project/mobile

Slide 14: page.tpl.php <!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="<?php print $language>language ?>" xml:lang="<?php print $language>language ?>"> <head> <title><?php print $head_title ?></title> <meta httpequiv="ContentStyleType" content="text/css" /> <?php print $head ?> </head> <body <?php print theme("onload_attribute"); ?>> <a href="<?php print url($_GET['q'], array('query' => NULL, 'fragment' => 'nav', 'absolute' => TRUE)); ?>"><?php print t('skip to navigation');?></a> <?php if ($title != ""): ?> <h2 class="contenttitle"><?php print $title ?></h2> <?php endif; ?> <?php if ($help != ""): ?> <p id="help"><?php print $help ?></p> <?php endif; ?> <?php if ($messages != ""): ?> <div id="message"><?php print $messages ?></div> <?php endif; ?> <?php print $content ?> <?php if ($tabs != ""): ?> <?php print $tabs ?> <?php endif; ?> <a name="nav"></a> <?php print $left . $right; ?> <?php if ($footer_message) : ?> <?php print $footer;?> <?php endif; ?> <?php print $closure;?> </body> </html>

Slide 15: node.tpl.php <?php if ($page == 0): ?> <h2><a href="<?php print $node_url ?>"><?php print $title ?></a></h2> <?php endif; ?> <?php print $content ?> <?php if ($signature): ?> <div class="user-signature clear-block"><?php print $signature ?></div> <?php endif; ?> <?php print $submitted ?> <?php if ($links): ?> <?php print $links ?> <?php endif; ?>

Slide 16: Customization  template.php  page.tpl.php

Slide 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') ); }

Slide 18: page.tpl.php <!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="<?php print $language ?>" xml:lang="<?php print $language ?>"> <head> <title><?php print $head_title ?></title> <meta httpequiv="ContentStyleType" content="text/css" /> <?php print $head ?> <style type="text/css"> body { backgroundcolor: #000000; color: #DDDDDD; width: 176px; } a { color: #BBBB00; } </style> </head>

Slide 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>

Slide 20: Multi-site  http://sugree.com/  Tapestry  http://m.sugree.com/  Mobile

Slide 21: settings.php  sites/sugree.com/setti  sites/m.sugree.com/s ngs.php ettings.php # $conf = array( $conf = array( # 'site_name' => 'My Drupal site', # 'site_name' => 'My Drupal site', # 'theme_default' => 'minnelli', 'theme_default' => 'mobile', # 'anonymous' => 'Visitor', # 'anonymous' => 'Visitor', # ); );

Slide 22: All done?  Yes  No  Automatically redirect if necessary  From http://sugree.com/  To http://m.sugree.com/

Slide 23: .htaccess RewriteCond %{HTTP_HOST} !^m.sugree.com$ RewriteCond %{HTTP_ACCEPT} "text/vnd.wap.wml|application/vnd.wap.xhtml+xml" [NC,OR] RewriteCond %{HTTP_USER_AGENT} "acs|alav|alca|amoi|audi|aste|avan|benq|bird|blac|blaz|brew| cell|cldc|cmd" [NC,OR] RewriteCond %{HTTP_USER_AGENT} "dang|doco|eric|hipt|inno|ipaq|java|jigs|kddi|keji|leno|lgc| lgd|lgg|lge" [NC,OR] RewriteCond %{HTTP_USER_AGENT} "maui|maxo|midp|mits|mmef|mobi|mot|moto|mwbp|nec|newt|noki| opwv" [NC,OR] RewriteCond %{HTTP_USER_AGENT} "palm|pana|pant|pdxg|phil|play|pluc|port|prox|qtek|qwap|sage| sams|sany" [NC,OR] RewriteCond %{HTTP_USER_AGENT} "sch|sec|send|seri|sgh|shar|sie|siem|smal|smar|sony|sph| symb|tmo" [NC,OR] RewriteCond %{HTTP_USER_AGENT} "teli|tim|tsm|upg1|upsi|vkv|voda|w3cs|wap|wapa|wapi" [NC,OR] RewriteCond %{HTTP_USER_AGENT} "wapp|wapr|webc|winw|winw|xda|xda" [NC,OR] RewriteCond %{HTTP_USER_AGENT} "up.browser|up.link|windowssce|iemobile|mini|mmp" [NC,OR] RewriteCond %{HTTP_USER_AGENT} "symbian|midp|wap|phone|pocket|mobile|pda|psp" [NC] RewriteRule ^(.*)$ http://m.sugree.com/$1 [L,R=302]

Slide 24: Any Questions?

Slideshare.net (beta)