Mobile support

Mobile support, a forum discussion on Jojo CMS. Join us for more discussions on Mobile support on our General Discussion forum.

Back to Forum Index : Back to General Discussion   RSS
Harvey

Core Developer

Harvey

17 Aug 2012
Posts: 327

Hi Everyone,

I have been busy adding core support for mobile sites into Jojo recently. This is currently on a branch in the git repo while I finalise things, but this will become part of the core.

The idea is that it should become relatively straightforward to make a mobile version of your site, and as more mobile templates become available for core plugins, it should get easier still.

I'm aware there are lots of different ways of doing mobile sites. This implementation was one which I feel fits with Jojo best, gives fine control to those that want it, but also makes it easy for people that just want something quick and ready. In this context, "mobile" means iPhone / Android and other smartphones. iPad is not considered mobile - my experience is that the desktop version of a site looks better on iPad anyway.

The test site is http://peek.ragepank.com (which will move soon to http://www.peek.co.nz). Note the product hire section in particular which runs on custom templates, each template now with a mobile version.

The base concept is that Jojo will sniff the browser and serve a different template to mobile users. There is no special mobile subdomain, it's the same URL being served with different templates. In every plugin and theme, you can now include a .mob.tpl file extension for your templates. So if you have blog_index.tpl, you create blog_index.mob.tpl in the same folder and Jojo will use that template for mobile users if it exists. If there is no .mob.tpl, then Jojo serves the .tpl for all users.

Essentially the .mob.tpl templates are the same as the regular templates, but with most of the surplus crap removed. Any CSS that you want to apply to the mobile version goes in mobile.css.

You would start the process by completing your desktop version of the website, then making a copy of template.tpl and saving it as template.mob.tpl. Then clean out the sidebars/copyright statements/rotating header images and extra elements you don't need. You may want to make more use of includes inside templates so that common blocks of code can be shared by both desktop and mobile versions. If your site has other templates used for custom plugins etc, you might want to create .mob.tpl versions of those too. The site I'm working on uses jojo_contact and the contact form looked bad by default, so I had to create jojo_contact.mob.tpl with a few tweaks and commit that back to core. So next time someone needs a mobile contact plugin, it's sorted. Over time I'm hoping the key plugins will be mobilised by one person or another, so I'm encouraging people to start to use this feature and create mobile versions of templates as part of the plugin development process.

My goal is to make it possible to do a quick and basic mobile conversion to a medium-sized site in an hour, or a more comprehensive implementation in 3-4 hours. Once you get into the swing of things it's pretty fast to modify the templates, removing content is a fair bit easier than creating it.

I'll put together some docs when I finish the work and merge with the master branch, but this is just a heads-up to let you know the direction I'm going in with this.
Rick Rick

17 Aug 2012
Posts: 336

Nice! Responsive stylesheets were good but being able to do mobile templates and take out all the peripheral stuff is fantastic. Thanks Harvey!
Jaijaz Jaijaz

26 Aug 2012
Posts: 215

I look forward to playing with this. With all the different ways of doing mobile, this is my preference and Jojo is very well suited to this approach. MikeC started some work on this just before he left GH but I don't think it ever went anywhere. However since then over the last couple of years, I have had a few questions/concerns with this approach to mobile.

The first theoretical (I've not tested it) concern I have had with this is caching. Telecom NZ for example heavily cache everything and I'm concerned that a mobile version of the HTML file might get served to non-mobile user. My testing with Harvey's Peek site doesn't appear to play this out but I am with Vodafone. Has anyone done any Telecom testing?

2nd concern is maintenance of the UA sniffing list. In the Javascript world UA sniffing is very much on the outer with feature detection the preferred option. One of the biggest reasons is keeping up with the ever expanding list of UA's. As per Harvey's code comments, I agree that using an external project with a bigger community to maintain this list might be a better idea.

Having built several responsive sites now with the bootstrap branch, the extra time involved is about the same as mentioned by Harvey. I am however currently plotting a perfect mix of both this UA detection and responsive solution for a site I will be working on soon.

Actually (sorry thinking out loud now), using this isMobile method in relation to images could be a great solution to the current "responsive images" problems. And to loading (or not) certain JS libs too.

Thanks for the good work Harvey.
If you not living on the edge you taking up too much space.
Back to Forum Index : Back to General Discussion   RSS
You must be logged in to post a reply



You need to Register or Log In before posting on these forums.