Siteforce Pilot: Best Practices

Siteforce Pilot: Best Practices

Getting Started with Siteforce Setup your users as Publishers and Contributors. Siteforce has two distinct types of users First, is your Web Publishers. These are the front end developers who will be the owners and builders of your website design. The second type of Siteforce users is Content Contributors. These are the business people who want to have control over text and messaging of your website, and have nothing to do with the design of the website. They will be in a restricted environment when using Siteforce. Contact your salesforce administrator to get users setup in your organization appropriately for Siteforce pilot. Web Publishers should be using the System Administrator or Salesforce Administor user profiles. If you have implemented custom user profiles, then make sure that Customize Application permission is enabled for these users. Content Contributors should be using the user profile called Standard User. If you have implemented custom user profiles, then make sure that View Setup permission is enabled for these users. Please note that his is a temporary setup needed for working with Siteforce pilot. Explore Siteforce Studio with the sample site template that comes with the product. Siteforce comes with a sample site template. We recommend that you first familiarize yourself with the Siteforce Studio by creating a new sites based on the sample site template. Cut up your website design to start building! Now that you are ready to start creating your own site, take a look at the creative assets for your website design and make sure you have any image assets, file assets, stylesheets, etc that you will need in the process. Siteforce Pilot Summer 11 : Best Practices Page 1 of 6

Working with Page Templates Always start with a page template. Remember changing a template will change all pages and templates derived from it. Use nested page templates. Flag parts of page templates as editable for editing in pages and templates derived from it. Laying out Pages Duplicate a page to create similar pages. Stay away from HTML tables. Instead, use panels with float property to build multi column layouts. Import images and files by dropping them into Siteforce Studio. Use the DOM tree in the left toolbar (Page Structure). Remember to use Undo / Redo. Siteforce Pilot Summer 11 : Best Practices Page 2 of 6

