Developing Pages for iPhone and BlackBerry

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">
<!-- the styles -->
</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">
<!-- the styles -->
</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.
Note

Note

If you are building pages for the iPhone and want to mimic the standard iPhone UI, you can save time and development effort by using iUI, a third-party library that provides an iPhone-like interface to Web applications.

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:

Previous
Next