1.0Overviewso, basically...

Frontier Airlines wanted a redesign of their high-traffic corporate site’s main pages. I worked with the design team at the agency I was working at, Zenman, to ensure the site’s visuals could efficiently be coded. Then, my development team built the front-end code and a style guide, and worked with Frontier’s back-end developers to support their integration.

Services

Details

  • Redesign of major, high-traffic site.
  • Built a style guide using KSS.
  • Built front-end code and worked with back-end team for integration.
Website developed for Frontier Airlines at desktop screen width

2.0Special Highlightslet me draw your attention to...

2.1KSS Style Guide

Frontier needed an interactive style guide they could provide to their partners in order to unify styling across their distributed sites.

I built a style guide using KSS (Knyle Style Sheets), which from a technical perspective allows simple comment lines above style definitions to be compiled into a formatted, interactive style guide. This made it a “living style guide,” meaning it uses the same code as the rest of the website, so any changes to the style guide are reflected immediately on the website itself and vice versa.

Of course, one major benefit of this approach was that the code I was writing for Frontier’s website exactly adhered to their style guide. If Frontier was asking their partners to follow the style guide, it made sense for them to lead the way on their own website.

As a last step, Zenman set up a special server to host the style guide, and I built a login mechanism to ensure only partners authorized by Frontier had access to review these guidelines.

Style guide developed for Frontier Airlines

2.22.0, Too…

Just before I resigned my position as Principle Developer at Zenman, I roughed in a 2.0 version of the style guide with some helpful improvements in preparation for the agency’s further work with Frontier.

Amoung other improvements, by collapsing the navigation into an overlay, style guide modules were now full width and responded to changes in screen size in the same way they would ultimately on the website itself. Rather than approximating things like the original style guide, this made it possible to actually test out styling on real devices.

I also prepared a strategy for a more modern delivery process, with built in testing, approvals, and acceptance steps to ensure Frontier could easily see what they were getting and request changes easily and early.

3.0Technicalfor the geeks

3.1Sticky Stopper jQuery Plugin

One of the features Frontier wanted was a credit card ad prominently featured on the home page I was developing for them. We discussed making it sticky (meaning it would be fixed to one side of the browser window and stay their as the user scrolled), but we didn’t want it to cover up the travel-themed video hero or the information contained in the footer.

I built a “sticky ad” feature that allowed Frontier’s back-end developers to add a banner to any part of the page, which would serve as the starting point, and define another part of the page where they wanted the banner to stop being sticky. In this way, Frontier was able to place the banner under the hero video at the top of the page, sticky to the browser window’s bottom edge when scrolling through the content, and then lock it above the footer once it scrolled that far down. I built it as a jQuery plugin so it’d be easy to drop in to the project and reuse in future projects.