At SSW we are proud of our standards. These standards govern how we work and present ourselves 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 generic/public web design rules see the SSW rules relating to websites.

These are rules that are specific to SSW (usually relating to the red, grey, black and white branding).

General

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

2. All web pages must also abide by the rules set out in SSW Rules to Better Websites. This includes:

   • Navigation
   • Layout & Formatting *IMPORTANT*
   • Development
   • Branding and Marketing *IMPORTANT*
   • Online Transactions
   • Graphics
   • Tuning and Maintenance

3. Editing an existing page

   Use Microsoft Visual Studio or Microsoft Expression Web to edit a webpage (be aware you need to check out the files from TFS first - using VS 2008)

   First read Do you edit right files? This shows a Good and Bad example of page editing.
   

   Then read Do all your employees know the quickest way to fix small web errors?
   

4. Creating a new page

   Please read Using TFS to Edit the SSW Website first.

5. Master Pages

   We have 2 Master Page templates you can choose from:

   • Default.Master
   • SubPage.Master

   In .NET 2.0 & 3.5, there are 2 Master Page templates you can choose from:

   • Long pages (Our rules and standards) e.g. Code Auditor page
   • Short pages (The new template, it is also called "sub-pages") e.g. Contact Us page

6. Add this "Include" file for all SSW Products:

   <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. Always acknowledge your work. Acknowledge any contributors 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 contributors". OR, if you are just referring to another person's 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.

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

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

   And at the top of the aspx.vb page:

   Public Class LoginMaintancePage

9. If you are not sure about web standards see www.w3.org

CSS Style Reference

Use the standard colors, namely #FD1912 #CCCCCC #DDDDDD #F0F0F0

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

Headings

These are examples of SSW headings defined in the css:

<h1>This is Heading 1</h1>

<h2>This is Heading 2</h2>

<h2 class=accordionHeading>This is the accordian heading</h2>

<h3>This is Heading 3</h3>

NOTE: The standard from 2007 have Verdana and Trebuchet fonts. The 2012 standard will use only Helvetica. Sizes will be available with the new Web Template.

Text

SSW's standard font is Helvetica(12px for Word documents).

<p class="strike">
Use the class on the <p> for single paragraphs
</p>

<p>Use the class in a 
<span class="strike">span</span> 
for words inside a paragraph</p> 

<div class="strike"> 
    <p>Use the class in a wrapping div...</p> 
    <p>for multiple paragraphs.</p> 
</div>

<p class="highlight">
Use the class on the <p> for single paragraphs</p>

<p>Use the class in a 
<span class="highlight">
span</span> for words inside a paragraph</p> 

Boxes

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

<pre class="code">
   To show code, use this format.
   The <pre> class preserves 
   formatting such as spacing and 
   line breaks.
   Make sure you use proper 
   character entities.
</pre>

    To show code, use this format.
    The <pre> class preserves 
    formatting such as spacing and 
    line breaks.
    Make sure you use proper 
    character entities.

<div class="multimediaBox">
  <p>Lorem ipsum dolor sit amet, 
  consectetuer.
  </p>
</div>

<div class="infoBox">
  <h4>What is .NET?</h4>
  <p>Lorem ipsum dolor sit amet 
  consectetuer adipiscing. 
  </p>
</div>

<p class="productBox">
  We have a product called 
  CodeAuditor to check this
</p>

<p class="download">
<a href=" ">
<img alt="" src="/ssw/Images/
Button_purchase.gif"/>
</a>
downloading banana
</p>

<% If (Server.MachineName
= ConfigurationManager.AppSettings.Get
("internalMachineName")) Then %>
<div class="interInfoBoxSide">
  <h1>Attention: SSW Developers</h1>
  <p>This is the interInfoBoxSide</p>
</div>
<% End If %>

Tables

<table class="clsSSWTable"></table>

<table class="clsSSWTable">
    <tr>
        <th>Header Cell 1</th>
        <th>Header Cell 2</th>
    </tr>
    <tr>
        <td>Data Cell 1</td>
        <td>Data Cell 2</td>
    </tr>
    <tr>
        <td>Data Cell 3</td>
        <td>Data Cell 4</td>
    </tr>
</table>

When you have tables that are displaying data (like a DataGrid) then use the same clsSSWTable but add a data class.

<table class="clsSSWTable data"></table>

<table class="clsSSWTable 
            data" rules="cols">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
    <tr>
        <td>Data 3</td>
        <td>Data 4</td>
    </tr>
    <tr>
        <td>Data 5</td>
        <td>etc etc</td>
    </tr>
</table>

The Rules attribute of a table defines where borders should be drawn; cols indicates that borders are drawn between the columns, and rows borders between the rows.

Links

<a href="http://www.google.com/" target="_blank">Google</a>

<a href="http://www.ssw.com.au/" 
                        target="_blank">Link</a>

<a href="document.pdf">Portfolio</a>

<a href="audio.mp3">Podcast</a>

<a href="video.wmv">Video</a>

<a href="powerpoint.pptx">Presentation</a>

<a href="word.doc">Word</a>

<a href="excel.xlsx">Excel</a>

