trailhead

Learning Objectives

After completing this unit, you’ll be able to:
  • List at least six user interface guidelines for building Visualforce pages running in the Salesforce app.
  • Explain two characteristics of responsive design and its importance in mobile development.
  • Build a simple responsive user interface using the Salesforce Lightning Design System.
  • List at least six Visualforce components you shouldn’t use when building Visualforce pages for the Salesforce app.

User Interface Guidelines

Visualforce pages running in the Salesforce app aren’t automatically optimized for mobile devices. As the developer, you’re responsible for implementing the appropriate best practices to deliver a great user experience to your mobile users.
Here are some guiding principles for building Visualforce pages running in the Salesforce app.
  • Design for small screens. On a mobile device, less is more. Limit the amount of data you show or capture to what is strictly necessary. Mobile pages don’t have to support all the bells and whistles.
  • Use responsive design to automatically adapt the page layout to different screen sizes.
  • Design for touch interactions. Avoid keyboard or mouse-centric user interface components and metaphors. Provide large tap areas.
  • Limit keyboard input.
  • Use available device sensors—for example, geolocation and camera—when applicable.
  • Avoid Visualforce components that mimic the full Salesforce site. In general, prefer plain HTML components.
  • Use the Salesforce Lightning Design System to match the look and feel of Lightning Experience.
  • Prefer the JavaScript single-page application pattern over multi-page processes. A single-page application is an app that fits in a single page and provides a more fluid user experience akin to a native app. Views are created dynamically in JavaScript and injected into the DOM as users navigate through the app’s features.
  • Use a JavaScript framework. Building single-page applications is challenging, and existing JavaScript frameworks handle most of that complexity.

Alternatively, consider implementing your app using Lightning Components, a modern Lightning Platform JavaScript-based UI framework, instead of Visualforce. See the Lightning Components Basics module for more info.

Match the Salesforce App Visual Design

You can match the Salesforce app’s look and feel by using the Salesforce Lightning Design System (SLDS). The Lightning Design System is a CSS framework that gives you access to the icons, color palettes, and font that our developers use to create this new Salesforce look and feel.
SLDS is the best way to create user interfaces consistent with the Salesforce Lightning principles and practices. It’s also continuously updated, so if you’re using the latest version of SLDS, your pages are always consistent with Lightning Experience.
Note

Note

We go into more depth about SLDS earlier in the Use SLDS for Visualforce Pages in the Salesforce app unit.

Use Responsive Design

Responsive design is a web-design method aimed at creating web user interfaces that provide an optimal viewing experience, including easy reading and navigation, on various screen sizes.

A responsive user interface adapts the layout to the screen size by using fluid, proportion-based grids, flexible images, and CSS3 media queries. Using responsive design, you can create Visualforce pages that look and work great on phones and tablets.

Standard Salesforce mobile pages use responsive design techniques to provide device-optimized layouts. The primary technique used is a stacked single-column layout for phones, and a side-by-side, two-column layout for tablets. The page is the same for all devices, and adapts to the actual screen size it’s displayed on.
Responsive design visual example

The Lightning Design System uses a grid based on Flexbox to provide a flexible, mobile-first, device-agnostic scaffolding system. The grid system lets you divide your page into rows and columns and define layout variations for different-sized screens.

The grid system has two parts, the grid wrapper (the slds-grid class) and the columns within it (the slds-col class). By default, columns are sized relative to their content.

You can also specify the column sizes manually with SLDS sizing helpers. They use a slds-size--X-of-Y format where X represents a fraction of the total space Y. For example, slds-size--1-of-2 represents a width that is 50 percent of the available space.

Note

Note

We won’t go into all the specifics of tailoring responsive pages here. We encourage you to check out the Lightning Design System reference site for more information.

