<!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 - Features</title> <meta name="description" content="ADD YOUR DESCRIPTION"/> <!-- #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> /*=====================================*/ /* comment this out for production use */ 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>Template Features</h1> <ul> <li>The maximum width of the content is set at 880px, to give a border around it on a 1024px browser window. A fixed width like this is now recommended so that pages don't over-stretch across wide-screen monitors.<br><br></li> <li>It scales down in steps to cater for tablet and smartphone screens.<br> <br></li> <li>It uses some CSS and a JavaScript 'shim' to ensure that IE browsers pre-IE9 can style the HTML5 layout elements and that browsers that don't support CSS3 will still use the media queries. The CSS3 rounded corners will not display in older browsers although a jQuery shim could be used for this if desired.<br><br></li> <li>It uses a CSS fixed footer that works in all browsers from IE4 onwards.<br><br></li> <li>It has been tested on most desktop browsers: IE6 - IE10PP, Chrome 18, Firefox 11, Opera 11 and Safari 5 (non IE browsers tend to be regularly updated by the majority of users) plus the following mobile browsers: IE9 (WinPhone7), Android (default), Opera Mobile 12 (Android) and Opera Mini (Android and iOS), Safari (iOS), Dolphin (iOS and Android) and Skyfire(Android) .</li> </ul> <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>