Create Elxis template for mobiles.

[Gashnark]

Hi there!
Do you know, how can I implement a templete for mobiles in my site?
I mean to make it run when some people get in to the site.
I'm thinking to use som sub domain (m.test.com or something like that) and use mode redirect to get the mobile devices there.
The question is if I have to install another instance of elxis and use the same DB.
If yes, how can i force elxis to use the Mobile template when someone is in the "m" subdomain?
Any ideas.
Do you think this is the correct way to do that?

[rentasite]

Surely it can't be the same instance of Elxis. So if you want to use a subdomain for the "mobile version" of your site, all you have to do is assign the template you want as Default.

[Gashnark]

But how can I assign a different template, using the same Database?
Do I have to modify the index.php file to force the use of one template?

[datahell]

If I was you I would nt create a different site especially for the mobile devices.

If you want to automatically detect mobile devices you have first to create a script that will detect such devices. If you search on the internet I am quite sure that you will find some. You can do what you want using many ways. I will show you how to do it with, I believe the easiest way.

Instead of creating 2 different templates or, even worst, 2 different sites, we will give your site's template the option to look differently on mobile devices. It would be like having 2 templates in one.

Put on your template's index.php the mobile devices detection script. If the script detect a mobile device then instead of loading the standard css, images, html, etc, it will load different css files, images, and layout. You can separate these 2 layouts by splitting them into different template files.

Let's see your index.php file:

<?php
function detectmobile() {
    //returns true if the visitor is a mobile phone or false
}

if (detectmobile() === true) {
   include('mobile.php');
} else {
   include('standard.php');
}
?>

That's all the code on index.php, nothing else!
standard.php will contain your Elxis standard template (at on the old index.php).
mobile.php will contain the special layout for the mobile devices (no loading of editor, no fancy javascript, no huge images, etc).

If you dont want to detect automatically mobile devices you can just put a link into the standard layout for the mobile devices. Is this case instead of the detection function you should check the value of a GET parameter (set a SESSION after the first click). Example:

<?php
if (isset($_GET['ismobile']) || isset($_SESSION['ismobile'])) {
   if (!isset($_SESSION['ismobile'])) { $_SESSION['ismobile'] = 1; }
   include('mobile.php');
} else {
   include('standard.php');
}
?>


mytemplate/
    - index.php
    - standard.php
    - mobile.php
    - css/template_css.css (css for the standard layout)
    - css/template_mobile.css (css for the mobile layout)
    .......

[ks-net]

(datahell types much more quickly than me )

I don't think that this is the correct the way, the one that you discussing above..  unless you want a completely different layout for mobile which i do not recommend at all.

so  you haven't to change a tpl or index file...or  the domain to subdomain...  remember that 2 files means you have to follow up whit any changes in future twice.. not very practical.

css is enough or to say the trough is the only you have to do.

**********
stylesheet for handheld devices is important and viewport meta tag(opera mobile only)
<link rel="stylesheet" href="handheldstyle.css" type="text/css" media="handheld" />
<meta name = "viewport" content = "width = device-width, height = device-height" />  *..see more info below
*********

or(and) css and conditional statements :
<!--[if IEMob ]><link href="stylesheets/iemobile.css" media="screen" rel="stylesheet" type="text/css" /> <![endif]-->
<!--[if safMob]><link href="stylesheets/safmobi.css" media="screen" rel="stylesheet" type="text/css" /> <![endif]-->


Read also:
http://www.w3.org/Mobile/Specifications
http://en.wikipedia.org/wiki/Conditional_comment
http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx
http://en.wikipedia.org/wiki/Mobile_browser#Popular_mobile_browsers
http://dev.opera.com/articles/view/opera-mobile-9-5-the-developer-angle/   *

[Gashnark]

Thanks datahell, I try that using an Iphone user-agent, and it dont work :S also I try with a Blackberry and the result is the same.

Let's see your index.php file:

<?php
function detectmobile() {
    //returns true if the visitor is a mobile phone or false
}

if (detectmobile() === true) {
   include('mobile.php');
} else {
   include('standard.php');
}
?>

first I try with this lines at the beggining of my php file

Code:

<?php 
/**
* Some comments
* Elxis CMS is a Free Software
*/
defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );?>

but as I say it don't work.
Then I try without that lines, and still not working. Do I have to add something else?

(datahell types much more quickly than me )

I don't think that this is the correct the way, the one that you discussing above..  unless you want a completely different layout for mobile which i do not recommend at all.

so  you haven't to change a tpl or index file...or  the domain to subdomain...  remember that 2 files means you have to follow up whit any changes in future twice.. not very practical.

I know that I have to modify the things separately but, in this case is the better way, because I can exclude some divs from the template, and if I use CSS for changing the template, the page load all for both versions.
I want to exclude a lot of things on my mobile template for make run the page faster on mobiles.
Thanks for your answers =)

