Loading...
Flash Player 9 (or above) is needed to view slideshows. We have detected that you do not have it on your computer.To install it, go here
Optimizing Drupal for Mobile Devices
1042 views | comments | 0 favorites | 15 downloads | 1 embeds (Stats)
More Info
This slideshow is Public
Total Views: 1042 on Slideshare: 981 from embeds: 61
Most viewed embeds (Top 5):
More
Slideshow Transcript
- 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?