Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I am looking to create a responsive Visualforce which will be accessible publicly in Portals/Communities.

This page needs to be responsive for access from mobile/ipad devices.

Based on few links below, it looks like using Mixed Tags (HTML+Visualforce) tags should be the best approach :

I think that we should create the VF page with mixed tags (HTML+VF), instead of converting HTML tags like (DIV, SPAN, Section, UL, LI) into VF tags. Means for generating structure, we can use HTML tags and for displaying controller 's data we can use VF Tags like (apex:input, apex:inputField, apex:outputLabel, etc).

If someone has feedback suggestion/feedback on this, it would be really helpful.
Thanks in Advance.

Thanks and Regards,
Ashish Shukla

share|improve this question
up vote 4 down vote accepted

You are correct - avoid standard stylesheets and anything that introduces additional HTML markup (such as apex:pageblock) as this won't be responsive. Use tags to output text and access data, iterate collections etc.

I presented on this at the Salesforce1 World Tour - slide deck link is at:

this also introduces bootstrap, which is a framework that does a lot of the heavy lifting for you.

there's also a slide deck from the Salesforce webinar on Visualforce in Salesforce1 - the principles in here, although targeted at mobile, are applicable to responsive design in general:

share|improve this answer
Hi Bob, Thanks for your quick response. We are using <DIV> structure to make our HTML responsive. So, if we create VF page structure with apex:outputPanel as mentioned below. It renderes correct on mobile device. <apex:outputPanel layout="block" styleClass="custom-div-css"> </apex:outputPanel> So, I would like to confirm that is there any recommendations to use <DIV> vs <apex:outputPanel layout="block"/> for responsive design? Or both are acceptable for responsive design? Thanks and Regards, Ashish Shukla – Ashish Shukla Jun 20 '14 at 14:11
There's no difference in the output sent to the browser, but unless you need rerender capability I'd stick with the standard DIV, especially when using a framework like bootstrap. If you are using rerendering, I'd take a look at moving to remoting and manipulating the DOM yourself, as Visualforce is pretty heavyweight for a mobile device - see… – Bob Buzzard Jun 20 '14 at 14:14
Thank you Bob, this is really very helpful. – Ashish Shukla Jun 20 '14 at 14:19

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.