Working with Styles Always start with adding a reset CSS. All browsers have presentation defaults, but no browsers have the same defaults - resetting your styles just means you set your style rules for all elements to avoid having the browser do it for you. Using a CSS reset basically zeroes out the differences and allows for a clean start with complete control over how browser elements are presented to the end user. In Siteforce, you can either use your own CSS reset - this is done by pasting in your CSS code after choosing to "Edit Style Sheet Code" or you can choose to include ours (which is based on Eric Meyer's reset) by highlighting the Style Sheet on the left and choosing "Insert CSS Reset" from the actions menu. Either way, you should make sure that the reset is at the top of the style sheet's code, so any styles that come after it actually define how each item will be styled. Use CSS from your creative designs or look for online resources for free CSS. Use groups to organize your CSS code. Keeping your code organized is always a good thing - and the use of groups in your CSS code can really help when you have to go back to make changes. In Siteforce, we enable you to create style groups, in which you can nest similar styles. To create a style group, simply select the style sheet in which you'd like it to exist and choose "Style Group" from the "New" menu just above the left side's list area. This will insert a folder at the bottom of your style sheet's existing styles. If you'd like to re-order it to somewhere above its location, you can simply click and drag it to where you'd like it to be. From there, you can insert styles into the group in 2 ways: a) highlight the group and choose "Style Item" from the "New" menu; or b) drag an existing style into the folder. Remember when to use an ID versus a CSS Class. One of the basic principles to know when coding a CSS is that IDs must be unique in a page's structure, but classes can be used as many times on a page as you'd like. A good way to think about it is that in a page's structure, IDs are often used to define the header, content and footer areas. Within content, in the case of something like a blog, it's quite common to see classes such as "post" or "date" used repeatedly. Siteforce Pilot Summer 11 : Best Practices Page 3 of 6

Adding menu driven navigation Organize your pages in Sitemap. Start with the Menu component provided, and customize its behavior and look. Add custom code to get more from your menus, like adding on-hover sub menus. Here is a how-to on how to add on-hover sub-menus. We will assume that the user setting up the menu and sub-menu(s) has fairly advanced knowledge of CSS styling and formatting. There are 2 ways to add the on-hover sub-menus to your site. The first is, after adding a menu object to your page, to simply choose the Horizontal Dropdown theme in the Properties / Theme section and then go into your style sheet to customize its appearance. This does the work for you and is quite an easy approach. The second approach, if you want complete control over how the sub-menu code gets added is to take advantage of the jquery library, which is included in Siteforce to achieve the on-hover drop-down menus you want in your site. In this section of the document, we'll outline this approach. Step 1: Select your root Page object and add something like this to your main template in the right side Properties / Scripts section by clicking the Configure button below Edit Head Markup: <script type="text/javascript"> $(document).ready(function(){ $('#mainnav>ul>li').hover( function() { $('.sub-menu',this).css('display', 'block'); }, function() { $('.sub-menu',this).css('display', 'none'); }) }); </script>... where mainnav is the ID of your main navigation menu and the class sub-menu has been applied to each of your sub-menus. After that, click the Configure button below Edit Body Script and insert the following: $('#mainnav').children('ul').children('li').eq(0).append($('#sub1')); $('#mainnav').children('ul').children('li').eq(1).append($('#sub2')); $('#mainnav').children('ul').children('li').eq(3).append($('#sub3')); $('#mainnav').children('ul').children('li').eq(4).append($('#sub4')); $('#mainnav').children('ul').children('li').eq(5).append($('#sub5')); Siteforce Pilot Summer 11 : Best Practices Page 4 of 6

...where "mainnav" is, again the ID given to your site's main navigation and "sub1" through "sub5" (or however many you have) are the IDs given to your site's desired submenus. You don't need to wrap the code in script tags. We do that for you here. Step 2: If you haven't already done so, add a Menu object to your page and give it the ID mainnav. Step 3: Now for the sub-menus. For each section of the site that you would like to have a sub-menu, drag a new Menu object into the same Panel container in which the mainnav object is housed. It would be a good idea to set up a sub-menu class in your style sheet ahead of this step (if not, do so now) with the following code:.sub-menu { padding: 0; display: none; } Now that the new menu object has been added to the page, you should give it the corresponding ID from the Body Script above (sub1, sub2, sub3... or whatever you've chosen to name them) and choose the section's parent page as the Menu Source. This will automatically add any pages added to that section to the sub-menu. Now, apply the sub-menu class in the right side's Style tab. This should be repeated for each sub-menu you would like to add to the site. Testing and Publishing Preview your site often. Use anonymous preview to share your work for feedback. In Site Properties, enable anonymous preview. Then use the Preview pull-down button to view anonymous preview. You can share this URL with your team to get feedback on your work, without them needing to login to salesforce. Start with publishing to a test domain. Leave draft pages outside of sitemap Siteforce Pilot Summer 11 : Best Practices Page 5 of 6

Customize your Site Implement custom code block for advanced functions. In general, try to avoid using custom code if possible. If you are comfortable with the ins & outs of coding HTML however, it can be a powerful tool for customizing your site and using markup tags that are not provided natively in the studio environment. For example: Flash or advanced video objects usually require the use of an <embed> or <object> tag with special parameters. Although it is also possible to insert flash (or video) object in the rich text editor, you may require more flexibility for setting advanced options - custom code is ideal for this, since you have access to the raw HTML markup. Styling the custom code object: even though a custom code object may look empty (or contain only script), it actually is represented on the page in the form of a <div> wrapper. Therefore you can style the custom code object as normal (for e.g. using the visual CSS editor). The styling will be applied to the <div> that wraps the custom code. If you are building a Siteforce site from an existing HTML site, try to avoid relying on the custom code object as a crutch for pasting in massive amounts of HTML from the original site. Instead, take a step back and think about how you can use Siteforce native objects (like panels, images and content blocks) to achieve your need. Doing things this way takes a bit longer but pays off in the long run since future design changes will be easier, and the editing environment will be more intuitive as a result. (E.g., Custom code blocks are not editable in the Rich Text Editor (RTE) by contributor users - only content blocks can be edited by contributors). Add scripts to bring your site to life. Since your markup can contain <script> tags, you could use custom code to insert things like Google analytics hooks, or other 3rd party functionality. In general however, you should prefer to use the 'page script' button (for body,head) in order to execute javascript. Putting script in the custom code object is useful only in specific situations where you need to do something at a particular location in the the page. Use frameworks such jquery, mootools, 960.gs Siteforce Pilot Summer 11 : Best Practices Page 6 of 6