Template overview

Doctype

The Nokia Mobile Web Templates for Smartphones use the new HTML5 doctype. This doctype is backwards compatible with all Nokia WebKit devices.

Alternatively, you may use the XHML Mobile 1.2 or XHTML Basic 1.1 doctype. If doing so, be sure to remove the following HTML5 document level elements from the templates:

• header
• footer
• section
• nav
• aside

These elements can in most cases be replaced by DIVs, to which a class of the same name can be applied.

Example:
<header>My header</header>

could be replaced with:

<div class="header">My header</div>

Related template styles will also require adjustment to remove references to these elements.

Character encoding

A UTF-8 character encoding is recommended.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

See Character Encoding and the Mobile Web on mobiForge for more information.

Meta tags

The following meta tag has been included to improve performance on iPhone and other iOS devices. This meta tag will be ignored by Nokia browsers because it is not currently supported.

HTML structure

The following DIVs and IDs are used as basic template containers

• #wrap: Eliminates the horizontal overflow that can occur on certain devices.
• #content: Sets a 0.5 em left and right margin around the content area. Note: Styles that must span the full width of the view override these values using a negative margin.

HTML5 document elements

A variety of HTML5 document elements have also been used to clarify the document structure and that of individual components.

• The <header> and <footer> elements are used to separate these common areas from the site's content.
• The <nav> element is used to enclose all navigation components such as breadcrumbs and navigation bars.
• The <section> element is used to enclose the grid.
• The <aside> element is used to enclose the two box containers.

Note: These new elements are each designed to be used in a specific context. Certain elements are, however, more flexible than others. For example, a footer element should only be used to contain 'information about its section such as who wrote it, links to related documents, copyright data and the like'. Although having two footers is permitted, many pages will only have one. A section, however, is likely to be used more frequently, and in a wider variety of contexts. For this reason, elements have only been used in cases where their recommended usage specifically matched portions of the templates. These elements can and should be changed if they conflict with the structure of your website and markup.

Default scripts

The following functions are appended to the head of all pages.

function init() {
     <!--Function ensures the scripts don't execute until the entire
     document has loaded. -->
     <!-- Can include code for the slideshow, toggle switch,
     accordion list and device detection as needed. See each relevant
     component for details. -->
}
     addEvent("onload",init);

Note: Additional scripts are required on pages that include a slide show, toggle switch, or collapsible containers. Please see each component's documentation for details.

The device detection noted in section Adapting the layout for different browsers is also enabled through the inclusion of the following code on each page, inside the init function:

var myStyleTweaks = new StyleTweaker();
     <!-- First value consist of a relevant portion of the
     UA string -->
     <!-- Second value points to the location of the custom style sheet
     which will be applied to devices which match the specified
     UA string -->
     myStyleTweaks.add("portionOfUAString",
     "../resources/styles/tweaks/CustomStyleSheet.css");
     <!--Executes the function-->
     myStyleTweaks.tweak();

Default styles

The baseStyles.css style sheet provides all necessary template styles. Comments are provided to mark the beginning and end of these groups of related styles.

• Reset: This group of styles clears some of the default browser styles.
• Default styles: These are styles for the most common HTML elements including paragraphs, headers, hyperlinks, and native lists.

Using SASS

Syntactically Awesome Style Sheets (SASS) have been incorporated into this release of the templates. SASS is an extension of CSS that provides many useful features such as nested rules and variables, all with a fully CSS-compatible syntax.

SASS has been used extensively throughout the templates to incorporate the following functionality:

• SASS variables have been specified for many key values such as colours and dimensions. These variables can be found in _include.scss.
• Colours: Variables have been used to specify all style-sheet colours, enabling easy restyling of the style-sheet colour scheme by simply changing these variables. Note that to completely restyle a template, you may also need to replace key template graphics such as global-hover.png and footer.png.
• Dimensions: Variables have been used for most template dimensions.
• page-gutter: The white space to the right and left of the page content.
• page-negative-gutter: A negative margin that enables components such as H1 to span the full width of the page.
• component-height: The height of most components such as styled lists, navigation bars, buttons, and toggle switches. Changing this one value will increase the size of most components.
• global-top-margin: The white space above most components. Note that this value is currently 0. All components have a bottom margin but no top margin. This enables components to stack comfortably without concern for possible differences in the way margins collapse on various browsers.
• global-bottom-margin: The white space below most components.
• footer-height: The base height of the footer area. See Utility styles for other ways to affect the footer height.
• SASS functions have been used to adjust certain values, without changes to the initial default value. The first example, below, produces a value that is half of $global-bottom-margin, while the second example produces a value that is twice the value of $global-bottom-margin. In both cases, a reference to the initial value is retained. Any changes to $global-bottom-margin will be reflected in the equations below.

Using SASS is optional. If you choose not to use SASS, simply delete the entire sass folder and use baseStyles.css as you would any style sheet. See the SASS website for instructions to install and use SASS.

Utility styles

The following styles can be applied throughout the template.

.group
This style clears all floating elements in a block. Using the :after pseudo-class, an invisible element is inserted after the block using CSS. The clear declaration is then applied to this element. Using this class enables cleaner markup because it replaces traditional clearing methods that typically require the addition of a new markup.

.group:after {
     content: ".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
}

Note: This method is compatible with all Nokia devices that use a WebKit browser. Testing is recommended on other devices or browsers.

.flush
This style removes an element's bottom margin and can be used when elements such as headers or lists need to be stacked one on top of the other.

.extended
This style extends the height of the footer on short pages.

Design approach

Unless otherwise noted, all components are designed using flexible em values and will automatically adapt to fit not only the display width, but also changes in font size. Components will also scale comfortably if the user zooms the display using either a zoom control or pinch gesture.

Figure: List components rendered in various orientations on the Nokia N8-00, Nokia N900, and Nokia E52 devices.

Figure: The image on the left shows components at normal size. The image on the right shows the same components once the browser's font size has been set to extra large.

Note: On most Symbian devices, going to Options -> Settings -> Page within the browser will change the active font size.