Today I released the new look for my Magento Speed Test site – it’s a tool for running Siege tests on your Magento stores. The old version looked pretty shit, in hindsight, so this should be a significant improvement. If you’ve met me you’ll know I don’t have a designer bone in my body, so you’d be justified in feeling dubious that I actually put a modern look on Magento Speed Test. The secret was my discovering (albeit months late) the Twitter Bootstrap css framework for web applications. It’s truly brilliant, and the documentation is very helpful – also it’s only one of many open source projects Twitter has made available.
If you look at my new look site and compare it to the standard examples from Twitter you’ll notice I’m not as creative as it might outwardly appear. I do like the simple clean lines and consistent colors provided by default, so I’m sticking with them for now.
Particular Framework Highlights
Some of the best things about the bootstrap framework from my point of view were:
- Small and easy to include – just one CSS and some optional JS.
- Consistent buttons as both
<a>and<button>markup - Predefined and worked examples of grid layouts that work
- The optional JS can do cool things like emulate
#anchorfunctionality for menus. (self referential source alert!) - Simple HTML for most elements made it really easy to convert the old jsp files to the new look
And no real issues to complain about, it just works! Kudos to Twitter, will trade again.
If you haven’t already, go run a test, I bet the results will surprise you!