Follow

Advorto HTML wireframe

Intended readership

This document has been created to be read by designers and web developers who have an understanding of HTML and CSS. It is expected that the reader will create the final ‘Theme’ to the specifications within this document.

Introduction

The aim of this document is to guide a designer on how to take our standard career portal HTML output, and style it to fit with a client’s company branding and design requirements.

This is achieved with the creation of a ‘Theme’, which is a collection of CSS files and images all contained within a single folder structure. The Theme is then added to the career portal when it is deployed.

We will supply sample HTML and the dependent CSS and JavaScript file(s) containing all the relevant base classes and functionality. Your CSS should then override the base styling where required.

When you are satisfied with the results, simply return the Theme (i.e. the new CSS file(s) and any other dependencies, such as images and JavaScript files) to us, and we can add it to the client’s career portal.

HTML layout

Our systems produce a primary HTML template with a selection of pages that are inserted into this template.

At its most basic, the HTML is built up to match the following structure:

This wireframe lists the containers with a corresponding CSS selector to that container. These containers should be assumed to be a standard <div> tag unless otherwise stated in parentheses after the selector.

An example of the most basic HTML layout can be seen by viewing the provided HTML wireframe default page “wireframe.html”

HTML wireframe details

There is scope for you to modify the base HTML in the wireframe to suit your design requirements, but it should be noted that much of the markup in the final build will be generated by our system and cannot be changed. Various “merge fields” such as {!LoginLinks} and {!TopNavigation} are included in the HTML which are being dynamically replaced to emulate this.

For example, the <ul> container “#mainnav” (represented in the HTML document by the merge field {!NavigationContent}) is a dynamically driven menu, which lists the application form pages available to the candidate once they start the application process. As such its contents are not customisable, but its styling is. When the candidate is on pages outside of the application form such as the search page, this particular container is empty.

The Bootstrap framework is used for the majority of the base styling and structure in the HTML wireframe. This of course also allows for the use of the Glyphicons icon font provided with Bootstrap, and we include the FontAwesome icon font by default as well. We would advise using Bootstrap classes and components where possible to help to ensure continued maintainability and a responsive layout. Please see the Bootstrap site for more details at http://getbootstrap.com/.

The container “#advorto-ident” contains our ident and a link to our homepage http://www.advorto.com; this should be retained at the bottom of the page.

Required files

The following JS and CSS references should not be removed from the HTML, as these are key to some of the base functionality of the site:

  • bootstrap.min.css
  • layout-core.min.css
  • font-awesome.min.css (when intending to include icon-based social media navigation links)
  • html5shiv.js
  • respond.min.js
  • jquery-1.11.3.min.js
  • bootstrap.min.js

There is also a “markup-builder” JavaScript file included, which is being used to dynamically replace the merge fields, and includes other non-standard behaviour unique to this HTML wireframe. This file will of course not be included in the final build, but is essential to include while working with the HTML wireframe to ensure that the necessary HTML is generated. This file should not be altered. 

Themes

It is possible to create advanced themes based on the current HTML.

Theme-001

An example CSS file, theme-001.min.css is included in the “assets” folder. This is one of our default themes that can easily be customised for a client by adding a logo and selecting some primary colours (such as link and button colours).

This can be viewed by going to the example HTML Wireframe and clicking on the “Add style” link in the “.navbar-right” container (in the top right corner of the site). It can then be removed by clicking the “Remove style” link. This will add or remove the theme stylesheet from the HTML header.

Creating a new theme

Ideally, a Theme should not require any adjustments to the HTML, as the process is greatly simplified if a theme consists of only CSS changes. If the desired layout cannot be achieved through CSS alone, then making changes to the HTML wireframe is of course possible (with the exception of the HTML generated by the merge fields).

When creating a new Theme, please place all required files (CSS, JS, and images) in the “assets” folder.

All CSS or JS references should ideally use a local path starting with / from the root, and any external references should be an absolute path (using https).

What to do next

Once your theme or themes are complete, please package them into a single compressed archive file (.zip file), one per theme and send them through to your account manager or our support desk.

We will then include your theme in your site build and send you a link to a test version which you can view. If you have any changes or amendments to the theme after viewing it, you can of course send an updated package through.

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

Powered by Zendesk