Your mobile UI should be as awesome as your code. Visualforce is one most of the most important and powerful tools in a developer’s toolbelt when it comes to customizing the user experience in Salesforce1. In this webinar, we’ll show you where and how you can use Visualforce in Salesforce1. Key Takeaways Explore which parts of the Salesforce1 app you can customize using Visualforce Learn best practices for developing mobile-optimized Visualforce pages for Salesforce1 Understand UX/UI considerations and tools for developing Salesforce1 Visualforce pages Practice developing Visualforce pages that work both in Salesforce1 and the desktop

1. Visualforce in Salesforce1
Optimizing your User Interface for Mobile
May 14, 2014

2. #forcewebinar
Speakers
Dave Carroll
Director, Developer Evangelism
@dcarroll
Pat Patterson
Developer Evangelist Architect
@metadaddy

3. #forcewebinar
Safe Harbor
Safe harbor statement under the Private Securities Litigation Reform Act of 1995:
This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties materialize or if any of
the assumptions proves incorrect, the results of salesforce.com, inc. could differ materially from the results expressed or implied by the forward-looking
statements we make. All statements other than statements of historical fact could be deemed forward-looking, including any projections of product or service
availability, subscriber growth, earnings, revenues, or other financial items and any statements regarding strategies or plans of management for future
operations, statements of belief, any statements concerning new, planned, or upgraded services or technology developments and customer contracts or use
of our services.
The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new functionality for our
service, new products and services, our new business model, our past operating losses, possible fluctuations in our operating results and rate of growth,
interruptions or delays in our Web hosting, breach of our security measures, the outcome of intellectual property and other litigation, risks associated with
possible mergers and acquisitions, the immature market in which we operate, our relatively limited operating history, our ability to expand, retain, and
motivate our employees and manage our growth, new releases of our service and successful customer deployment, our limited history reselling non-
salesforce.com products, and utilization and selling to larger enterprise customers. Further information on potential factors that could affect the financial
results of salesforce.com, inc. is included in our annual report on Form 10-Q for the most recent fiscal quarter ended July 31, 2012. This documents and
others containing important disclosures are available on the SEC Filings section of the Investor Information section of our Web site.
Any unreleased services or features referenced in this or other presentations, press releases or public statements are not currently available and may not be
delivered on time or at all. Customers who purchase our services should make the purchase decisions based upon features that are currently available.
Salesforce.com, inc. assumes no obligation and does not intend to update these forward-looking statements.

4. #forcewebinar
Follow Salesforce Developers for the Latest News
Salesforce Developers
+Salesforce Developers
Salesforce Developers
Salesforce Developers The video will be posted to YouTube
& the webinar recap page
(same URL as registration).
This webinar is being recorded!
@salesforcedevs / #forcewebinar

5. #forcewebinar
Have Questions?
§ Don’t wait until the end to ask your question!
– Technical support will answer questions starting now.
§ Respect Q&A etiquette
– Don’t repeat questions. The support team is working their way
down the queue.
§ Stick around for live Q&A at the end
– Speakers will tackle more questions at the end, time-allowing.
§ Head to Developer Forums
– More questions? Visit developer.salesforce.com/forums

6. #forcewebinar
Introducing Salesforce1
All your past investments...
Drag and drop UI
customization
Notifications
Platform
Publisher
Actions
...now in the future
All Your
Customizations
All Your Devices
All Your CRM
All Your Apps
https://yourinstance.salesforce.com/one/one.app
Download the Salesforce1 Mobile App today

7. #forcewebinar
Visualforce in Salesforce1
§ Where can I use it?
§ How do I use it?
§ How can I make the most of it?

8. #forcewebinar
Visualforce in Salesforce1
§ Where can I use it?
§ How do I use it?
§ How can I make the most of it?

9. #forcewebinar
Visualforce – Left Nav
Visualforce Pages in Left Nav
JavaScript navigation library available
sforce.one.navigateToSObject etc.

10. #forcewebinar
Visualforce – Publisher Actions
Visualforce Pages as Publisher Actions
(VF page needs to the extend Standard Controller for
use with Object Specific Publisher Actions)
JavaScript Pub-Sub library available to interact with the
publisher
publisher.setValidForSubmit
publisher.post
publisher.close

11. #forcewebinar
Visualforce – Page Layout
Visualforce Pages in Page Layouts
(VF page needs to the extend Standard Controller)

12. #forcewebinar
Visualforce – Mobile Cards
Mobile Cards - Visualforce Pages on
Record Detail
(VF page needs to the extend Standard Controller)

13. #forcewebinar
Demo:
Basic Visualforce in Salesforce1

14. #forcewebinar
Visualforce in Salesforce1
§ <apex:page docType="html-5.0" …>
§ ‘Available for Salesforce Mobile apps’ flag enabled
§ VF page needs to the extend Standard Controller in order to use in the
Page Layout, Mobile Cards or Contextual Publisher Actions
Things to remember…

15. #forcewebinar
Visualforce in Salesforce1
§ Where can I use it?
§ How do I use it?
– UI/UX
– Business Logic & Data Binding
– Navigation
§ How can I make the most of it?

