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.

1. Mobile Joomla Strategies & Techniques
Austin Joomla User Group
October 15, 2012
Cory Webb
corywebbmedia.com

2. www.corywebbmedia.com/chicago2012.pdf

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

19. Responsive Web Design

20. Source: RocketTheme.com

21. Source: RocketTheme.com

22. Source: RocketTheme.com

23. Source: JoomlaFuture.com

24. Source: JoomlaFuture.com

25. Source: JoomlaFuture.com

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.

31. Questions?
@corywebb