Mobilize Joomla

3,074 views

Published on

Check out the awesome options for making your Joomla site mobile optimized.

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • Great information. Gonna try it and see what happens.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
3,074
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
29
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Mobilize Joomla

  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. 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 />
  28. 28. 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 />
  29. 29. 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 />
  30. 30. Weigh Your Choices<br />Easy<br />Moderate<br />Advanced<br /><ul><li>TapTheme
  31. 31. Mobile Joomla!
  32. 32. Club templates
  33. 33. Rockettheme
  34. 34. Shape5
  35. 35. Yootheme
  36. 36. Morph
  37. 37. Gavick
  38. 38. CSS Media Query
  39. 39. 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 />
  40. 40. How do you debug mobile extensions?<br />It’s easier than you think!<br />
  41. 41. Safari Developer Tools<br />(similar tools in Firefox and Chrome)<br />
  42. 42.
  43. 43.
  44. 44.
  45. 45. Xcode<br />$4.99 on the Apple App Store<br />
  46. 46. iOS Simulator<br />Part of Xcode. Formerly named “iPhone Simulator”<br />
  47. 47. What about the admin?<br />Yes, there’s mobile solutions for the admin also!<br />
  48. 48. Joomla Admin Mobile<br />Native iPhone & iPad app for Joomla administrators.<br />Currently supports core components.<br />
  49. 49.
  50. 50.
  51. 51. AdminPad from AdminPraise<br />Joomla admin template that mimics a native iPad app. Same approach as TapThemeiPad, but on the admin side.<br />
  52. 52.
  53. 53.
  54. 54. Coming Soon: AdminPhone<br />Built on the awesome open source jQuery Mobile project. Will work across many mobile form factors.<br />
  55. 55.
  56. 56. What about the future?<br />Tablets, media centers, TVs, and who knows what’s next?<br />
  57. 57. Begun, the tablet war has.<br />Image credit: technobolt.com<br />
  58. 58. http://store.pixelpraise.com<br />25% Coupon Code: jd11ne<br />
  59. 59. Back to you<br />Questions anyone?<br />
  60. 60. Kyle Ledbetter<br />kyle@pixelpraise.com<br />@kyleledbetter<br />www.adminpraise.com<br />www.projectfork.net<br />www.taptheme.com<br />

×