16. #forcewebinar
Visualforce in Salesforce1
§ Where can I use it?
§ How do I use it?
– UI/UX
– Business Logic & Data Binding
– Navigation
§ How can I make the most of it?

17. #forcewebinar
Visualforce in Salesforce1 – UI/UX considerations
Salesforce1 cannot auto-magically
(yes, it’s a word) make Visualforce
pages mobile-optimized

18. #forcewebinar
Visualforce UI/UX considerations
§ Design VF pages taking the limited real-estate in mobile into account
§ Decide which form-factors your page has to support - phone, tablet, both
§ Develop for the mobile context
– Use device features like geolocation, camera etc. where appropriate
– Mobile version of the page/app does not have to support all the bells and whistles –
less is more
– Optimize for your most common mobile use case – discovery, data entry, search etc.
§ <apex:page standardStylesheets="false">
§ Use Responsive Design principles (same as the Salesforce1 app)

19. #forcewebinar
Making Visualforce Pages Mobile Optimized
Mobile Design Templates
www.developerforce.com/mobile/services/mobile-templates

20. #forcewebinar
Making Visualforce Pages Mobile Optimized
Twitter Bootstrap
http://www.youtube.com/watch?v=sIWchyCqDa4
Using Visualforce and Bootstrap -
http://bit.ly/VisualStrap
Custom Bootstrap fork that works with default
Visualforce styling (Community developed)

21. #forcewebinar
Making Visualforce Pages Mobile Optimized
Ionic Framework
http://coenraets.org/blog/2014/02/sample-force-com-mobile-
application-with-ionic-and-angularjs/

22. #forcewebinar
Making Visualforce Pages Mobile Optimized
Ratchet
http://coenraets.org/blog/2014/03/building-mobile-apps-for-
salesforce-com-with-ratchet-2-0/

23. #forcewebinar
Making Visualforce Pages Mobile Optimized
jQuery Mobile
http://www.developerforce.com/mobile/getting-started/
html5/#jquery

24. #forcewebinar
Using Standard Visualforce Tags in Salesforce1
<apex:repeat> <apex:outputPanel>
Note: Representative sample only. This is not a
comprehensive list
<apex:pageBlock> <apex:pageBlockButtons>
<apex:pageBlockSection> <apex:pageBlockSectionItem>
<apex:pageBlockTable> <apex:inlineEditSupport>
<apex:detail> <apex:inputField>**
<apex:enhancedList> <apex:listViews> <apex:relatedList>
<chatter:*> <liveagent:*>
Works and
Supported
Supported,
but avoid if
possible
Not
Supported

25. #forcewebinar
Salesforce1 Style Guide
http://sfdc-styleguide.herokuapp.com/
Keeping Visualforce pages consistent with the Salesforce1 look and feel

26. #forcewebinar
Salesforce1 Style Guide
https://github.com/joshbirk/onestarter
OneStarter - An open-source jQuery plugin for easily making Visualforce
pages appear in the style of Salesforce1.

27. #forcewebinar
Visualforce in Salesforce1 - UI/UX summary
Dos Don’ts
Responsive design Desktop optimized design
Standard HTML markup and custom
CSS
Standard VF structure tags and CSS
Less is more Support every bell and whistle
Use Mobile Context (e.g. camera,
geolocation)
Recreate desktop functionality
Optimized for touch (e.g. larger tap
areas, HTML5 form inputs)
Optimized for click

28. #forcewebinar
Visualforce in Salesforce1
§ Where can I use it?
§ How do I use it?
– UI/UX
– Business Logic & Data Binding
– Navigation
§ How can I make the most of it?

29. #forcewebinar
§ Avoid ViewState (no <apex:form>)
§ Favor Single Page apps (full page rendering is expensive on mobile)
§ Consider JavaScript MV* Frameworks like AngularJS, Backbone etc. to
provide structure
Business Logic & Data Binding in Visualforce
Top 3 things to remember….

30. #forcewebinar
Business Logic & Data Binding in Visualforce
§ Invoke Apex Controller/Extension
methods from JavaScript
§ Avoids ViewState (better performance)
§ Stateless business logic
§ Front-end heavy (i.e. JavaScript)
development
JavaScript Remoting

31. #forcewebinar
Business Logic & Data Binding in Visualforce
§ Basic CRUD operations on SObjects
directly from JavaScript
§ Avoids ViewState (better performance)
§ Reduces server-side Apex code
§ Front-end heavy (i.e. JavaScript)
development
§ Replaces ForceTk/RemoteTk (in the VF
context)
Visualforce Remote Objects (new Pilot in Spring ’14)

32. #forcewebinar
Business Logic & Data Binding in Visualforce
§ Use <apex:repeat> to display
lists
<apex:repeat> is your friend

33. #forcewebinar
Visualforce in Salesforce1 – Data Binding summary
Dos Don’ts
JavaScript Remoting <apex:form>
Visualforce Remote Objects <apex:form>
HTML5 Input Elements (tel, email, date
etc.)
<apex:inputField>
<apex:input type=“tel/email/…”/> <apex:inputField>
Single Page apps Multi-page apps
JavaScript MV* Frameworks like
AngularJS, Backbone etc.
No JavaScript Framework
Stateless & Asynchronous Server-side state & synchronous

