Implementation guide - GC Web Usability Intranet theme

• Documentation
• Questions or comments?

Coding differences: Internet versus intranet

The intranet templates share the same coding foundation as the internet templates. However, there are a few minor coding adjustments that help to create a more intranet-focused product. The intranet templates can:

• Feature the department signature.
• Have some department branding elements applied.
• Have customize links in the header and footer.

Changes to the header

Difference 1 Rework the top bar and FIP elements

• Remove Government of Canada bar
• Rename heading: Government of Canada navigation bar to Intranet navigation bar
• Add an intranet local bar
• Group FIP elements together
• The generic Government of Canada signature should be replaced with the Department's actual signature image.

Difference 2 Optional sub-site bar

A sub-site bar can be added just before the banner ends. Refer to: Adding sub-sites

Changes to the footer

Difference 3 Footer notices have moved

The Terms and conditions | Transparency links have been moved below the department's footer links.

Difference 4 Footer links can be customized

Although you should adheres as closely as possible to the internet footer, there is likely a need for local customization. Refer to: Footer links

Difference 5 GC footer removed and branding image allowed.

The GC footer has been replaced with a departmental branding opportunity. Refer to: Branding image

Page layout types

English examples

• English examples - Content page
• English examples - Content page - Secondary menu 1
• English examples - Content page - Secondary menu 2
• English examples - Content page - Sub-site
• English examples - Content page - Sign In
• English examples - Content page - Sign Out
• English examples - Content page - No search or language selection link
• English examples - Content page - No site menu or breadcrumb trail
• English examples - Content page - No search, language selection link, site menu or breadcrumb trail
• English examples - Splash page - English/French
• English examples - Server message page - English
• English examples - Server message page - English/French

French examples

• French examples - Content page
• French examples - Content page - Secondary menu 1
• French examples - Content page - Secondary menu 2
• French examples - Content page - Sub-site
• French examples - Content page - Sign In
• French examples - Content page - Sign Out
• French examples - Content page - No search or language selection link
• French examples - Content page - No site menu or breadcrumb trail
• French examples - Content page - No search, language selection link, site menu or breadcrumb trail
• French examples - Splash page - French/English
• French examples - Server message page - French
• French examples - Server message page - French/English

Now you can:

• Customize the header
• Customize the footer

Customize the header

Intranet menu bar

A persistant menu bar is located at the top of the page. It contains the Français link as well as any common and global intranet links that are feature worthy.

Design features:

• The specific links should be global and uniform across the entire intranet.
• The only required link is Français. All other links are intranet-specific.
• The links can be internal or external, however all employees must be able to access the content of these links.
• The design treatment should not be altered.

Department signature

Do not use the generic Government of Canada signature, as the template will accomodate your local department signature. The default code accounts for a standard height of 20 pixels. If a different height value is needed, it must be reflected in the CSS file. Manually overwrite the default code with your new height value:

#gcwu-sig, #gcwu-sig-in, #gcwu-sig img{height:20px !important;overflow:visible !important;}

For example:

Department signature	CSS
	Leave CSS as the default.
	Change CSS to: #gcwu-sig, #gcwu-sig-in, #gcwu-sig img{height:33px !important;overflow:visible !important;}
	Change CSS to: #gcwu-sig, #gcwu-sig-in, #gcwu-sig img{height:42px !important;overflow:visible !important;}

Banner image

The banner is 52 pixels high. The banner stripe is a solid background colour, however the space within the wireframe includes an image that is customizable to meet your intranet branding requirements. The image must seamlessly merge with the chosen background colour.

All other requirements are addressed in the following documents:

• Standard on Web Usability Appendix E: Layout and Design
• Guidance on Implementing the Standard on Web Usability: Web Page Layout and Design Elements

Adding sub-sites

Most intranets have sites that operate independently of the the parent site. For example:

• Human Resources Branch is likely a sub-site of the parent intranet site.
• Pacific Region is likely a sub-site of the parent intranet site.

Live demoSub-site

Design features:

• A sub-site bar is added and appears below the standard banner elements.
• The sub-site text links to the the sub-site's homepage.
• The background is controlled by a customizable CSS class. The default appearance is attached to the class gcwu-subsite-1. The code is:

  <div class="gcwu-subsite-1" id="gcwu-subsite">
  	<p><a href="/hr/index-e.html">Human Resources Branch</a></p>
  </div>

  Also, when adding a sub-site, you must modify the banner code to include the ARIA code. The banner must reference the IDgcwu-bnr:

  <div aria-owns="gcwu-subsite" role="banner" id="gcwu-bnr">

• When additional colour themes are needed, you must create and maintain custom CSS file. The template comes with gcwu-subsite-1 so you must add as many additional classes are your site needs. For example gcwu-subsite-2 could be red, gcwu-subsite-3 could be orange, gcwu-subsite-4 could be purple etc. The number of extra sub-site classes depends on the architecture of your site.

Site navigation bar

Design features:

• Height is 32 pixels.
• Colour appearance can be modified to meet the intranet branding needs.
• Link text is standard weight (not bold).
• Down arrows appear when a mega-menu is avaiable.
• Sufficient padding in between the menu items ensures there is no visual congestion.
• Unlike the internet version, there is no border bottom.

All other requirements are addressed in the following documents:

• Standard on Web Usability Appendix E: Layout and Design
• Guidance on Implementing the Standard on Web Usability: Web Page Layout and Design Elements

Breadcrumbs

All requirements are addressed in the following documents:

• Standard on Web Usability Appendix E: Layout and Design
• Guidance on Implementing the Standard on Web Usability: Web Page Layout and Design Elements

Customize the footer

Footer links

The links in the footer should suit the needs of that intranet. However, the footer for intranets should match the TBS approved footer for internets, except where there is a strategic decision to deviate. Refer to these:

• Standard on Web Usability Appendix E: Layout and Design
• Guidance on Implementing the Standard on Web Usability: Web Page Layout and Design Elements
• Guidance on Implementing the Standard on Web Usability: Appendix C: Standardized terms

The number of columns can be easy changed to suit a Department's needs. The maxiumum number allowed is six columns, and uses a grid-12. More than six columns would require text to be inside of a span-1 grid cell, which is not allowed. The WCAG 2.0 requires text to increase up to 200% without breaking the layout and text inside a tiny box cannot effectively do this. Refer to: Success Criterion 1.4.4

Branding image

Below the footer is a 52 pixel high branding image placeholder. The height is equal to the banner and creates a bookend effect for the content.

Up to two images can be inserted.

Height dimensions

Unlike the width dimensions, the values used for the height have no limitations or restrictions. The height of the banner or the mega menu is often decided by the original designer in a Photoshop environment and then everyone has an opinion:

• "I think the banner takes up too much space!", or the opposite
• "I think it's too thin and we don't have enough space to apply our branding."

Therefore, Phi (Φ) and the golden ratio was chosen as the height benchmark. This mathematical ratio has proven to be aesthetically pleasing while also offering us a rigourous baseline for the height values.

By taking a typical 20 pixel high institutional signature and applying Φ, you get the following sequence:

• 20 / 1.618 = 12px
• 20 x 1.618 = 32px
• 32 x 1.618 = 52px
• 52 x 1.618 = 84px
• 84 x 1.618 = 136px

Phi (Φ) and the golden ratio?

The pyramids, the Mona Lisa, your teeth and the parthenon have something in common. They all share the same height to width ratio, known as the golden ratio. This ratio is simply 1 to 1.618, which is the same thing as 1 to Phi. The Greek symbol Φ represents Phi, and has a numerical value of 1.6180339887…. Whether it's man-made or existing in nature, Phi is all around you. It is consistently known to exist in beautiful things, including Web pages.

Just as Pi (π= 3.14) is a by-product of a circle, Phi (Φ) is a by-product of a segmented line. This line can morph into a triangle, rectangle, pyramid, swirl, star, pentagon, decagon and more. So how does this apply to the Web? Historically, the size of an image, the padding around a box, or the width of a table was an arbitrary size, chosen to suit a particular need. By applying the golden ratio, which is the relationship between Phi and the number 1, you consistently know exactly what size to make something. This results in consistent visually pleasing layouts that appeal to a broad audience.

Why was Phi chosen as a benchmark?

It's not that Phi is the only way to establish a baseline measurement (we could easily say everything must divide by 10px or have a ratio of 1 : 1.5), but Phi already exists in nature and in man-made objects. Plus it is mathematically flexible (you can have a line, a box, a star and a swirl).

How was Phi discovered?

As a math equation

Phi = 1 + the square root of 5, then divide by 2.

As a square

1. Draw a square
2. Locate the midpoint in the bottom line
3. Connect the midpoint to the top right inside corner
4. Pivoting from the midpoint, let the line fall to the right
5. The line segment outside the square is phi (φ = 0.618) times longer than the line segment inside the square and the total bottom line is now Phi (Φ = 1.618) times longer than the original sides of the square.

When you use Phi in a ratio, it's known as the golden ratio. You can present the ratio two ways (mathematically, these are the same thing):

1. Phi Φ golden ratio = 1 : 1.168
2. phi φ golden ratio = 0.618 : 1

As a 13^th century math experiment

In the 13^th century, the same Italian mathematician who introduced the base-10 counting system to Europe, asked himself a math question about rabbits. His name was Leonardo of Pisa (known as Fibonacci) and he wondered: How many pairs of rabbits produce within a year, beginning with a single pair, if every month each pair bears a new pair that becomes productive from the second month on?

While this is an idealized (biologically unrealistic) rabbit population, the total number of pairs, month by month, forms the sequence 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, and so on. Each new term is the sum of the previous two terms (1+1=2, 1+2=3, 2+3=5, 3+5=8, and so on). This set of numbers known as the Fibonacci sequence.

Where does Phi exist?