Choosing an Effective Page Layout

Mobile cards have the most limited layout, both in size and placement. Visualforce pages added as mobile cards on an object’s page layout appear on the related lists page for the object in the Salesforce app, as the first items on the page, below the header.

1. The record header displays when an record is loaded, but can be scrolled up and off the screen by the user. When on screen, it’s 158 pixels high on all devices, and takes the full width of the screen. You can’t control the display of the record header.
2. Mobile cards display above all of the related items on the record.
3. Set the width to 100%; the element sizes automatically, minus some padding on either side. The content of mobile cards can’t be scrolled, so make sure it fits in the space you provide to it.
4. Control the height of the mobile card by setting the height in pixels in the page layout editor. The mobile card area uses exactly that height, even if the mobile card’s content is shorter. In that case, the extra area is blank. If the card’s content is taller, the content is clipped. As a best practice, don’t create mobile cards taller than the smallest device screen you intend to support. Be sure to set the height of screen elements relevant to your environment.
5. The record’s related items are displayed after all mobile cards.

The normal Salesforce header and sidebar are automatically removed from Visualforce pages added as mobile cards. You may find it useful to explicitly turn them and the full Salesforce site stylesheets off while you’re developing the page. Additionally, if your page uses the Google Maps API, Google recommends using an HTML5 doctype. Here’s an <apex:page> tag that does all of these things:

Visualforce pages added to an object’s page layout display on the record details page. Unlike mobile cards, you can control the Visualforce element’s placement on the mobile record details screen, putting fields and other record details above and below it, by changing its placement on the object’s page layout. Visualforce pages added this way follow the same rules for ordering that fields and other elements do.

1. The record header displays when an record is loaded, but can be scrolled up and off the screen by the user. When on screen, it’s 158 pixels high on all devices, and takes the full width of the screen. You can’t control the display of the record header.
2. Record controls and details, automatically generated by the Salesforce app.
3. A Visualforce page added to the object’s page layout.
4. Set the width to 100%; the element sizes automatically, minus some padding on either side.
5. Control the height of the Visualforce page’s area by setting the height of the item in pixels in the page layout editor. The Visualforce element uses exactly that height, even if the content is shorter. In that case, the extra area is blank. If the page’s content is taller, the content is clipped. As a best practice, don’t set inline Visualforce pages to be taller than the smallest device screen you intend to support.

Visualforce pages added to page layouts automatically have the normal Salesforce header and sidebar removed. You may find it useful to explicitly turn them and the full Salesforce site stylesheets off while you’re developing the page. Additionally, if your page uses the Google Maps API, Google recommends using an HTML5 doctype. Here’s an <apex:page> tag that does all of these things:

Visualforce pages added to the Salesforce app navigation menu, or as custom actions to the action bar, can use almost the entire screen, allowing more information, and more complex user interfaces.

1. The Salesforce header, which provides access to the main navigation menu, is 42 pixels high. The contents of the header can’t be changed.
2. The rest of the device screen is dedicated to your Visualforce page.