mobile joomla stragies & techniques
TRANSCRIPT
Mobile Joomla Strategies & Techniques
Austin Joomla User GroupOctober 15, 2012
Cory Webbcorywebbmedia.com
www.corywebbmedia.com/chicago2012.pdf
Who am I?
Working with Joomla/Mambo since 2003
Founded Cory Webb Media, LLC in 2008
Author of Beginning Joomla Website Development (Wrox 2009)
Who are you?
Business owners
Designers
Developers
Other
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
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
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/
Four Practical Strategies
Do Nothing (but get rid of Flash)
Create/use a separate template for mobile
Native mobile app
Responsive web design
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 FlashApple won the argument.
Flash is dead.
Long live HTML5!
Do Nothing (But Get Rid of Flash)
ProsEasy
Free
ConsMobile experience not optimized
Possible negative perception of your brand
Create/Use a Separate Mobile Template
Source: TapTheme.com and MobileJoomla.com
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
Create/Use a Separate Mobile Template
Testing Your Mobile TemplatePurchase 1 of each mobile device on the market
Safari for Mac User Agent Setting
BrowserStack.com
Create/Use a Separate Mobile Template
ProsEasy
Relatively inexpensive
Commercial templates and tools available
ConsMore code to manage on your site
Different/more module positions to manage
Templates tend to look pretty standard
More work to make consistent with your brand
Native Mobile App
Source: WacoFork.com
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 ToolsAppcelerator Titanium
PhoneGap
Native Mobile App
ProsAbility to access and use tools in the device
Brand perception
ConsExpensive
Rarely necessary
Too many devices to target
Responsive Web Design
Source: RocketTheme.com
Source: RocketTheme.com
Source: RocketTheme.com
Source: JoomlaFuture.com
Source: JoomlaFuture.com
Source: JoomlaFuture.com
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 DesignsResize your browser
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) {}
Responsive Web Design
FrameworksBootstrap (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/)
Responsive Web Design
ProsConsistent look and feel across all devices
Single code base to manage
Greater focus on structuring content for universal accessibility
Availability of responsive templates
Availability of responsive frameworks
ConsNot as easy to drop into an existing site
Probably requires an overhaul your site design and content structure
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.
Questions?
@corywebb