Uber is one of my favorite mobile apps. Not only is it a great concept (“Everyone’s Private Driver”), but the app also has a great UI and UX experience (yes, they are different). It asks for the absolute minimum user input and infers the rest via a combination of the mobile context (current location) and some backend data (payment options etc). The UI/UX for the average enterprise mobile app is a far cry from the high bar set by consumer focused apps like Uber. It doesn’t and shouldn’t have to be that way. Users will bucket an app in the “have to” vs “want to” usage category without a compelling UI/UX experience, and that is not a healthy foundation for any enterprise mobile strategy. Many IT departments however don’t have dedicated mobile designers, and developers (this one included) usually don’t make great designers. Something has to change.
Our recent Mobile Services release introduced Mobile Design Templates, an open-source library of 22 visually striking, mobile-optimized HTML5 and CSS3 markup for common mobile use cases of interacting with Salesforce data. There are templates to view and edit customer data, view backend reports, find nearby records, and much more. Developers can customize and reuse these templates at will to meet the specific UI/UX requirements of their mobile app. Being able to use these open-source templates as a starting point for their UI/UX design should dramatically shorten the time it takes to develop a great looking web/hybrid app on the Salesforce Platform. Here are some other important tidbits about the design templates.
- Optimized for the phone form factor.
Here’s a short video that walks you through the basics of how and when to use to the Mobile Design Templates to build compelling web and hybrid mobile apps on the Salesforce Platform.
Tip: Watch the video in 720p HD resolution by clicking on the gear icon in YouTube.
The quickest way to get started with the Mobile Design Templates is via their interactive home page. As you scroll down the page, you’ll see each template broken down into its constituent HTML5/CSS3 components. The phone image on the right will also update with each template/section making the whole learning process more visual and easier to follow. Check it out. As the ad claims, you’ll like it – I guarantee it (here’s hoping that I don’t meet the same fate as that pitchman).
Sample App Use Case
In the remainder of this blog post, I’ll review how I built a simple mobile web app in Visualforce using the Picture List View template to view Contact records in Salesforce. List View templates provide different visual representations for showing a list of Standard or Custom Salesforce records and the Picture List View template in particular can be used to display any data that has a picture associated with it (Contact, User, Product, etc.). The template also has an optional feature whereby a swipe-right on any image in the list reveals some ‘Quick Action’ icons. The user can then perform these quick actions (like emailing or calling the Contact) directly from this view (versus from a drill-down detail view). Here’s a screenshot of the completed Visualforce page. You can also peruse the entire codebase for this sample app in the Sample Apps directory of the GitHub repo.
I’ll build on this basic app over the next couple of blog posts and show you how to combine multiple templates into an end-to-end, fully featured mobile app. Note also that while the Picture List View template and this sample app uses Contacts as an example, every mobile design template is use case agnostic and can be modified and reused with any Salesforce object (Standard or Custom) in the context of any mobile use case.
Using Mobile Design Templates in Visualforce
Lets start with how you can use any of the templates in a mobile optimized Visualforce page. The first step is to download the templates project from GitHub. You can do so by executing the following from the command line.
In addition to the JS and CSS imports, note the use of the HTML5 doctype and the disabling of the standard stylesheets, header and sidebar in the Visualforce page. This is a way to make the page mobile optimized and load faster on a mobile device.
Data binding with the Mobile Design Templates
All Mobile Design Templates in the GitHub repo use static/hard-coded data for illustrative purposes. This helps a new developer quickly review the overall UI/UX offered by a template and determine if its a good starting point for their own mobile use case/app. However, in order to use a template in an actual mobile app, the HTML5/CSS3 markup has to be populated with live data from Salesforce. In the case of this sample app, we need to query a list of Contact records from Salesforce and then build out the appropriate page markup. There are several options for a developer to bind these mobile web templates to Salesforce data.
- Mobile Packs for Backbone, Angular or Knockout when the templates are used in an app built using one of those MV* frameworks.
Next, lets review how to query and display a dynamic list of Contact records using the Picture List View Template.
Using Underscore to generate the template markup
The real action in the VF page happens in the Underscore template that generates the dynamic list of Contacts using markup from the the Picture List View Template.
If you’re unfamiliar with using the Underscore templating utility, you can read more about it here. I want to focus more on the HTML5 and CSS3 markup used in this template. This is our first glimpse of the Mobile Design Templates in action. I simply copy pasted this markup from the Picture List View Template in GitHub (minus the dynamic binding part). I then made a couple of minor tweaks to the markup to suit my specific use case. For example, removing the gear icon from the header and updating the menu list (under the <nav class=”main-menu”> section).
As is evident from the above markup, all templates use plain-vanilla HTML5 with CSS3 styling to generate a mobile-optimized view. They have no dependency on external frameworks like jQuery Mobile, Twitter Bootstrap etc. The template markup and CSS is also very modular and composable. Adding a list item in the Picture List View Template is as simple as adding a <ul> tag with the list-view with-swipe left-thumbs right-one-icons CSS styles applied to it (line 15). Adding a Quick Action icon (revealed when the user does a swipe-right on the thumbnail) is simply a matter of applying the thumb CSS style to the <img> tag (lines 21, 28). As so on. For a more detailed breakdown of the different components of the Picture List View and other templates, simply scroll down through the interactive home page and see the templates come to life.
Remember also that the templates are not a all-or-nothing monolith. You can and should pick and choose components of a particular template that fit your specific use case and requirements. Don’t want the Contact title to show in your list view? Just drop the respective markup from the page. Don’t need the Quick Action on-swipe component? Simply drop the entire <div class=”thumbs”> tag.
Customizing the look and feel of the templates
In addition to being modular and composable, the templates are also completely customizable in terms of their look and feel. Simply modify app.css to implement your unique styling and UX requirements. Lets take a very simple example to see this in action. Lets say I wanted to display a red border around the Contact image when the user does a swipe-right to reveal the Quick Action icons. All I have to do is to change the respective style class in app.css to the following
And voila, the list view looks a little different. The CSS used in the templates was generated from Saas and so if you’re more comfortable in a tool like Compass, you can modify the Saas files instead.
Wrap-up and Next steps
In future posts, I’ll build on this basic list view example and use other Mobile Design Templates to build a complete CRUD mobile app. In the meantime, take the Mobile Design Templates for a ride and send me (@cloudysan) your feedback. Remember also that the templates are an open-source project. Please pass along any enhancements or bug fixes via a pull request. Till then, happy coding (and designing).