34. #forcewebinar
Visualforce in Salesforce1
§ Where can I use it?
§ How do I use it?
– UI/UX
– Business Logic & Data Binding
– Navigation
§ How can I make the most of it?

35. #forcewebinar
Visualforce in Salesforce1 - Navigation
Salesforce1 provides a JavaScript navigation library via the sforce.one
object
sforce.one.navigateToSObject
sforce.one.navigateToURL
sforce.one.navigateToFeed
sforce.one.navigateToFeedItemDetail
sforce.one.navigateToRelatedList
sforce.one.navigateToList
sforce.one.editRecord
sforce.one.createRecord

36. #forcewebinar
Demo:
Visualforce Single Page App in
Salesforce1

37. #forcewebinar
Visualforce in Salesforce1
§ Where can I use it?
§ How do I use it?
– UI/UX
– Business Logic & Data Binding
– Navigation
§ How can I make the most of it?
– Performance
– Debugging

38. #forcewebinar
Visualforce in Salesforce1
§ Where can I use it?
§ How do I use it?
– UI/UX
– Business Logic & Data Binding
– Navigation
§ How can I make the most of it?
– Performance
– Debugging

39. #forcewebinar
Visualforce Performance in Salesforce1
The 3 most important things about developing mobile web pages
Performance, Performance, Performance.

40. #forcewebinar
Visualforce Performance in Salesforce1
Some Performance tips for designing mobile VF pages
§ Avoid viewstate (no <apex:form>)
§ <apex:page cache="true" expires="600">
§ Minimize all your CSS and JavaScript (using tools like YUI Compressor) and compress images
§ Use optimization techniques like image lazy loading and infinite scroll
§ Insert/update the DOM in bulk to avoid browser reflows (e.g. insert an entire <ul> section
instead of individual <li> elements)
General

41. #forcewebinar
Visualforce Performance in Salesforce1
Some Performance tips for designing mobile VF pages
§ Use libraries like FastClick to avoid the default 300ms tap delay in mobile web browsers
§ Use lightweight JavaScript libraries like Zepto.js instead of Jquery
§ Move your <script> statements to the end of the Visualforce page
JavaScript

42. #forcewebinar
Visualforce Performance in Salesforce1
Some Performance tips for designing mobile VF pages
§ Use CSS Sprites to minimize HTTP connections
§ Avoid CSS techniques like drop shadows, gradients etc. that affect page performance. Flat
design is new black.
§ Use Hardware Accelerated CSS properties where appropriate
§ Use PNG/JPG images (no GIFs). Avoid images completely (use CSS3 instead) where possible.
§ Build single page apps with CSS transitions between screens/sections
§ Conditionally load static assets (CSS, images etc.) based on form factor
CSS/Images

43. #forcewebinar
Visualforce Performance in Salesforce1
Some Tools to help you measure page performance
§ WebPageTest
§ PageSpeed Insights
§ Chrome Developer Tools - Timeline

44. #forcewebinar
Visualforce in Salesforce1
§ Where can I use it?
§ How do I use it?
– UI/UX
– Business Logic & Data Binding
– Navigation
§ How can I make the most of it?
– Performance
– Debugging

45. #forcewebinar
Salesforce1 comes in two flavors
http://yourinstance.salesforce.com/one/one.app
Web version Hybrid version
Debugging Visualforce in Salesforce1

46. #forcewebinar
Debug your Visualforce page in the web version of Salesforce1 first
http://yourinstance.salesforce.com/one/one.app
Debugging Visualforce in Salesforce1
Use standard web debugging
tools like Chrome Developer Tools
and Firebug
Chrome Developer Tools Mobile
Emulation

47. #forcewebinar
Debugging Visualforce pages running on a device
(i.e. inside the Hybrid Salesforce1 app)
http://people.apache.org/~pmuellr/weinre/docs/latest/
Debugging Visualforce in Salesforce1
Weinre – open source tool to debug web pages running on a device

48. #forcewebinar
Salesforce1 Developer Resources
§ Webinar: Intro to Salesforce1 Mobile App Development
– bit.ly/s1-mob-app-dev
§ Dreamforce Sessions: bit.ly/s1-df-sessions
§ Developer Guide: bit.ly/s1-dev-guide
§ Blogs:
– 6 things you need to know: bit.ly/s1-6-things
– Mobile cards: bit.ly/s1-mobile-cards
§ Code:
– Issues in GitHub: github.com/metadaddy-sfdc/IssuesInGitHub
– Visualforce, AngularJS & Ionic: bit.ly/vf-ionic

49. #forcewebinar
Survey
Your feedback is crucial to the success
of our webinar programs. Thank you!
bit.ly/VFinSF1
#forcewebinar

50. #forcewebinar
Q & A
#forcewebinar
Dave Carroll
Director, Developer Evangelism
@dcarroll
Pat Patterson
Developer Evangelist Architect
@metadaddy