CiviCRM: Going Mobile

Anyone who has tried to login to their CiviCRM database via their phone knows the feeling: utter helplessness. You would even be forgiven for thinking CiviCRM is actively hostile to the small screen.

This initial experience of the un-initiated CiviCRM user on the phone will probably remain until the eventual adoption of the Bootstrap framework (a CSS framework with built-in mobile/responsive elements).

What may be surprising to many, however, is that CiviCRM today is quite mobile friendly in all the important areas. You just have to put the pieces together.

After a long discussion on the Civi Partners list of the myriad ways CiviCRM developers have been integrating Boostrap into their projects, Allan Dixon started a page documenting them.

The Bootstrap page includes both the civicrm_bootstrap theme (nice work CiviCRM team - looks great on mobile!) as well as PTP's own Drupal Bootstrap base theme called civiresponsive

The civiresponsive base theme was developed for PTP's PowerBase project. PowerBase is a hosted CiviCRM database services for political organizing groups - however, it will work for any group that is maintaining their CiviCRM installation in a Drupal site that is separate from the organization's main web site (a highly recommended setup that allows web site and CiviCRM upgrades/general maintenance to happen independently of each other and even by separate people or organizations).

The theme's goal is to facilitate designing Drupal 7 themes that look and feel like an organization's home page while displaying all of the CiviCRM public facing pages (e.g. contribution, event registration, petition, etc.).

This approach gives users a seamless experience going from an organization's home page to the various contribution/event/petition pages.

By using civicresponsive as your base theme, you can quickly develop sub-themes that are already responsive. The only changes you need are to modify the CSS elements to match the look of the original web page.

Here's an example of the only changes we had to make to a recent group's theme:

body { background-color: black; }

/*
 * The bootstrap theme displays this toggle when the screen is
 * small. However we have nothing in this menu so we never want 
 * it displayed.
 */
.navbar-toggle { display:none; }

.main-container { background-color: white; margin-top: 0px; }

.footer { background-color: #e7bd15; margin-top: 0px; }

.main-container { padding-top: 20px; padding-left: 40px; padding-right: 40px; padding-bottom: 20px; }

#navbar { background-color: black; margin-left: 0px; border: none; }

#navbar .logo { display: block; float: none !important; margin-left: auto !important; margin-right: auto !important; width: 959px; }

.navbar-header { float: none; }

#block-block-1 img { display: block; margin-left: auto !important; margin-right: auto !important; }

/* The next two lines were changed to center the banner. */
.navbar.container { max-width: none; }
.container { width: 100%; }

Next, we use the Drupal theme key module to specify the URL paths that should use the custom theme.

In addition to using the mobile-friendly theme for public facing CiviCRM pages, we have had a lot of luck designing custom intake forms using webform civicrm. The combination of the mobile theme and the layout control provided by webforms allows for an excellent user experience.

If you don't have a mobile-friendly theme, you can still have a great mobile-friendly contribution page using Simple Donate. This extension allows you to pick one contribution page and display it in a mobile-oriented way (it still exists at the regular, public-facing contribution page - with this extension you have two ways to access it).

While having well-designed public facing web pages is important, let's face it: most people interact with us via the email messages we send.

And, starting a few versions ago, CiviCRM core started shipping sample responsive design email templates, which are quite good. If you are not using an email template tested on mobile devices I would strongly encourage you to adapt one of these core templates to your look and feel. It makes a huge difference.

And, if you are frustrated adapting one of these templates, you might want to checkout the Email Template Builder extension which radically redefines how we can build email messages and templates. It does not yet fit in with the normal CiviMail workflow, but it is an exciting development and one that will hopefully become better integrated in the future.

All of these developments are focused on members of the public. However, there are times when the database admins need to access their database via their phones. The times are rare since most of us don't want to do data entry on the tiny phone keyboard or contend with the long scrolling lists. However, those rare times are well covered in the CiviMobile extension, which provides an excellent mobile interface for searching for contacts, event attendance and even completing surveys. You simply login to your CiviCRM site and add /civicrm/civimobile to the address bar and you are ready to go (you probably want to book mark it for future use).

These ready-to-use projects are all very exciting... but what's to come is even more exciting. If you are a developer, you might be interested in learning how to develop using the new CiviCRM angular tools.

CiviCRM is such a prolific community that it's impossible to keep tabs on everything, so please scroll down to the comments where you are sure to learn about the many mobile CiviCRM projects that didn't mention in this blog post!