Adopt User Interface Guidelines
- 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.
- 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.
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.
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.
Let’s look at a simple example of the grid system.
- Open the Developer Console and click . Enter ResponsivePage for the page name.
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>
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)
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.
Enable the Visualforce page for Salesforce mobile access.
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.
- From Setup, enter Visualforce Pages in the Quick Find box, then select Visualforce Pages, and then enable the page for mobile apps.
Create a tab for the Visualforce page.
- From Setup, enter Tabs in the Quick Find box, then select Tabs.
- In the Visualforce Tabs section, click New.
- In the Visualforce Page drop-down list, select ResponsivePage.
- In the Tab Label field, enter Responsive Page.
- Click in the Tab Style field and select the Apple style.
- Click Next, then Next, then Save.
Add the tab to the Salesforce app navigation menu.
- From Setup, enter Mobile Apps in the Quick Find box, then select Salesforce Navigation.
- Select the Responsive Page tab and click Add.
- Click Save.
View the Visualforce page in the Salesforce app. Notice how the app automatically arranges the boxes as full-width and vertical.
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.
- Designing Mobile-First User Interfaces
- Choosing an Effective Page Layout
- Unsupported Visualforce Components
- Salesforce Mobile App Developer Guide
- Lightning Design System
- Lightning Design System: Sizing
- Lightning Design System: Grid
- Trailhead: Lightning Design System: Understand the Grid System
- Dreamforce session: Intro to Salesforce Mobile App Development with Visualforce
- Webinar recording: Visualforce in Salesforce: Optimizing your User Interface for Mobile