Extreme Makeover:
SharePoint 2013 Edition
801-555-1212
ITG - Brad Wilcox
• Sr. Consultant at ITG
• MS SharePoint Dev Certified
• Freaking Awesome
• http://www.itgsharepoint.com
ITG - Josef Nielsen
• VP of Engineering at ITG
• President of UG
• Uber-Nerd
• Amateur Gunsmith
• Chef
• Previous Incarnations: News Editor
(newspaper), X-ray Technician,
Professional Caterer, Chiropractic
Assistant
• Twitter @EchefJosef
• Blog http://echef.chaosfarm.net
• http://www.itgsharepoint.com
Overview
• Branding Sites
• HTML MasterPages
• Custom MasterPages
• Publishing Features
• The Page Content Type
• Page Layouts
• Managed Metadata Navigation
• Setup
• Use
• Responsive Design (Mobile
Views)
• Why Responsive
• How it is done
SharePoint 2013 Design Manager
1. Design Manager is a publishing feature that is available in
publishing sites in both SharePoint Server 2013 and Office 365.
2. You can create a visual design using only HTML and CSS, and then
upload that design into SharePoint (using any HTML Editor).
What is an HTML MasterPage?
• With Design Manager, you can convert an.html file into a SharePoint
2013 master page, a .master file. After the conversion, the HTML file
and master page are associated, so that when you edit and save the
HTML file, the changes are synced to the associated master page.
http://msdn.microsoft.com/en-us/library/jj822370.aspx#Prepare
2 Choices for HTML MasterPage Design:
• Mockup HTML page with CSS /
HTML / Javascript and convert
to Masterpage.
• Create a Minimal master page
that renders all the base
controls needed for a SharePoint
page to load. Also creates a
minimal html master page.
Steps Using the Design Manager:
1. Mockup HTML Pages
2. Map design folder to the Master page gallery
3. Upload Design Files
4. Convert HTML file to a Master Page
5. Preview the Master Page and fix issues
6. Add any desired SharePoint snippets
http://msdn.microsoft.com/en-us/library/jj822363.aspx
HTML Page Preparation
http://msdn.microsoft.com/en-us/library/jj822370.aspx#Prepare
• Make sure your HTML file is XMLcompliant.
• Get rid of any Form tags.
• Don't put <style> blocks in the
<head> tag. These styles are removed
during conversion. Instead, link from
your HTML file to an external CSS file.
• Be cautious about applying styles to
general HTML tags like <body>, <div>,
and < img>.
• Be prepared for Navigation changes
for the Sharepoint Nav
• Add ms-design-css-conversion="no"
to the <CSS link> tag if you're using a
web font.
Auto Generated Tags:
• SharePoint namespace registration
The <SPM> tag ("SharePoint
markup") provides a line registering a
SharePoint namespace.
• The <CS> and <CE> ("Comment start"
and "comment end") tags are ignored
during the conversion process.
• The <PS> and <PE> ("Preview start"
and "preview end") tags surround a
section of HTML code that you
shouldn't edit because this section
affects only the design-time preview.
• The <MS> and <ME> ("markup start"
and "markup end") tags denote the
beginning and end of a SharePoint
control or a snippet.
Snippets:
• SharePoint Controls
• Custom ASP.NET Markup
• Search Box Example…
What happens if I want to edit the MasterPage directly?
• The syncing goes in one direction only. Changes to the HTML master page are
synced to the associated .master file, but if you choose to edit the .master file
directly the changes are not synced to the HTML file.
• If you have a pair of associated files (HTML and .master) and you edit the
.master file without breaking the association, the changes to the .master file will
be saved, but you can't check in or publish the .master file, so those changes are
not saved in a meaningful way.
• Any changes to the HTML file override the .master file. If you check in or publish
the HTML file, the HTML file changes override any changes that were made to
the .master file. The changes to the .master file are lost.
http://msdn.microsoft.com/en-us/library/jj822370.aspx#Prepare
HTML MasterPages
• Pros
• No custom coding through Visual
Studio
• Snippets make for easy
SharePoint controls
• Packages can be downloaded and
uploaded to any site collection.
• Cons
• Scaling across hundred of sites
• Restructuring a page (i.e. Ribbon)
• Only works with Publishing
features
HTML MasterPages - Demo
• The HTML
• Creating the MasterPage
• Adding SharePoint Elements
• Other Design Manager Features
Classic MasterPages
• Pros
• Power
• Performance (Sever and Client)
• Flexibility
• Cons
• Steep Learning Curve
• More Work
• Easier to Break
Classic MasterPages - Demo
• The minimal.master
• From HTML to MasterPage in 5
minutes
• The role of Page Controls
Publishing Features
• The Page Content Type
• Page Template Associations
• Additional Site Settings tabs
• Managed Navigation
Publishing Features – Content Types
• Page
• Extending Page
Publishing Features – Page Layouts
• Associating a Content Type to a
Page Layout
• Fields
• Editor View
• Security Trimming
• Controls
• Web Part Zones
• Publishing content controls
Publishing Features - Demo
• Extending “Page”
• Creating and associating a Page
Layout
Publishing Features – Managed Navigation
1. Setup Navigation enabled term sets in Managed Metadata Service
2. Go to Site > Site Settings > Navigation
3. Select Managed Navigation for Header or Side Bar.
4. Select the term set and click save.
Publishing Features – Managed Navigation
• Pros:
• No Visual Studio coding
• Uses a global service available
across the farm and not a list or
set of lists on a single site.
• Quick
• Cons
• Only works with Publishing
Features.
• Not as customizable – flyouts, sub
menus, sites with sub sets of the
same menus, etc.
Responsive Design – Why?
• One size fits all
• Simpler and easier to use than
multiple sites
• Does not rely on Variations
• Enables targeting of content via
design to mobile platforms
(iPage, tablets, smartphones,
netBooks, etc)
Responsive Design – What
• Browsers
• Desktop (old to new IE, Firefox,
Chrome, Safari, Opera)
• Laptop (same as desktop)
• Tablet (similar to desktop, but
generally newer)
• Phone (Opera-based, Firefox,
Safari)
• Primary Tools
• CSS3
• Media Queries
• Columns and Gutters
• Stackable Containers (think WPF)
Responsive Design - How
• Mobile Implications –
Performance
• Media Queries
•
•
•
•
Alternate Images
Less content (hidden or modified)
Positions
Boundary sizes
Responsive Design - Demo
• How it works
• Making changes
Q&A
