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.
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
6.
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
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
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.