Standard Visualforce Pages

Normal Visualforce pages render well on mobile browsers, and can be used as-is, with a modest reduction of the user experience compared to mobile-optimized Web pages. Pages display as they would on the full Salesforce site, and won’t visually match other Salesforce1 features.

You saw how easy it is to add a Visualforce page to Salesforce1 in Extending Salesforce1 with Visualforce Pages.

Limitations

Limitations to the user experience include:

Tap targets—buttons, links, form fields, and so on—are optimized for mouse cursors, and can be difficult to hit accurately with a fingertip.
The visual design is unchanged, and may not fit with the mobile-optimized, modern visual design of Salesforce1.

If your development timeline is aggressive, you might find these limitations acceptable. Standard Visualforce development is documented in detail in the Visualforce Developer’s Guide.

Example of a Standard Visualforce Page

The following code provides a sample for a standard Visualforce page that allows a user to edit a warehouse record. The edit feature is provided by the standard controller for the object.

1<apex:page standardController="Warehouse__c">
2
3<apex:form>
4
5  <apex:pageBlock title="{! warehouse__c.Name }">
6
7    <apex:pageBlockSection title="Warehouse Details" columns="1">
8      <apex:inputField value="{! warehouse__c.Street_Address__c }"/>
9      <apex:inputField value="{! warehouse__c.City__c }"/>
10      <apex:inputField value="{! warehouse__c.Phone__c }"/>
11    </apex:pageBlockSection>
12        
13    <apex:pageBlockButtons location="bottom">
14      <apex:commandButton action="{! quickSave }" value="Save"/>
15    </apex:pageBlockButtons>
16    
17  </apex:pageBlock>
18
19</apex:form>
20
21</apex:page>

This page can be used in both the Salesforce1 app and the full Salesforce site. It displays as a standard desktop Visualforce page in both contexts.

Salesforce1 Mobile App Developer Guide

Standard Visualforce Pages

Limitations

Example of a Standard Visualforce Page