New snippet: isMobile()

[Ruud]

A question at the Dutch forum about detecting mobile browsers inspired me to create this snippet.

After installing the snippet, you can use the function isMobile() in your template, and decide on the result what .css you want to include.
The snippet is a wrapper around the detection script that is made by: Anthony Hand
The latest code (included in the snippet) can be found here: http://code.google.com/p/mobileesp/

I have setup a small website so you can see the snippet in action.
 - http://m.ww3.nl
Don't forget to go to the site with your mobile browser too
A download (version 0.1-experimental) is also available on the same website.

The snippet will not tell you things like screensizes or if javascript can/cannot be used.
Future versions might give a bit more info about the device used (like isIphone, isAndroid, isWindowsMobile) but that will be the max for this snippet.

Have fun with it..
Ruud

[kweitzel]

That is quite some thing ... just checked it with my Blackberry ... cool also, that you made the difference between normal and mobile browser immediately recognisable ...

cheers

Klaus

[tiesy]

tested with my hd2 and opera mobile. it works. Cool!

[snark]

On an iPhone 4 it displays the green layout but with textlines evenly long as THE normal website, is that how it is meant ( I saw THE previewpic and it had à more compact text.

I presume that is something that needs to be done in the css, so that Will be okay,

Great snippet

[Ruud]

The site is meant for proving the phones are detected.. Not for quality CSS on all mobile devices..

Nice to hear the phone is detected.
More "reports" are appreciated..

[Re-Mi]

Ruud,

This is a nice add to WebsiteBaker.

can the snipet also redirect to an other url or page ?

something in the line of if it's a mobile browser then redirect to m.yoururl.com else load yoururl.com (and not just load an other css

I searched the web for some answers, but as i'm not a programmer and i tried some bu they didn't work i'm stuck now.

Kind regards,

Michel

[edit]

laat maar gevonden

if (isMobile()) {
header('Location: http://m.yoururl.com/');
}

[/edit]

[Olli]

very nice idea! thumbs up

[mjm4842]

Thanks Ruud for this very useful Snippet!

While redirecting to a mobile version of the site is a great idea, for small business owners this can mean having to now manage two websites instead of one.

The switching of the CSS can work very well however for more complex layouts, I have found it sometimes easier to switch templates completely.

You can accomplish this by putting the following code into index.php:'

if (isMobile()) {
  require(WB_PATH.'/templates/'.TEMPLATE.'/mobile.php');
} else {
  require(WB_PATH.'/templates/'.TEMPLATE.'/desktop.php');
}

The layout for the mobile version of my site is then created by mobile.php while the desktop version by desktop.php.

By the way, does anyone know where I can find a decent HTML or WebsiteBaker template that look good on mobile devices? Specifically what I am looking for is a layout that looks good on devices like both Blackberries and iPhones without the need to zoom in. Open Source or similar licensing is prefered.

With best regards,

Michael Milette

[Ruud]

Smartphones typically can do anything a normal browser can do (except for Flash).
The trick is not to use a fixed width, and be careful with too many graphics (speed/bandwidth).

Maybe it is a nice idea to publish links here to mobile enhanced WB sites.
Reports about different mobile browsers could help us all in the future.
I will use my Android smartphone to test

[Argos]

By the way, does anyone know where I can find a decent HTML or WebsiteBaker template that look good on mobile devices? Specifically what I am looking for is a layout that looks good on devices like both Blackberries and iPhones without the need to zoom in. Open Source or similar licensing is prefered.

http://themeforest.net/searches?term=mobile&type=files has lots of them for a few bucks each.

[Argos]

Ruud, works great on my Samsung Galaxy S (Android 2.1), thanks!
It would be nice however, to let visitors decide what version to use. So instead of automatically send them to the mobile version, present 2 options: regular site or mobile site. Is that possible to add?

[Ruud]

That should be possible..

Something like: using a codepage to display the "question" if isMobile() is true. Redirect to a homepage if isMobile() is false.
In the template you can test for a GET parameter (index.php?showmobile=1) and set a $_SESSION for the future pages template to use.

Code: (untested) [Select]

<?php
if (isMobile()) {
echo &#39;<a href="/pages/home.php?showmobile=1">Mobile site</a> | <a href="/pages/home.php">Normal site</a>&#39;;
} else {
echo &#39;<a href="/pages/home.php">To the website</a>&#39;;
}
?>
in the template:

Code: (untested) [Select]

<?php 
if (isset($_GET[&#39;showmobile&#39;] && $_GET[&#39;showmobile&#39;] == 1) {
  $_SESSION[&#39;css&#39;] = &#39;mobile.css&#39;;
} elseif (!isset($_SESSION[&#39;css&#39;])) {
  $_SESSION[&#39;css&#39;] = &#39;normal.css&#39;;
}
?>
Link your stylesheet with <?php echo $_SESSION['css']; ?>

[fischstäbchenbrenner]

Thanks for the snippet, seems to work very good.

http://www.ig-jazz.at

If you go to the frontpage, with a mobile you should be redirectd to /mobil/heute.html

How I made it:
The standard pages-directory is /live
I simply copied it as /mobil and ask for $_SERVER['REQUEST_URI'] - if it contains "/mobil/" the template switches.

[Ruud]

Well it is working fine, but when I use my 10" Android tablet to look at the site it is all very minimal.
i.e. the arrows to go forward/backward are very small. I would use bigger images for them.

[Harry P.]

Just checked with Windows PC/Firefox as well as Samsung Galaxy Tab - switching works fine!

[Ruud]

Today the guys from MobileEsp released a new detection script with some improvements.

This is included (plus some extra functionality) in the snippet version 0.2.

Download here

[NorHei]

Hmm ... as far as i remember there is already a mechanism to handle the mobile phone issue:

Code: [Select]

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="handheld.css" type="text/css" media="[b]handheld[/b]" />
<link rel="stylesheet" href="print.css" type="text/css" media="print" />

But to be true i never tested how many mobile phoes support this feature.

It seems that the  Ipohne need some extra line for correct display of css:

Code: [Select]

<link rel="stylesheet" href="stylePhone2.css" type="text/css" media="only screen and (max-device-width: 480px)" />
http://www.mediaevent.de/css/media-type.html

[Ruud]

The problem with the handheld stylesheets is that not all mobile browsers support them.
Some will only load the handheld, some (windows mobile browser) will also load parts of the screen CSS, some will completely ignore the handheld stylesheets.

To know what to do, you could use the snippet to find out more details about the browser

[NorHei]

In other words the basic mechanism isn't relieable at all.
Ok, thats good to know!
Thx a lot.

[jollylama]

Hi,

This mobile version sounds awesome! - sorry for the newbie question.. and I know this is an older post..

but, is there a step-by-step procedure somewhere for me to follow?

I've tried adding the snippet in the header of my template but i can't get it to work. I'm sure i'm missing something.

Thanks!

[Ruud]

http://m.ww3.nl/help

The slider does nothing else than detecting if the visitor is a mobile visitor.
Within the check you can decide to use a different stylesheet, or even load another php template.

Something like:

Code: [Select]

<?php
if (isMobile()) {
  include('mobile.php');
  return;
}
?>
(in the top of your template index.php) will load movile.php instead of the current index.php

[jollylama]

Awesome. I think i got it! Thanks so much!

[svsanchez]

Hello, thank you for this valuable information. I am trying to test it myself but am a newbie with WB and am getting the following error after including the provided code in the body of my template:

Fatal error: Call to undefined function isMobile() in /home/sanjose/public_html/cms/templates/round/index.php on line 60

I guess that this means that I have to somehow "define" the isMobile function in the head section of my template? How do I do this? Or do I have to install something else? I read on Ruud's opening post that some code was available at a google page, I went there but I got more than 1000 lines of code from a "mdetect.php" file which I don't know what to do with!

Unfortunatelly I don't speak German or Dutch and I couldn't find more information regarding this in the English forum, so help will be greatly appreciated!

Thank you!!!

[Ruud]

First you need to install the addon you can download here
Install it like any other WB module
From that moment on the isMobile() function will work.

[svsanchez]

Ruud, thank you very much for the information, this works BEAUTIFUL!!! I just had some issues figuring out where exactly I had to place the code inside my template, it has to be in the HEAD section