Lightfire Redesign Complete!

Posted on August 23, 2012 by James Ballaban

Unlike the Cobbler's Children we have finally been able to break free from doing some awesome client work to redesign our website. As a technology company it is important that we keep on-top of all the newest technologies so that we can evaluate them on behalf of our clients and provide that expert guidance and knowledge that they expect. So with that in mind we decided not to just redesign our site - oh no that would be too easy! - we decided to do it multiple times each with a different technology component.

Version 1: Twitter Boostrap 2.0
Our first iteration of the Lightfire rebuild was to leverage Bootstrap 2.0 developed by the good folks over at Twitter. This foundation provides some JavaScript, CSS and semantic guidelines to use for web projects and is a fairly "hot topic" in the web world. Bootstrap is open-source which is fantastic for agencies like ourselves who like to contribute back, but more importantly be able to change any component they want without having to rely on someone else. Another aspect of Bootstrap is that it handles Responsive Design. Responsive Design is another one of those concepts that is fairly new and involves creating a structure that will modify itself to fit within your browser regardless of its size. What I mean is that for a smaller browser (say mobile) they would see the content in one way, but then differently on other devices (large monitors, small monitors, tablets etc.). Our first experience with Bootstrap was that it seemed perfect for the typical corporate/content delivery website. But when we evaluated it for complex web applications it started to fall short. We strongly believe in using the right tool for the right job, and Bootstrap is fantastic at content delivery but since we were evaluating the technology not just for our website but on behalf of our clients who tend to require a lot more complexity, it didn't seem, the right fit.

Version 2: LESS, Media Queries and 1KB Grid
As a result of dropping Bootstrap we decided to start from scratch and try with different tools that are a little more "generic". So we decided to create our own CSS base, use LESS to precompile it, 1KB Grid for grids, and Media Queries for our responsive design. LESS is a dynamic stylesheet language which makes working with CSS so much easier and more organized. By using LESS we were able to reduce our CSS lines by 30% from a default build - that means increased load times, but also easier (aka cheaper) maintenance and less likelyhood of bugs. There is not much debate here, LESS is great. So along with LESS we leveraged a neat tool by Tyler Tate to create multiple grid setups called The 1KB GRID. Then leveraging media queries we can still optimize the site for different mobile, and pc resolutions to achieve that responsive design feel with limited complexity.

Our conclusion is that we want to keep a minimalistic platform that we can use and extend very easily, that way we would reduce the number of bugs and increase the speed of development. This means cheaper solutions without lacking in quality.