Your Company Name

A mobile-first responsive template

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'.

It also uses a 'sticky' footer that stays at the bottom of the browser window, no matter what the page height.

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.

If you preview this page in a browser you'll notice two things:

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.

2) The 'sticky footer'. If you maximise the browser you'll see that the footer stays floating off the bottom of the browser window.

Important Notes:

1) The pages must be previewed using IIS or the EW Development Server for the responsive pages to work.

2) The design highlights three issues with Expression Web's Design view:

  1. 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)

  2. 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.

  3. 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 commented out before publishing.