By David French
Jan 21, 2014

I.S. Goes Responsive

When FrontPoint Security approached us to redesign their website, we saw a great opportunity to build the fully responsive site we’ve been pining for.  It wasn’t a tough sell, as FrontPoint had done their own research and were anxious to build a site that would position them as the industry thought leaders they already were.  Over the past year we had dabbled with responsive design on a smaller scale, so we recognized the potential, but at last it was time to dive into the deep end. 

After several hours of research we decided to use Zurb Foundation as the framework for this project. It's a great system with rapid prototyping ability, fluid grid with nesting, and slick UI goodies. However, Foundation is not a one stop shop if you want maximum browser support, so we also threw in selectivizr.js to provide some additional needed CSS3 pseudo-classes to IE7 and IE8, as well as respond.js. 

We quickly learned that a change in process is needed for responsive design. Gone are the days where we can just create pixel perfect comps in Photoshop and simply translate them into code. Designing a fluid layout means designing in an equally fluid way.  This means closing up Photoshop and designing directly in the browser, working with the CSS on the fly to address the little nuances that present themselves at different sizes. By putting together a prototype early in the process we eliminated some minor concerns that could have become major had we found them later.

Rather than opting to design to default breakpoints, we decided we wanted to future-proof our design and make it truly device-independent.  This meant setting several other breakpoints based on the needs of our specific design, and using a fluid layout to adjust the layout appropriately to whatever resolution is being displayed.

Of course every design also comes with its own set of unique challenges.  For FrontPoint, these included a unique browser-hugging navigation system that didn’t fit within a traditional grid setup.  Custom breakpoints were heavily utilized for this particular component to allow it to fit and function well on everything from a phone to a widescreen desktop.

In addition, we faced a significant challenge working with Brightcove, our client’s contracted video provider.  During the prototyping stage, we discovered their default player was not responsive – in other words it would not accept a max-width property to allow the videos to scale dynamically with the other content.  We are proud to report that, through our work on this project, this critical flaw was corrected by the Brightcove team, opening the door for responsive video for all of Brightcove’s current and future customers.

Prototyping also helped us identify another obstacle when we noticed the Zurb fluid grid would break on IE7 at certain browser widths.  This was due to a rounding issue with the default column widths that we were able to correct with more precise percentages. This issue and our solution was brought to the attention of the team at Zurb and was graciously accepted as a permanent change to their framework moving forward.

This project was an outstanding learning experience for our team, but it would not have been possible without an equally outstanding client.  Kudos to them for being forward-thinking enough to recognize the value of responsive design, patient enough to allow us the time to work through the inevitable issues, and most importantly for being trusting enough in us to implement design adjustments in such a fluid manner.  The result is a testament to what can be done when client and agency truly work together as partners. 

 

(202) 223-8656