Salesforce1 Mobile App Developer Guide

Introduction
About This Book
Setting Up Your Work Environment
Salesforce1 Administration
Developing for Salesforce1
Welcome to Salesforce App Cloud Development
Designing Mobile-First User Interfaces
Extending Salesforce1 with Visualforce Pages
Adding Functionality with Visualforce Custom Actions
Development Guidelines and Best Practices
When to Use the Navigation Menu or the Action Bar
Visualforce Guidelines and Best Practices
Sharing Visualforce Pages Between Mobile and Desktop
Excluding Visualforce Pages from Mobile or Desktop
Choosing an Architecture for Visualforce Pages in Salesforce1
Visualforce Components and Features to Avoid in Salesforce1
Choosing an Effective Page Layout
User Input and Interaction
Managing Navigation
Visual Design Considerations
Using Visualforce Pages as Custom Actions
Creating Visualforce Pages That Work in Mobile and Desktop
Performance Tuning for Visualforce Pages
Force.com Canvas Guidelines and Best Practices
Learning More
PDF

Visual Design Considerations

Create Visualforce pages that more closely match the look of Salesforce1 by using CSS styling, responsive design, and minimal HTML.

Fonts and Styles

The visual design for Salesforce1 uses Proxima Nova, a sans-serif typeface licensed specially for Salesforce1. People in your organization might not have the font installed on their devices, but the following CSS font stack will use the closest matching font available:
Change the selectors to match the appropriate text blocks and styles on your pages.
We also recommend slightly increasing the size of the font used for normal text and form elements. This makes them easier to read and, for form elements, to tap into. Here’s a complete style block to get you started:

Directly referencing Salesforce1 style sheets in your pages, or depending on styles found in them, isn’t supported. As Salesforce1 evolves, the styles will change in ways that you won’t expect. Pages that depend on unsupported styles might eventually break.

Warning

HTML Markup

If your organization’s Visualforce pages match the full Salesforce site’s look and feel, it’s probably by using the Salesforce header, sidebar, styling, and <apex:pageBlock> and child components. Don’t explicitly disable these elements, by setting <apex:page showHeader="false" standardStylesheets="false" ...>; Salesforce1 automatically disables these elements when the page runs inside it.

However, you might want to reconsider using <apex:pageBlock> and child components, because they explicitly match the full Salesforce site look and feel, and even with standard stylesheets turned off, the markup they generate carries over into Salesforce1. This makes your markup more complex, and it’s harder to apply styling that matches Salesforce1.

Instead, use simple, static HTML markup, or the markup required by your chosen Mobile Toolkit. Sample markup is included the next section.

Responsive Design

Salesforce1 pages use responsive design techniques to provide device-optimized layouts, a stacked single column layout for phones, and a side-by-side, two-column layout for tablets. You can use a similar technique for your Visualforce pages used in Salesforce1.
First, your page should establish a default layout:
Second, use CSS styling and media queries to make the layout responsive:
Try it yourself in a Visualforce page using this HTML. Place the above CSS snippets between <style> tags on the same Visualforce page as the HTML, and then drag the corners of your browser window to observe the responsive layout.