Mastering your SharePoint Internet Design


Published on

C/D/H shares expert advice for advanced-level SharePoint designers and developers.

View our Mastering SharePoint Design slide deck to learn more about architecting branding solutions and creating branding features, including the anatomy of a custom feature and deployment.

And for more information on this or other SharePoint topics, visit our blog at

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

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

No notes for slide

Mastering your SharePoint Internet Design

  1. 1. Mastering your SharePoint Internet design
  2. 2. Quick FactsAbout Us Approach Partnerships• 22nd Year • Vendor • Microsoft Gold• Grand Rapids & Independent • VMware Enterprise Royal Oak • Non-reseller • Citrix Silver• 30 Staff • Professional • Cisco Registered Services Only • Novell Gold
  3. 3. Expertise
  4. 4. Microsoft Gold PartnerCompetencies Successes Pinpoint• Four Gold • Customer Excellence • Microsoft’s official• Eight Silver Award partner directory • Virtual Technical • 5-star rating Specialist (VTSP) • Managed Partner • Numerous Partner Awards
  5. 5. Get Social with C/D/HC/D/H Talks Tech C/D/H Tweets Tech
  6. 6. Your PresenterJeff KinnellyConsultant, Design /
  7. 7. Agenda• Architecting Branding Solutions – On Premise – In the Cloud• Creating Branding Features – Anatomy of a Custom Branding Feature – Deployment• Q&A
  8. 8. Overall Project Strategies
  9. 9. Branding ApproachesPublic websites – Light informational websites (60-100 hours) – Enterprise websites (300-1000+ hours)Intranets – Custom themes (12-20 hours) – Low-impact designs (25-100 hours) – Fully custom solutions (300-1000+ hours)
  10. 10. General Branding Guidelines• Office 365 solutions – Doesn’t use SP Central Admin – No farm deployments – Sites inherit branding from the root collection – My Sites cannot be branded – Is the model for SP 2013 (sandboxed solutions)
  11. 11. Common Goals for Branding Projects• Common Goals for Branding Projects
  12. 12. Master Pages + Page Layouts
  13. 13. Master Page Page LayoutMaster Page
  14. 14. SharePoint Front-end: How the Site is Built
  15. 15. Master Pages • Team site master page v4.master • User content pages (listscontent pagesetc) • _layouts pages (site settings, etc) • For app experiences, like Search or Office Web Applicationsminimal.master • If you do not need site navigation, do not have a ribbon • If your app needs the space • For error pages or login pagessimple.master • Not customizable, but pages can be replaced • Show site using legacy interfacedefault.master • No Ribbon, no fluency
  16. 16. Where Are They Stored?• Global directory in the 12 or 14 hive – Located on the web front end (WFE) server – C:Program FilesCommon FilesMicrosoft Shared14TemplateGlobal – Pointer to 12/14 hive is stored in the Master Page Gallery• Master Page Gallery in a Site Collection – Located in the content database (database server)
  17. 17. Development Tools• SharePoint Designer 2010 – WYSIWYG, ASP/HTML/CSS code, deployment• Visual Studio 2010 – ASP/HTML/CSS code, solution development, deployment• IE Developer Toolbar – Debugging, identifying CSS elements• Photoshop – Image creation/manipulation, color selection• GIMP – Image creation/manipulation, color selection• Notepad
  18. 18. SharePoint Development in VS2010• SharePoint 2010 item templates – Web Part, Workflow, Module, Content Type, List Definition, etc.• Automated build and deployment• File references and modules (sets of files) – Once files are added to the solution, references automatically appear in the element files – Modules are automatically added to feature elements• Sandboxed solutions – Live in the site collection – Can be run by site administrators – Can only manipulate a subset of objects in SP object model – Performance can be throttled
  19. 19. Master Page Deployment Options• Manual deployment to the Master Page Gallery – Followed by a manual application of the master page – Does not require Visual Studio OR• WSP solution deployment to the Site or Farm solution store – Followed by an automated application via a Feature Kanwal Khipple - BrightStarr
  20. 20. Elements in a Master Page Solution• Module – Group of files to be provisioned • .master files, CSS files, images – Elements.xml file specifies where file will be provisioned to• Feature – Facilitate the provisioning/de-provisioning of master pages• Event Receiver – Piece of code that runs when feature is activated – Can be used to apply the master page to sites Kanwal Khipple - BrightStarr
  21. 21. Where to Start• Start with a copy of V4.master (or minimal.master if you do not need the ribbon or top nav)• Create a new CSS file, and copy/paste the elements you wish to modify from COREV4.css• Create a module for the CSS files and master page file – CSS files should be provisioned to the Style Library or to the 14 hive – Master pages should be provisioned to the Master Page Gallery or to the 14 hive Kanwal Khipple - BrightStarr
  22. 22. Images and Styles• Images and CSS files can be provisioned to a library within the site collection (i.e. Style Library), or to the 14 hive (.i.e. IMAGES folder)• Provisioning to a library – Advantages: Site admins can easily modify files – Disadvantages: Each page load will require calls to the DB for the images and styles• Provisioning to the 14 hive – Advantages: WFE server can cache file for faster loading – Disadvantages: Modification of files will require another deployment, or access to the 14 hive in the WFE• Personal recommendation – Deploy images to the IMAGES folder in the 14 hive, and CSS files to the Style Library in the root site of the site collection
  23. 23. Custom Ribbon Fonts & {; background-color: blue important!; color: white; {} color: blue important!; }
  24. 24. DemoBuilding a Brand Feature
  25. 25. Upcoming SharePoint EventsSeptember 19: Business Intelligence inSharePointSeptember 26: West MichiganSharePoint User Group MeetingSeptember 29: SharePoint SaturdayOctober 17: SharePoint vNext
  26. 26. Thank YouRoyal Oak Grand Rapids306 S Washington Ave 15 Ionia SWSuite 212 Suite 270Royal Oak, MI 48067 Grand Rapids, MI 49503p: (248) 546-1800 p: (616) 776-1600 (c) C/D/H 2007. All rights reserved