Developing Visualforce pages for Salesforce Classic Mobile is much different than developing pages for Salesforce.
Designs that work in a desktop browser will likely not offer a good
experience in a mobile browser. Follow these general best practices
when building Visualforce Mobile pages for iPhone and BlackBerry:
- Controllers
- Standard controllers let you reproduce the data, styling, and
actions of standard object pages. Salesforce Classic Mobile has support for custom objects and many common standard objects,
and it's unlikely that you would use a standard controller to replace
native functionality in the mobile application with a Visualforce page. Additionally, the layout and styling of a standard object
page are usually too complex for the mobile browser.
- When developing for the mobile application, you may often write
custom controllers for your pages. Controllers run server-side, not
in the embedded browser. Controllers with highly complex business
logic may cause the page to load more slowly.
- Header and Sidebar
- Phones have small screens, and there's often not enough space
to display the user's row of tabs and the sidebar. Additionally, it
would take a long time to load these components over a wireless network.
Consider suppressing the header and sidebar in your Visualforce Mobile pages with the following attribute definition:
<apex:page showHeader="false">
- Page Styles
- The standard Salesforce stylesheets
(CSS files) are too massive for the mobile browser. Not only will
the Salesforce stylesheets cause the page to load very slowly, but the stylesheets
do not display properly in the BlackBerry browser. Suppress the standard
stylesheets in your Visualforce Mobile pages with the following attribute definition:
<apex:page standardStylesheets="false">
- The best approach to adding a stylesheet to your page is to include
a <style> section just
below the <apex:page> component.
<apex:page standardStylesheets="false">
<style type="text/css">
</style>
</apex:page>
- To reuse styles between pages, create a separate Visualforce page that defines your styles. Then, use the <apex:include> tag to incorporate
the styles page. For example, suppose you define a page called myStyles:
<apex:page>
<style type="text/css">
</style>
</apex:page>
You would include these styles into another
page like the following:<apex:page standardStylesheets="false"/>
<apex:include pageName="myStyles" />
</apex:page>
- It is possible to save a mobile-optimized stylesheet as a static
resource, and then reference it in your page. However, the stylesheet
is paired with the Visualforce markup on the client-side to render the page, so you increase the
page load time by adding a stylesheet as a static resource.
- Lookups
- The lookup field selector provided with <apex:inputField> doesn’t
offer a good user experience on BlackBerry and doesn’t work
on iPhone. You can work around this issue by writing an Apex trigger that validates the entry in the lookup field upon saving
the record. You could also change the field type, if possible.
The following topics include additional information about developing
pages for iPhone and BlackBerry: