Expression Web Mobile Friendly Site Templates

IMPORTANT: If you downloaded any of the four two column layouts or the complete set of templates BEFORE November 27, 2012, they have been updated to correct a display issue on the IPad portrait orientation.

This series of templates are for more advanced users. The templates use media queries as well as some CSS3 styling (rounded corners and box shadows). You need to be comfortable/knowledgeable in working with both XHTML code as well as CSS style rules.  This is also the first of the site templates that is mobile friendly.

Screenshot of Template with menu on iphone.   Screenshot of Mobile Friendly Template without the Sectional Menu.

NOTE: You can get an idea of how the layouts will display on mobile devices if you resize your browser. The layout will automatically flow based on the width of the viewport (browser viewing area). For proper testing, you need to view the layouts on a mobile device or mobile simulator.

The two and three columns templates are equal height columns and use an image to achieve that look. If you decide to change the width of the sidebars or the colors, you will need to create your own background graphic image.

NOTE: The site template packages will work with ALL versions of Expression Web. They will also work with Microsoft FrontPage 2003 as well as SharePoint Designer 2007.  There are display issues for some of the templates in all versions of Expression Web as well as FP2003 and SharePoint Designer 2007.

Only Expression Web version 4 SP2 supports CSS3 style rules. This means that in order to edit the border-radius and box shadow style rules with any other version of EW, you will need to work within the style sheet not by using any of the style dialog windows.

WARNING: If you are installing the templates using Expression Web 4.0, it is very important that you read Expression Web 4.0 Site Templates HTM/HTML Bug. You should select the .html file extension as your default.

Clicking on any of the thumbnails will take you to the actual template. Click on DOWNLOAD to download the template package.

Screenshot one column fixed width.
One Column
Fixed Width
Download

Screenshot one column flexible width.
One Column
Flexible Width
Download

Screenshot two column fixed width.
Two Column Fixed Width
with Left Sidebar
Download

Screenshot two columns flexible width with left sidebar.
Two Column Flexible Width
with Left Sidebar
Download

Screenshot two columns fixed width with right sidebar.
Two Column Fixed Width
with Right Sidebar
Download

Screenshot two column flexible width with right sidebar.
Two Column Flexible Width
with Right Sidebar
Download

Three Column Fixed Width.
Three Column
Fixed Width
Download

You can also download the complete set of seven templates.

Installing the templates

Detailed instructions on installing these templates.

Pdf for Printing.The instructions are also available as a pdf file you can print.

Working with the templates

The html pages are heavily commented to help you in knowing where the various sections begin and end. The external style sheet is also heavily commented so you can easily tell what the various style rules control. There is an extensive Help page on Working with the Site Templates.

 This file is also available as a pdf so that you can print it out if you so desire.

Pat Geary and Tina Clarke.
Copyright 2012 all rights reserved Pat Geary and Tina Clarke