Basic about page technique for cartographic sites using backbone and Mustache, lifted and abstracted from nyc.crashmapper.com.

crash.css

body {
    margin: 0px;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 200;
}

a {
    text-decoration: none;
    color: blue;
}
a:visited {
    color: blue;
}
a:hover {
    color: blue;
}
a:active {
    outline: 0;
}

#app #about {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
}

#app #about .about-container {
    background: white;
    margin-top: 2em;
    margin-left: auto;
    margin-right: auto;
    width: 600px;
    overflow-y: scroll;
    padding: 1em;
    background: white;
    box-shadow: 0 1px 7px rgba(0,0,0,0.65);
    -webkit-border-radius: 4px;
    border-radius: 4px;
    max-height: 90%;
}

#app #about .about-container ul li {
    list-style-type: square;
}

#app #about .about-container div {
    line-height: 1.5em;
    margin-top: 0px;
    padding: 0.5em 0 0.5em 0;
}

#app .ideograph {
    max-height: 20px;
    max-width: 20px;
}

#app #map * .popup .data {
    text-align: center;
    white-space: nowrap;
}

#app #map * .popup .data table {
    display: inline-block;
    border: 1px solid black;
    padding: 5px;
    margin: 0 10px 0 10px;
}

#app #map #mapHolder {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
}

#app #map #mapHolder .intersection-marker.aggregate div {
    border-radius: 100px;
}

#app #map #mapHolder .intersection-marker.single div {
    /*border: 1px solid black;
    box-shadow: 2px 2px 2px black;*/
}

#app #map #mapHolder .intersection-marker div {
    width: 10px;
    height: 10px;
    margin-left: -6px;
    margin-top: -6px;
}

#app #map #mapHolder .intersection-marker div:hover {
    color: black !important;
    background-color: white !important;
}

#app #map .dimension-control a {
    padding: 5px;
}

#app #map .dimension-control a.selected {
    background: #bbb;
}

#app #map .dimension-control a .help {
    right: 40px;
    text-align: right;
}

#app #map .dimension-control .dimension-spacer {
    background-color: #fff;
    border-bottom: 1px solid #ccc;
}

#app #map .help-control {
    font-size: 150%;
}

#app #map .help-control .help {
    font-size: 66%;
    left: 30px;
}

#app #map .link-control a {
    text-align:center;
}

#app #map .link-control .help {
    left: 30px;
}

#app #map .link-control a img {
    max-height: 20px;
    max-width: 20px !important;
}

#app #map .link-control .link-popup {
    white-space: nowrap;
    background: white;
    background: white;
    box-shadow: 0 1px 7px rgba(0,0,0,0.65);
    -webkit-border-radius: 4px;
            border-radius: 4px;
    padding: 8px 5px 5px 5px;
    display: inline-block;
    position: absolute;
    top: 0px;
    left: 30px;
}

#app #map .link-control .link-popup .link-input {
    width: 280px;
}

#app #map .slider-control {
    width: 400px;
    background: white;
    box-shadow: 0 1px 7px rgba(0,0,0,0.65);
    -webkit-border-radius: 4px;
            border-radius: 4px;
    text-align: center;
    padding: 8px 5px 5px 5px;
    position: relative;
}

#app #map .slider-control .help {
    top: -30px;
    font-size: 150%;
}

#app #map .slider-control #slider-min,#slider-max,#slider-current,#slider {
    display: inline-block;
    margin: 0 5px 0 5px;
}

#app #map .slider-control #slider-current {
    position: absolute;
    font-weight: bold;
    color: black;
    text-shadow: 0px 0px 5px white;
    font-size: 2.5em;
    left: 420px;
    top: -8px;
    width: 100%;
    white-space: nowrap;
    text-align: left;
}

#app #map .slider-control #slider-current .layer {
    font-size: 60%;
}

#app #map .slider-control #slider {
    width: 275px;
}

#app #map #progressbar {
    position: absolute;
    top: 40%;
    height: 40px;
    left: 100px;
    right: 100px;
    z-index: 1;
}

#app #map #progressbar #progressbar-text {
    position: relative;
    width: 100%;
    text-align: center;
    top: -33px;
}

#app * .help {
    display: none;
    position: absolute;
    background: black;
    color: white;
    box-shadow: 0 1px 7px rgba(0,0,0,0.65);
    -webkit-border-radius: 4px;
            border-radius: 4px;
    padding: 0 1em 0 1em;
    white-space: nowrap;
}

