S-GO Consulting has been approached by several of our very wonderful clients seeking to find ways to take the websites we created for them into the mobile space. We know we're not the only web company using Joomla that have begun to seek out solutions to do this type of implementation.
When we were approached in particular by Morgan Mill Metals, a company that focuses on offering precious metals refining services to create a mobile version of not only their website, but also a very complex gold calculator constructed using the Joomla extension Fabrik, and a lot of custom Javascript based on the MooTools framework.
In short we accomlished this by following these steps:
HTML5 Template:
While there are a lot of great approaches for taking your Joomla site and turning it into an HTML5 web app, to bring in the caclulations needed for our gold calculator we knew an entirely off the shelf approach wouldn't cut the amount of custom work we would have to do. The solution we cooked up was to find a way to create a custom Joomla template, something we've done many times before, but make sure that it is written in HTML5 so that the content in a mobile browser will be formatted correctly.
Turning to Apple's developer resources, there is a great bit of information available on how to do this. The main calls we had to worry about are:
<meta name ="viewport" content="width=device-width">These lines will tell the mobile browser that we want to change the width of the html area to the width of the mobile browser. As long as the rest of our HTML elements have widths that are set to "auto" or 100%, this should scale correctly. The second here will tell the mobile browser that we don't want the user to be able to "zoom" in and out of the page, and that we are showing the content at the appropriate sizes already. This helps us control the user experience and presentation of content much better than the browser is going to be able to do.
Other than that, the other calls we have in our template are going to be pretty typical HTML containers, divs, etc..and the also Joomla's template APIs. These of course are important to load all of the component HTML through to the template.
Click here to see Apple's web app documentation
Sh404sef and Joomla
Once we have a working template that we can install into our Joomla site (read more here), the more tricky part will be finding a way to tell Joomla which template we want to use when someone visits our site. There are a couple ways to do this, but since this site already was using SH404sef (@vdrover), there was no reason to install yet another extension to do this. Typically that means another component we have to keep updated, secured, and we didn't want that. Since SH404sef supports mobile template detection, and allows us to specify which template to use, this was the best method to go with.
Click here to visit Anything-Digital's website
Wep App to Homescreen
At this point we have a working mobile template and it's being used when we visit the site with a mobile device, but there are a couple other tricks we wanted to add. Both iPhone and Android browsers allow the user to save a webpage to the device's "homescreen". This was great because that means we could create something and not have to be bothered with adding an application to iTunes or Android Market.
To make that feature useful, though, we have to tell users it exists - chances are they don't know. I found a great web script created by Matteo Spinelli (@cubiq), a very talented web developer who wrote a very useful javascript file that would do exactly what we needed. I included his JS and CSS files in our template to notify the user of this feature, which will really help our mobile site users.
Click here to visit Matteo's Site
Gorgeous Icon
The last piece of this puzzle to bring things all together is when you add a web app to your homescreen with iPhone or Android, it's always nice to have a really pretty icon for that homescreen. I was thinking I would have to spend some time in Photoshop to cook this up, but another very helpful developer, Michael Flarup (@flarup) at PixelResort.com created a wonderful icon template. A few minutes later I had a gorgeous icon set. The only thing I had to do is add a few more lines to my template to tell iPhone and Android where they were:
<link rel="apple-touch-icon" href="/templates//images/Icon-72.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/templates//images/Icon-72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/templates//images/Icon-114.png" />
Now when I added the web app to my mobile device's homescreen, a goregeous icon comes with it.
Click here to visit Michael's site
Downloads
Since I created a Joomla template that I know some other users will find useful, so I've packaged them to be installed I hope that they're as useful in your future projects as the other talented folks have been towards the projects we take on here at s-go consulting!
