Take the 2-minute tour ×
Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It's 100% free, no registration required.


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 : https://www.youtube.com/watch?v=mshyq7dxR7A

http://www.salesforce.com/us/developer/docs/salesforce1/Content/vf_dev_best_practices_approaches_mixed.htm

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

1 Answer 1

up vote 3 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:

http://www.slideshare.net/keirb/rwd-sf1wt

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:

http://www.slideshare.net/developerforce/visualforce-in-salesforce1-optimizing-your-user-interface-for-mobile

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 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 developer.salesforce.com/blogs/engineering/2014/05/… –  Bob Buzzard Jun 20 at 14:14
    
Thank you Bob, this is really very helpful. –  Ashish Shukla Jun 20 at 14:19

Your Answer

 
discard

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.