Working with the Mobile Friendly Site Templates

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 https://www.w3schools.com/css/default.asp

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.

Getting started with the Web is a concise series introducing you to the practicalities of web development. You'll set up the tools you need to construct a simple webpage and publish your own simple code.

Doctypes

All HTML documents must start with a declaration. The declaration is not an HTML tag. It is an "information" to the browser about what document type to expect.

In HTML 5, the declaration is simple:

<!DOCTYPE html>

For the older XHTML it is a little more complicated.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

The templates offered on this site, use one or the other doctype.

ISO Language Codes

You should always include the lang attribute inside the <html> tag, to declare the language of the Web page. This is meant to assist search engines and browsers:

In XHTML, the language is declared inside the <html> tag as follows:

If you are using the templates and live in another country, you should change the lang tag to reflect YOUR country and the language you use.

Meta Tags

Each of the templates featured here, include the following meta tags:

You can read more about any of them HTML <meta> Tag

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.

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 ~

Using Media Queries For Responsive Design In 2018 by Smashing Magazine
CSS Media Queries by w3schools
CSS3 Media Queries for Beginners
Responsive Design with CSS3 Media Queries by web design wall
Media Queries by SitePoint
iPad CSS Layout with landscape / portrait orientation modes
Responsive design – harnessing the power of media queries from Google Webmaster Blog
How to Make Your Website Respond to Different Mobile Devices by Josh Byers
Mobile-First Indexing by default for new domains from Google Webmaster Blog

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

Depending on the template set you choose, there may be other css and js files included. They may include:

form2.css works with the sample contact form
menu.js works with some of the menus included

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.

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:

<div id="rightColumn1">

<p>All of the right sidebar content would you between the BeginEditable and EndEditable. </p>

</div>

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

Many of the template package also include the following code in the headsection:

You can add any page specific information between these tags for any page you want. If your particular template does NOT include this section, please feel free to add it to your DWT.

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

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:

Experimental responsive multi-level menu uses the PVII Menu CSS Express Drop-Down Menu by Project Seven Development with modifications for mobile use by Ian Haynes, Data Insite Ltd. Example in mobile friendly template. (FREE)
Dynamic Drive CSS Horizontal Menus (FREE)

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:

MobileTest.me - allows you to test your web apps and websites, on all popular smartphones and tablets.
Brick & Mobile - How does your website look on a smartphone?
Electric Mobile Studio 2012 is a commercial product - iPhone, iPad, and Responsive Simulator
Opera Mobile Emulator Developing for mobile phones and tablets becomes a breeze. The emulator is super simple to install and lets you do serious mobile development from your desktop.
Am I Responsive? is another free testing tool
Google Mobile-Friendly Test Tool

Resources

Expression Web 4.0 Tutorials 2nd Edition from Install to Publish, a FREE EBook by Pat Geary.

Expression Web has a group on Facebook. If you are a FB user, come join us.

Disclosure: This is an affiliate link, which means that if you visit Bluehost.com through this link and purchase this product, I’ll get a commission.

Microsoft MVP Logo.
April 2007 - April 2013