Skip to content The Open University
  1. Home
  2. Mobile version

Mobile version

OU ICE offers some basic rendering for mobile devices out of the box. If you include the OUICE ou-head.php as part of your template your site will benefit from some responsive web design techniques.

If you would rather present users with a toggle to switch between a mobile and desktop version then you need to take the following steps:

1. Include the standard OU header and footer

If you're using OU ICE in full you're already doing this. More information on including the header and footer is here.

It's really important that you include both the header and the footer for this to work.

2. Provide a toggle to set the cookie

The ou-header.js file contains some code to inject the toggle into the header of the desktop version of the page and to the footer of the mobile page. To activate that code you simply add a class of "ou-mobile" to the <body> tag on the page:

  1. <body class="ou-mobile">

The javascript examines the body element to check if the ou-mobile attribute is set. If it is, the toggle is written to the page.

3. Present the required view - mobile or desktop

Instead of including ou-head.php in the <head> of your page, you'll need to add some conditional code that will determine if the OUMOBILE cookie is set or not. If it is, the page will include the mobile style sheets:

  1. <meta name="viewport" content="width=device-width; initial-scale=1" />
  3. <?php
  4. if(isset($_REQUEST['OUMOBILE'])){
  5. echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"/includes/headers-footers/ou-header-mob.css\">";
  6. echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"/includes/ouice/3/mobile.css\">";
  7. }
    ?>

If OUMOBILE cookie is set, the two mobile styles are written to the page. If you only use the OU header and footer but not the rest of the OUICE framework, you wont need line 6.

You will also need to add back the style sheets and javascripts that you are now missing as a result of not calling ou-head.html. Here's the whole lot for the <head> together:

  1. <link rel="stylesheet" type="text/css" href="/includes/headers-footers/ou-header.css" media="screen, projection" />
  2. <link rel="stylesheet" type="text/css" href="/includes/ouice/3/screen.css" media="screen, projection" />
  3. <link rel="stylesheet" type="text/css" href="/includes/ouice/3/print.css" media="print" />
  5. <!--[if lt IE 9]>
  6. <link rel="stylesheet" type="text/css" href="/includes/ouice/3/ie.css" />
  7. <![endif]-->
  9. <!--[if lt IE 7]>
  10. <link rel="stylesheet" type="text/css" href="/includes/ouice/3/ie6.css" />
  11. <![endif]-->
  12. <meta name="viewport" content="width=device-width; initial-scale=1" />
  14. <?php
  15. if(isset($_REQUEST['OUMOBILE'])){
  16. echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"/includes/headers-footers/ou-header-mob.css\">";
  17. echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"/includes/ouice/3/mobile.css\">";
  18. }
  19. ?>
  21. <script type="text/javascript" src="/includes/headers-footers/ou-header.js"></script>

Once all that is in the <head> of your page, you just need to make sure you have the ou-mobile class set in the <body>:

  1. <body class="ou-mobile ou-panels">

The full bare-minimum in your PHP OU ICE site template is therefore:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>{page title} - {site title} - Open University</title>
  6. <link rel="stylesheet" type="text/css" href="/includes/headers-footers/ou-header.css" media="screen, projection" />
  7. <link rel="stylesheet" type="text/css" href="/includes/ouice/3/screen.css" media="screen, projection" />
  8. <link rel="stylesheet" type="text/css" href="/includes/ouice/3/print.css" media="print" />
  9. <!--[if lt IE 9]>
  10. <link rel="stylesheet" type="text/css" href="/includes/ouice/3/ie.css" />
  11. <![endif]-->
  12. <!--[if lt IE 7]>
  13. <link rel="stylesheet" type="text/css" href="/includes/ouice/3/ie6.css" />
  14. <![endif]-->
  15. <meta name="viewport" content="width=device-width; initial-scale=1" />
  16. <?php
  17. if(isset($_REQUEST['OUMOBILE'])){
  18. echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"/includes/headers-footers/ou-header-mob.css\">";
  19. echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"/includes/ouice/3/mobile.css\">";
  20. }
  21. ?>
  22. <script type="text/javascript" src="/includes/headers-footers/ou-header.js"></script>
  23. </head>
  24. <body class="ou-mobile ou-panels">
  25. <div id="ou-org">
  26. <?php include $_SERVER['DOCUMENT_ROOT'] . '/includes/headers-footers/ou-header.html'; ?>
  27. <div id="ou-site">
  28. <div id="ou-site-header">
  29. <!-- ou-site-header-components -->
  30. </div>
  31. <div id="ou-site-body">
  32. <div id="ou-page">
  33. <div id="ou-region1">
  34. <ol class="ou-ancestors">
  35. <li><a href="index.php">Home</a></li>
  36. <li><strong>This page</a></strong>
  37. </ol>
  38. <div class="ou-content" id="ou-content">
  39. <h1>Page title</h1>
  40. <p>Page content</p>
  41. </div>
  42. </div>
  43. <div id="ou-region2">
  44. <p>Secondary content</p>
  45. </div>
  46. </div>
  47. </div>
  48. <div id="ou-site-footer">
  49. <!-- ou-site-footer-components -->
  50. </div>
  51. </div>
  52. <?php include $_SERVER['DOCUMENT_ROOT'] . '/includes/headers-footers/ou-footer.html'; ?>
  53. </div>
  54. <?php include $_SERVER['DOCUMENT_ROOT'] . '/includes/ouice/3/ou-foot.html'; ?>
  55. <!-- site specific scripts -->
  56. </body>
  57. </html>

OU ICE tutorial

If you're new to OU ICE you might find this quick step by step tutorial useful.

This page was last updated on Wednesday November 13, 2019