<!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 - Readme First!</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;*/ } /*=====================================*/ .auto-style1 { text-decoration: underline; } section ol { list-style:lower-alpha; } </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>A mobile-first responsive template</h1> <p>This is an example as well as a template, showing what can be done with a simple responsive design. It's based on HTML5 and CSS3, with some JavaScript and CSS 'shims' to allow older browsers to work with the CSS3 media queries, which are the key to 'responsive design'.</p> <p>It also uses a 'sticky' footer that stays at the bottom of the browser window, no matter what the page height.</p> <p>The styling is created 'mobile-first', meaning that the main layout is initially styled for mobile devices and then, using the CSS3 'media queries', for larger screen sizes. This means that mobiles only load the minimum styling, improving performance where it most matters.</p> <p>If you preview this page in a browser you'll notice two things:</p> <p>1) If you reduce the size of the browser window by dragging the right-hand edge to the left, you'll see the page layout change. (The 'responsive' aspect of the layout). As well as the layout changes you'll see that the navigation links change to buttons for easier use on tablets and mobiles.</p> <p>2) The 'sticky footer'. If you maximise the browser you'll see that the footer stays floating off the bottom of the browser window. </p> <p><strong>Important Notes:</strong></p> <p>1) The pages <span class="auto-style1">must</span> be previewed using IIS or the EW Development Server for the responsive pages to work.</p> <p>2) The design highlights three issues with Expression Web's Design view:</p> <ol> <li>the fonts in Design view will be larger than those in the browser (because em font sizes are being used to fully support mobile devices)<br> <br></li> <li>Design view doesn't support the CSS3 media queries, so when editing pages you see the mobile-first styling. This can sometimes be confusing, so keep a preview window open when working on pages.<br><br></li> <li>Design view doesn't support the negative margins used for the 'sticky footer' and a temporary modification to the layout styles is required when working in EW. Look at the top of this page in Code view and you'll see a style for the footer with the note, 'Uncomment this when working in EW'. This needs to be <span class="auto-style1">commented out</span> before publishing.</ol> <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>