readme/suggestions.html
<!DOCTYPE html>
<html dir="ltr">

<!-- #BeginTemplate "../site.dwt" -->

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<!-- viewport -->
<meta name="viewport" content="width=device-width">
<meta name="HandheldFriendly" content="True">
<!-- for mobile browsers that don't understand the viewport tag -->
<meta name="MobileOptimized" content="320"/>
<!-- for IE mobile font smoothing -->
<meta http-equiv="cleartype" content="on">
<!-- Needed for iOS devices to ensure correct scaling when switching between portrait and landscape -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<!-- #BeginEditable "doctitle" -->
<title>Mobile template - Suggestions</title>

<!-- #EndEditable -->


<link href="../style/sticky.css" rel="stylesheet" type="text/css">
<link href="../style/layout.css" rel="stylesheet" type="text/css">
<link href="../style/normal.css" rel="stylesheet" type="text/css">

<!-- Old browsers, including some found on mobile devices, don't support @media queries -->
<script type="text/javascript" src="../javascript/respond.min.js"></script>


<!-- Allows IE to style the HTML5 layout elements -->
<!--[if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!--[if !IE 7]>
	<style type="text/css">

		#wrap {display:table;height:100%}
	</style>
<![endif]-->

<!-- #BeginEditable "style" -->
<style>



/*=====================================*/
/* uncomment this when editing in EW */
footer {
/*margin-top:0;*/
}
/*=====================================*/

</style>
<!-- #EndEditable -->
</head>

<body>

<div id="wrap">

<nav>
<!-- #BeginEditable "nav" -->
<p><a href="default.html">Readme</a><a href="features.html">Template Features</a><a href="suggestions.html">Suggestions</a></p>

<!-- #EndEditable -->
</nav>

<header>
<h1>Your Company Name</h1>
</header>
<!-- #BeginEditable "body" -->
<section>

	<h1>Suggestions</h1>
	<p>This is a very simple template but there are several things you can do to 
	personalize it for your own use. Here are a few suggestions.</p>
	<ul>
		<li>Change colours of the header borders, inner footer and body 
		background.</li>
		<li>Add a background image for the header</li>
		<li>Move the navigation bar below the header. It's 
	currently an editable region above the header so move it on the DWT. You might want the 
	navigation in a left hand or right hand column so it could be moved there.</li>
	<li>You may want to make the navigation a fixed part of the DWT.</li>
		<li>Add jQuery shims so that the round corners show in older browsers.</li>
	</ul>
	<p><strong>Important</strong></p>
	<p>Be very careful in using vertical margins on the page. The 
	'sticky footer' can be undone fairly easily. Use padding instead.</p>
	<p></p>
	<p> </p>
	<p> </p>

</section>

<!-- #EndEditable -->
</div>
<footer>
<div id="footerInner">
	<div id="ewCopy" style="text-align:left; float:left"><script type="text/javascript">document.write('© ' +(new Date()).getFullYear() + '  Your name');</script><noscript>© Your name</noscript></div>
</div>
</footer>
<!-- #EndEditable -->

</body>

<!-- #EndTemplate -->

</html>