Create your own SharePoint Master Pages and Page Layouts

SharePoint Advocate and
Enthusiast
PixelMill
ERIC OVERFIELD | @ericoverfield
CREATE YOUR
OWN SHAREPOINT
MASTER PAGES AND
PAGE LAYOUTS
Wednesday August
26th
8:30 AM – 9:45 AM

Founder and SharePoint Branding/UI Lead, PixelMill
Speaker, Teacher, Advocate, Author
SharePoint Community Organizer
Located in Davis, CA
Co-author: “Black Magic Solutions for White Hat
SharePoint”
(August, 2013)
Co-author: “Pro SharePoint 2013 Branding and Responsive Web
Development”
(Apress – June 12th, 2013)
Order Your Copy
http://pxml.ly/zsqykd
INTRODUCTION
ericoverfield.com @ericoverfield

WHAT YOU WILL LEARN TODAY
1
2
3
TRADITIONAL MASTER PAGE AND PAGE LAYOUT OVERVIEW
DESIGN MANAGER: HTML MASTER PAGES & HTML PAGE LAYOUTS
DEMOS, IMPORTANT CONTROLS AND CONCEPTS

TRADITIONAL SHAREPOINT MASTER PAGES
 Provides main HTML wrapper used by all pages
 Defines HTML <html />, <head /> and <body /> tags
 Loads resources such as JS and CSS files
 Defines page flow and shared page components
 Header, footer, logo, navigation, suite bar / ribbon, etc.
 Uses ContentPlaceHolders for replaceable areas
 OOTB, no longer uses tables for layout!

MASTER PAGE COMPONENTS
Suite Bar
Ribbon
Header
Current Nav
Page Wrapper

TRADITIONAL SHAREPOINT MASTER PAGES BEST PRACTICES
 Start with seattle.master, oslo.master or a starter Master Page
 Always include all ContentPlaceHolders found in seattle.master
 Use hidden <div /> to hide unneeded ContentPlaceHolders
 Keep the suite bar / ribbon at the top of the page
 Replace <PublishingRibbon:PublishingRibbon /> if more control needed
 Include your custom layout HTML within #s4-workspace
 Must use <SharePoint:AjaxDelta /> blocks to allow for MDS
 Must register tag prefixes to access SharePoint and .Net controls

TRADITIONAL SHAREPOINT PAGE LAYOUTS
 Specific to Publishing sites
 Defines content layout for a given page
 Contains “Content” blocks that link to Master Page
 Does not contain <html />, <head />, <body /> and other common tags
 Associated with a Content Type
 May surface Content Type columns

PAGE LAYOUT COMPONENTS
Site Columns
Snippets
Content Place Holder

TRADITIONAL SHAREPOINT PAGE LAYOUTS BEST PRACTICES
 Start with an existing page layout
 Stick with same content type if possible
 Always keep custom code within <asp:Content /> blocks
 Consider different content viewing and authoring experiences
 Use <Publishing:EditModePanel /> controls
 Bake in specific rollup webparts, or default webparts in webpart zones
 Must register tag prefixes to access SharePoint and .Net controls

THE NEW SHAREPOINT
BRANDING TOOL
DESIGN MANAGER

DESIGN MANAGER OVERVIEW
 New to SharePoint 2013
 Requires Publishing Infrastructure
 Import a HTML prototype directly into SharePoint
 SharePoint handles conversion
 Interface for custom Master Pages and Page Layouts
 Also includes Display Templates and Device Channels
 No longer limited by SharePoint Designer

HTML MASTER PAGES
 Convert a HTML prototype directly into SharePoint
 Some assembly required – Snippet Gallery

HTML PAGE LAYOUTS
 Must derive from a Master Page
 Also tied to Content Types / custom Content Types
 Also uses Snippets and Snippet Manager
 Much easier way to include SharePoint controls
 Only edit what is in “Content” blocks

DESIGN MANAGER BEST PRACTICES
 Only edit the .html files – SharePoint controls the .master and .aspx
 Only rename, move, delete, check out, publish, etc the .html files even
 HTML Master Pages manage unneeded ContentPlaceHolders!
 The Snippet Gallery and snippets are your friend
 All code must be valid HTML / XML, thus why controls are “comments”
 SharePoint may mangle your HTML, bummer

DEMO
DESIGN MANAGER
HTML MASTER PAGES
HTML PAGE LAYOUTS

IMPORTANT CONTROLS AND TAGS
 Found in Microsoft.SharePoint.WebControls
 <SharePoint:SPSecurityTrimmedControl /> - AuthenticationRestrictions, HideFromSearchCrawler, EmitDiv
 <SharePoint:FieldValue /> - FieldName (ID or Internal Name)
 <SharePoint:TextField /> - FieldName, InputFieldLabel (for editing)
 Found in Microsoft.SharePoint.Publishing.WebControls
 <Publishing:EditModePanel /> - PageDisplayMode, GroupingText, SuppressTag (doesn’t do what you think)
 <Publishing:RichHtmlField /> - FieldName, InputFieldLabel (for editing), AllowFonts (and many more)
 References Src="~/_controltemplates/15/Ribbon.ascx"
 <PublishingRibbon:PublishingRibbon /> - Great for Office 365

A QUICK REVIEW
1 TRADITIONAL MASTER PAGE AND PAGE LAYOUT OVERVIEW
2 DESIGN MANAGER: HTML MASTER PAGES & HTML PAGE LAYOUTS
3 DEMOS, IMPORTANT CONTROLS AND CONCEPTS

RESOURCES
Starter on learning SharePoint Branding
http://pxml.ly/1CHNXKc
SharePoint 2013 Starter Master Pages
http://pxml.ly/1uFeG8Z
SharePoint 2013 Design Manager branding and design capabilities
http://pxml.ly/1vBC3PD
Responsive Frameworks for SharePoint 2010 and 2013
http://responsivesharepoint.codeplex.com
SP Blueprint for SharePoint 2013
http://pxml.ly/1ql6Dqa
Master pages, the Master Page Gallery, and page layouts in SharePoint 2013
http://pxml.ly/1rBdcLJ

CREATE YOUR OWN
SHAREPOINT MASTER PAGES
AND PAGE LAYOUTS
THANK YOU
QUESTIONS?
@ericoverfield
SPTechCon Boston 2015
http://pxml.ly/EO-MP-PL
Order Your Copy
http://pxml.ly/zsqykd
“Pro SharePoint 2013 Branding and Responsive Web Development”
(Apress – June 12th, 2013)

Create your own SharePoint Master Pages and Page Layouts

More Related Content

What's hot

Viewers also liked

Similar to Create your own SharePoint Master Pages and Page Layouts

More from Eric Overfield

Recently uploaded

Create your own SharePoint Master Pages and Page Layouts

Editor's Notes