Twitter Bootstrap

Good software needs good user interface design. Good user-interface design can be broken down in 2 main factors:

  • Graphical design: The software should adhere to  the companies corporate design and should be aesthetically pleasing.
  • Usability design: Software should be easy to use. By following usability patterns one can exploit knowledge users have about interface purpose and behavior.

Twitter Bootstrap is a library that seems to be build to achieve good user interface design for web applications with minimal efforts. It claims to be a “sleek, intuitive, and powerful front-end framework for faster and easier web development”. Because I do not take such a claim for granted, as it is bold to say the least, I tried to use it on one of our projects.

Composing components

Twitter Bootstrap gives you a set of components that you can combine to make a page in a web application. All components are fully designed and sample HTML code for each component is included. This makes building an interface copy paste work for the programmer. The same goes for the usability designer. A Photoshop Document (PSD) with all components can be downloaded so the usability designer can quickly make mock-ups of screens for the programmers to implement.

Cross browser testing and best practices

Twitter Bootstrap is a popular framework, the developers made sure it works in all major browsers. However if there would be a bug you can just submit a patch, because the project is open source anyway. This combination of broad support and being open source guarantees that you hardly run into any cross browser issues. It also supports mobile devices and by following the guidelines of Twitter Bootstrap, your application will be ready for them, because Twitter Bootstrap supports reponsive web-design (RWD).

Framework integration

An important question remains: How can Twitter Bootstrap be used in my favorite web framework? In the Symfony2 world, like with so many things, there is a bundle for that: the MopaBootstrapBundle. It is not a bad bundle, but I would not recommend it. It is so easy to add Twitter Bootstrap to your application that it does not need a bundle for integration (especially not for basic integration). You can just copy the .css and .js files over to the web directory and adjust your templates to follow the structure Twitter Bootstrap dictates. That is really all there is to it.

Workflow changes

Front-end developers may be able to implement an add-on to the Twitter Bootstrap style-sheet so that all components in the Twitter Bootstrap palette are automatically styled in the companies corporate design. By doing that programmers may be able to implement basic user interfaces without the need of front-end developers. All they have to do is follow the HTML code structure that is documented on the Twitter Bootstrap site. This way the repetitive tasks are taken from the front-end developers, while more challenging tasks like Twitter Bootstrap bugs, Twitter Bootstrap extensions and consistent application of usability patterns are left for them. These might also be more rewarding as the entire company or even the entire Twitter Bootstrap community may value them.

Conclusion

The bold claim of a “sleek, intuitive, and powerful front-end framework for faster and easier web development” is true, but it requires you to make a bold move. You must change your layout, invest in learning Twitter Bootstrap and most of all: accept the limitations a fixed component pallet imposes. Only then will you gain what it claims: a beautiful and easy to use web application with support for mobile devices that can be developed faster because of its improved and documented workflow.

Share

Leave a Reply

Your email address will not be published. Required fields are marked *