Rebuilding Famigo with Twitter Bootstrap

by Taylor Fausak on

Over the past week, I rebuilt Famigo’s website using the Twitter Bootstrap. I’m happy to announce that version 2.0 of our website is going live today.

Famigo

The bootstrap made it easy to quickly put together a great-looking website. I loved working with it and look forward to continuing development with it.

Other Frameworks

Before settling on the Twitter Bootstrap, I looked around for other frameworks. The most important requirement was a responsive layout. More than two-thirds of our clients are browsing from a mobile device. We need to serve mobile-friendly content to them, but we also want a good user experience on the desktop.

Up until today, we used user-agent sniffing to serve different content to mobile clients. That meant we duplicated a lot of stuff on the back end. We tried to mitigate it using Django’s template inheritance, which worked okay. But it’s always easier to worry about one file instead of two.

Reflexions

Of the many CSS frameworks out there, only a handful use responsive layouts. Foundation, Skeleton, and Less were the other front-runners. Ultimately we chose the Twitter Bootstrap because it came with the most batteries included.

Updating Widgets

Three or four of us at Famigo routinely work on parts of the website. We’re not all intimately familiar with the entire codebase. As a result, we sometimes end up duplicating functionality.

For instance, we render a list of applications as a grid of tiles. As time went on, little bits of HTML, CSS, and JS crept into disparate parts of the code base. And we’d need one of those bits for some other widget on our site, like applists.

Comparison of app tiles

Now the tiles have been refactored into a separate template file. They’re styled with reusable styles defined in one CSS file. A single JavaScript file handles every user interaction with them.

Moving Forward

We still have a lot of work to do. One of our top priorities at this point is not looking like a “bootstrap site”. Not to say that we’re not a fan of how it looks — we are. But as anyone who has used the default WordPress theme can tell you, you need to be unique.

We’re looking forward to customizing the bootstrap, though. It was so easy to get everything set up with the defaults that we’re assuming tinkering with it will be a piece of cake.

Best Free Games

Please send feedback about the new site to taylor@fausak.me. I’d love to hear what you think about it!