CiviCRM & Bootstrap: Thoughts on Interface Design

Published
2014-02-25 12:19
Written by
CiviCRM is a stellar example of how technology and internet have emerged as crucial components in improving the efficiency of organisations. From non-profits to governments, CiviCRM has helped people manage their workflow effortlessly. A vibrant community and open-source nature of the project have made sure it adapts and evolves to keep up with diverse needs of organisations around the world.
 
Google Summer of Code 2014 (GSoC), recently announced by Google, is another opportunity for CiviCRM to forward this cause. An initiative to support open source software projects, it pairs prospective students with organisations for a summer of coding. CiviCRM has been selected as a mentoring organisation for GSoC 2014 and I am a CS undergrad from India looking forward to code for CiviCRM this summer.
 
The project I am going to submit- “Bootstrap for CiviCRM” aims to integrate the popular open source front-end framework Bootstrap with CiviCRM.
 
User Interface/User Experience (UI/UX) over the years have defined the user’s interaction with applications. With multiple mobile centric devices and evolving web standards, concepts like responsive design, mobile-first approach and minimalism have come to dominate the design landscape. In this context, CiviCRM needs a new approach to interfaces. Joomla!, WordPress & Drupal the CMSes that CiviCRM integrates with have all implemented responsive interfaces based on HTML 5, CSS 3 and modern design principles.
 
Bootstrap framework offers some inherent advantages in terms of efficiency, scalability and community support. Developed initially by Twitter, it enjoys extensive support in terms of documentation and active contributors. A showcase of apps built with Bootstrap here gives a picture of the flexibilities it has to offer.
 
Some advantages that I could immediately identify with are:
  • CSS - With uniform class and id nomenclature, much confusion over styling can be eliminated. This greatly helps during customization.
  • Uniform Experience - By implementing an even more uniform interface across various platforms, life gets much easier going forward for development of new features. We can harness the single front-end framework for rapid development.
  • New Use Cases - The new framework gives scope to develop many new interface elements that are more navigable. Long, clunky forms in MailBlast UI will replaced by slicker elements for convenience of user. I came across another discussion on User Tour which will be implemented.
  • Extension - The uniform interface also provides scope to implement out-of-box customizations like Themes etc.,

There is of course, one downside to making the shift. This might break the code of some prevailing extensions. The project, if taken up will be implemented only by August 2014. I feel this might give enough time to make changes to existing extensions to be compatible with the new framework.

I would very much appreciate your feedback on this issue. I claim no expertise on this and am looking forward for a dialogue with the community.
 
You can comment on this blog post or a post on the Developer Discussion thread here.
 
Filed under

Comments

teja - Thanks for being ready to spend the summer with CiviCRM and submitting this project proposal. The project you are proposing is certainly very exciting and CiviCRM would definitely greatly benefit from having a more modern and streamlined user interface. So ... welcome to the community!

https://drupal.org/project/bootstrap
https://groups.drupal.org/twitter-bootstrap

http://blog.teamtreehouse.com/responsive-wordpress-bootstrap-theme-tutorial

http://magazine.joomla.org/issues/issue-aug-2012/item/818-using-the-twitter-bootstrap-framework-to-build-a-responsive-joomla-template-from-scratch

CiviCRM needs its theme layer to play nicely with the theming approaches used by the CMSes it integrates with and lives under. There seems to be good support for bootstrap among all three CMSes theming communities, so it would be good for CiviCRM to also support it.

There are also integrations of Bootstrap and Symfony, which is providing significant pieces of new technology as we update our tech infrastructure -http://stackoverflow.com/questions/18377963/bootstrap3-bundle-for-symfony2

Howver, I would like more clarity on how this project sees the CiviCRM presentation layer architecture being compatible with non-bootstrap themes being used by the CMSes. My sense is that there are non-bootstrap approaches to implementing responsive design with css, html5, etc. And we should aim to make CiviCRM compatible with all theming approaches used by a parent CMS.

