A Basic Script to Switch Between Mobile and Desktop Layout

This reader is an attachment to a basic PHP-script to switch between a mobile and desktop version of a webpage. The main target for creating this script was to present a working model that can be used for educational purposes. This way it may become clear how such an approach can be realized and students can experience the main functions that we like to emphasize as important, which are:

it automatically detects what kind of browser a visitor uses;
it presents the appropriate version of the webpage for desktop and mobile;
the automated presented desktop and mobile versions of the webpage will use the same filename (One Web);
the script allows the visitor to overrule this automatically determined choice;
their preference will be stored in a cookie so that at a next visit with the same browser they don’t need to use the switch again;
since this last function cannot be done without redirection there is a canonical link to the main version of the web page present (One Web).

PHP

According the PHP there are two things worth mentioning:

For the use of the script your server needs to support PHP 5.
To keep the script out of the HTML as much as possible for this basic method, you will find the main part of the script in the folder named ‘inc’, where it is split up in two parts: one is the device detection and the other one is responsible for the switch between presentation of the mobile or desktop version of the webpage.

PHP in the HTML page

There is some PHP in the webpages though that, to keep this script simple, can’t be left out of the HTML:

Line 9: if your files are in the rootfolder of your site, $subdir has no value written between the quotation marks, like this ''; else you name the subdir, like so: '/namesubdir' (note it has a slash at the start, BUT NOT AT THE END!). The sample file suggests to name the folder 'switch', this is the value used in it. This is correct as long as the folder is placed in the root and not in a subfolder; else the value should be '/namesubfolder/switch'.
Line 10: $subdir = '/switch'; This is where the name of the folder needs to be changed according to the name of the folder your files are in (according instruction above)
Line 11: $cookie_lifetime = 60*60*24*30; What this means is sec x min x hrs x days = how long (in seconds) must the cookie with the user preference persist? You can edit the value of the lifetime of the cookie by changing the numbers.
Line 26: Then there is the switch for mobile/desktop content that looks like this:
<?php echoSwitch('Desktop Page', 'Mobile Page'); ?>
The content for either desktop or mobile can be placed between the single quotation marks. In the example above on desktop the content will be Desktop Page and on mobile it will be Mobile Page. You can place this PHP code where ever you like in the content of the webpage, just make sure you paste it from the first < up to the close >. Any content outside of this will be shown on both desktop and mobile.
Line 34: Another PHP code begins here that switches desktop/mobile content. If you look closely you will see that the single quotation marks are missing inside the PHP and are replaced with HEREDOC notation. More about this later.

The Content Switch

In the page on line 26 the text Desktop Page will be shown on desktop and Mobile Page on mobile. Any content that you place between the '' in teh code will be show on desktop (the first '') or mobile (the second ''). If you leave one of them empty, nothing will be shown for that version on that spot. Any content that you place outside of the PHP-code will be shown in both versions, desktop and mobile.

This needs some discipline of the author, a small error with the caracters of the code will lead to a failing presentation. Some samples to illustratie how it works:

Part of the content is outside of the PHP code in the following sample, what will cause this content to be present in both desktop and mobile. The word desktop will be filled in in the desktop content and the word mobile in the mobile content:
<p>This page represents the <?php echoSwitch('desktop', 'mobile'); ?>version </p>
There is no mutuel content for desktop and mobile in the following sample, that's why also the HTML tags of the content are placed inside the PHP code. The content part in the PHP code for mobiel remains empty, so that the mobile version will have no content:
<?php echoSwitch('<h1>Sample</h1><p class='test'>You can use HTML tags and attributes here</p>', ''); ?>
Notice the class attribute with the ''. This is the kind of thing you need to be very precise with while placing your content.

Organizing longer text blocks

If you want to place more content in the above samples things may get a bit complex, so you could decide to organize your code like this:

<?php echoSwitch(

  //desktop text:

  '

  <p class="test">Linebreak Test

  To organize this content 
 
  we use line breaks in the text.</p>
', 

  //mobile text:

  '

<p>Notice the PHP comment above that begins with the two slashes, also helpful to organize your code.</p> 
'); ?>

Since the PHP code makes use of single quotation marks 'like this' you will need to make clear that any single quotation mark in the content is not part of the PHP script by placing a backslash right before it. The following sample is a basic PHP sample:

<?php echo 'Tim\'s name'; ?>

On screen you will see 'Tim's name".

This makes the method very vulnerable for working with complex content. If the author makes just one simple mistake with the single quotation marks, or forgets to place a backslash like in the sample right above here, the page goes blank. So the next HEREDOC-notation is more fault-proof:

<?php echoSwitch(

  <<<DESKTOP

  HTML here. Make sure that <<< DESKTOP is written, exactly as in this sample, all alone on it's own rule, followed with the content on the next rule. At the end of the content  "DESKTOP" should be written, also exactly as it is here, all alone on it's own rule.

  DESKTOP

  ,

  <<<MOBILE

  HTML here, same principle as above for desktop, only the word is MOBILE.

  MOBILE

); ?>

There are no more single quotation marks needed for the PHP, they are replaced by <<<DESKTOP and DESKTOP and <<<MOBILE and MOBILE. This way you can really paste blocks of content without the need of checking it for quotation marks to place backslashes before. Nevertheless... still mind the notation of the PHP itself: the comma between the end of DESKTOP and the beginning of MOBILE is part of the script and essential.

By the way: you may use the same HEREDOC notations (that's the name of this method) as many times as you like in one page. So DESKTOP and MOBILE as markers don't need to be unique. You may also use <<<D and D and <<<M and M or another variation, that's up to you, just keep the syntax similar.

.htaccess

For those among you that have the rights to put a .htaccess on the server, you need to do the following:

Write your CSS in the files named desktop_styles.css and mobile_styles.css.
You can delete the files named desktop_styles.php and mobile_styles.php

For those among you that are not allowed to work with .htaccess on the server, you need to do the following:

Change the link in the web page(s) to the stylesheets from .css to .php
Write your CSS in the files named desktop_styles.php and mobile_styles.php. Be careful to leave the PHP code in the beginning of the stylesheets untouched.
You can delete the files named desktop_styles.css and mobile_styles.css
You can delete the .htaccess file

Creating a webpage

Just make sure that any new webpage will be a duplicate of one of the two original ones and you will be fine. Don't forget to fill in the page title for desktop and mobile. There is no need to bother about the canonical link, the script will take care of it. Also the cookie will be placed by the script.