diff --git a/examples_src/tissot.html b/examples_src/tissot.html
index 8d77e8253a..4bab02205e 100644
--- a/examples_src/tissot.html
+++ b/examples_src/tissot.html
@@ -1,56 +1,18 @@
-<!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>Tissot indicatrix example</title>
-  </head>
-  <body>
-
-    <div class="navbar navbar-inverse navbar-fixed-top">
-      <div class="navbar-inner">
-        <div class="container">
-          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
-        </div>
-      </div>
-    </div>
-
-    <div class="container-fluid">
-
-      <div class="row-fluid">
-        <div class="span6">
-          <h4>EPSG:4326</h4>
-          <div id="map4326" class="map"></div>
-        </div>
-        <div class="span6">
-          <h4>EPSG:3857</h4>
-          <div id="map3857" class="map"></div>
-        </div>
-      </div>
-
-      <div class="row-fluid">
-
-        <div class="span12">
-          <h4 id="title">Tissot indicatrix example</h4>
-          <p id="shortdesc">Example of <a href="http://en.wikipedia.org/wiki/Tissot's_indicatrix">Tissot indicatrix</a> maps. The map on the left is an EPSG:4326 map. The one on the right is EPSG:3857.</p>
-          <div id="docs">
-            <p>See the <a href="tissot.js" target="_blank">tissot.js source</a> to see how this is done.</p>
-          </div>
-          <div id="tags">tissot, circle</div>
-        </div>
-
-      </div>
-
-    </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=tissot" type="text/javascript"></script>
-
-  </body>
-</html>
+---
+template: "example.html"
+title: "Tissot indicatrix example"
+shortdesc: "Draw Tissot's indicatrices on maps."
+docs: >
+  Example of [Tissot indicatrix](http://en.wikipedia.org/wiki/Tissot's_indicatrix)</a> maps. The map on the left is an EPSG:4326 map. The one on the right is EPSG:3857.
+tags: "tissot, circle"
+---
+<div class="row-fluid">
+  <div class="span6">
+    <h4>EPSG:4326</h4>
+    <div id="map4326" class="map"></div>
+  </div>
+  <div class="span6">
+    <h4>EPSG:3857</h4>
+    <div id="map3857" class="map"></div>
+  </div>
+</div>
