Making SharePoint Look Good

What to expect when trying to make SharePoint look good with emphasis on some of the points that should be considered before diving in. 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 are demonstrated.

Transcript

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 Blog • http://corypeters.net Twitter • @cory_peters
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? Low Medium High Out of the box! Master page Theme OOTB master page Custom Theme Custom CSS Custom master page Custom page layouts Custom theme/CSS Custom web parts Let’s talk about effort
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 Left Nav Placeh older Main Content Area Placeholder Page Title Placeholder My Bio Name Email Phone Body WP Zone Master Page Page Layout Content Type Web Part Zone & Web Parts
14. BUILDING THE STRUCTURE Left Nav Placeh older Main Content Area Placeholder Page Title Placeholder My Bio Name Email Phone Body WP Zone Master Page Page Layout Content Type Web Part Zone & Web Parts
15. BUILDING THE STRUCTURE Left Nav Placeh older Main Content Area Placeholder Page Title Placeholder My Bio Name Email Phone Body WP Zone Master Page Page Layout Web Part Zone & Web Parts
16. BUILDING THE STRUCTURE Left Nav Placeh older Main Content Area Placeholder Page Title Placeholder My Bio Name Email Phone Body WP Zone Master Page Page Layout
17. BUILDING THE STRUCTURE Left Nav Placeholder Main Content Area Placeholder My Bio Name Email Phone Body WP Zone
18. APPLYING THE CSS Left Nav Placeholder Main Content Area Placeholder My Bio Name Email Phone Body WP Zone Left Nav Placeholder My Bio Name Email Phone 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
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:Panel runat=“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
33. DEMO: CONTENT ROLLUP REUSING CONTENT ACROSS YOUR SITE
37. QUESTIONS? http://www.eastridge.net http://facebook.com/#!/EastridgeTechnology http://twitter.com/eastridgetech Contact Us Stay Connected Software Services for Customer Success 102 West Third Street Suite 1250 Winston-Salem, NC 27101 (336) 831-9800 Our Partners