mobile your joomla site
DESCRIPTION
2011 CMS Expo presentation for different mobile Joomla solutions.TRANSCRIPT
Mobilize your Joomla siteKyle Ledbetter
eBay / Pixel PraiseImage credit: NBC Productions, Inc.
Raise your handif you surf the web on a mobile device
Which camp are you in?iPhone, Android, HP/Palm, Blackberry, Nokia, iPad
Mobile Traffic is Growing
Monthly Mobile Traffic
iPadiPhoneAndroidSymbianOSBlackberry
What choices do you have?(lots, as always with Joomla)
• Built-in mobile optimization
• Mobile components
• Specific mobile templates
• Custom mobile PHP & CSS
How is one to choose?What are your needs?
Do you already have a template?
Yes - Mobile Joomla, TapTheme or custom CSS
No – Rockettheme, Morph, Yootheme, Shape5
Mobile Optimized Club Templates
Most popular Joomla clubs have built-in mobile optimization for their templates. If you’re going the stock route, this is very easy
for you.
Mobile Template Parameters
Most club templates offer easy, but limited options for mobile optimization.
(screenshot of Rockettheme Gantry mobile template params)
Mobile JoomlaInstall a component, templates & plugins on your existing site,
and you get automatic mobile versions for many mobile browsers.
Settings
Lots of settings
Mobile Joomla Extensions
1 component
4 templates
4 plugins
6 module positions for each template
(screens courtesy of OStraining)
TapThemeInstall mobile templates specifically designed for iPhone, iPad &
Android, which are assigned by a template-switching plugin.
TapTheme Setup & Params
17 color options for each template
Assign template to each browser
Create a control panel of icons
JoooidJoooid is an Android client for the Joomla CMS: it has been
created to publish articles with html text, images, galleries and maps.
Joooid Setup- Install & enable plugin
- Enable Web Services
- Install Joooid on device
- Login on device
Custom CSS & PHPSometimes you don’t need an entirely different mobile template. With CSS & PHP you can adjust your template for browser width,
version & OS.
CSS Media Queries
@media all and (max-width: 1024px) and (min-width: 768px) { #absolute-div{ display: none; }}
@media all and (max-width: 480px) and (min-width: 320px) { #mainnav ul li{ float: none; display: block; width: 100%; }}
JFactory Brower Detection
<?php
jimport('joomla.environment.browser');$doc =& JFactory::getDocument();$browser = &JBrowser::getInstance();$browserType = $browser->getBrowser();$browserVersion = $browser->getMajor();if(($browserType == 'msie') && ($browserVersion < 7)){$doc->addStyleSheet( 'css/ie6.css' );
}
?>
<body class=“<?php print $browerType;?>”>
Weigh Your Choices
• Club templates• Rockettheme• Shape5• Yootheme• Morph• Gavick
• CSS Media Query
• PHP Conditionals
• TapTheme
• Mobile Joomla!
Easy Moderate Advanced
It’s really about content.The point of all these mobile themes and optimizations is content delivery on mobile devices, plain and simple.
Is it easy to use and easy to read?
How do you debug mobile extensions?
It’s easier than you think!
Safari Developer Tools(similar tools in Firefox and Chrome)
Xcode$4.99 on the Apple App Store
iOS SimulatorPart of Xcode. Formerly named “iPhone Simulator”
What about the admin?
Yes, there’s mobile solutions for the admin also!
Joomla Admin MobileNative iPhone & iPad app for Joomla administrators.
Currently supports core components.
AdminPad from AdminPraiseJoomla admin template that mimics a native iPad app. Same
approach as TapTheme iPad, but on the admin side.
Coming Soon: AdminPhoneBuilt on the awesome open source jQuery Mobile project. Will
work across many mobile form factors.
What about the future?
Tablets, media centers, TVs, and who knows what’s next?
Begun, the tablet war has.
Image credit: technobolt.com
