diff --git a/examples_src/geolocation-orientation.css b/examples_src/geolocation-orientation.css
deleted file mode 100644
index 9ac812bcf6..0000000000
--- a/examples_src/geolocation-orientation.css
+++ /dev/null
@@ -1,13 +0,0 @@
-#info {
-  position: absolute;
-  font-size: 0.7em;
-  top: 70px;
-  right: 30px;
-  background-color: lightgrey;
-  padding: 4px;
-}
-.button {
-  position: absolute;
-  bottom: 10px;
-  left: 30px;
-}
diff --git a/examples_src/geolocation-orientation.html b/examples_src/geolocation-orientation.html
index 71f956c8e7..5dd4fe3f61 100644
--- a/examples_src/geolocation-orientation.html
+++ b/examples_src/geolocation-orientation.html
@@ -1,20 +1,53 @@
----
-template: "example.html"
-title: "Mobile Geolocation Tracking with Orientation"
-shortdesc: "Example of a geolocated and oriented map."
-docs: >
-  Geolocation tracking with orientation example.
-tags: "fullscreen, geolocation, orientation, mobile"
----
-<div class="row-fluid">
-  <div class="span12">
-    <div id="map" class="map">
-    </div>
-    <div class="button">
-      <button id="geolocate">Geolocate Me!</button>
-      <button id="simulate">Simulate</button>
-    </div>
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>Mobile Geolocation Tracking with Orientation</title>
+    <style type="text/css">
+      html, body, .map {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        height: 100%;
+      }
+      #info {
+          position: absolute;
+          font-size: 0.7em;
+          top: 10px;
+          right: 10px;
+          background-color: lightgrey;
+          padding: 4px;
+      }
+      .button {
+          position: absolute;
+          bottom: 40px;
+          left: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="map" class="map"></div>
     <div id="info"></div>
     <img id="geolocation_marker" src="data/geolocation_marker.png" />
-  </div>
-</div>
+    <div class="button">
+        <button id="geolocate">Geolocate Me!</button>
+        <button id="simulate">Simulate</button>
+    </div>
+
+    <script src="../resources/jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=geolocation-orientation" type="text/javascript"></script>
+
+    <div style="display: none;">
+      <div id="title">Geolocation tracking with orientation example</div>
+      <div id="shortdesc">Example of a geolocated and oriented map.</div>
+      <div id="tags">fullscreen, geolocation, orientation, mobile</div>
+    </div>
+  </body>
+</html>
