Using Contao for Mobile

I'm surprised, I haven't seen much activity in the forums about using Contao on mobile devices. I have a few websites running Contao and I'm interested in developing their mobile counterparts. Now that TL 2.9 has the Theme management, this seems to be a lot easier. My big concern is, I would like to use the same content I'm showing on my website on my mobile site. This way, a change in one place would change the other.

I have currently set up my mobile site as follows:
- Created a second web route and applied the domain name http://www.mydomain.mobi. With this, I can use Thyon's redirect module to detect if someone is using a mobile device and redirect them to the mobile domain name.

- Then Created all of my mobile site structure pages under my new mobile route. These pages would be named the same and use the same alias as my regular pages.

so regular site about page: http://www.mydomain.com/about.html
mobile site about page: http://www.mydomain.mobi/about.html

The Articles would be made and instead of creating new articles. I want these to reference the original ones so a change in one place would change in both. I did this by setting up the "Article Alias" element types. In some cases using the entire article alias wouldn't work, so I setup individual "Content Alias" element types. Either way, these are referencing the original site so changes can be made to both.

- Created a new theme/css/modules/templates to accommodate how the information will be shown differently on my mobile site. For instance, I have Left navigation on my regular website which wouldn't work on my mobile site. So I put the navigation into a drop down by changing the nav_default.tpl file.

This setup seems to be working for the most part, but there are still issues:
- The biggest downfall is you have to create two versions of your pages. This isn't the end of the world for me personally, but it is going to be a challenge trying to teach my clients how to make a new page on their regular website, add content to the page and then make a duplicate page on the mobile site and make sure they alias it correctly.

- Image sizes are the same size on both sites. So if I have an image that's 500 px wide, it breaks my 320 px mobile version. I'm still trying to decide what the best approach is for this but I think it would be setting up a script that says if there's an image over "x wide", convert it to "320px wide". I've noticed this also applies to form fields.

- News Readers, Calendar Readers, FAQ Readers, etc. have issues when jumping from the list to the reader with the "read more". Basically, because you setup the News Reader Jump to page at the news level, you cannot use the same news for both sites by default. We have currently built a module that overrides this however. It's not production ready but the basic idea is you are allowed to set a second redirect to the jump to page depending on a specific domain name. So we set it up so that "www.mydomain.mobi/news.html" can go to a different jump to page than "www.mydomain.com/news.html".

I was wondering if anyone had other ways to setup a mobile site in Contao? I am currently looking into ways to set up a second site without setting up a second route page and duplicating the site structure and articles.

I look forward to hearing what other people are doing

Justin

Hey Justin-

I have a feeling that doing it via a combo of CSS and using some Contao page-generation Hooks is the easiest solution. I am working on a mobile extension right now for a client so I will keep you posted on the progress...

With the extension "browsercss" for example you are able to detect some of the major mobile devices and operating systems (adds CSS classes to the body HTML element). That said, you can deliver therewith the proper CSS rules accordingly.

Thanks xchs! I think you saved me some work! :lol:

Hi Blair, I was wondering if how your mobile extension came out and if you had any more insight into working with TL with a mobile site.

Hey Justin-

Still have some work to do on it, but if you want a sneak peek, here's the link to view in both mobile and regular browsers:

http://new.themusicemporium.com

My approach is to have a separate MobileTemplate class that will use the BrowserDetection plugin to switch between normal and mobile templates depending on if it detects a mobile platform.

Still a few weeks away, though!

Hi Blair, very nice stuff. Wondering how you're doing the content in particular? The website and the mobile site have the content displayed differently. I'm assuming you've got two different page layouts, each with their own set of stylesheets. Then do you have 1 route website for your main website and another route website for your mobile site?

Or is all the content being driven off the same page? So the homepage for each is using the same site structure page?

Hi Justin-

Right now it is one single page layout... Nothing separate except for some CSS. My intent is to include a few additional options in each page layout to 1) select which modules you want to use for mobile display (and in which order), 2) select mobile stylesheets, and then create a separate templates folder (mobiletemplates) when you can override default templates with mobile versions. These mobile templates & modules will get selected automatically when the system detects a mobile browser, and if there is not one it will default back to the core or custom template for the regular site.

