Tuesday, September 4, 2012
Thoughts on Responsive Web Design
As part of our core initiatives to make ABC more user-friendly, I've redone the homepage (landing on master very soon) to be more mobile-friendly and gives a clearer perspective to the end user on the value that our suite of tools provide. Incidentally, this included using common patterns found in Responsive Web Design practices. After working through a 6+ month old site, I've come to realize that media queries can be an absolute nightmare for older sites -- but none the less, there is always a solution: find the highest value pages and give them a responsive interface.
In our particular case, our primary goal was to increase conversion of user registrations (I think most startups have this as a common goal). That said, we've RWD'd the homepage and I'm currently moving towards the product pages now including CodeStorm (devops social network) and Amazing Insights (real-time logging and analytics for Windows Azure).
With lessons learned, when starting a new project, I'd look at Twitter's Bootstrap project. It is an amazing UI library that comes with grids and reusable components. Additionally, as long as you set the viewport meta element and include its responsive stylesheet, you can get a fully responsive website in a matter of minutes. That said, this comes with assumptions. The assumption is that you're using the same grid system as Bootstrap. Adding to that, Bootstrap's documentation is fantastic: it is full of examples and provides notes on limitations/caveats/gotchas.
At the end of this effort, I ended up just rewriting the company front-end to be in line with Twitter Bootstrap's examples. The out-of-the-box responsive web design you get from following the markup structure is extremely valuable in that you can continue to RWD all your pages with the least amount of worries for specific use cases.