The Joomla! ® Community Magazine

Download

Demo

Issue 2013 January > Sitebuilders, English

Mobilize Joomla!‎

Written by Ali Safaie | Tuesday, 01 January 2013 00:00 | Published in 2013 January
In 2013 there will be more mobile devices capable of accessing the web than there will be computers. How do you present your Joomla!  website to your users accessing it from their mobile devices? A Mobile website is a website which has been optimized to work in a mobile browser. Using a mobile phone web browser one can directly access these websites. Mobile devices have unpredictable screen sizes and the speed of the internet connection can be low. The loading of images can take longer. This article will describe different approaches to mobilizing your Joomla! website.
Mobilize Joomla!‎

Separate Mobile Website

The mobile version is a totally independent website with another URL, mostly using the subdomain "m.". Using some Joomla extensions it is possible to use your existing content to create a separate mobile version.

The top internet brands like Google, Facebook and Yahoo use separate mobile solutions - quite simply, for the speed. It has been found out in studies that the average mobile user is only willing to wait a maximum of four seconds for content to load on their devices.

Most of those sites would perform 100-400% faster on mobile by using a separate mobile solution.

Mobile Joomla

Switching a website from desktop mode to mobile mode is not hard with Joomla, thanks to the tiny but useful component Mobile Joomla. One of the most popular components in the Joomla Extensios Directory (JED), Mobile Joomla features many customization options you can tweak to ensure that your mobile visitors will have an enjoyable browsing experience on your website.

The most important feature of Mobile Joomla is probably its stability and simplicity. Mobile Joomla is easy to implement, and really does what it claims.

Mobile Joomla significant features include:

  • User agent detection system through multiple methods, including WURFL;
  • Flexible layout settings;
  • Support for custom themes and modules;
  • iPhone, iMode, Wap, and XHTML device categorization.

Jtouch

Jtouch Mobile is not just a template, it is a solution to mobilize your Joomla 1.5 & 2.5 website. designed to help mobilizing Joomla! websites is easy as 1-2-3! Its aim is to bring a better view and interaction for your website on most modern smartphones like iPhone/iPad, Android, Windows Phone, BlackBerry...

Jtouch is free and Open Source. No encoded script, no back-track - it's all open!

Responsive Web Design

Jtouch specializes in targeting mobile screens, and helps your website look more beautiful and attractive on mobile.

Supports Most Major Platforms

Jtouch works really well on iPhone, Android, Window Phone and many other OS's like BlackBerry, Meego, Tizen and FirefoxOS...

Easy to Customize

Jtouch adapts Themeroller for jQueryMobile. You can drag and drop colors and then download a custom theme. It only takes about 5 minutes to make your theme like no others.

Auto Detects

Clients are browsing your page on various types of smartphones. Don't ask them tap on a link to display your mobile site! Jtouch can detect and It is smart enough to switch your website from desktop to mobile template, automatically!

Responsive Webdesign

Responsive Web Design tries to adapt the layout to the viewing environment, and probably also uses flexible images.

Responsive design usually reacts to four kinds of screens: the widescreen desktop monitor; the smaller desktop (or laptop); the tablet; and the mobile phone.

Responsive design works by using @media queries to identify the size of the device screen and presents a layout based on that size.

Joomla Responsive Design

According to Google Trends, “Joomla Responsive” is catching up very quickly From October 2011.

 

Joomla Responsive vs. Joomla Mobile

mobilizeJoomla 

 

 

 

 

 

 

 

 

 

Responsive Joomla Templates

Test your website

Take a look at different websites and see how they are dealing with different device sizes.

 Mobile App

Apps are actual applications that are downloaded and installed on your mobile device, rather than being rendered within a browser. The app may pull content and data from the Internet, in similar fashion to a website, or it may download the content so that it can be accessed without an Internet connection.

When Does an App Make Sense?

Despite the many inherent benefits of the mobile web, apps are still very popular, and there are a number of specific use scenarios where an app will be your best choice.  Generally speaking, if you need one of the following, an app makes sense:

  • Interactivity/Gaming – for interactive games (think Angry Birds) an app is almost always going to be your best choice, at least for the foreseeable future.
  • Regular Usage/Personalization – If your target users are going to be using your app in a personalized fashion on a regular basis (think EverNote) then an app provides a great way to do that.
  • Complex Calculations or Reporting – If you need something that will take data and allow you to manipulate it with complex calculations, charts or reports (think banking or investment) an app will help you do that very effectively.
  • Native Functionality or Processing Required - mobile web browsers are getting increasingly good at accessing certain mobile-specific functions such as click-to-call, SMS and GPS. However, if you need to access a user's camera or processing power an app will still do that much more effectivley.
  • No connection required – If you need to provide offline access to content or perform functions without a network/wireless connection then an app makes sense.

