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

Complexity

SE W810i

Motivation http://m.sugree.com/

Size

HTML/Text 4.4K

JavaScript 12.1K

Images 37.7K

Total 54.3K

Complexity

SE W810i

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]

Any Questions?