Collaboration Gateway (CG) Website
- ClientCollaboration Gateway
- DateFebruary 2012
- RoleDesigner & Developer
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
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.
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.
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.
Check out these related projects...