Guidelines and Best Practices | Visualforce Developer Guide

Visualforce pages aren’t automatically mobile friendly in the Salesforce app. The standard Salesforce header and sidebar are disabled in favor of the mobile controls, and a JavaScript API is available to make it possible for Visualforce pages to connect with mobile navigation management. In other respects the pages remain as they are and, although usable within the app, desktop focused Visualforce pages will feel desktop focused.

Fortunately, making your apps look great in the Salesforce app is straightforward. You can either revise your code so that your pages work in both the full Salesforce site and the app, or you can create mobile-specific pages.

In this chapter, you’ll learn best practices for how to:

Share Visualforce pages between mobile and desktop.
Exclude Visualforce from mobile or desktop.
Choose the best architecture for your Visualforce pages.
Choose an effective page layout for your pages.
Manage user input and navigation.
Use Visualforce pages as custom actions.
Tune your pages for the best performance.

Sharing Visualforce Pages Between Mobile and Desktop
Revise Visualforce pages that appear in both the Salesforce app and in the full Salesforce site to support both environments. This includes Visualforce pages used as custom actions, and Visualforce pages added to standard page layouts, except those added to the Mobile Cards section of a page layout.
Excluding Visualforce Pages from Mobile or Desktop
To display your Visualforce pages only in the Salesforce app, add them to the Mobile Cards section of your page layout. To add Visualforce pages to either the app or the full Salesforce site, use tab and navigation settings.
Creating Visualforce Pages That Work in Mobile and Desktop
Create Visualforce pages that work well in both the Salesforce app and the full Salesforce site by writing code that adapts to the context it’s running in.
Choosing an Architecture for Visualforce Pages in the Salesforce App
There are several ways to design and structure Visualforce pages, each with different trade-offs with respect to development time, developer skill required, and how thoroughly you want your custom functionality to match the Salesforce app.
Optimizing the Performance of Visualforce Pages in the Salesforce App
Visualforce was designed to provide developers with the ability to match the functionality, behavior, and performance of standard Salesforce pages. If your users experience delays, unexpected behavior, or other issues specifically around Visualforce, there are several actions you can take to not only improve their experience, but to also make for improved coding. In the Salesforce app, following best practices for optimization is important. Mobile devices have more limited compute resources and users expect a fast, responsive application.
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.
Known Visualforce Mobile Issues
Salesforce publishes known issues to enhance trust and support customer success.
Considerations and Limitations for Using Visualforce in the Salesforce App
Visualforce allows developers to build sophisticated, custom user interfaces that can be hosted natively on the Lightning Platform. Visualforce is Salesforce’s tried and true model, giving developers access to data and robust tools and functionality. There are many benefits to using Visualforce in the Salesforce app, but also some limitations.
Prepare a Support Request for Problems with Visualforce Pages in the Salesforce App
Salesforce provides resources to help developers find answers to their questions and resolve their problems. We suggest you first take a look at the Developer Discussion Forum, Salesforce Stack Exchange, and the Known Issues page to see if you can immediately find the solution to your problem. If your question is still unanswered, you can submit a case to Salesforce’s support team, which will route your question to the best person to answer it.
Choosing an Effective Page Layout
Design Visualforce pages that look good and work well within the Salesforce app by using a page layout appropriate for the context that the page is used in. Pages added as main navigation tabs or as custom actions in the action bar can use nearly the full screen of the device, and can scroll vertically, while Visusalforce added to an object’s page layout has to fit within a specific, limited space.
User Input and Interaction
Use <apex:input>, the type attribute, and pass-through HTML attributes to create mobile-friendly forms and user interfaces that are efficient and take advantage of native mobile browser features.
Managing Navigation
The Salesforce app manages navigation using events. The navigation event framework is made available as a JavaScript object that provides a number of utility functions that make creating programmatic navigation that “just works” a breeze. The advantage is a navigation experience that’s more natural for a mobile context. It also makes creating post-completion navigation, such as redirecting to an order page after the order is successfully submitted, easier for Salesforce developers.
Introduction to the Salesforce Lightning Design System
The Salesforce Lightning Design System (SLDS) helps you build applications with the look and feel of Lightning Experience without writing a single line of CSS. SLDS is a CSS framework that gives you access to the icons, color palettes, and font that our developers use to create Lightning Experience.
Style Existing Visualforce Pages with Lightning Experience Stylesheets
You can control whether a page is styled with the look of Lightning Experience when viewed in Lightning Experience or the Salesforce app with the lightningStylesheets attribute.
Applying SLDS to Visualforce Pages
You can use the Lightning Design System (SLDS) to build Visualforce pages that match the look and feel of the Salesforce app. To use SLDS, it takes some tweaks in your code and a few things to remember. For the most part, Visualforce code that uses SLDS works without issue.
Use SLDS Icons in Visualforce
The Lightning Design System (SLDS) includes PNG and SVG (both individual and spritemap) versions of our action, custom, doctype, standard, and utility icons.
Create a Visualforce Page for the Salesforce App Using SLDS
Let’s create a Visualforce page that displays your recently accessed accounts and is styled with the Lightning Design System (SLDS) and add it to the mobile navigation menu.
Responsive Page Design Using SLDS
Responsive design is a web design method aimed at creating online user interfaces that provide the best viewing experience, including easy reading and navigation, on various screen sizes.
Using Visualforce Pages as Custom Actions
If your Visualforce page is used as a custom action, design it so that it either acts upon a single record provided by a standard controller, or finds and acts upon a record, or records your custom controller code retrieves.
Performance Tuning for Visualforce Pages
Performance is an important aspect of mobile Visualforce pages. Visualforce has a caching mechanism to help you tune the performance of your pages.