Mobile Joomla Stragies & Techniques


Published on

In this presentation, Cory Webb discusses strategies and techniques for going mobile with your Joomla-powered website. He will discuss the latest trends in mobile optimization, easy ways to make your business mobile friendly, and even techniques for creating mobile apps driven by the data managed in your Joomla website.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Mobile Joomla Stragies & Techniques

  1. 1. Mobile Joomla Strategies & Techniques Austin Joomla User Group October 15, 2012 Cory Webb
  2. 2.
  3. 3. Who am I?● Working with Joomla/Mambo since 2003● Founded Cory Webb Media, LLC in 2008● Author of Beginning Joomla Website Development (Wrox 2009)
  4. 4. Who are you?● Business owners● Designers● Developers● Other
  5. 5. Agenda● Mobile Philosophy (Who and Why)● Mobile Strategies (What and How) ● Strategy 1: Do nothing ● Strategy 2: Create/use a separate template for mobile ● Strategy 3: Native mobile app ● Strategy 4: Responsive Web Design● Decision Time
  6. 6. Mobile Philosophy● Show me your smart phones and tablets.● Quick statistics* ● 1.2 billion mobile web users in the world ● Mobile broadband outnumbers fixed broadband 2:1 ● 208 million US mobile 3G subscribers in Q4 2011● Mobile is not the future.● Mobile is now. Stop ignoring it. It wont go away. *Source:
  7. 7. Mobile Philosophy● There is no mobile web (wait, what?) ● “There is no Mobile Web. There is only The Web, which we view in different ways. There is also no Desktop Web. Or Tablet Web. Thank you.”● “the Web is about universally accessible structured content.”● Designing for mobile is more than just adjusting CSS, image sizes, etc.● Design for mobile requires a more thorough approach to structuring your content for universal accessibility Source:
  8. 8. Four Practical Strategies● Do Nothing (but get rid of Flash)● Create/use a separate template for mobile● Native mobile app● Responsive web design
  9. 9. Do Nothing (But Get Rid of Flash)● Good news! You dont have to do anything!● Your website is still accessible via mobile devices● Just get rid of Flash ● Apple won the argument. ● Flash is dead. ● Long live HTML5!
  10. 10. Do Nothing (But Get Rid of Flash)● Pros ● Cons ● Easy ● Mobile experience not ● Free optimized ● Possible negative perception of your brand
  11. 11. Create/Use a Separate Mobile Template Source: and
  12. 12. Create/Use a Separate Mobile Template●●● – Gantry Framework● Use a plugin to detect the device/browser used to access your site● Changes the template according to device● Lets you target specific device types (iOS, Android, Windows Mobile, Tablet)● MobileJoomla even lets you add a mobile-only subdomain to your site
  13. 13. Create/Use a Separate Mobile Template● Testing Your Mobile Template ● Purchase 1 of each mobile device on the market ● Safari for Mac – User Agent Setting ●
  14. 14. Create/Use a Separate Mobile Template● Pros ● Cons ● Easy ● More code to manage ● Relatively inexpensive on your site ● Commercial templates ● Different/more module and tools available positions to manage ● Templates tend to look pretty standard ● More work to make consistent with your brand
  15. 15. Native Mobile App Source:
  16. 16. Native Mobile App● Yes, Joomla can serve data to a native mobile app● Requires custom API development● – REST API for Joomla 1.5● Which devices should I target? iOS, Android, Windows Mobile, Tablet, Symbian, etc.● Development Tools ● Appcelerator Titanium ● PhoneGap
  17. 17. Native Mobile App● Pros ● Cons ● Ability to access and ● Expensive use tools in the device ● Rarely necessary ● Brand perception ● Too many devices to target
  18. 18. Responsive Web Design
  19. 19. Source:
  20. 20. Source:
  21. 21. Source:
  22. 22. Source:
  23. 23. Source:
  24. 24. Source:
  25. 25. Responsive Web Design● Uses a single template● Same HTML markup across all devices● Uses media queries to target specific viewport sizes and size ranges● Testing Responsive Designs ● Resize your browser
  26. 26. Responsive Web Design/* Smaller than standard 960 (devices and browsers) */@media only screen and (max-width: 959px) {}/* Tablet Portrait size to standard 960 (devices and browsers) */@media only screen and (min-width: 768px) and (max-width: 959px) {}/* All Mobile Sizes (devices and browser) */@media only screen and (max-width: 767px) {}/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */@media only screen and (min-width: 480px) and (max-width: 767px) {}/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */@media only screen and (max-width: 479px) {}
  27. 27. Responsive Web Design● Frameworks ● Bootstrap ( – Baked into Joomla 3.0 ● Skeleton ( ● Foundation ( ● Less Framework (
  28. 28. Responsive Web Design● Pros ● Cons ● Consistent look and feel ● Not as easy to drop across all devices into an existing site ● Single code base to manage ● Probably requires an overhaul your site ● Greater focus on design and content structuring content for universal accessibility structure ● Availability of responsive templates ● Availability of responsive frameworks
  29. 29. Decision Time● Which strategy is right for you? ● It depends: – The purpose of your website – The needs/usage habits of your users – The functionality requirements of your website – Budget ● Responsive web design is most likely the best move, but it is not right in every circumstance.
  30. 30. Questions? @corywebb