Forward pages to mobile version

[Frenchness]

Dear all.
I manage a website which is not yet responsive. Work is being done but circumstances are slowing it down. It will take half a year or a bit more to change everything.
So I am looking for a solution: is there a way to forward each page to its mobile version in the mean time? The content of the desktop pages will be used although it will be stripped down and reused on the mobile version.
I know this is not an elegant situation or solution but the circumstances are special enough to warrant this anyway. And in the mean time, forces will be joined to work on a responsive website.

[Beverleyh]

I’ve used this in the past, when faced with a similar predicament (the PHP version) http://detectmobilebrowsers.com/ When mobile was detected, I’d substitute in an “m dot” subdomain onto the referring URL. Maybe it will or maybe it won’t suit your setup, but it’s a start.

[Frenchness]

Thank you Beverleyh!

I can’t get this (PHP version) to work though, sigh.
I have a little time today so I continued digging and found something Chris wrote on this page:
https://css-tricks.com/snippets/javascript/redirect-mobile-devices/

This does do the trick but I am already running into a problem: what if a visitor automatically lands on the mobile version but prefers the desktop version? I don’t see a good solution on that page so I will ask a follow-up question on that page and hope an answer will shed light.

Thanks again! Much appreciated!

[Frenchness]

Okay, that page does not remember I am logged in so I will continue here.
The question now is: how can I redirect a page to its mobile version but let the user decide, on that mobile version, if he wants to go back to the desktop version instead (without being automatically redirected to the mobile version).
I hope someone can help :)

[Beverleyh]

You would need to give the user a way to choose – there are 2 ways to go about it;

1. Ask first then redirect to mobile,
2. Redirect to mobile then ask if they want to stay or go back to desktop

The first is probably easier to implement.

So going back to the redirect script I linked to earlier (and you can use any one of the languages they provide, it’s just that I used the PHP version because I was most comfortable with PHP at the time) you could omit the header location redirect part and instead set a variable;

<?php 
$useragent=$_SERVER['HTTP_USER_AGENT']; 
if(preg_match( // regex omitted - go to http://detectmobilebrowsers.com/ to get a copy (the PHP version)
$mob = 1; /* set the $mob variable to '1' when mobile is detected */
?>

Then you could construct a simple linked banner/button in your HTML, maybe as a modal popup/overlay or unobtrusive but obvious bar at the very top of your main site (desktop) pages, and display it only when mobile is detected;

<?php if ($mob == 1){ /* mobile detected */ ?> 
    <!-- HTML for button/link to mobile site -->
<?php } ?> 

The mobile site could then have a “back to desktop” link to allow switching between the two.

To perform option 2 (redirect to mobile then ask if they want to stay or go back to desktop) you would probably need to set a cookie if the user chose the “back to desktop” option, and also write conditions that would nullify the immediate mobile header redirect in the desktop site, if that cookie is detected. The first way is definitely easier.

[Frenchness]

Dear Beverleyh.
I can’t get it to work! This is so strange. I am not a PHP programmer and that is biting me right now. I tried several things to get to the mobile page. But the result is a blank page :( I think I am messing up where I should place the link to the new page. I feel so stupid, I really should learn PHP!

This is what I have so far in the header (I removed that header location redirect part). Your help is tremendously appreciated :)

<?php
$useragent=$_SERVER['HTTP_USER_AGENT'];
if(preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))
?>

<?php 
$useragent=$_SERVER['HTTP_USER_AGENT']; 
if(preg_match( // regex omitted - go to http://detectmobilebrowsers.com/ to get a copy (the PHP version)
$mob = 1; /* set the $mob variable to '1' when mobile is detected */
?>

In the body, I added simple text in the PHP, just to see if it works.

<?php if ($mob == 1){ /* mobile detected */ ?> 
    WANT MOBILE WEBPAGE?
<?php } ?> 

So er… sigh… and help!

[Beverleyh]

You have too much PHP going on in the header – please refer to my previous post. Only include the code ONCE, right at the top of your web pages. Before anything else, inc. spaces. Example;

<?php 
$useragent=$_SERVER['HTTP_USER_AGENT']; 
if(preg_match( // regex omitted - go to http://detectmobilebrowsers.com/ to get a copy (the PHP version)
$mob = 1; /* set the $mob variable to '1' when mobile is detected */
?>

You will need to copy the regex and paste it where indicated to complete the code block – just the regex and not any duplicate code. Unfortunately I’m on vacation until 1st August and stuck on mobile, so I can’t include the full regex cos it’s killing my phone browser.

[Frenchness]

Hi Beverleyh.
I understand! I did several things to try to get this working. I suppose I am confused about the regex. I did download the PHP version which is what you see in the first block of code. I pasted it immediately at the top of the page.
I then removed it and replaced it with what you suggested. But still no joy.
I don’t understand what is wrong.
I do understand how important holidays are though :)
So would it be better for you to simply wait until you’re back?

[Author]

Posts