Rapid Force.com Pages (Visualforce) UI Prototyping


Published on

Rapid application development is one of the strongest selling points of Salesforce and the Force.com platform. But translating design documents into a cross-browser, standard-compliant site can be challenging. Not to worry. This session discusses best practices for rapidly prototyping Visualforce pages using a tool called the 960 Grid System, a free set of design and design translation tools that helps traditional Web developers rapidly build visually compelling sites. See you there!

Published in: Business
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Rapid Force.com Pages (Visualforce) UI Prototyping

  1. 1. Rapid Force.com Pages (Visualforce) UI Prototyping<br />Developers<br />Wes Nolte: Consultant<br />
  2. 2. Rapid application development is one of the strongest selling points of Salesforce and the Force.com platform. But translating design documents into a cross-browser, standard-compliant site can be challenging. <br />
  3. 3. Session Objectives<br />What CSS is and what it’s capable of.<br />Contemporary best practices.<br />More about the use of CSS on the Force.com Platform.<br />CSS frameworks and how to apply them to Visualforce when prototyping.<br />Note that this session is aimed at developers who have at least a cursory understanding of CSS and HTML/XHTML.<br />
  4. 4. Safe Harbor<br />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 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.<br />The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new functionality for our service, 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 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 quarterly report on Form 10-Q for the fiscal year ended October 31, 2009 and our other filings. These documents are available on the SEC Filings section of the Investor Information section of our Web site. <br />Any unreleased services or features referenced in this or other 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.<br />
  5. 5. How is this related to the Cloud?<br />All decent cloud applications use a CSS<br />Your developers must be expert in 2 things<br />General Principles of CSS<br />CSS as applied to Visualforce Pages<br />
  6. 6. Cascading Style Sheets<br />What is CSS?<br />Styling Language<br />Separates HTML content from Look-and-feel e.g. http://csszengarden.com<br />What is meant by “cascade”?<br />CSS best practices across the web<br />Never use inline styles<br />CSS class VS CSS using element Id<br />
  7. 7. Cascading Style Sheets<br />CSS designed for speed<br />Style inclusions should be at the very top of the HTML document<br />Gzip and minify resources<br />Organization of code<br />Order style definitions alphabetically e.g. body{} should appear before .content{}. Do the same for style properties within these definitions e.g. color should come before display<br />Indent sub-styles e.g.<br />.paragraph{}<br /> .paragraph .link{}<br />
  8. 8. CSS in the salesforce.com CRM<br />Styles in standard components<br />Mimicking standard component styles<br />Class names and HTML structure<br />It is to be avoided as far as possible. Example can be found at http://www.forcetree.com/2009/09/using-salesforce-css-styles-in-your.html<br />Overriding standard styles – Don’t do it!<br />
  9. 9. CSS on the Force.com Platform<br />Static Resources as style sheets<br />Slow process when using zip-archives<br />Visualforce pages as style sheets<br /><apex:pagecontentType=“text/css”><br /><apex:stylesheet value=“{!$Page.Stylesheet}” /><br />Quick prototyping of stylesheets as they can be edited in the Force.comIDEs<br />Can include calls to controller methods and global variables so values can be dynamic<br />Can include static resources as images<br />
  10. 10. CSS on the Force.com Platform<br />Visualforce pages as style sheets<br />Slower page loads as styles can’t be minified or compressed<br />You lose the neat organization of files and folders for your styles and images<br />Plaintext Static Resource as style sheets<br /><apex:stylesheet value=“{!$Resource.StyleSheet}” /><br />Quick prototyping of stylesheets as they can be edited in the Force.comIDEs<br />Can’t reference any resource outside of the file & since they don’t exist in a zip-archive no images can be included<br />
  11. 11. CSS on the Force.com Platform<br />Plaintext Static Resource as style sheets<br />Not efficient as they’re not minified or compressed<br />You lose the neat organization of files and folders, and will probably end up with a proliferation of CSS static resource files<br />Zip-archived Static Resource<br />Have a Software Development Lifecycle for Visualforce & CSS development<br />Combine processes where necessary<br />How would you mitigate risk associated with changing references to styling resources?<br />
  12. 12. Evolution of Programming Languages<br />Programming language generations<br />5 language generations<br />Paradigms within these generations e.g. libraries and frameworks<br />What do you understand the difference to be?<br />So what does this have to do with CSS?<br />Easy to learn, difficult to master<br />CSS frameworks exist to help us<br />Blueprint, 960.gs, Elastic CSS Framework<br />
  13. 13. The 960 Grid System<br />Why would I use a framework?<br />Pros<br />Intuitive<br />Cohesive<br />Easy to communicate<br />Cross-browser compliance<br />Cons<br />Adoption<br />Less flexible<br />It’s not a magic wand<br />
  14. 14. The 960 Grid System<br />Why choose this framework?<br />Mature<br />Simple<br />Developer Tools<br />Business Tools<br />
  15. 15. The Ins & Outs of 960.Gs<br />What’s in a name?<br />The magic of 960 pixels<br />Grid Systems<br />Columns and Gutters<br />Upside-down Tetris!<br />Framework keywords<br />Container_XX<br />Grid_XX<br />Alpha & Omega<br />Prefix & Suffix<br />
  16. 16. The Ins & Outs of 960.Gs<br />
  17. 17. The Ins & Outs of 960.Gs<br />Simple Wireframe Code Sample<br />
  18. 18. The Ins & Outs of 960.Gs<br />Corresponding widths for 12-column layout’s columns-numbers are:<br />60px<br />140px<br />220px<br />300px<br />380px<br />460px<br />540px<br />620px<br />700px<br />780px<br />860px<br />940px<br />
  19. 19. The Ins & Outs of 960.Gs<br />Combine Grid Units<br />
  20. 20. 960.Gs Grid Units<br />Nesting Grid Units<br />
  21. 21. Get the Frameworkhttp://960.gs<br />
  22. 22. Wiring 960.Gs up to Visualforce<br />The 960.gs Static Resource<br />Style files contained in code/css folder<br />Include the style sheet<br /><apex:stylesheet value="{!URLFOR($Resource.Css960Gs, 'css/960.css')}"/><br />
  23. 23. More Than Just a Framework<br />Gather business requirements using sketch sheets<br />
  24. 24. More Than Just a Framework<br /><ul><li>Design templates exist for all major design applications
  25. 25. Templates match sketch sheets and CSS framework dimensions precisely</li></li></ul><li>Developing with 960.gs<br /><ul><li>Work in parallel with the designer
  26. 26. Slot final images into Visualforce wireframe</li></li></ul><li>Developing the 960.gs<br /><ul><li>Use a “Gridder” to guide your development</li></li></ul><li>Developing with 960.gs<br /><ul><li>View live demo at http://thesilverlining-developer-edition.na7.force.com/x960gs.</li></li></ul><li>In Summary<br />In this session you’ve learnt about CSS, it’s application and best practice in the CRM and on the Force.com Platform. You’ve also seen one of the more popular CSS frameworks and it’s application in Visualforce. Now you have the necessary insight to rapidly prototype your Force.com Site designs, all you have to do is practice practice practice.<br />I encourage you to sign up for a free Developer Edition Org and read through the standard documentation on CSS within Salesforce and Force.com. I also challenge you to go beyond that and look at the other platforms and see what they’re doing with CSS; and become a technology pioneer on the Force.com Platform!<br />
  27. 27. Rapid Force.com Pages (Visualforce) UI Prototyping<br />
  28. 28. Visit the Developer Training and Support Booth in Force.com Zone<br />D I S C O V E R<br />Developer training, certification and support resources <br />that help you achieve<br />S U C C E S S<br />Find us in the Partner Demo Area of <br />Force.com Zone 2nd Floor Moscone West<br />Learn about Developer Certifications<br />Discover Developer Learning Paths<br />
  29. 29. Remember. . .<br /><ul><li>Check Chatter for additional session information
  30. 30. Get your developer Workbooks and Cheat Sheets in the Force.com Zone
  31. 31. Visit for more information related to this topic</li></ul>Don’t forget the survey!<br />
  32. 32. How Could Dreamforce Be Better? Tell Us!<br />Log in to the Dreamforce app to submit<br />surveys for the sessions you attended<br />Use the Dreamforce Mobile app to submit surveys<br />OR<br />Every session survey you submit is a chance to win an iPod nano!<br />