Web Overview

Info-Tech has adopted the Twitter Bootstrap Framework (2.3.2) for our site layouts, components and common JavaScript functions. This ensures consistency between designers and developers and enables us to use a solid grid layout to keep our site responsive and viewable on any device. See below for more details on usage and where we differ from Bootstrap.

View Documentation

Front End Development Standards

HTML5

All pages use HTML5 doctype:

<!DOCTYPE html>

CSS3

We style our content with 'progressive enhancement' in mind, this refers to the compatibility of CSS with different browsers. Because content is the most important factor on our site, we start with that. We then add basic CSS to make sure it looks good on old browsers (IE7, etc.) before adding CSS3, which includes styles such as shadows and gradients. This ensures a good user experience with any browser but a more visually appealing one with a modern browser.

We use css3generator.com and ColorZilla for cross-browser CSS3 styles.

JavaScript, jQuery & CoffeeScript

Places used:

  • See Twitter Bootstrap for common functions
  • Navigations (desktop, tablet, mobile)
  • Video Player
  • Other misc. places to enhance user experience

All JavaScript functions are encouraged to have a no-script fallback however some areas of our site require JavaScript in order to function properly. Page load times are tested in development environments to ensure pages load fast.

Accessibility

We are currently improving our website to be fully Web Accessible. We use WAVE (http://wave.webaim.org ) to keep our website fully accessible for users.

Files & Directories

All images and graphics called within our website with the exception of secured page content are stored in the asset pipeline.

  • Files that are called within CSS should be placed in assets/images
  • Video files are placed in videos.infotech.com
  • Website Assets (such as media PDFs) are placed in files.infotech.com

Usability

All changes to the site must pass a usability standard by the design team. This includes but is not limited to:

  • Layout
  • Flow
  • Look/Brand Standards
  • Accessibility Testing
  • Responsive Testing (Usable on all devices)
  • Code Review
  • Content/Copy Review

Colors

Info-Tech's color palette has been carefully chosen to represent our brand. Listed below are the Hex Codes, SCSS variables, and RGB used for each.

White Light Grey Light Grey Text Charcoal

#FFFFFF

white

RGB: 255, 255, 255

#E8E8E8

$common

RGB: 232, 232, 232

#787878

$text-muted

RGB: 120, 120, 120

#333333

$text

RGB: 51, 51, 51

  • Body Background
  • Aside with Feature Image Text
  • Text on buttons
  • Listing box background
  • Navigation header backgrounds
  • Listing box .type text
  • Description text
  • Non-linked nav items (Welcome message)
  • Body Text
  • Header Text Underlines
Dark Blue Medium Blue Orange Green

#29475F

$primary

RGB: 41, 71, 95

#2576B7

$link

RGB: 37, 118, 183

#D17D08

$link-hover

RGB: 209, 125, 8

#2B9E36

$trial

RGB: 43, 158, 54

  • Header and Footer background colors
  • Links
  • Call to Action buttons
  • a:hover
  • Guest Call to Action Button
Cardinal Red Mustard Ivey Teal

#A24130

$apps

RGB: 162, 65, 48

#D9A210

$infra

RGB: 217, 162, 16

#5A7D41

$strat

RGB: 90, 125, 92

#007698

$ptf

RGB: 0, 118, 152

  • Applications Silo
  • Infrastructure Silo
  • Strategy & Leadership Silo
  • Predicting the Future Silo

Buttons

We use the same button classes as Twitter Bootstrap however we have styles overriding the defaults and some additional button classes. Here is how they should appear:

Look CSS Class
btn
btn-primary
btn-info , btn-download
btn-success
btn-warning
btn-danger
btn-inverse
btn-link

Labels and Badges

We use the same label and badge classes as Twitter Bootstrap however we have styles overriding the defaults. Usage is the word wrapped in a span with the following classes:

Default / # label / badge
Primary / # label label-primary / badge badge-primary
Info / # label label-info / badge badge-info
Success / # label label-success / badge badge-success
Warning / # label label-warning / badge badge-warning
Important / # label label-important / badge badge-important
Inverse / # label label-inverse / badge badge-inverse
Bold / # label bold / badge bold

Typography

All web fonts provided by Google Fonts, Roboto font family created by Christian Robertson.


h1 Header

h2 Header

h3 Header

h4 Header

h5 Header
h6 Header

Body Text

Body Text Italic

Body Text Bold

Roboto Slab (Bold 700)

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
class="serif-medium" @include serif-medium;

Roboto Slab (Light 300)

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
class="serif-light" @include serif-light;

Roboto (Light 300)

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
class="sans-serif" @include sans-serif;

Roboto (Light 300 Italic)

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Roboto (Bold 700)

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789


Icons

We have a variety of icon packs to choose from however there is an order in which we prefer to use these packs, that is, if we cannot find an icon from our priority icon pack then we will try and find an appropriate icon in the next pack and so on. This is the current priority order:

  1. Font Awesome 3.2.1

    Vector(.svg) versions of Twitter Bootstrap's icons so they are smaller in file size and support retina displays. Integrated with font-awesome-rails gem.

  2. Glyphicons (Twitter Bootstrap)

    Used when Font Awesome does not have a corresponding icon; included with Bootstrap.


Branding

Logo Guidelines

  • Clear Space Margin:
    The Example Illustration describes the clear space margin that must always surround the Info-Tech Logo. To determine the correct amount of space surrounding logo you must measure the height of the “N” in the logo. Add that space from the outer most pixel of the logo in all four directions and you will have the necessary clear space to always surround the logo.

    Info-Tech Logo Standards
    *Not Actual Size:
  • Size:
    The size of the logo is determined by the minimum clear space allowance. While it is vital that the logo be highly visible and legible, making the logo as large as possible to fill a given space is not desirable. The logo looks best with ample white space surrounding it and when working in harmony with other elements in the design.

  • Minimum Size:
    To ensure legibility, do not reproduce the logo at sizes where you cannot read all the words clearly (including, “Research Group”). The smallest allowable size the logo with clear space margin included can be is: 149 x 46px. The Logo proportion should always remain with its width. If branding is required in a smaller space than the minimum logo size please spell out the entire name, “Info-Tech Research Group” in text. Note: When “Info-Tech Research Group is written out” it must not use a tildi (~) in-between “Info” and “Tech”.

    Logo minsize Minimum actual size with minimum clear space (149 x 46px)
  • Logo Font:
    The font used is Aldine 721BT. This font is not to be used in any other place than the Logo.

Corporate Slogan Guidelines:

  • Allowable Cases:
    “Practical IT Research That Drives Measurable Results” is to be always spelled either Start Case (Start Case means each first letter of every word begins with a capital) or UPPERCASE.

  • Corporate Slogan Font:
    The font used is Arial Regular

  • Usage:
    The Corporate slogan must appear in context with the Logo whenever possible. Some Online and printed applications may be exempted in the interest of clarity.


Download Info-Tech Logo Files

GET HELP Contact Us
×
VL Methodology