Chimoora

Chimoora is a Joomla! client app which brings the features of a Joomla! powered website to mobile devices.

Different operating systems will be supported. The first one will be Android 4 (Ice Cream Sandwich). BlackBerry 10, Windows 8 and iOS are on the radar as well. Chimoora 1.0 will support Blogs (Joomla! featured articles) and Forums (powered by Discussions). The next version will bring Private Messages (Discussions) and Classified Ads (Marketplace).

On the serverside, Chimoora needs a Joomla! API extension which is developed as part of the Chimoora project in parallel. The API extension is a "normal" Joomla! component and is simply installed via the extension manager.

Requirements:

  • Chimoora is an Android 4 (Ice Cream Sandwich) native app and therefore it requires Android 4.x on the mobile device
  • The Joomla! API extension needs Joomla! 2.5 or above to work.

Joooid

Joooid (with three "o") is a free app/extension for Android devices.

Joooid allows you to:

  • create or edit articles, change title, alias, category, status, access level, frontpage and scheduled publishing.
  • create content with the WYSIWYG with html markup and links, in full screen! 
  • add images and galleries using pictures from your device.
  • add youtube videos or share images and videos with Joooid directly from Image Gallery or YouTube App. 
  • geotag articles, embed maps with your current position using GPS/Network or set the map coordinates with the handy map picker. You can also share a location to Joooid directly from the Google Maps application.  

JomMobile

jomMobile allows you to manage your Joomla 1.7 site on the go with your android.
jomMobile allows you to edit many core features of your Joomla site for free!

Feature list:

  • Manage multiple sites
  • Article manager: View/Add/Edit/Delete
  • Category manager: View/Add/Edit/Delete
  • Menu manager: View
  • Menu items: View/Edit/Delete
  • User manager: View/Add/Edit/Delete
  • Manage 3rd party plugins (ie. K2)

You have to install the app and a Joomla component.

Read 16536 times
Tagged under Sitebuilders, English
Ali Safaie

Ali Safaie

I Started Programming With QBasic In 1999. And Started Web Programming with ASP 3.0 In 2005.

And Working As Joomla Developer For Few Years.

Leave a comment

Make sure you enter the (*) required information where indicated.

[b] [i] [u] [s] [url] [quote] [code] [img]   

