SharePoint 2013 Design manager – from HTML to SharePoint

From HTML to SharePoint
Eric Overfield
SharePoint Advocate and Enthusiast
PixelMill
The 2013 Design Manager

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

Agenda
 Why Design Manager?
 Accessing Design Manager
 Import a Site Design
 Page Layouts
@EricOverfield - pixelmill.com
 Display Templates
 Device Channels
 Design Packages
 Publish and Apply

Why Design
Manager?

Tools Already Exist
Design Tools not SP Focus
No Design View – Help!

Tools Already Exist
XSLT? What is That?

Tools Already Exist
XSLT? What is That?
Open the Door to Designers

Design Manager
 Publishing Infrastructure Required
 Sorry Collaboration Sites
 Unless you enable Publishing
 Treat Branding Assets as Local Files!

Site Collection Level Feature
Site Level Feature

Using WebDAV
Mac/PC – Dreamweaver, Notepad, Your Choice
Access Your Design Files

Access Design Manager
Demo

Import a Site Design
 Import a HTML Prototype Directly in SharePoint
 Some assembly required

HTML Master Page
 HTML Prototype must by XML Compliant

XML Compliancy error

HTML Master Page
 Add SharePoint functionality with Snippet Manager

HTML Master Page
 Plan your prototype with Design Manager in mind

HTML Master Page
 Plan your prototype with Design Manager in mind
 Don’t touch the .master!

HTML Master Page
Demo

Page Layouts
 Controls layout of main content
 Many out the of box layouts
 Also uses Snippets and Snippet Manager
 With Design Manage, associated with a Master Page
 Don’t touch the .aspx file!

Page Layout
Demo

Display Templates
 The center of displaying SharePoint 2013 Search
 Replaces XSLT!
 Control Templates
 Item Templates
 Do not touch the JavaScript!

Display Templates
Demo

Device Channels
 Interfaces tailored and mapped to specific device(s)
 Based on User Agent

Screen shot of creating a device channel
and maping to a master page

Design Packages
 Design Manager will package your custom branding
 Redeployable, even to another farm
 Creates a wsp (i.e. a sandboxed solution – really? – Yup)
 Not ready for primetime

Design Package
Demo

Publish and Apply
 Must still publish a Major Version
 For Master Pages and Page Layouts
 OOTB – Simplified Publishing Workflow
 Use Design Manager or Master Page Gallery

Publish and Apply
Demo

It can be your friend
If you let it
Embrace Design Manager

Eric Overfield
@EricOverfield
ericoverfield.com
eoverfield@pixelmill.com
Thank You
From HTML to SharePoint
The 2013 Design Manager

SharePoint 2013 Design manager – from HTML to SharePoint

More Related Content

What's hot

Similar to SharePoint 2013 Design manager – from HTML to SharePoint

Recently uploaded

SharePoint 2013 Design manager – from HTML to SharePoint

Editor's Notes