I'm facing the challenge to adapt many VF pages already built to S1. After a long research I realised that there are many options to transforme a VF Page to be S1 compatible.

I understand that we have to avoid certain VF tags and controller/js actions. Also it is important to detect the application client in order to render the page best options (layout and controls).

Then I should render one "responsive" page or redirect the client to an specific Desktop/S1 page.

I also known that Lightning and Aura components will solve part of this but I have discarded that option because it is in beta/pilot and we need to deliver this now.


What is the best patter to follow when you have to create a VF S1 page in order to maximize the UX and minimize the development/maintenance effort ?


1) One responsive page: Creating one page using a responsive framework like bootstrap and Angular. This page should contains the entire functionality.


  • I only have to develop on VF


  • I don't have some standard components and we have to reduce the amount of items that the user can view/work in the desktop. Making the user experience worse in some cases.
  • I am not able to use apex:detail and this increase the amount of time to add a field or make a simple change in the page.
  • It will be very challenging to handle navigation in a unique way.

2) Two specific pages: The idea here is to detect the client and redirect to an specific page for that platform. Desktop could still using the existing one. S1 could use a new page built based on the previous responsive scheme.


  • I will have a full user experience
  • I could use some standard components in desktop version
  • I will be able to remove some trivial fields and related fields on mobile.


  • I will have to develop and maintain twice the same functionality.

Summing up

Probably there are not a silver bullet patter and we will be force to choose depending the content of each page. However, I would like to know if is there other options or pros/cons to consider before start the project.


  • 1
    I would also add another point in 1) One responsive page: It will be very challenging to handle navigation in a unique way. Visualforce pages with multiple steps (wizard style) are not possible with Salesforce 1. You will end up in a navigation dead end.
    – ManSpan
    Commented Nov 25, 2014 at 16:24
  • That is a good one. Added Commented Nov 25, 2014 at 19:48
  • Not sure why you say you can't create a wizard-style Visualforce page in Salesforce1?
    – Tom Gersic
    Commented Nov 25, 2014 at 23:13
  • @Tom I realized that whenever you use the sforce.navigateToUrl method to redirect to another page, the menu button on the top left is replaced with the back button. Thus if you navigate away from your starting page, its very tricky to navigate to a "consistent state". It is feasible but requires a lot of effort.
    – ManSpan
    Commented Nov 26, 2014 at 9:27
  • @ManSpan Maybe you could consider to create the wizard without navigation, using the same page and only toggling(show/hide) the sections you want for each step. Commented Nov 26, 2014 at 10:07

2 Answers 2


If you want just to keep one page for both desktop and mobile, then I would prefer using bootstrap. Use the bootstrap table, form, jumbotron, media elements, and other bootstrap components shown in below link:


Using angular is beneficial for the application to increase the performance of the application, but it's not a need. Using getters and setters and normal VF action functions, you can achieve the whole functionality while making it simple .

Bootstrap tags will be simple to plug and play without need for lot of custom CSS and the application will be responsive.

So with minimal Javascript and the Bootstrap framework you can achieve responsiveness. Using Apex, you can code your backend. If you want an excellent high performance app, then you will need to make it a SPA using a specific framework, else there is absolute no need .

Navigation can be handled using the Javascript Sforce.one library. You can also call action functions from Javascript .

Edit :

The One Page approach is always better. You need to only build once, while the CSS changes and your controller remains same .

Two page approach will require two pages to build and also some controller logic may change. This will be good from a performance perspective. Normally the one page approach with getters and setters and mobile page controller will have VF Remoting .This may be time consuming, but performance of the app will be great.

  • Thanks @Mohith for your advice. But my question was pointed to know what is better, one page or two ? Commented Dec 2, 2014 at 8:42
  • Edited answer .Perfomance go for two page only styling go for one .one is fatser build ,two pages will be perfomance efficient more build time . Commented Dec 2, 2014 at 8:57

I'm agree with the previous answer, you should use the one page approach, it's less maintenance and more effective.

Between all the different frameworks in the market I found that Bootstrap is one of the best, and actually there is one version called Bootstrap SF1 that has similar styles with Salesforce in terms of fonts, css and style and it's fully responsive.

So. why not using an option that is already built and test it? is not supported by Salesforce but is really good and you can customise it as well to suit your specific needs.

Have a look please: http://developer.salesforce.org/bootstrap-sf1/

You only need to include the library as static resource and called in your custom VF page. Something like this:

  <apex:page standardController="Order__c" standardStylesheets="false" showHeader="true" docType="html-5.0">
  <apex:stylesheet value="{!URLFOR($Resource.bootstrap_sf1, 'bootstrap-sf1-0.1.0-beta.15/dist/css/bootstrap-namespaced.css')}" />
  <apex:stylesheet value="{!URLFOR($Resource.bootstrap_sf1, 'bootstrap-sf1-0.1.0-beta.15/dist/css/bootstrap.css')}" />
  <apex:stylesheet value="{!URLFOR($Resource.bootstrap_sf1, 'bootstrap-sf1-0.1.0-beta.15/dist/css/bootstrap.min.css')}" />

Important to have standardStylesheets="false". Otherwise it will create some conflicts between the bootstrap library and the salesforce standard style.

I hope it helps you, I'm using in both Desktop and mobile and is working fine.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .