Website

14.1 \\
Website

Our multi-language wajax.com website incorporates multiple facets of our brand and is an integral component for the success of our customer service. For this reason, it is important to keep a sense of continuity across all aspects of the website in areas such as fonts, colours and other brand elements.

The following pages are to be used as a reference guide only. Therefore there will be exceptions to these guidelines in terms of unique page layouts or custom designed elements.

14.11 \\
Website Colours/Corporate Palette

Wajax is represented in two principal colours (Wajax Red and Pure White) and two supporting colours (Charcoal Blue and Cerulean Blue). Red should be the primary colour on web communications from Wajax. Additional corporate colours can be used after Wajax Red and Pure White to provide a basis. Each of the colours have a RGB and a Hex colour value specifically for online use. Corresponding Pantone® (PMS) values and a four-colour process (CMYK) breakdown for each colour can be found in section 3.2 of this brand guide.

These colours are important to the brand identity system and must never be adjusted.

14.12 \\
Website Typefaces/Typography

On our Wajax website we have implemented two main typefaces, Oswald and Open Sans and one alternative typeface, Open Sans. These are are web-safe Google Fonts that replicate the style of our corporate brand fonts. The assigned usage is listed below the typeface.

The use of these typefaces will maintain a consistent and cohesive appearance on all web material. For legibility, do not set these web fonts below 1.6em (except for Open Sans) for body copy.

Heading 1

font-family: ‘Oswald’, sans-serif;
color: #FFF;
font-weight: normal;
font-size: 2.8em;
line-height: 1.165;
text-shadow: 0px 0px 33.6px rgba(3, 3, 3, 0.75);
text-transform: uppercase;

Style Example

The “H1” tag is only used for page titles in the page header and should not be used in the CMS WordPress editor. This is the base style for this tag and can be adjusted as needed.

Heading 2

font-family: ‘Oswald’, sans-serif;
color: #000;
font-weight: 600;
font-size: 2em;
line-height: 1.1;

Style Example

The “H2” tag is meant to be used for any headlines in the body content of a webpage. This is the base style for this tag and can be adiusted as needed.

Heading 3

font-family: ‘Oswald’, sans-serif;
color: #000;
font-weight: 300;
font-size: 1.8em;
line-height: 1.4;

Style Example

The “H3” tag is meant to be used for any subheadings or section titles in the body content of a webpage. This is the base style for this tag and can be adiusted as needed

Paragraph

font-family: ‘Oswald’, sans-serif;
color: #000;
font-weight: 600;
font-size: 1.6em;
line-height: 1.4;

Style Example

The “P” tag is meant to be used for any body copy or basic text in the body content of a webpage. This is the base style for this tag and can be adjusted as needed.

Paragraph (Alternative)

font-family: ‘Open Sans’, sans-serif;
color: #000;
font-weight: normal;
font-size: 1em;
line-height: 1.4;

Style Example

This typeface can be used as an alternative paragraph typeface when it is necessary to use smaller typeface. This is the base style for this tag and can be adjusted as needed.

14.131 \\
Website Image Formats

Standard file formats for the web.

JPEG: (Joint Photographic Experts Group) is a standard method of compressing photographic images. We also call JPEG the file format which employs this compression. JPEGs are the most common file format used when creating images for use on today’s Internet. JPEGs do not support any form of transparency.

PNG: (Portable Network Graphics) is a file format for image compression that, in time, is expected to replace the Graphics Interchange Format (GIF) that is widely used on today’s Internet. A PNG file also allows for transparent backgrounds to an image (a logo without a background is a common example of this).

14.132 \\
Home Page Sliders

The homepage slider images are reserved for the overarching brand message “Together we get more done” along with the new positioning, “in the field | on the site | in the plant”. They will not be used for promotions or special events.

Slider will include a variety of mashup images to demonstrate the depth and breadth of Wajax’s expertise and service offering. 

There will be a maximum of 3 slider images online at any given time. The set will have a range of industry to better represent the various industries Wajax supports.

14.133 \\
Home Page Featured Content

With Wajax.com being a large website, there are times where we are wanting key messages or content to be front and centre for our customers. This is the purpose of the “Featured Content” section of the homepage. In this section, we are able to add square images with a call-out beneath each tile that includes a “Learn More” button to link where needed. Although any number of Featured Content tiles are able to be published, we recommend having either 3 or 6 tiles at any one time to keep the content succinct and in even rows.

14.134 \\
Common Page Blocks

Our web pages have layouts and blocks that are common to them. These pages follow a very similar pattern and framework. These blocks can only be used on Block Editor enabled pages. For consistency across these pages, refer to the guides below.

Intro Section

This is a two column block with a heading and paragraph(s) on left and an image on right.

This layout is meant to be used as an introduction section and should be placed first on the page.

Icon Block Buttons

This is a repeater block with titles, icons and a link. Each button can be linked to a page or an industry modal window.

Note: This block is only available on industry pages.

Buttons

This is a standard button. Each button can be linked to a URL or used as a quick link to jump to content within the same page.

Bullets

This is a standard unordered list block with a custom CSS class applied to achieve this styling.

Note: This styling is not applied to all unordered lists by default. Add the list-border-left CSS class to the list block.

Image Highlight CTA

This is a full width block with a background image and blue transparency can be positioned on left or right with content.

This block is meant to be used as large call to action.

Banner CTA

This is a small banner CTA with content on the left and a button on the right.

This block is meant to be used as a secondary call to action.

Cover Block

This is a full width block with a background colour, heading and button.

This block is meant to be used as a secondary call to action.

Accordion

This is a vertically stacked list of headers that can be clicked to reveal or hide content associated with them.

Accordions can be used to collapse a large amount of the content in order to minimize the amount of scrolling on a page.

14.135 \\
Page Headers

Many pages on our website include a header image across the top of the page. For the best results, refer to the following guide.

14.14 \\
Promotion Page Elements

Our Wajax “Promo Hub” pages are the area where we showcase any seasonal promotions that we currently have available. To allow for a more versatile page layout, two sizes of promotional tiles can be utilized. For the best results, refer to the guides below.

Promotion Featured Images

All promotional pages include a featured image area at the top of the page content. For the best results, refer to the guide below.

SPECIFICATIONS:

938 x 545px

RGB + 72ppi

JPG file format. No animated GIFs or Videos.

Animated elements can be included elsewhere within the page content

14.15 \\
Treatment of English and French

We have taken the necessary steps to create a fully bilingual website for both our English and French users. It is important to remember to create/update any copy in both languages if you are creating or updating any web pages. This also includes any images with text “baked” into the file. Refer to the samples below which show English copy and image text translated to French.

14.16 \\
Mobile Responsive and Accessibility Considerations

Our website has been designed and programmed so that it can easily be used on any desktop or mobile browser, and is fully functional for people with disabilities. At Wajax, we have a focus on great customer service, and our implementation of a responsive and accessible website is a great example of this.