Video/Audio of this presentation is also available at http://www.youtube.com/watch?v=5-oVBgRVzBM from the beginning to about the 23 minutes mark

1. Combining Customer
Portals, Force.com
Sites, Visualforce, Twitt
er Bootstrap and
Responsive Design!

2. About Me
• Steven Herod
• Working with Salesforce since
2010
• @sherod on Twitter
• http://limitexception.herod.net

3. What was the problem?
• Needed to accept online credit
applications for car loans
• Leverage their Existing Salesforce
Organization.
• Required support of Mobile Phone/Tablet
and Desktop browsers.

4. Components
Force.com Site +
Service Portal
Responsive Design with
• Twitter Bootstrap
• jQuery
Visualforce + Fieldsets

5. What is Responsive Design?
http://johnpolacek.github.com/scrolldeck.js/decks/responsive/

6. What is Twitter Bootstrap?

7. And the Salesforce bits
• High Volume Customer Portal
– Salesforce license / Security model
• Force.com Site
– Custom login and user interface
• Visualforce
– Fieldsets
– Custom Controllers

8. Deep Dive

9. Responding to different displays
Desktop
iPad
iPhone

10. Setting up the page

11. Handling the Resize
Twitter Bootstrap CSS classes +
jQuery to react to changes
<div class="callimg hidden-phone hidden-tablet">
<apex:image
url="{!URLFOR($Resource.LCPStaticRsc, 'lcp/img/img_call.png')}"
alt="" width="224" height="35" />
</div>

12. Using Fieldsets
• “A field set is a grouping of fields”
• Allows us to package the fields into a
configurable group and then refer to that
group within the VF page without
referencing every field individually.
• Also allows us to mark if its mandatory..

13. Fields sets on the page
Visualforce Page
Page Block
Fieldset
Fieldset
Page Block
Fieldset
Fieldset
Page Block
Fieldset
Fieldset
Page Block
Fieldset
Fieldset

14. Field set per section
Order of fields and required driven from
Fieldset definition in configuration

15. Displaying the Fieldsets

16. Help and Type changes UI

18. Setting up the help/input field

19. Javascript for Currency/Help
popover

20. Error handling
Twitter Bootstrap
CSS classes
<apex:messages styleClass="alert alert-error" />
j$('input.error,select.error').parents('.control-group').addClass('error');

21. Questions?