Download - Extreme Makeover:

Page 1: Extreme Makeover:

Extreme Makeover:SharePoint 2013 Edition


Page 2: Extreme Makeover:

ITG - Brad Wilcox• Sr. Consultant at ITG• MS SharePoint Dev Certified• Freaking Awesome•

Page 3: Extreme Makeover:

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•

Page 4: Extreme Makeover:

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

Page 5: Extreme Makeover:

SharePoint 2013 Design Manager1. 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).

Page 6: Extreme Makeover:

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.

Page 7: Extreme Makeover:

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.

Page 8: Extreme Makeover:

Steps Using the Design Manager:1. Mockup HTML Pages2. Map design folder to the Master page gallery3. Upload Design Files4. Convert HTML file to a Master Page5. Preview the Master Page and fix issues6. Add any desired SharePoint snippets

Page 9: Extreme Makeover:

HTML Page Preparation

• Make sure your HTML file is XML-compliant.• 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.

Page 10: Extreme Makeover:

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.

Page 11: Extreme Makeover:


• SharePoint Controls• Custom ASP.NET Markup• Search Box Example…

Page 12: Extreme Makeover:

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.

Page 13: Extreme Makeover:

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


Page 14: Extreme Makeover:

HTML MasterPages - Demo• The HTML• Creating the MasterPage• Adding SharePoint Elements• Other Design Manager Features

Page 15: Extreme Makeover:

Classic MasterPages• Pros• Power• Performance (Sever and Client)• Flexibility

• Cons• Steep Learning Curve• More Work• Easier to Break

Page 16: Extreme Makeover:

Classic MasterPages - Demo• The minimal.master• From HTML to MasterPage in 5

minutes• The role of Page Controls

Page 17: Extreme Makeover:

Publishing Features• The Page Content Type• Page Template Associations• Additional Site Settings tabs• Managed Navigation

Page 18: Extreme Makeover:

Publishing Features – Content Types• Page• Extending Page

Page 19: Extreme Makeover:

Publishing Features – Page Layouts• Associating a Content Type to a

Page Layout• Fields• Editor View• Security Trimming

• Controls• Web Part Zones• Publishing content controls

Page 20: Extreme Makeover:

Publishing Features - Demo• Extending “Page”• Creating and associating a Page


Page 21: Extreme Makeover:

Publishing Features – Managed Navigation1. Setup Navigation enabled term sets in Managed Metadata Service2. Go to Site > Site Settings > Navigation3. Select Managed Navigation for Header or Side Bar.4. Select the term set and click save.

Page 22: Extreme Makeover:

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.

Page 23: Extreme Makeover:

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)

Page 24: Extreme Makeover:

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,


• Primary Tools• CSS3

• Media Queries• Columns and Gutters• Stackable Containers (think WPF)

Page 25: Extreme Makeover:

Responsive Design - How• Mobile Implications –

Performance• Media Queries• Alternate Images• Less content (hidden or modified)• Positions• Boundary sizes

Page 26: Extreme Makeover:

Responsive Design - Demo• How it works• Making changes

Page 27: Extreme Makeover:


Top Related