Creating a Flexible Mobile Redirect

Jun 24, 2011 10:09 am

If you have a website with a mobile version, you probably want visitors on mobile devices to automatically be directed to that version of the site. The Mobile Redirect tag makes this easy by specifying the devices and url to use. However, once a visitor reaches the mobile site, he/she may want to view the normal version of the site instead. Unfortunately, the mobile redirect tag basically locks the visitor into viewing only the mobile version. However, with a little bit of tweaking, you can make this work.

Caveats:

First, these steps assume that you are using either a separate website for your mobile version or some form of virtual site using display types. If you are simply using CSS or JavaScript to change the HTML on the page, as with responsive web design, this technique will not work for you.

Also, you'll need to use your site's Landing page layout for this to work, so if you're already using the Landing page for something else, this tip may not work for you.


The steps:

1. In Green > Layouts > Tags, create a mobile redirect tag with the appropriate devices and URLs.
2. Switch to the Pages tab, edit the Landing page layout and insert the mobile redirect tag at the top of the blank page.
3. Under the tag, add the Home page layout tag. Your landing page layout should look like this:

    [[tag.mobile_redirect]]
    [[page.Home]]

4. Verify that all the links to the homepage of your website point to "index.php?src=" instead of the actual domain. This ensures that as visitors access the main site, that they are sent back to home page of the site instead of the landing page each time.
5. On the mobile version of the site, include a link back to the main site with the url pointing to "index.php?src=". If your mobile site has a different domain, you'll need to include the domain before index.php as well. This link ensures that the visitor is sent back to the non-mobile homepage, which does not contain the mobile redirect tag.

Essentially, you are using the Landing page to redirect a visitor to the mobile site, but this also gives visitors the ability to switch to the main website at any time.

Hope this helps!

Evan