This presentation walks users through what to expect when trying to make SharePoint look good with emphasis on some of the points that should be considered before diving in. The presentation covers the publishing features, the components of a publishing solution and helpful tips to consider when designing for SharePoint. Additionally, the demo at the end shows to two most common tasks when it comes to creating a publishing site: building a page layout and using the content query web part for content roll up. Learn more about Eastridge at http://www.eastridge.net.

1. Making SharePoint Look Good! Cory Peters Chief SharePoint Architect Eastridge Technology, Inc.

2. About Me Chief SharePoint Architect at Eastridge Technology, Inc. MCP, MCTS, VTSP Gamer, gadget geek, speaker Working with SharePoint since Portal Server 2003 Comp Science from NCSU Worked with all aspects of SharePoint including Architecture Administration Implementation Development Branding

3. Agenda What You Think You Want vs. What You Need SharePoint Publishing The Pieces Common Goals Branding Tips

4. I want SharePoint But I Don’t want It to look like SharePoint

5. What do you need? Out of the box! Master page Theme Let’s talk about effort Custom master page Custom page layouts Custom theme/CSS Custom web parts $ OOTB master page Custom Theme Custom CSS $$ $$$

6. SharePoint Publishing What it is and when to use it

7. Publishing Features Create page level templates (page layouts) Better control over navigation Allows administrators to Change the welcome page Change the master page Apply custom CSS to all sites within the collection Apply a theme to all sites within the collection

8. When to use publishing Anytime you need high levels of branding customization Internet facing sites Driven by the marketing team Few authors, many readers Tightly controlled – workflow approval on content edits Need to support multiple browsers Internal facing sites Company intranet To maintain brand or provide consistent look and feel across sites Add a footer or additional content into all pages

9. The pieces What makes up a branding solution

10. Master pages Contains all Content placeholders Images Styles Controls Ribbon (2010) Top Navigation Left Navigation

11. Page layouts Contains web part zones Page structure Additional resources CSS JavaScript

12. Content Type Content areas Custom fields Images Date Text Dropdowns etc

13. Building the structure Master Page Page Layout My Bio Page Title Placeholder Left Nav Placeholder Main Content Area Placeholder Content Type Web Part Zone & Web Parts Name WP Zone Email Phone Body

14. Building the structure Master Page Page Layout My Bio Page Title Placeholder Left Nav Placeholder Main Content Area Placeholder Content Type Web Part Zone & Web Parts Name WP Zone Email Phone Body

15. Building the structure Master Page Page Layout My Bio Page Title Placeholder Left Nav Placeholder Main Content Area Placeholder WP Zone Web Part Zone & Web Parts Name Email Phone Body

16. Building the structure Master Page Page Layout My Bio Page Title Placeholder Left Nav Placeholder Main Content Area Placeholder WP Zone Name Email Phone Body

17. Building the structure My Bio Left Nav Placeholder Main Content Area Placeholder Name Email WP Zone Phone Body

18. Applying the CSS My Bio Left Nav Placeholder Main Content Area Placeholder My Bio Left Nav Placeholder Name Name WP Zone Email Email Phone Phone Body Body WP Zone

19. Themes In 2007 Full ability to customize CSS Difficult to deploy / manage In 2010 Customize colors and fonts using 12 colors and 2 fonts Easy to deploy Easy to develop Limited capability

20. SP2010 Themes

21. Branding tips Things to consider

22. #1 – Branding Navigation 2007 Navigation is a series of nested tables Very difficult to brand 2010 Navigation uses a UL (Unordered List) Much easier to brand Simpler CSS Very flexible

23. 2010

24. #2 – Handle flyouts Be sure to consider and be aware of flyouts and multiple level flyouts

25. #3 – Don’t reinvent the wheel Take advantage of the starter master pages Microsoft http://code.msdn.microsoft.com/odcSP14StarterMaster Randy Drisgill http://startermasterpages.codeplex.com/ These help with Favicon Footer Fixed width designs Extra comments to understand what’s going on

26. #4 – user controls Don’t delete controls if you’re not using them… instead move them to a <asp:Panelrunat=“server” visible=“false”></asp:Panel> at the bottom of your master page

27. #5 – Configuring Page Layouts Make sure you set a default page layout (2010) Don’t use web parts on your default layout Make sure you configure which page layouts are available (2007 and 2010) Site Settings > Page layouts and site templates

28. #6 – Referencing Fields When referencing fields use the internal name rather than the ID of the field for maintainability

29. #7 – Web Part Design Stay away from rounded corner designs (Especially for an intranet or read only users) Make sure your web part designs can grow in both width and height Web Part Title This is the body of a sample web part. What happens if the user puts this web part in a zone that is too wide for the web part design?

30. #8 – Centering your Site Add class=“s4-nosetwidth”

31. Common Branding Goals Demos

32. Demo: page layout Building an employee profile page

34. Demo: content rollup Reusing content across your site

37. Questions? Contact Us 201 West Third Street Suite 1250 Winston-Salem, NC 27101 (336) 831-9800 Software Services for Customer Success Our Partners Stay Connected http://www.eastridge.net http://facebook.com/#!/EastridgeTechnology http://twitter.com/eastridgetech