As always, I am trying to find a way to do it as a simple drop-in extension and not have to modify anything in the core. I may need to ask Leo for an additional hook but I am confident that it can be done with little else.

What I don't want is ANY duplication of pages, content, or modules, as my clients would kill me if that was the case. The intent is to just re-specify what you already have for mobile viewing.

Ok, I see what you're saying now. I think that's a great plan and agree with you that my clients wouldn't like that extra step and probably wouldn't be able to alias a page correctly anyway.

Interesting approach to keep the page layout the same and have the mobile modules/elements together. I'm interested to see how that would work.

But, I could also see it working with two page layouts and assigning them to the same page so that one layout shows for regular site and another for mobile.

Good stuff, and thanks for your comments. They've been really helpful in thinking about how I'm going to tackle mobile on Contao.

We'll see if Contao 2.10 helps to relieve some of this stress

I'm trying to do a similar thing but I can't find the redirect module to redirect mobile devices to the right site. Does anybody know where can I find it? thanks.

Redirect Extension by Thyon: http://www.contao.org/extension-list/vi ... 19.en.html

Browser/browser version redirect: Allows visitors from eg. iPhone or Internet Explorer 6 to be redirected to a specific page (can be done just once using a cookie)

SSL Redirect: This is the SSL redirect module by Eric Bartels. Redirect a user if he's not visiting the encrypted version of your website.

Non-SSL Redirect: This is the opposite, redirecting users to the non-ssl version of your website.
Login Redirect: Redirect users if they are logged in. You can use this to prevent access to certain sites (registration page, for example).

Language Redirect: This module works together with the changelanguage extension. It redirects the visitor to the page matching the language he selected in his member profile.

FYI - I'll have my mobilecore extension ready to go this weekend. Gotta put in code to support <2.9 because I've been building with 2.10 using the new $ua-> feature, but I want to build in support for 2.9 with the Browser class.

I have the near final version ready here:

http://new.themusicemporium.com

You can see it is selectively loading modules, JS & style-sheets based on the user-agent. Made it really easy to develop a mobile site without replicating content. I also will have my mobilenavigation extension that creates the iPhone-style menus as well.

Pretty excited about this since I got into it. Definitely the next wave of web design.

Just posted two extensions that I used for the above project. Feedback and suggestions are welcome!

http://www.contao.org/extension-list...gation.en.html
http://www.contao.org/extension-list...lecore.en.html

Quote:

---

Originally Posted by winanscreative

Just posted two extensions that I used for the above project. Feedback and suggestions are welcome!

---

Thanks
I will test these extensions

I've upgraded to Contao 2.10 and am excited about using MobileCore. As it was mentioned that 2.10 was in mind during development I thought I'd try it out even though it wasn't listed as compatible. When I installed it it also installed browserdetection, and things seemed to work OK initially (I admit I didn't have much chance to test things very well though). However I found that when the regular page loaded I had a warning about browserdetection being obsolete for 2.10. I found that after removing browserdetection, MobileCore broke, so I removed that as well and am back to square 1.

Is there a way to get MobileCore installed safely on 2.10 using the features of 2.10? I figure that at some point MobileCore will be updated to be formally compatible with 2.10 but I don't know how long that might take. I'm willing to get my hands dirty getting it to work as long as I can count on the extension manager being able to upgrade it when it become officially compatible. Any suggestions?

I haven't checked browserdetection yet but I noticed when I installed 2.10 with old extensions, I got a notice about the tpl files needing to be changed to xhtml. Did you try that for browserdetection? That may help

I just posted beta2 which is 2.10+ compatible only. I did it quickly so I will take some time to review it tomorrow and make any updates, but hopefully this clears up the pre 2.10 issues... I think Justin is right in that it is only the templates. Will keep you posted!

Thanks for the update. I have installed it and now and can go about learning how to implement it. Thanks again!!