Mobile frendly website to normal website

[maeg]

Hi

I need a littel help!

One of my clients website, is using "Handheld_XH" plugin to detect handheld devices "smartphones - Iphone" It calles then http://mobil/domain.dk. That means that i have to content files to keep updatet. I know i can use a usefunc.php so i only have one content file, but on the mobilefrendly website we only displays the most importen stuf, that why we use to content files..

Now my client wants the opportunity to view the entire website also on mobile devices.
So i want to create a button called "Se full site" that shows the full mainsite in the default template. I can easy do that by creating a new sub-domain ex. mobil2.domain.dk, but that means 3 content files.

Is there a way, where i can tell the website "Now i want the full site - don't redirect me to the mobile site"

I hope you understand my point, and my bad english

[cmb]

Hi maeg,

I read about usability and mobile optimized sites recently on http://www.useit.com/alertbox/mobile-vs-full-sites.html. According to the author it's often very reasonable to build a separate site optimized for mobiles. So two content files make sense. The link to the full site (and back) is very reasonable indeed, but this doesn't require a third content file in this case. A cookie should suffice (see the code below).

But while testing this I found an issue with HandheldXH. I made the mobile site a subsite of the main site (using the subsite feature of CMSimple_XH 1.5.x, which seems quite appropriate, if no second languages are necessary). But this resulted in an endless redirection and my Opera Mobile Emulator 12 didn't stop (other browsers might recognize the infinite redirection). I fixed this in a quick & dirty way, that has to be adapted to the name of the subsite in the following code (the line is marked with a appropriate comment). Just change plugins/handheld/index.php to:

Code: Select all


<?php
/**
 * Handheld CMSimple
 *
 * @author Brett Allen
 * @version 0.2 - 20-08-2011
  **/
/* utf8-marker = äöüß */


if($plugin_cf['handheld']['enable'] == "1"){
    if (isset($_GET['handheld_mode'])) {
        setcookie('handheld_mode', $_GET['handheld_mode'], 0, CMSIMPLE_ROOT);
    }

    if ($sl != 'mobile') { // if you're using a subsite as mobile site, enter it's name here!
        include_once($pth['folder']['plugins'].'handheld/handheld.inc.php');
        handheld();
        include_handheld();

        $dest=$plugin_cf['handheld']['destination'];

        $hjs .= <<<SCRIPT
<script type="text/javascript">
/* <![CDATA[ */
if(!document.cookie.match(/handheld_mode=desktop/) && jQuery.browser.mobile){window.location.replace('$dest');}
(jQuery);
/* ]]> */
</script>
SCRIPT;
    }
}
?>


The links to the "normal" site and the mobile site have to be augmented by ?handheld_mode=desktop/mobile. The mobile link:

Code: Select all

<a href="http://www.example.url?handheld_mode=mobile">Mobile version</a>

The link back to the full version:

Code: Select all

<a href="http://www.example.url?handheld_mode=desktop">Full version</a>

Christoph

[Tata]

Have a look at this: http://cmsimplexh153.cmsimple.sk or at this template: http://www.cmsimple.sk/downloads/flexi_xh.zip. Does this not solve the topic a simple way? Try to open this site with iPAD, iPOD, Handy etc. I do no chance to test ist in all these gadgets. But with my handy it works at least.

[maeg]

Hi

Thx for quick replay, and thx for the template Tata

@Cmb
I can see it work nearly 100%, the only thing that i can't get to work with this solution is, that when i press "Full site" it still use the mobile template.

[cmb]

Hi maeg, hi Tata,

Does this not solve the topic a simple way?

Very good and flexible Template. It works very well, if I set my desktop browser to 480x800. But if I open the page in Opera Mobile Emulator, the divs don't wrap

when i press "Full site" it still use the mobile template

Did you augment the link with ?handheld_mode=desktop ? Can you give a link to the site?

Christoph

[Tata]

But if I open the page in Opera Mobile Emulator, the divs don't wrap

Actually, I have not thought about any Emulators. I simply used a DIV-based template and a stylesheet with a general part and separate specified sections using

Code: Select all

@media screen and (max-width: 1000px) {
...
}
@media screen and (max-width: 650px) {
...
}
@media screen and (max-width: 480px) {
...
}

This way the stylesheet may make the webpage een more flexible. It was a demand from one friend to make a page, which he wanted to use on a conference with about 400 guests for various polls during meetings. His idea was to make it so, that those having iPADs or iPhones would be able to vote using them.
I knew about some scripts for detection of displays resolution/ But I hate scripts which do not belong to CMSimple_XH and I was to lazy to study. So I desided to use the simplest possible way.
The template is of course not perfect and I still have a lot to learn about font-sizes etc. But maybe templater-gurus will find this useful and I learn from their templates then, how to make my things better

[maeg]

Hi

I got it soloved

Works perfect.

Here is the link:
Main website: www.adventure-park.dk
Mobile website: mobil.adventure-park.dk

Thx for the help.

@Tata
It is a very good template, i really like the flexibility in it J

[Tata]

ACtually, the template is almost no designed/ The only I wanted to test is the flexibility. You may try to make your page with this template. Simply look inside and keep in mind, that the picture sizes shall be set by "%". So they will automatically adjust to the monitor width and the height will be calculated. I mentioned above, that I still need to learn more about sizes and dimensions. But the best way is to set font-sizes also by "%" or "em". Or to set fix sizes for particular sections (1000+, 650, 480 etc.).

In stylesheet:

Code: Select all

img {max-width: 100%;height: auto;width: auto;}

in template:

Code: Select all

   <div id="header">
      <img src="<?php echo $pth['folder']['templateimages'];?>header.jpg">
   </div>


[maeg]

Hi

Yes, i'll take a look at it.