Preparing Microsite Templates

This section contains guidelines for web designers who need to create templates for the NetRefer integration

Designing the Templates
Submitting your files

When designing a microsite it is important to keep in mind that it may need to be translated into different languages, so it is necessary to use an HTML based tab navigation rather than using images. Try to limit graphics as much as possible and style your fonts and layout in an external CSS file and using background images where needed. You can use graphics or swf files for big promotional banners but keep in mind that those might need to be translated at a later stage.

Designing the Templates

IMPORTANT. Only full CSS templates will be accepted by our integration team, any table based templates will be sent back for review.

The below diagram shows the typical areas on a microsite home page. You can have a different layout from the diagram below but during the design process keep in mind that all these key areas must find their way into the final submitted templates.

1. Header and Logo Area
2. Navigation Area
3. Banner Area
4. Content Area
5. Signup Now Button
6. Login Area
7. Footer Area

1. Header and Logo Area

You can use graphics in this area, however if you place any slogans or payoffs please make sure they are text-based rather than graphics. A language drop down that allows the user to change the microsite language might also be necessary incase the microsite is multilingual.

2. Navigation Area

Its important that the tabs in the navigation are HTML based and NOT image based. Use unordered lists (<ul> and <li>) and style them using an external CSS file (background images can be used). Below is an example of an unordered list based navigation.

<div class=”navContainer”>
	<ul class=”nav”>
	<li class="current">Homepage</li>
	<li>Signup</li>
	<li>Reward Plans</li>
	<li>Products</li>
	<li>Products</li>
	<li>How it Works</li>
	<li>FAQs</li>
	</ul>
</div>

3. Banner Area

The banner area (on both mainpage and secondary level page) can contain a graphic (jpg, gif or png) or a flash animation (swf). Translated versions of the banners need to be supplied if the site is multilingual. Any translated graphics or banners should be saved in a sub folder named with their respective language. An example is shown below

Banners:
banners/de/mainpromo.png
banners/se/mainpromo.png

Other graphics:
graphics/en/navbackgound.gif
graphics/es/navbackgound.gif

4. Content Area

The content area is where the microsite content will be loaded. It is very important that the <h1>, <h2>, <h3>, <p> etc, tags are all defined and styled in the external CSS file. Failure to do so may result in fonts appearing differently and in the wrong sizes once the content is loaded through the NetRefer Administration Interface. Below is a sample of how the content area HTML code should look like. (CSS class names can be different from the ones shown below)

<div class=”contentArea”>
<h1>Eorum tempor</h1>
<p>qui dolor decima seacula. Nobis lectorum habent dolore eu facer. 
Decima qui esse in claritas erat.</p>

<h2>Exerci dolore seacul</h2>
<p>Dynamicus est vulputate in facilisi formas. Volutpat lobortis qui vero 
veniam vel. Imperdiet nam exerci dolore seacula est.</p>

<p>Seacula nunc zzril eleifend legentis ea. Parum iis adipiscing per quod sollemnes. Claritatem illum et claritatem ex dolor.</p> 
</div>

5. Sign up now button

The sign up button, like the Banner, needs to be prominent and attract the user’s attention instantly. The button can be a gif or a png graphic as long as all the translated buttons are supplied. As mentioned previously for the Banner Area, any translated graphics should be saved in their respective language sub-folder, in the folder /graphics.

6. Login Area

The login area is where the user will enter his details to log into the NetRefer system. It is important that you place it in a prominent position

The login area needs to have the following

1. Username Field
2. Password Field
3. Login Button
4. “Remember Me” Check box
5. “Forgot Password" link

Do not use any graphics in this section, use only background images defined in the external CSS file and use only text based headings and text links.

7. Footer Area

The footer area must be similar to the navigation area, limit the use of graphics and preferably use unordered lists (<ul> and <li>) styled with background images.

Submitting your files

All templates submitted must be sliced and converted to HTML/CSS and ready to be integrated by our developers. Your template folder should contain the following files/folders look like the below screenshot

1. index.html (template for home page)
2. sub.html (template for all other pages)
3. graphics (all microsite graphics which do not need to be tranlsated)
4. banners (all banners and graphics which need translation)
6. css (all stylesheets)
5. js (all javascript files)