SSW Web Template

At SSW we are proud of our standards. These standards governs how we work and present ourself to the world. This page contains guidelines and standards specifically for our SSW website. Whether you are modifying an existing page or creating a new one, it is your responsibility that your work follows these templates.

For public web template rules please see SSW rules relating to websites.

 General

1. Editing an existing page - use Microsoft Expression Web to edit a webpage (be aware you need to check out the files from TFS first - using VS 2008)
   
   Use the "Edit with..." command as per
   Do all your employees know the quickest way to fix small web errors?
   
   *Warning*
   Read Do you edit right files? first to see Good example and Bad example when editing page.
   

2. Creating a new page (before doing that, please read Using TFS to Edit the SSW Website first)

3. All web pages are to be consistent with the SSW Template (this page).

4. All new pages must also abide by the rules set out in in SSW Rules to Better Websites.. This includes:
   -Navigation
   -Layout & Formatting *IMPORTANT*
   -Development
   -Branding and Marketing *IMPORTANT*
   -Online Transactions
   -Graphics
   -Tuning and Maintenance
   

5. In .NET 2.0 & 3.5, There are 2 Master Page templates you can choose from:
       - Long pages (eg. Our rules and standard) eg. XXX
       - Short pages (eg. The new template, it is also called "sub-pages") eg. XXX
   
   Note: In .NET 1.1 (before Master Pages), the steps were:
   To use this template, you can just copy this file or if you want to include custom backend scripting you will be required to copy 2 files for this template. By default, the webpage is using  custom code behind the page, to populate the side html in the template. When you use this template you have to rename the 2 files so they are similar. This is for ease of maintenance more than anything. E.g. Login.aspx and Login.aspx.vb
   
   
   

6. Add this Include file for all SSW Products: /p>

   <ssw:incdemonstration id="IncDemo" runat="server"></ssw:incdemonstration>

   This will add the following table:

   Demonstration Options If you are in Sydney, call today for a free no-obligation demonstration at your office! If you are not in Sydney, please take advantage of our SSW Phone Walkthrough. The SSW Phone Walkthrough is a service where we will call you, anywhere in the world and once you have installed our product we will guide you over the important features of the software. Saves you time, playing around with the software trying to work out all the useful features, please email us today.

7. When you use named anchors in a table, use meaningful names. When you are sending the URL by email it helps indicate what you are talking about, and in addition, list numbers often change. An anchor like "#13" becomes incorrect when the order changes.

8. The Nav Bar is edited using by altering the appropriate table in SQL Server on Joey. Then you need to use a special web page on Seal to generate a new static text file from this table.

9. You will acknowledge any contributers in accordance with standard convention. If you are quoting another author directly you use direct quotes - for example: As Cameron Shaw says in the SSW Web Template "You will acknowledge any contributers". OR, if you are just referring to another persons idea don't quote the author directly, but mention that it is his idea - for example: Adam Cogan recommends on his site (www.ssw.com.au)) that every coding company will have a series of rules and standards that every developer must adhere to." Following this standard will ensure we don't get accused of plagiarism.

10. ******You also have to change the Class name. You must pick a totally unique class name than has not been used on the rest of the site. Eg. LoginMaintancePage

    This class name must be changed at the top of the aspx page: /p>

    <%@ Page Language="vb" src="Login.aspx.vb" AutoEventWireup="false" Inherits="SSW. LoginMaintancePage "%>

    Figure: Changing the Class name

    And at the top of the aspx.vb page:

    Public Class LoginMaintancePage

11. Always acknowledge your work.

12. If you are not sure then see www.w3.org

Colours

1. Use the standard colours, namely #FD1912 #CCCCCC #DDDDDD #F0F0F0

2. When you have tables on your pages use the ssw colours. Don't specify these colours in your HTML

   <table bgcolor="white" cellpadding=0 cellspacing=0 width="100%" border=0>

   Bad Example - background colour is manually added to <table> tag

   <table class="clsSSWTable" summary="Tips On How to Show a Table">

   Good Example - using colour properties from CSS

CSS Styles

If you are styling a page, chances are that there is already a style available for that purpose. Below are SSW custom styles:

