Mobile Your Joomla Site

6,195 views

Published on

2011 CMS Expo presentation for different mobile Joomla solutions.

Published in: Technology, Business
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
6,195
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
47
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Mobile Your Joomla Site

  1. 1. Mobilize your Joomla site<br />Kyle Ledbetter<br />eBay / Pixel Praise<br />Image credit: NBC Productions, Inc.<br />
  2. 2. Raise your hand<br />if you surf the web on a mobile device<br />
  3. 3. Which camp are you in?<br />iPhone, Android, HP/Palm, Blackberry, Nokia, iPad<br />
  4. 4. Mobile Traffic is Growing<br />
  5. 5. What choices do you have?<br />(lots, as always with Joomla)<br /><ul><li>Built-in mobile optimization
  6. 6. Mobile components
  7. 7. Specific mobile templates
  8. 8. Custom mobile PHP & CSS</li></li></ul><li>How is one to choose?<br />What are your needs?<br />Do you already have a template?<br />Yes - Mobile Joomla, TapTheme or custom CSS<br />No – Rockettheme, Morph, Yootheme, Shape5<br />
  9. 9. Mobile Optimized Club Templates<br />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.<br />
  10. 10.
  11. 11.
  12. 12.
  13. 13. Mobile Template Parameters<br />Most club templates offer easy, but limited options for mobile optimization.<br />(screenshot of Rockettheme Gantry mobile template params)<br />
  14. 14. Mobile Joomla<br />Install a component, templates & plugins on your existing site, and you get automatic mobile versions for many mobile browsers.<br />
  15. 15.
  16. 16.
  17. 17.
  18. 18. Settings<br />
  19. 19. Lots of settings<br />
  20. 20. Mobile Joomla Extensions<br />1 component<br />4 templates<br />4 plugins<br />6 module positions for each template<br />(screens courtesy of OStraining)<br />
  21. 21. TapTheme<br />Install mobile templates specifically designed for iPhone, iPad & Android, which are assigned by a template-switching plugin.<br />
  22. 22.
  23. 23.
  24. 24.
  25. 25.
  26. 26. TapThemeSetup & Params<br />17 color options for each template<br />Assign template to each browser<br />Create a control panel of icons<br />
  27. 27. Joooid<br />Joooid is an Android client for the Joomla CMS: it has been created to publish articles with html text, images, galleries and maps.<br />
  28. 28.
  29. 29.
  30. 30. Joooid Setup<br /><ul><li>Install & enable plugin
  31. 31. Enable Web Services
  32. 32. Install Joooid on device
  33. 33. Login on device</li></li></ul><li>Custom CSS & PHP<br />Sometimes you don’t need an entirely different mobile template. With CSS & PHP you can adjust your template for browser width, version & OS.<br />
  34. 34. CSS Media Queries<br />@media all and (max-width: 1024px) and (min-width: 768px) {  #absolute-div{    display: none;  }}@media all and (max-width: 480px) and (min-width: 320px) {  #mainnavul li{    float: none;    display: block;    width: 100%;  }}<br />
  35. 35. JFactory Brower Detection<br /><?php<br />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' );}<br />?><br /><body class=“<?php print $browerType;?>”><br />
  36. 36. Weigh Your Choices<br />Easy<br />Moderate<br />Advanced<br /><ul><li>TapTheme
  37. 37. Mobile Joomla!
  38. 38. Club templates
  39. 39. Rockettheme
  40. 40. Shape5
  41. 41. Yootheme
  42. 42. Morph
  43. 43. Gavick
  44. 44. CSS Media Query
  45. 45. PHP Conditionals</li></li></ul><li>It’s really about content.<br />The point of all these mobile themes and optimizations is content delivery on mobile devices, plain and simple.<br />Is it easy to use and easy to read?<br />
  46. 46. How do you debug mobile extensions?<br />It’s easier than you think!<br />
  47. 47. Safari Developer Tools<br />(similar tools in Firefox and Chrome)<br />
  48. 48.
  49. 49.
  50. 50.
  51. 51. Xcode<br />$4.99 on the Apple App Store<br />
  52. 52. iOS Simulator<br />Part of Xcode. Formerly named “iPhone Simulator”<br />
  53. 53. What about the admin?<br />Yes, there’s mobile solutions for the admin also!<br />
  54. 54. Joomla Admin Mobile<br />Native iPhone & iPad app for Joomla administrators.<br />Currently supports core components.<br />
  55. 55.
  56. 56.
  57. 57. AdminPad from AdminPraise<br />Joomla admin template that mimics a native iPad app. Same approach as TapThemeiPad, but on the admin side.<br />
  58. 58.
  59. 59.
  60. 60. Coming Soon: AdminPhone<br />Built on the awesome open source jQuery Mobile project. Will work across many mobile form factors.<br />
  61. 61.
  62. 62. What about the future?<br />Tablets, media centers, TVs, and who knows what’s next?<br />
  63. 63. Begun, the tablet war has.<br />Image credit: technobolt.com<br />
  64. 64. Kyle Ledbetter<br />kyle@pixelpraise.com<br />@kyleledbetter<br />www.adminpraise.com<br />www.projectfork.net<br />www.taptheme.com<br />

×