Comments (15)

  • avatar
    • 1
    • 0
    Chefkoch
    2013-01-02 11:52:11

    Hi Ali,

    thank you for given us an overview about this important topic, as this will be the major issue in 2013 when building or maintaining an existing website(s). And a happy new year!

    Chefkoch

    ReplyQuote
  • avatar
    • 3
    • 0
    Antonio
    2013-01-02 18:09:55

    We also recommend a component to be able to send pictures from your mobile device on your joomla site in one touch:
    JoomPhoto Mobile

    ReplyQuote
  • avatar
    • 3
    • 0
    Ali Safaie
    2013-01-02 21:26:30

    Hi Chefkoch, thanks for your comment. Hopefully it's helpful.
    I wish everyone a Merry Christmas and a very Happy New Year.

    ReplyQuote
  • avatar
    • 1
    • 0
    Optimus Quantium
    2013-01-03 01:45:40

    @Ali Safaie: Thanks for your sharing. I'm using both Mobile Joomla and Jtouch Mobile on my websites. MJ is good for featured phone and JM is very useful for mobile webs (smartphone). They are really great solutions.

    ReplyQuote
  • avatar
    • 1
    • 0
    Watereate
    2013-01-03 03:14:20

    Hi!

    Thanks for your important issue! It's very useful when mobilizing Joomla! website.

    Mobilize a website is not just a responsive design, where the job is just turn on or off some content by css, the full resource is always loaded as desktop version. On mobile device, content doesn't mean everything, we need to have a good loading speed, touch-friendly, and mobile-app-alike UI is a good choice for user experience.

    I like http://www.jtouchmobile.com/ and http://www.mobilejoomla.com/ approach.

    Thanks again and Happy new year!!

    Watereate

    ReplyQuote
  • avatar
    • 6
    • 0
    Giu Tae Kim
    2013-01-04 14:35:12

    Hi Ali. Excellent Article

    I'm catching up with bootstrap and its mobile capabilities... and as far I'm really impressed by responsive designs.

    In a few of weeks I'm coding for sites that adapts for any kind of devices, with beatiful styles and effects via CSS3.

    IMO Responsive designs are an easier, cheaper and more flexible way to create multi-platforms websites.

    Also, Responsive allows to designers to have more control over their own designs, and avoid third party extensions, that honestly most of times don't works as expected, or you have spend a lot of time making it works. And ALL WEB DESIGNERS know this: less extensions possible = better.

    The only cons of Responsive that I can imagine, is the flexible images, I mean heavy images that load in mobiles. But i'm rlly agnostic in this point, cause nowadays Internet bandwith is very powerfull in most of countries and smartphones have more screen resolutions, more res every year.

    Anyway both html5 and css3 are showing more sympathy for the concept of Responsive Designs over other alternatives.

    I know that A mobile app have good points, but for me the future is responsive.

    Regards!

    ReplyQuote
  • avatar
    • 2
    • 1
    Ali Safaie
    2013-01-04 18:49:18

    @Giu Tae Kim : Thanks for your comment.

    Joomla3 is Mobile Ready and Joomla! has become the first major CMS to be mobile ready in both the visitors and administrator areas , so I'd suggest you do not spend a lot of your time for Responsive design in Joomla.

    In this article we intend to offer a cost effective solution for existing web sites.

    Thanks again.

    @Watereate : Thanks for your comment. Hopefully it's helpful.

    @Optimus Quantium : Thanks for your comment. Hopefully it's helpful.

    ReplyQuote
  • avatar
    • 2
    • 0
    Andrew H.
    2013-01-05 05:17:45

    Hi Ali,
    Nice article, thanks. I was suprised to see Weever Apps and other HTML5 web-apps built within Joomla! wasn't mentioned (like Ohahnah, etc.); since the capabilities/benefits of those are so different from native apps. Great to see Joomla! finally going forward with more options, responsive, responsive plus, native, etc, though.

    - Andrew H. (weever)

    ReplyQuote
  • avatar
    • 2
    • 0
    Ali Safaie
    2013-01-06 03:35:42

    Hi Andrew,
    Your apps are excellent, but they not free,Although the price is low.

    ReplyQuote
  • avatar
    • 0
    • 0
    Andrew J. Holden
    2013-01-07 00:01:29

    That's totally fair, thanks Ali. Our team's contributed a lot of time to Joomla over the years, so I was surprised not to see us included, but I can't argue with that criteria.

    We were actually free for the first year or so of BETA and our first releases, but we decided to introduce a low price so we could offer better support.

    Good article again, thanks.

    ReplyQuote
  • avatar
    • 4
    • 0
    Saeed Ghamary
    2013-01-06 15:02:23

    Thank you for your great article
    The world is going mobile, and joomla is moving in this direction, too.
    You have chosen a good topic for your article and I'm glad to see your first article is now the star in this issue and has been appreciated by lead editor.
    I'm Looking forward for your next article and remember that "far and softly goes far".
    Kind regards.
    - Saeed

    ReplyQuote
  • avatar
    • 0
    • 2
    Soheil Novinfard
    2013-01-28 13:49:25

    Hello,

    Great Article with useful concepts and tools.

    Are your motherland Iran?
    ReplyQuote
  • avatar
    • 0
    • 0
    Crood58
    2013-01-31 16:56:20

    This is diffently a growing issue now a days. All of us a using Joomla need to make our sites our client sites available to desktops, laptops, tablets, and phones. I have started on the quest myself and while surfing for a way to make a custom template easy, but also one that would be available on tablets and phones besides computers (desktops and laptops). What I found is Joostrap (here). Using there base template I can style my website to the look and feel I want. The best part is that is based on twitter's bootstrap boilerplate, so it is RESPONSIVE. It seems to work great and you can even hide certain modules on your site depending on what device is viewing it. For example, if I wanted to hide all the modules in the left column of my site. I would edit the module class suffix of each module and add hidden-phone to hide these modules for when a phone is viewing the site, this is all built-in to the bootstrap framework.

    Another nice feature is the ability to have multiple columns in a module position....

    This is worth checking out. Please not there is a subscription for the base template, but I think it is worth. Another note you need to be familiar with CSS to style the base template to fit your color scheme, etc.

    I hope this helps some!

    Chris

    ReplyQuote
  • avatar
    • 0
    • 0
    Jonny
    2013-04-28 09:18:48

    This is a great article. Mobile ist the future, and joomla have to be part of it.

    ReplyQuote
back to top
Support Joomla!