1. Links

   The following classes can be applied to an <a> tag

   CSS Class	Example Code	Result
   .external	<a href="http://www.ssw.com.au/" class="external">Link to SSW</a>	Link to SSW
   .newWindow	<a href="http://www.microsoft.com.au/" class="newWindow" target="_blank">Link to Microsoft</a>	Link to Microsoft
   .pdf	<a href="http://www.ssw.com.au/document.pdf" class="pdf">View portfolio</a>	View portfolio
   .audio	<a href="http://www.ssw.com.au/audio.mp3" class="audio">Listen to podcast</a>	Listen to podcast
   .wmv	<a href="http://www.ssw.com.au/video.wmv" class="wmv">Watch video presentation</a>	Watch video presentation
   .eps	<a href="http://www.ssw.com.au/logo.eps" class="eps">Download EPS Logo</a>	Download EPS Logo
   .gif	<a href="http://www.ssw.com.au/Images/image.gif" class="gif">View image</a>	View image

2. Text

   SSW's standard font is Helvetica.

   CSS Class	Example Code	Result
   .strike	<p class="strike">Text example</p>	Text example
   	<p>This is an example <span class="strike">text</span> only</p>	This is an example text only
   	<div class="strike"> <h2>Heading Title</h2> <p>This is an example paragraph text</p> </div>	Heading Title This is an example paragraph text
   .highlight	<p class="highlight">Text example</p>	Text example
   	<p>This is an example <span class="highlight">highlighted text</span></p>	This is an example highlighted text
   	<div class="highlight"> <h2>Heading Title</h2> <p>This is an example paragraph text</p> </div>	Heading Title This is an example paragraph text Note that the Heading is not highlighted

3. Boxes

   Contrary to our common practice, creating a box element in a web page doesn't require the use of a <table> tag. They can simply wrapped in a <div> tag. This does not mean that we are not going to use tables anymore. In fact, some of our CSS styles can only be applied to a table (We'll get to there later)

   CSS Class	Example Code
   .greyBox	<div class="greyBox"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing. Duis lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. </p> </div>	Lorem ipsum dolor sit amet, consectetuer adipiscing. Duis lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus.
   .flyoutBox	<div class="flyoutBox"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing. Duis lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. </p> </div>	Lorem ipsum dolor sit amet, consectetuer adipiscing. Duis lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus.
   .multimediaBox	<div class="multimediaBox"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing. Duis lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. </p> </div>	Lorem ipsum dolor sit amet, consectetuer adipiscing. Duis lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus.
   .infoBox	<div class="infoBox"> <h4>What is .NET?</h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing. Duis lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. </p> </div>	What is .NET? Lorem ipsum dolor sit amet, consectetuer adipiscing. Duis lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus.
   .productBox	<p class="productBox"> We have a product called CodeAuditor to check this </p>	We have a product called CodeAuditor to check this
   .download	<p class="download"> <a href=" "> <img alt="" src="/ssw/Images/Button_purchase.gif"/> </a> downloading banana </p>	downloading banana
   .interInfoBoxSide	<div class="interInfoBoxSide"> <h1>Attention: SSW Developers</h> <p>This is the interInfoBoxSide</p> </div>	Attention: SSW Developers This is the interInfoBoxSide.

HTML

1. Close tags that offically need closing eg. <p>, <li>.

   Empty elements must either have an end tag or the start tag must end with /> to comply with XHTML standards.

   <img src="chart.gif">
   <br>
   <hr>

   Bad Example - closing tag is not XHTML compliant

   <img src="chart.gif" />
   <br />
   <hr />

   Good Example - proper XHTML self-closing tags

2. Don't use <p> tag when it is unnecessary. The <p> tag is only used for paragraph text content. This means that a <p> tag must not be used to wrap <img>, <li>, <h1>, etc.

3. The Header and Footer tags. These are required on all pages so that you only need to keep the main body of the page and the heading html on the aspx page. The heading, menu, side, footer, table structure is all taken care of for you in the includes.

   At the top of your page you must tell the page to use the templates. You do this by inserting these 2 lines:

   <%@ Register TagPrefix="SSW" TagName="incBottom" Src="/ssw/Include/incBottom.ascx" %>
   <%@ Register TagPrefix="SSW" TagName="incTop" Src="/ssw/Include/incTop.ascx" %>

   Figure: Include Templates

   
   

   Now you can call the header template:

   <SSW:INCTOP id="Inctop" runat="server" PageTitle="SSW Template"></SSW:INCTOP>

   Figure: Calling the Header Template

   
   

   At the end of your page you call the footer that will close the table structure and put the footer image on the page:

   <SSW:INCBOTTOM id="incBottom" runat="server"></SSW:INCBOTTOM>

   Figure: Calling the Footer Template