<a href="http://www.google.com" class="ignore">Google</a>

Figures

To obtain the standard image style used across SSW's website, use <dl class="image">.

You might want to use the image as a "good" or "bad" example, the CSS class used to apply the cross and check icons to figure captions is added to the same <dl> tag. For "bad" examples, use <dl class="badImage"> and for "good" examples, <dl class="goodImage">

For more information about images and figures, read the following rules:

• Figure: Do you add useful figure text (aka a caption) to avoid a lot of text over images?
• Figure: Do you use 'Bad Example' and 'Good Example' with ticks and crosses in captions?
• Figure: Do you use the right HTML code to add the useful figure/caption?

Visual Presentation

Quotes

<div class="quoteRightWrap"> <blockquote>
  <p>
   This is an example of a quote box. 
   Please note that the div "quoteRightWrap" 
   wraps a blockquote and paragraph.
  </p>
</blockquote>
<p>Name, Title, Company</p>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut ligula quam, a semper diam. Sed pretium ultricies elementum. Curabitur nec dui nibh. Vivamus blandit justo arcu. Donec eget mauris lacus. Curabitur luctus, metus eu volutpat suscipit, augue dolor tristique magna, a feugiat augue tellus id ligula. Pellentesque tincidunt, risus quis congue ultricies, augue tellus interdum enim, sed aliquet orci mauris sit amet eros. Vivamus imperdiet aliquet massa. Mauris semper malesuada sem in dapibus. Phasellus ut purus erat. Duis euismod mattis nisl at mollis. Sed at nisl nunc, in hendrerit massa. Fusce consequat egestas augue vel euismod. Ut egestas rhoncus quam, a sodales lorem accumsan at. Mauris vehicula, felis a tempor tristique, felis mi ullamcorper dolor, et porta urna mi non magna. Phasellus volutpat mollis mauris quis pharetra.

Floating

The camel image has been floated using this code: 
<img src="/ssw/events/images/SSWHall/camelfiller.jpg" 
    class="left" width="100px" />. 

The true purpose of floats is to wrap images or div blocks with content text. All elements that are floated MUST have a defined width. This is then followed with a simple class declaration of left or right.

Please limit the use of floats only to <table>, <image> and <div>. Float responsibly.

Text Readability

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

Text boxes should always have a defined width and a comfortable margin for ease of reading. A general rule of thumb is that the width of a paragraph should contain no more than 100 characters. Here is a short article summarizing the basics of web readability.

For the same reason; a 'hanging box' (a box or table that is placed on the left or right hand side of the content) must not exceed 40% in width.

Bad example - hanging box taking too much space

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

LightBox

To activate the lightbox you must include the class thickbox in your link tag. Lightbox-hover enables the mouseover effect. Please note that these are two classes, so it is possible to enable the lightbox without a mouseover effect (if you are using the lightbox for purposes other than displaying images).

<a href="/ssw/events/images/SSWHall/camelfiller.jpg"
class="thickbox lightbox-hover" >
<img src="/ssw/events/images/SSWHall/camelfiller.jpg" /></a>

For a lightbox gallery add rel="YourNameHere" like so:

<a href="images/01.jpg" class="thickbox lightbox-hover" rel="ExampleGallery">
<img src="images/s_01.jpg" /></a>
<a href="images/02.jpg" class="thickbox lightbox-hover" rel="ExampleGallery">
<img src="images/s_02.jpg" /></a>

If you wish to add a description to your image, include it in the title of the link tag

<a href="images/01.jpg" class="thickbox lightbox-hover" title="This is a camel.">
<img src="images/s_01.jpg" /></a>

The complete link would therefore look like this:

<a href="images/01.jpg" class="thickbox
                lightbox-hover" rel="ExampleGallery" title="This is a camel.">
<img src="images/s_01.jpg" /></a>

Designers: The source files for the lightbox can be found under /includes as Thickbox.js, lightbox-hover.js, thickbox.css.

HTML Tips

Close tags that officially need closing e.g. <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

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.

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" %>

Now you can call the header template:

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

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>

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.

Design Guidelines

At SSW we use master files that follow our standards. This creates pages and images that have consistency and structure.

Headers

In every sub-page of the second level (this means that the homepage is one click away) we use a standard header. The master page is Website Design and Development page.

A standard header includes; a colored transparent bar, with a rounded cornered white box, and a related image as the background.

See this psd file to create a new one.

Website Design and Development page has a master image for SSW's headers

Rotating Banner

SSW's homepage uses a rotating banner system. This means a new banner appears randomly each time a user views the page. Our standard banner is 799px x 186px and has a "Learn More" button which links to the related page.

Master banner for SSW's homepage

Product Page

Our master product is Code Auditor, any new product page will be based on this page.

User Friendliness

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

Screen Captures

We use two software for screen captures - FullShot and Snagit. Read rules Do you use images to reduce the words? and Do you use balloons in screenshots instead of a 'Wall of Text'? to understand the advantages of using images and screenshots. To setup SSW default styles for balloons on screen captures, please read below:

Acknowledgements

Adam Cogan
Tristan Kurniawan