Mobile Joomla Stragies & Techniques
Download as ODP, PDF•0 likes•885 views
The document discusses mobile strategies for Joomla users, emphasizing the importance of adapting to mobile web experiences. It outlines four main strategies: doing nothing, using separate mobile templates, creating native mobile apps, and implementing responsive web design, each with their own pros and cons. The speaker encourages businesses to carefully evaluate their website's purpose and user needs when deciding on a strategy, suggesting that responsive web design is often the best approach.
Mobile Joomla Stragies & Techniques
- 1. Mobile Joomla Strategies & Techniques Austin Joomla User Group October 15, 2012 Cory Webb corywebbmedia.com
- 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. Who are you? ● Business owners ● Designers ● Developers ● Other
- 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
- 7. 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 won't go away. *Source: MobiThinking.com
- 8. 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: http://www.the-haystack.com/2011/01/07/there-is-no-mobile-web/
- 9. Four Practical Strategies ● Do Nothing (but get rid of Flash) ● Create/use a separate template for mobile ● Native mobile app ● Responsive web design
- 10. Do Nothing (But Get Rid of Flash) ● Good news! You don't 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!
- 11. Do Nothing (But Get Rid of Flash) ● Pros ● Cons ● Easy ● Mobile experience not ● Free optimized ● Possible negative perception of your brand
- 12. Create/Use a Separate Mobile Template Source: TapTheme.com and MobileJoomla.com
- 13. Create/Use a Separate Mobile Template ● TapTheme.com ● MobileJoomla.com ● RocketTheme.com – 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
- 14. 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 ● BrowserStack.com
- 15. 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
- 16. Native Mobile App Source: WacoFork.com
- 17. Native Mobile App ● Yes, Joomla can serve data to a native mobile app ● Requires custom API development ● RelaxAPI.com – REST API for Joomla 1.5 ● Which devices should I target? iOS, Android, Windows Mobile, Tablet, Symbian, etc. ● Development Tools ● Appcelerator Titanium ● PhoneGap
- 18. Native Mobile App ● Pros ● Cons ● Ability to access and ● Expensive use tools in the device ● Rarely necessary ● Brand perception ● Too many devices to target
- 26. 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
- 27. 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) {}
- 28. Responsive Web Design ● Frameworks ● Bootstrap (http://twitter.github.com/bootstrap/) – Baked into Joomla 3.0 ● Skeleton (http://www.getskeleton.com/) ● Foundation (http://foundation.zurb.com/) ● Less Framework (http://lessframework.com/)
- 29. 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
- 30. 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.