.mobile-warning-container {
    padding: 30px;
    text-align: center;
}

.mobile-warning-container img {
    border: 1px solid black;
    margin: 15px 0 15px 0;
}

route.html

<!DOCTYPE HTML>
<HEAD>
  <link rel="stylesheet" href="crash.css" />
  <script type="text/html" id="aboutTemplate">
    <div class="about-container">
       <div>
         <small>
           This map has been tested on new versions of
           <a href="https://mozilla.org/firefox" target="_blank">Firefox</a>,
           <a href="http://www.google.com/chrome" target="_blank">Chrome</a>,
           and <a href="https://www.apple.com/safari/">Safari</a>.  Try
           other browsers at your own risk.
         </small>
       </div>
       <div style="text-align:center;">
         <button type="button" class="ui-widget" id="aboutDismiss" alt="OK" title="OK">OK</button>
       </div>
    </div>
  </script>

        <script type="text/html" id="helpControlTemplate">
          <div class="help">← Help</div>
          <a href="#help" title="Help" alt="Help">?</a>
        </script>

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
</HEAD>
<HTML>
<BODY>
<SCRIPT>
var Crashmapper = {};

$(document).ready(function () {
   // Adaptedfrom http://detectmobilebrowsers.com/
   var v,
   r,
   historyOpts = {};

    
   v = new Crashmapper.AppView({});
   r = new Crashmapper.AppRouter({view: v});

   Crashmapper.router = r;
   v.$el.appendTo('body');
   v.render();

   // Enable push state for non-local deploy.
   if (window.location.host.search('localhost') === -1) {
      historyOpts.pushState = true;
   }
   Backbone.history.start(historyOpts);
    
});

/*jslint browser: true, nomen: true, sloppy: true*/
/*globals Backbone, Crashmapper*/

Crashmapper.AppRouter = Backbone.Router.extend({

    initialize: function (options) {
        this.view = options.view;

    },

    routes: {
        '': 'root',
        'about': 'about',
        '*notFound': 'notFound'
    },


    notFound: function () {
        this.navigate('about', {trigger: true});
    },

    about: function () {
        // pre-load map
        //if (!this.view.map._map) {
        //    this.view.map.render();
        //}
        this.view.about.display();
    },

    root: function () {
        alert('hi, root here!');
    }
});

/*jslint browser: true, nomen: true, sloppy: true*/
/*globals Backbone, $, Crashmapper, Mustache, _*/

Crashmapper.AboutView = Backbone.View.extend({
    id: 'about',

    tmpl: $('#aboutTemplate'),

    /**
     * @this {Crashmapper.AboutView}
     */
    render: function () {
        $(window).on('keydown', _.bind(function (evt) {
            if (evt.keyCode === 13 || evt.keyCode === 27) {
                this.dismiss();
            }
        }, this));
        this.$el.html(Mustache.render(this.tmpl.html(), {}));
        $('#aboutDismiss', this.$el).click(_.bind(function (evt) {
            evt.preventDefault();
            this.dismiss();
            return false;
        }, this));
        this.$el.click(_.bind(function (evt) {
            if (evt.target === this.$el[0]) {
                this.dismiss();
            }
        }, this));
        return this;
    },

    display: function () {
        this.$el.fadeIn();
        $('.help').fadeIn();
    },

    dismiss: function () {
        this.$el.fadeOut();
        $('.help').fadeOut();
        Crashmapper.router.navigate('', {trigger: true});
    }
});

/*jslint browser: true, nomen: true, sloppy: true*/
/*globals Backbone, Crashmapper */

/**
 * @param {Object} options
 * @constructor
 * @extends Backbone.View
 */
Crashmapper.AppView = Backbone.View.extend({
    id: 'app',

    /**
     * @this {Crashmapper.AppView}
     */
    initialize: function () {
        this.about = new Crashmapper.AboutView({}).render();
        this.about.$el.appendTo(this.$el).hide();
        //this.map = new Crashmapper.MapView({});
        //this.map.$el.appendTo(this.$el);
    },

    /**
     * @this {Crashmapper.AppView}
     */
    render: function () {
        return this;
    }
});

</SCRIPT>

</BODY>
</HTML>