Working with the Mobile Friendly Site Templates

Instructions for Template Use in pdf format. file for printing 

All of the mobile friendly templates were updated on May 1 2015. If you have downloaded any or all of them in the past, please download the newest versions.

The instructions for working with this series of templates and Expression Web in general assumes you know at least the basics of writing CSS and HTML. If you do not, then I would suggest that you spend some time with W3 schools courses, available at http://w3schools.com/html/ and http://w3schools.com/css/

The courses are SMALL and self paced. Each element of either CSS or HTML is presented in small increments.  Each of the lessons is accompanied with a "try it yourself" exercise to help reinforce what you just learned.

You can take them as many times as you want or need. You can take them all at one time or over a period of time. You can go back and check if you need a reference for a certain element. Once you have finished the two courses, you will have a better understanding of how to work with the site templates.

 I highly recommend you watch Cheryl Wise's four part video series on Getting Started with a Basic Website. You should also download the asset files that go with the video so you can work along with the tutorial. You can stop and rewind as you go along.

The tutorial uses version 1 of Expression Web and there are a few interface changes in version 3 and 4 of the program. Site functions in versions 1 and 2 were under the File menu (File > New > Site) and have been moved in version 3 and 4 to the Site menu (Site > New Site) and that should get you enough up to speed to be able to work on your existing site.

Media Queries

A media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Added in CSS3, media queries let the presentation of content be tailored to a specific range of output devices without having to change the content itself. ~ Mozilla Developer Network ~

CSS and Script Links

Included in each of the site templates packages are the following files:

  • site.css which is the main style sheet for the site appearance
  • media-queries.css is the style sheet for the site display in mobile devices
  • css3-media-queries.js ­ enables Internet Explorer 8 or older versions to support CSS3 media queries

By default,  pages should display the same on all devices. Your site will work on a desktop, a laptop, a smartphone, and tablet browsers—without having to make duplicate pages.

NOTE: Use caution when adding an image as the Site Name if you want it to resize for the various devices.

A Detailed Breakdown of the <script> Tag

Meta Tags

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
This meta tag locks IE8, IE9, IE10 (and up) in standards-rendering mode to ensure optimum display of your page.

NOTE: If you comment out this meta tag and view the page in Internet Explorer 9, you will note a thin white line at both the top and bottom of the container. It has the same effect as setting the IE9 to Compatibility Mode.

http://msdn.microsoft.com/en-us/library/cc288325%28v=vs.85%29.aspx

Edge mode tells Internet Explorer to display content in the highest mode available. With Internet Explorer 9, this is equivalent to IE9 mode. If a (hypothetical) future release of Internet Explorer supported a higher compatibility mode, pages set to edge mode would appear in the highest mode supported by that version. Those same pages would still appear in IE9 mode when viewed with Internet Explorer 9.

<meta name="viewport" content="width=device-width, initial-scale=1" />
This meta tag prevents mobile devices from shrinking text to unreadable levels in portrait mode.

<meta content="en-us" http-equiv="Content-Language" />
Remember to change this to the appropriate country if you are not in the United States.

Editable Regions

Editable regions are those areas that you specify in the DWT as being okay to be edited.  Editable regions for this series of DWT include the doctitle, description, and content areas.

For the two and three column templates,  you may wish to have either of the two sidebars either wholly or partially editable for different pages, you will need to create those regions as part of your DWT.

As an example, if you wanted the entire right sidebar to be editable, the code would look like this:

<!-- Right Column begins here -->
<div id="rightColumn1">
<!-- #BeginEditable "rightsidebar" -->
<p>All of the right sidebar content would you between the BeginEditable and EndEditable. </p>
<!-- #EndEditable -->
</div>
<!-- Right Column ends here -->

NOTE: Your sidebars are leftColumn1 and/or rightColumn1 depending on the layout.

Editing Style Rules

Not every style rule included with the external style sheets is covered. I have included the main ones. Most of the others will be self explanatory IF YOU ARE FAMILIAR with CSS.

body

Use the body style rules to change font attributes, background color or image, and whitespace (margin and padding) globally for your page.

#outerWrapper {border-radius: 10px; }
#header {border-radius: 8px 8px 0px 0px;}
#footer {border-radius: 0px 0px 8px 8px; }

The above three style rules manage your page's rounded corners.

NOTE: The complete list of style rules are not included for the above elements. Only the lines that affect the rounded corners.

The outerWrapper is assigned an 10px radius on all 4 corners. You can increase or decrease this as you wish. The header has only the top corners specified. The footer has only the bottom corners specified. You will notice there is a 2px difference in the two measurements. If you increase the outerWrapper size, you MUST adjust the other two or the borders will not work properly. Only the newer modern browsers will display the rounded corners. In older browsers, they will appear as rectangles.

Screenshot of older browser display viewed in IE6

Screenshot of modern browser display viewed in Firefox 15

#outerWrapper 