[Gashnark]

Thanks datahell, I try that using an Iphone user-agent, and it dont work :S also I try with a Blackberry and the result is the same.

Hi again, I get in count that I have to include the script wich detects if device is or not a mobile.

If someone is interested to know which Script did I use. There's one on the detectmobilebrowsers.mobi/ site.
I just change the name of the if conditional to make it work.
eg.

Code:

if (mobile_device_detect() === true) {
   include('mobile.php');
} else {
   include('standard.php');
}

[datahell]

Thanks datahell, I try that using an Iphone user-agent, and it dont work :S also I try with a Blackberry and the result is the same.........

Yes, because my function is empty! You have to create that function.
I see that you found a mobile device detection function so, I think you are or the right way.

@ks-net: I know that this can be done with the index.php template file but if you use 2 separate files it will be more clearer and less messy. Especially for non too experienced users. Portable devices require different headers, css, layout, etc. iPhone, iPod and such devices although they are mobile devices they have web browser (safari) integrated and they do not require special template but if you create a special template it will be much more easier to navigate to these sites with your hand held device. People having iphone/ipod will surely understand what I am talking about.

It would be nice if we created a sample template with this functionality or write some documentation on Elxis wiki when we finally find the best solution for this implementation.

[ks-net]

No... i didn't say that this way must be left aside, it is useful ... to explain better:

mobile browsers actually  working with same engine as desktop ones... safmobile iemobile operamobile and firefoxmobile(soon)
i think that we can face them as we face different desktop browsers till now... with conditional comments....and first off all with this type of stylesheet:
<link rel="stylesheet" href="handheldstyle.css" type="text/css" media="handheld" />

my experience with multiply tpls on one site is not the best... it is more annoying than practical... thats why i prefer to avoid this solution.

wap, webkit browsers is the ones that require a different layout(and probably headers) as they have limitations and needs special design.... but i don't know if worth to look them as they seems to be old-fashion(i think).

At the other hand it would be very useful not only for mobile devices but in many other cases, to have a function that will detect browsers.
If this can implement completely with php would be nice... is this possible?

such a function will help to build for example bots that will will make telephone numbers  links  click-to-call when a mobile browser is detected etc...

One is sure that we will work with mobile devices... we can not avoid it... users that uses mobile for browsing the Internet increasing day from day.

It would be nice if we created a sample template with this functionality or write some documentation on Elxis wiki when we finally find the best solution for this implementation.

i have already thought of this.. the only problem is that  i missing an iphone to test results,
As for the sample template..  my first thought was that this way must be(next-elxis-version) builded  elxis default tpl that will be not only compatible with mobile devices but will have all latest elxis characteristics.. xml parameters, collapsible columns etc..

Ps I will start testing this :
<link rel="stylesheet" href="handheldstyle.css" type="text/css" media="handheld" />
then javascript to force loading  different css .. but i will prefer php to do all the work, if this is possible.(?)

[datahell]

iPhone/iPod shows web sites exactly as you see them at any desktop computer...

[Gashnark]

At the other hand it would be very useful not only for mobile devices but in many other cases, to have a function that will detect browsers.
If this can implement completely with php would be nice... is this possible?

I think that's possible with part of the same script that I'm using but the only thing is that if you want to detect different browsers, and do different things for each browser, you have to enrich the code of that script. (found on detectmobilebrowsers.mobi/)

i have already thought of this.. the only problem is that  i missing an iphone to test results,
As for the sample template..  my first thought was that this way must be(next-elxis-version) builded  elxis default tpl that will be not only compatible with mobile devices but will have all latest elxis characteristics.. xml parameters, collapsible columns etc..

You could try an emulator I found one in mtld.mobi/emulator.php
An Iphone emulator iphonetester.com/ (it uses your User-Agent to watch the pages)

Ps I will start testing this :
<link rel="stylesheet" href="handheldstyle.css" type="text/css" media="handheld" />
then javascript to force loading  different css .. but i will prefer php to do all the work, if this is possible.(?)

As I said, the script that I'm using detects fine the mobile devices.

If someone wants to see my mobile template over Elxis in action just go to micra.com.mx/core/ (using a mobile device or changing the user agent header)

It's not working very fine on mobiles, but at least the page loads a different template if you are on a mobile {you can use "modify headers" on firefox to change your browser header to a mobile one (Iphone User-Agent Header: "HTTP_USER_AGENT=Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.1 Mobile/1C25 Safari/419.3")}

[rentasite]

iPhone Simulator
http://www.testiphone.com

or

iPhoney 1.2
http://www.marketcircle.com/iphoney/

[Coursar]

Opera mini simulator

http://www.opera.com/mini/demo/