4. Don't specify anything your <tr> or <td> tags. Any formatting is defined in the CSS file.

   <tr bordercolor="#cccccc" bgcolor="#cccccc">

   Bad Example - this <tr>tag has a color specified.

   <tr>

   Good Example - <tr> tag is kept clean.

5. When inserting a table use "class="clsSSWTable""

Visual Presentation

1. Sample Heading to look like this

2. When you have large blocks of text, it's important to break up the page to make it visually appealling. Using text boxes like this is a good idea...

   <table class="clsSSWTable" cellspacing="2" cellpadding="2" summary="Formatting Table" align="right" style="width:50%;">

3. If your table needs a header column use the <th> tag for the first table row to get the correct formatting in your table.

   Header Column	Header Column	Header Column	Header Column
   varchar, nvarchar	pstr	@pstrEmail	varchar(150)
   int	pint	@pintContactID	int
   bit	pbit	@bitPrimaryContact	bit

4. When you have tables that are displaying data (like a DataGrid) then use the same clsSSWTable but with a font-size='xx-small' and a couple of other changes to the table tag.

   ProdName	Downloads
   Simple Table Documentor	233
   SSW Performance PRO!	155
   SSW SQL Script Wizard	128
   SSW Data Renovator	122

5. Do you make your product ads stand out? Use the code 'class="productBox"' in your table tag to put a nice yellow box around them.

   At SSW, we use a yellow box to make our product ads stand out.

6. To display a grey quote box hanging on the right hand side of the page simply follow this format:

   <div class="quoteRightWrap">
   <blockquote>
     <p>
      I was extremely pleased with the professionalism and
      support given by SSW throughout these projects.
     </p>
   </blockquote>
   <p>Jason Ashton, CEO, Davnet</p>
   </div>

   Figure: Adding a quote box to a paragraph content

   Here's an example how it looks like:

   I was extremely pleased with the professionalism and support given by SSW throughout these projects.

   Jason Ashton, CEO, Davnet

   This is a dummy text just to show you how the quote box is positioned relative to the text content.This is a dummy text just to show you how the quote box is positioned relative to the text content.This is a dummy text just to show you how the quote box is positioned relative to the text content.This is a dummy text just to show you how the quote box is positioned relative to the text content.This is a dummy text just to show you how the quote box is positioned relative to the text content.This is a dummy text just to show you how the quote box is positioned relative to the text content.This is a dummy text just to show you how the quote box is positioned relative to the text content.This is a dummy text just to show you how the quote box is positioned relative to the text content.This is a dummy text just to show you how the quote box is positioned relative to the text content.This is a dummy text just to show you how the quote box is positioned relative to the text content.

7. To let content text wraps an image or div box (see CSS Styles section) use .floatLeft or .floatRight class.

   Although this class can be applied to most tags, please limit the use of this only to <table>, <image> and <div>

   <table class="greyBox" align="Right" width="40%">

   Bad Example - using the deprecated 'align' attributes for positioning

   <table class="greyBox floatRight" width="40%">

   Good Example - using CSS class for positioning

8. A 'hanging box' (a box or table that is placed on the left or right hand side of the content) must not exceeds 40% in width

   

   Bad example - hanging box taking too much space

   

   Good example - hanging box will not divert users from the main content

9. When a web URL is expected in a form text field, pre-populate it with "http://www." as the initial value. This will allow user to enter the data quickly and at the same time increasing data consistency.

   

   Bad example - User don't know which format the URL must be entered

   

   Good example - This ensures accurate data capture and helps the user with their data entry at the same time

Print Presentation

1. When you want to hide a page element (text, images, table, divs, etc) from print view, simply assign a "noPrint" class. Any elements with this class will not be printed but visible on screen.

   <img src="image.jpg" alt="sample image" class="noPrint" />

   Good Example - Applying the noPrint class to an image

   <div class="clsSSWTable noPrint">

   Good Example - Adding the noPrint class to an existing style

   <div class="noPrint">
   	Page 1 | 2 | 3 | 4 | 5 | .... [Next>]
   </div>

   Good Example - Hiding irrelevant content from print view