The outerWrapper is the main layout container and holds all of the contents of your page. The default style rules do the following:

  • set the background color as white (#fff shorthand for #ffffff)
  • set the width of the container to 964 pixels
  • surround the container with a 1 pixel border as well as a box-shadow effect
  • round the corners of the container for modern browsers

#header { background: #1C140E url('../images/masthead-bg.jpg') repeat bottom; min-height: 100px; }

You can change the background color and/or background image of the masthead as well as the minimum height of the header.

#header .sitename

Change the style rules here to change the way your site name is displayed. You might choose to use a graphic image for your site name as I did on the Home Page for this site.

NOTE: If you want the image to resize for all devices, you will need to do the following:

  • insert the image into the html code rather than your style sheet
  • do NOT specify a height or width for that site name image

You can add the following set of style rules to your style sheet:

/*Make Image Scalable - Assign this class to any image to make it scale with the browser window size*/
img.scalable {
height: auto !important;
width: auto !important;
max-width: 100%;
}

 Then apply the class="scalable" to the images to make them scale to fit all devices. 

#contentWrapper { clear: both; background-image: url('../images/content-bg.jpg'); background-repeat: repeat-y; }

The contentWrapper is the containing element for the the main content columns which include all layouts - one, two, or three columns. The background image is repeated vertically and gives the layout the equal column look. If you wish to change the color scheme of the layout, you will need to create a new image.

Using these instructions is only necessary if you are using older versions of the templates. Newest versions were made available on May 1 2015.

NOTE: If you wish the mobile site to display correctly on larger smartphones and small tablets, you will need to add the following set of style rules to the media-queries.css just after the style rules for outerWrapper.

@media screen and (max-width: 980px) {

#contentWrapper {
clear: both;
background: #FFFFFF url('images/mobile-bg.jpg') repeat-y;
}


Your media-queries.css should look like this for the first set of style rules:

@media screen and (max-width: 980px) {
#outerWrapper {
width: 95%;
}
#contentWrapper {
clear: both;
background: #FFFFFF url('images/mobile-bg.jpg') repeat-y;
}
#content {
width: 60%;
padding: 3% 4%;
}
#rightColumn1 {
width: 30%;
}
}

#leftColumn1 and/or rightColumn1

Depending on the layout you select, you will have one or both of these. The style rules float the column as well as define the width and padding of the column. If you change the width of either or both of these columns, you will need to adjust the margin of the content div.

Styles rules are included with each of the templates for a sidebar navigation menu if you choose to add one. You can see an example of how it will be displayed Left Sidebar Fixed Width

#content

The main content column is given a left and/or right margin equal to the width of the floated left and/or right sidebar. When using a multiple column layout the margins will be set to account for the floated columns' width, margins, and padding. CSS Box Model

#footer

 The #footer contains the style rules for your footer. You can make adjustments to the top border,  background-color, padding, font-size, and color. Make sure that there is enough contrast on the color of your text and the background color of the footer.

#footer p

margin: 0px; removes the default margins on all <p> tags within the footer. This removes the spacing between lines.

#topNavigation

This div is the wrapper for your top menu. Adjust the style rules as you wish.

The menu included as part of the #topNavigation is for a small site and offers no submenus. If you require a menu that offers submenus, we recommend:

Special styles for mobile devices

Special styles for mobile devices have been included and are inside CSS Media Queries and are read only by mobile devices. They include styles for smartphones and tablets. You can add as many rules as you want inside each of the media queries BUT make sure you test to see if the rules you added do what you want.

Both the top and side navigation will resize to display in all mobile devices. They will NOT expand and contract.

Changing the Column Background Colors

The leftColumn1 and rightColum1 both obtain their colors from the background image used in the style rules for the contentWrapper. You may change the color by creating a new new background image. The size of the image you need to create will depend on the layout.

Resources:

CSS3 border-radius Property

This property allows you to add rounded borders to elements. You can increase or decrease the amount of the curve by changing the value.

CSS3 box-shadow Property

The box-shadow property attaches one or more drop-shadows to the box.

Gotcha's

You will need to preview your page within a browser as Design View will NOT display the page as it should look.

Depending on the length of your content, you may find it difficult to edit your pages in Design View.

Some of the templates will not display correctly in Design View and will be easier to edit if you work in Code View.

Flexible Width Layouts

Some of the layouts use a flexible width layout rather than fixed width. For those layouts you will see a border/background color with the page container taking up the balance of the viewport NO MATTER the size of the monitor.

If your website stretches to the full-width on a wide screen monitor, you can have areas of text that are difficult to read, e.g. very wide lines with 30, 40 or more words to a line. This makes the text difficult to read because the eye has further to move from the end of one line on the right to the beginning of the next line on left.

Fluid designs which stretch to full width can look strange on very wide screen monitors, especially if there isn't much content. You can end up with a very short and very fat web page design.

My suggestion would be to add the following style rule to your .content-wrapper style rules.

max-width:  1500px;

You may use whatever pixel measurement you wish.

Previewing Your Site

It is important that your preview your site as you work on it. Besides previewing in the various browsers, you should check your site on various mobile devices. If you are like me and do not own a smartphone or tablet, you might want to try the following: