Responsive development can be quite a tricky development process, especially when intricate layouts and interactive elements are involved. This blog post will address individual key parts of the development of mubaloo.com, covering pros and cons, and the solutions reached.
As with most website designs, Mubaloo was created using a grid system. After a lot of research and thought, we decided to go with Twitter Bootstrap a front-end framework that not only provides grids but a library of classes and standard interactive components.
Using Bootstrap meant a quick start on development. However, there were quite a few problems with this. First of all, a lot of work had to be done to replace the standard Bootstrap design with Mubaloo’s. Secondly, we had to alter the grids because we needed to implement odd column counts, which Bootstrap wouldn’t allow. Bootstrap also changed a 70px column to 600px at smaller screen sizes. Investigation was made to find a better grid system for our needs (SUSY, Zen Grids, The Grid System and 960 to name a few), but none of them seemed to fit our needs. Instead, we used the mixins that came with the SASS version of Twitter Bootstrap to generate grids as we needed them, and give ourselves full control over how grids broke down as the screen size got smaller.
The most interactive element on the site’s design was the carousel. The client carousel was covered by Twitter Bootstrap’s already available carousel, and a jQuery plugin flexslider covered the hero carousel. The hero carousel was a much bigger headache than expected. Applying the text in code did not satisfy the quality that was expected by the design team, but applying the text in the image meant it would not be readable at smaller screen sizes. A compromise had to be reached in that the image would scale down to a certain point, and then would cut off the rest of the image as the screen got smaller. With some tinkering, our jQuery plugin allowed this.
The next hurdle in making the Mubaloo website responsive, was images. We needed to keep image sizes small, but still account for retina displays on iPhone devices. The solution reached was to use Picturefill. Using Picturefill meant we could define rules for images, however, it also meant a lot of overhead for applying extra markup and exporting the images at different sizes. In order to help decide on this compromise, an analysis of the images was made to determine which were most important and which would benefit most from higher quality alternatives.
Throughout the whole process of development, the most beneficial part has been to reach compromises. When working on a multi-platform, cross-browser site, some things just can’t be feasibly implemented, or aren’t even worth the time to implement. Responsive development is still in its early days, so silver bullets are a rare thing to find when coming across problems like retina display images, and grid systems that match very specific needs.
I think the biggest mistake made in the development of the site has been to use Twitter Bootstrap. Bootstrap is great for prototype web pages, or just quickly putting together a website, but when implementing such a bespoke design with a team of designers over your shoulder, it’s not really feasible to work with. Too much time was spent putting up with Bootstrap when it could have been spent further polishing the site.
Carl Simmons (Web Developer)