Work

Web, Print, and Mobile Goodies

Collaboration Gateway (CG) Website

  • ClientCollaboration Gateway
  • DateFebruary 2012
  • RoleDesigner & Developer

Overview

One day we were approached by an AFRL program called “Collaboration Gateway” (CG) to create a website. The program wanted a website that would be future-proof and device-agnostic. Visually, the site was to convey the standard tech look-and-feel consistant with internal United States Air Force websites.

Markup and Technology

To create a site that was both future proof and design-agnostic, I turned to CSS media queries, and HTML5 markup. There was one problem with this solution though: the Air Force accepted browser was currently Internet Explorer 8, which did not support media queries, or HTML5 tags. To counter this, I included Google CDNs for both Modernizr as well as css3-mediaqueries.js by Wouter van der Graaf, which also uses JavaScript to add media query functionality to Internet Explorer. Both of these scripts were included inside IE-only conditional tags for Internet Explorer 8 and below.

Aesthetics

For colors, the CG website kept with the sharply contrasting black, blue, and bright orange hues found in previous promotional materials. The website uses typefaces from the Helvetica, and Myriad Pro families.

Layout

The desktop, tablet, and smartphone layouts took a modular and horizontal fluid layout based on the 1140 grid system. Each layout was broken up into different horizontal div and section tags: navigation, headers, footers, and body content.

Desktop layouts utilized a breakpoint beginning at 960px. It contains a vertical navigation bar, as well as horizontal secondary navigation on internal pages. The secondary navigation also made use of a JavaScript drop-down menu. Content sections float next to each other, in a three-column layout.

Tablet breakpoints were placed between 450px and 959px, while smartphone breakpoints were placed at 449px and below. Navigation items were contained within padded list-item tags for easy tactile use. Tablet navigation contained three columns, while smartphone navigation utilized two columns. By default, the 1140 grid system also stacked content vertically. The secondary navigation on smartphone differs, as a jQuery plugin dynamically converts the unordered list element to dropdown list to save screen real estate.

Collaboration Gateway Website
Collaboration Gateway Website
Collaboration Gateway Website
Collaboration Gateway Website