Let’s look at a simple example of the grid system.

  1. Open the Developer Console and click File | New | Visualforce Page. Enter ResponsivePage for the page name.
  2. In the editor, replace any markup with the following.
    <apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
    
      <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
        <head>
          <meta charset="utf-8" />
          <meta http-equiv="x-ua-compatible" content="ie=edge" />
          <title>SLDS ResponsiveDesign Visualforce Page in Salesforce Mobile</title>
          <meta name="viewport" content="width=device-width, initial-scale=1" />
    
           <!-- Import the Design System style sheet -->
           <apex:slds />
        </head>
        <body>
    
          <!-- REQUIRED SLDS WRAPPER -->
          <div class="slds-scope">
    
            <!-- PRIMARY CONTENT WRAPPER -->
    
              <!-- RESPONSIVE GRID EXAMPLE -->
    
              <!-- / RESPONSIVE GRID EXAMPLE -->
          </div>
        </body>
      </html>
    </apex:page>
  3. Add the following code to the <!-- RESPONSIVE GRID EXAMPLE --> section.
    <div class="myapp">
      <div class="slds-grid slds-wrap">
        <div class="slds-col slds-size--1-of-1 slds-small-size--1-of-2 slds-medium-size--1-of-4">
          <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around--x-small">Box 1</div>
        </div>
        <div class="slds-col slds-size--1-of-1 slds-small-size--1-of-2 slds-medium-size--3-of-4">
          <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around--x-small">Box 2</div>
        </div>
      </div>
    </div>
    This code creates a two-column grid where the two columns are:
    • Full width and vertical on a mobile screen
    • Sized 1:1 and side by side on small screens (more than 480 pixels)
    • Sized 3:1 and side by side on larger screens (more than 768 pixels)
    Grid system in Lightning Design System for different-sized screens.

    View the Visualforce page in a browser, and then drag the corners of your browser window to observe the responsive layout. Now let’s add it to the Salesforce app.

  4. Enable the Visualforce page for Salesforce mobile access.
    1. From Setup, enter Visualforce Pages in the Quick Find box, then select Visualforce Pages, and then enable the page for mobile apps.
      You learned how to enable a page for mobile apps in a previous unit.
  5. Create a tab for the Visualforce page.
    1. From Setup, enter Tabs in the Quick Find box, then select Tabs.
    2. In the Visualforce Tabs section, click New.
    3. In the Visualforce Page drop-down list, select ResponsivePage.
    4. In the Tab Label field, enter Responsive Page.
    5. Click in the Tab Style field and select the Apple style.
    6. Click Next, then Next, then Save.
  6. Add the tab to the Salesforce app navigation menu.
    1. From Setup, enter Mobile Apps in the Quick Find box, then select Salesforce Navigation.
    2. Select the Responsive Page tab and click Add.
    3. Click Save.
Visualforce page for the Salesforce app using responsive design.

View the Visualforce page in the Salesforce app. Notice how the app automatically arranges the boxes as full-width and vertical.

Visualforce Components and Features to Avoid in the Salesforce App

Most core Visualforce components (those components in the apex namespace) function normally within the Salesforce app. Unfortunately, that doesn’t mean they’re optimized for mobile, or that every feature works with the app. You can improve the mobile user experience of your Visualforce pages by following some straightforward rules.

In general, avoid structural components, like <apex:pageBlock> and child components, and other components that mimic the Salesforce look and feel, such as <apex:pageBlockTable>. If you must use these components, set them to one column, using <apex:pageBlockSection columns="1">, instead of the default of two columns.

Avoid wide, non-wrapping components, especially <apex:detail>, <apex:enhancedList>, <apex:listViews>, and <apex:relatedList>, which are all unsupported. Keep device width in mind when creating tables with <apex:dataTable>.

Avoid using <apex:inlineEditSupport>. Inline editing is a user interface pattern that works well for mouse-based desktop apps, but it’s difficult to use on a touch-based device, especially on phones where the screen is small.

Using <apex:inputField> is fine for fields that display as a basic input field, like text, email, and phone numbers, but avoid using it for field types that use an input widget, such as date and lookup fields.

PDF rendering, by setting renderAs="PDF" on <apex:page>, isn’t supported for pages in the Salesforce app.

Time Estimate
retargeting