So, is the project envisioning itself as an optional extension for CiviCRM to be used when the parent CMS has a bootstrap flolavoured theme? As a change to core that will also be compatible with non-bootstrap parent CMS themes?

Is there a way to focus the scope so that there will definitely be some fully working pages using implementation patterns that can be pushed to other parts of the codebase, ideally using best practices for bootstrap and Civi? Our work to modernize our db infrastructure started with the margin - extensions - and is now with that experience in hand rewriting core in 4.5 and 5.0. With this project it might be a good idea to focus first on public facing pages like contribution pages, event signup pages, and profile pages exposed as forms and search results The Contact Dashboard which is often exposed to users could use some design love too. Internal staff facing pages would be my second priority. If there was a way to cleanly make creating new simpler more usable workflows for the various wizards that would be great. In many cases it would be useful to hide complexity by assigning certain values on admin pages and then hiding the rest of the fields. This is not necessarily a simple presentation layer change however, as many of the tabbed interfaces use a state machine implementation to handle the page submissions for the 'wizards'. Refactoring them so they could be flexibly exposed via customizations would be a worthy initiative but likely non-trivial and time consuming.

A third area that is a high use focus but perhaps not as urgently in need of serious new UX approaches is the Contact Summary page. This is a very heavy page, and perhaps a separate project to do well.

Welcome! Very best wishes! What do you need from the community at this point?

Joe - Thank You. This is exactly what I want! Throw around some ideas so that I can zero in on the best possible approach.

The project currently is not about an optional extension. My idea was that the current UI would be revamped to use Bootstrap across all themes and CMSes. We can leverage the CSS framwork to improve page load times too. It is true that this can be done from scratch purely with HTML5 and CSS3 but many projects I came across invariably use a framework. This is particularly useful for collaboration as there is stardardized documentation. What do you say?

Presently, my intention is to implement bootstrap on both front-end and back-end. I think there is enough time for that. But as you said, I will prioritize front-end. 

Your suggestions on Contact Dashboard, New wizards and Contact Summary pages, I will definitely keep in mind.

Let me know what you think..

Nice project!

It would be awesome to check how it can allow further implementation of "almost automatic edit in place" with the crm-entity crm-editable magic.

Welcome :)

One of the adavantage of current front pages is it fits nicely into sites/CMS theme / UI. So interms of user experience it's just another part of the website. This is something you should keep in mind doing any front-end work.

CiviCRM Home/ Dashboard, which shows various dasheltes could be one area of your focus to rewrite and implement it using Bootstrap.

good luck ..

 

A very cool project and I would love to see the end result!

Anonymous (not verified)
2014-04-24 - 12:43

This is a pretty exciting development. There seems like lots of scenarios where a responsive Civi might be useful: e.g. street fundraisers collecting signups on their smartphone, or event organisers selling tickets on the door from a tablet. The ability to also markup and restyle Civi elements / buttons in an easy, future-proof way would also be a nice step forward - especially as a lot of  site themes are built with boostrap so the Civi elements would integrate seamlessly. With all of that in mind it makes sense to use a feature-rich framework that's constantly being updated to handle responsive scenarios in the best way possible.

A few thoughts..
- excited tho I am by it all, my instinct is it should be an optional turn on/off/both library, at least for a transition period, so that sites upgrading Civi don't suddenly break all their custom styling.
 - likewise perhaps it could also have the option to use Bootstrap but not load the core CSS and JS - in case the users' site-wide template already loads Bootstrap?
 - I agree this sounds like a big project to complete in a summer. I've heard tell of there being hundreds of Civi template files. But even if you only get to do the front end Contribution, Profile and Event pages it'll be a huge step forward and perhaps as/if Civi gets reworked with Symphony more and more of the backend can be transitioned. Indeed the sooner the library is in place it'll be easier for extension builders to start working with it as normal. And perhaps all of us who care about better Civi UI/UX can help in the conversion or testing process.
 - Anyway the best of luck.. if there's a mailing list or UX sub-forum hopefully you post back here about it so I can join!