2. 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
3. WHAT YOU WILL LEARN TODAY
1
2
3
ericoverfield.com @ericoverfield
TRADITIONAL MASTER PAGE AND PAGE LAYOUT OVERVIEW
DESIGN MANAGER: HTML MASTER PAGES & HTML PAGE LAYOUTS
DEMOS, IMPORTANT CONTROLS AND CONCEPTS
4. 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!
ericoverfield.com @ericoverfield
6. 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
ericoverfield.com @ericoverfield
8. 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
ericoverfield.com @ericoverfield
10. 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
ericoverfield.com @ericoverfield
13. 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
ericoverfield.com @ericoverfield
14. HTML MASTER PAGES
Convert a HTML prototype directly into SharePoint
Some assembly required – Snippet Gallery
ericoverfield.com @ericoverfield
15. 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
ericoverfield.com @ericoverfield
16. 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
ericoverfield.com @ericoverfield
18. 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
ericoverfield.com @ericoverfield
19. 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
ericoverfield.com @ericoverfield
20. RESOURCES
ericoverfield.com @ericoverfield
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
21. 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)
Notes de l'éditeur
Slides will be available from blog and twitter
In-depth look at SharePoint Online and 2013 Master pages and page layouts. Will be working on SPO, but 2013 is the same.
Devs should be happy, we will walk through the process. Business users, you will see what is possible.
Meat will be in the demos
http://www.zengardner.com/wp-content/uploads/Manifest-Law-of-Attraction1-700x471.jpg
Who has already worked with RWD and SP? Thoughts? Scratch, framework, how did you do it?
Will make available on blog and twitter (slideshare.net), so if you remember one of those then you can always review everything we discuss
Build a custom master page
Create page layout from demo, showing content blocks
Web Distributed Authoring and Versioning
Convert prototype for HTML Master page and HTML Page layout, including search results
Thank You!
Don’t forget to check out my blog where you can download this presentation or the recording.
Easiest way to get to the material I referenced