This is a followup post from an earlier article we wrote about creating an HTML5 Web App out of your Joomla site. Read that post by going here.
Getting your Joomla content into a mobile layout is something that by now you've more than likely figured out how to do. You know how to add in those meta tags to your site to tell Safari and Android Browsers not to allow any horizontal scrolling or zooming. But now you face another problem on the Joomla mobile frontier, mobile navigation with Joomla - dealing with navigation on your mobile device.
Mobile Navigation is a tough nut to crack. Unlike with desktop navigation that has great support for menu-based navigation, including (but not always recommended) "rollover" suckerfish type menus, the mobile experience has some limitations. Even though you can navigate these types of menus with your mobile device, you don't necessarily want too. It's simply not user friendly.
There are a few solutions out there for mobile navigation. When I was working on solving this problem for the Seneca Lake Wine Trail I looked a quite a few different systems, ultimately I decided to use S-GO's mobile template with some adapations.
Since a mobile app should look and feel like "an app" I decided to go with an icon-based homepage. This homepage would be set up with some nice navigation images to drive users into specific content areas. Since Joomla navigation is module driven, I needed to set up a mobile menu and then find a way to create my "icon based" navigation on the homepage, as well as a way to get to that navigation from content pages. All this, while remembering that the available realestate on a mobile device is considerably less than that of a desktop.
In a nutshell, here's the concept behind my solution. I set up a menu in Joomla just for the "mobile site". Even though the app would use all my existing Joomal content, I wanted to direct the user to very specific areas, so a specific mobile-only menu was appropriate. For the menu items I used Joomla's "menu image" paramater to insert the images into the HTML output. Then I created some CSS to lay things out the way I wanted.
On my homepage I needed to only display the icon menu to my users. That was easy enough. I modified the mobile template and added some PHP to see if I was on the homepage, and only publish the module position if that were the case:
PHP Code in Joomla Template:
<?php
$menu = & JSite::getMenu();
if ($menu->getActive() == $menu->getDefault()) :
?>
<div class="home-mobile">
<jdoc:include type="modules" name="mobile-home" />
</div>
That part is all pretty easy. I had a nice homepage with a gorgeous icon based navigation. Then I had to figure out what to do with the content pages. I couldn't just have this menu taking up my precious real estate, so I wanted to find a good way to hide it on content pages, but let users get to it quickly so they could visit other areas of the site.
MooTools would be the answer to solve this problem. I only needed to put the menu in an 'accordion'. Since MooTools comes bundled with Joomla, it would be pretty easy for me to just start using it. I used the MooTools fx.accordion class to set this up:
MooTools / JS Code:
<script type="application/javascript">
window.addEvent('domready', function() {
var accordion = new Fx.Accordion($$('.toggler'),$$('.element'), {
opacity: 0,
display: -1,
alwaysHide: true,
onBackground: function(toggler) { toggler.setStyle('color', '#000'); }
});
});
</script>
This Mootools script does some pretty basic things. It looks for the HTML markup with a .toggler class, and sets it up as accordion. I added some parameters to the accordion to force the accordion to always load on the page as being closed. The "else" part of the PHP code above would be that toggler code, loading my menu as an accordion:
<div id="accordion">
<h3 class="toggler">Menu</h3>
<div class="element">
<jdoc:include type="modules" name="mobile-home" />
</div>
</div>
Now on my content pages, the menu would load in this accordion. This takes up very little real estate and let's my content be readily available to site users, but also keeps the usability focus to allow users to navigate to other areas of the site easily.
I've posted the entire mobile template up on github. This includes all the code that I've showed above. You can download and install this template in Joomla.
Version Notice: This template is for Joomla 1.5.X - It's pretty easy to change up the templateDetails.xml file to make it an installable package on Joomla 2.5.X.
