Optimizing Drupal for Mobile Devices

Optimizing Drupal for Mobile Devices Sugree Phatanapherom [email_address] http://sugree.com/ @sugree

Mobile Devices Something small Something slow Something simple Cellphone Handheld

Motivation http://sugree.com/

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

Motivation http://m.sugree.com/

Size HTML/Text 4.4K JavaScript 12.1K Images 37.7K Total 54.3K

How? Difficulty Level - VERY EASY Behind success Theme Multi-site

CSS is not enough? Complexity Structure CSS

Mobile Theme http://drupal.org/project/mobile

page.tpl.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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 http-equiv="Content-Style-Type" 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="content-title"><?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>

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; ?>

Customization template.php page.tpl.php

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

page.tpl.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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 http-equiv="Content-Style-Type" content="text/css" /> <?php print $head ?> <style type="text/css"> body { background-color: #000000; color: #DDDDDD; width: 176px; } a { color: #BBBB00; } </style> </head>

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>

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

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', ); sites/sugree.com/settings.php sites/m.sugree.com/settings.php

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

.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|lg-c|lg-d|lg-g|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|t-mo" [NC,OR] RewriteCond %{HTTP_USER_AGENT} "teli|tim-|tsm-|upg1|upsi|vk-v|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]

Optimizing Drupal for Mobile Devices

More Related Content

What's hot (20)

Similar to Optimizing Drupal for Mobile Devices (20)

More from Sugree Phatanapherom (16)

Recently uploaded (20)

Optimizing Drupal for Mobile Devices