Joomla! goes iPhone

Written by Wolfgang Disch Tuesday, 17 November 2009 11:26

iphone The way a website should look and behave in a mobile device is significantly different than how it does on a PC display. According to the principle "Write Once, Publish Everywhere" we don’t want to force users to maintain multiple copies of every page. That would be disgustingly inefficient, particulary for a site based on Joomla!

I want to present you a proposal which is based on a template and on a module which shows arcticles from your Joomla! website.

The template itself is made up of iPhone-optimized code including the iUI-Library of Joe Hewitt.This library helps the website to emulate a native iPhone App by using Javascript and CSS. Its goal is simply to turn ordinary standards-based HTML into a polished, usable interface that maps to iPhone interface conventions. You know from standard Apps the sliding pages, a header with Back-button and a menu, which is able to reload items using AJAX.

The big advantage is to load several iPhone pages at the same time so you have no delay when you navigate from page to page. This gives you a better useability especially when you are using EDGE connections. With not more than 16k the template is lightweight and fast.

And how to use the template?

The template "iPhone-One" contains no content area (jdoc:include type="component") and only one single module position (jdoc:include type="modules" name="iphone" style="raw"). And here comes the role of the module mod_iphone_article :

The module fetches all articles of a selected category, builds up the iPhone menu and renders all articles into one HTML page, which is sent to the device.

Now we need an URL to browse to with our phone. For this purpose we create a menu item which shows any content (actually it is not displayed). Afterwards you can choose "Extensions | Templates" and assign the template "iPhone One" to the just now created menu item. Now you may navigate to the new URL. A small demo you see on http://www.dinovis.de/index.php/iphone. You may assign this URL to the Home-Display of your iPhone (with your own icon) and you have created an iPhone web app.

The template and the module you can download here.

The template and the module is in an experimental stage. Many improvements and extensions are possible. I'm expecting your suggestions and proposals.

Have fun with iPhone-One!

About the author Wolfgang Disch

Wolfgang is a seasoned IT professional working long years as head of software development and member of the executive team of a mobile phone distribution company. In these years he perceived the change from desktop software to web based applications. His vision is to support people with useful internet based services on mobile handsets which are easily available wherever they are.

More about Wolfgang Disch

There are 7 comments posted.

# 1 - Posted by: Kuneri on 2009-11-17 13:41:38

Hi there,

That's an interesting approach. We use a similar approach with Mobile Joomla! Did you have any chance to take a look at the site with your iPhone? Do you have any comments?

http://mobilejoomla.com

Thanks!

Re: Nothing in Joomla works 100%

# 2 - Posted by: Thomas Scibilia on 2009-11-17 20:23:33

All i want is a mobile site similar to wordpress' fantastic plugin "WPtouch" by www.bravenewcode.com

i tried this and i don't like it. The end result is not all of my links are working. actually every time i refresh the mobile page only one of the category links actually work. http://www.pisigmachi.com/mobile.html (disregard the wibiya toolbar or use firebug to turn it off).

in my tests i used http://detectmobilebrowsers.mobi/ to automatically redirect my mobile browsers to the .../mobile.html link above (but i disabled it because i dont like all these workarounds.) Wordpress is so user friendly and seamless. Why can't joomla be this way.

See my personal site http://www.thomasscibilia.com

Re: dinovis.de: comments do not work!

# 3 - Posted by: Jo on 2009-12-01 16:29:57

Hallo Wolfgang,

Bin nach vieler Suche nach iPhone-output für Joomla zu dieser Seite gekommen und versuche es nun hinzubekommen, bisher mit mässigem Erfolg: siehe http://www.eyezberg.com/en/iphone.html

Vorgehensweise: upload Modul & Template, Modul published und Kategorie ausgewählt (diese: http://www.eyezberg.com/en/iphone-apps-tutorials-downloads-reviews/41-news-iphone.html ), dann neuen Eintrag "iphone" (access = public) im User Menu angelegt, diesem das Template zugewiesen. Hatte da erst eine Kategorie Blog, jetzt einen Artikel als Menütyp, aber irgendwas klappt noch nicht - dankbar für jede Hilfe, sobald das funktioniert, gibt's ne französische Übersetzung ;-)

Schönen Gruss aus Frankreich

Jochen aka eyezberg

Re: Progress!

# 4 - Posted by: Jo on 2009-12-01 16:41:29

Ok: teilweise gelöst: es fehlte der Hinweis, das Modul in die "iphone" Position zu publishen!

Jetzt kommen zwar Artikel, aber zu viele (auch von Dir, oder sind die hardcoded?), und die header sind nicht verkinkt..?

Teste weiter, schönen Gruss

Re: Update

# 5 - Posted by: Wolfgang on 2009-12-04 13:46:20

I updated the template and the module. Notice: After installing both 1) you need to create a (invisible) menu item, to which you assign the template. 2) do not forget to publish the module at the template position iphone and assign a category to it. Download it at my download area.Have fun!

Re: dinovis box

# 6 - Posted by: Guy on 2009-12-14 03:45:27

Hi, thanks for the great template and module. Works fine. But how do I change this green dinovis box?

Re: dinovis box

# 7 - Posted by: Wolfgang on 2009-12-15 15:57:48

Article-module: Inside the template default.php you will find a div tag for the box, which you can remove. The left margin you may change by adapting the css-style in template.css (template iPhone One)

Help for creating beautiful comments.

It's Friday - what a day to visit jfoobar!