11. What We’re
Talking About:
•How much do you optimize for mobile
devices?
•Mobile best practices
•Four basic paths to mobile devices using CSS,
TypoScript, and TemplaVoila.
12. How much do you
optimize for mobile
devices?
Mobile design happens on a spectrum.
23. Simplify Navigation
•Reduce menus to the minimum # of items.
•Highlight the menu items that people need
in a mobile context.
•Don’t rely on hover or drop-down behavior.
24. Navigation
•Highlights most helpful
links for mobile users
•Provides large buttons for
highlighted links
•Provides link back to
desktop version
http://lifechurch.tv
52. What is a useragent
string?
Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0
like Mac OS X; en-us) AppleWebKit/532.9
(KHTML, like Gecko) Version/4.0.5
Mobile/8A293 Safari/6531.22.7
53. What is a useragent
string?
Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0
like Mac OS X; en-us) AppleWebKit/532.9
(KHTML, like Gecko) Version/4.0.5
Mobile/8A293 Safari/6531.22.7
57. Adding a user function
to localconf.php
function mobile_check($cmd){
switch($cmd){
case "appleDevices":
if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') ||
strstr($_SERVER['HTTP_USER_AGENT'],'iPod') ||
strstr($_SERVER['HTTP_USER_ AGENT'],'iPad')) {
return true;
}
break;
case "androidDevices":
// ....
break;
}
}
85. “...if the user goals for your mobile site are
more limited in scope than its desktop
equivalent, then serving different content
to each might be the best approach.”
Ethan Marcotte
http://m.alistapart.com/articles/responsive-web-design/