<!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>