mobile joomla stragies & techniques

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


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


Testing Your Mobile TemplatePurchase 1 of each mobile device on the market

Safari for Mac User Agent Setting

BrowserStack.com


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: JoomlaFuture.com




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


/* 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) {}


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/)


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

mobile joomla stragies & techniques

Technology