Tuesday, 15 May 2012

A new-look Smartmessages

Last weekend we rolled out a complete overhaul of our user interface. For the most part it was a revamp of the underlying systems that provide our web interface, so it won't come as too much of a shock to our long-term users, but there are hundreds of small visual and usability tweaks throughout the site.

So what's changed under the hood?
  • Switch to HTML5 based on html5boilerplate
  • A new consistent CSS framework built on Twitter Bootstrap 2 and LESS
  • Responsive layouts for improved usability on small screens
  • A complete overhaul of template structuring using Smarty 3's inheritance
  • Switch from Prototype.js to jQuery (1.7.2), requiring a rewrite of all Javascript
  • Removal of nearly all images
  • Use of vector artwork and fonts (with FontAwesome)
  • Javascript graphs courtesy of Morris.js
  • YSlow optimisation
  • SPDY protocol support
We're hitting a score of 98 on Yslow - we would be at 100 if Google set longer expiries on their web fonts! We actually had to report bugs in Yslow as we were being marked down for using SPDY! Replacing images with font glyphs generally means that things look much cleaner and sharper on high-resolution devices such as iPad 3, plus it helps reduce the number of trips to the server.
Combined with SPDY support in browsers that support it (Firefox 11+ and Chrome), this makes for a much snappier experience overall. SPDY is a good fit for Smartmessages as we deliver everything over HTTPS anyway.

All of these changes took about a month to implement, and they improve our ability to change things in future, so we've now got a great base on which to build the new features we're planning!

We hope you like it.