sharepoint 2013 design manager – from html to sharepoint

From HTML to SharePoint

Eric OverfieldSharePoint 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 DesignManager?


Tools Already Exist


Design Tools not SP

Focus No Design View –

Help!

Tools Already Exist

Design Tools not SP

Focus

No Design View –

Help!


XSLT? What is That?

Tools Already Exist

Design Tools not SP

Focus

No Design View –

Help!

XSLT? What is That?@EricOverfield - pixelmill.com

Open the Door to

Designers

Agenda

Why Design Manager?

Accessing Design

Manager


Page Layouts


Display Templates

Device Channels

Design Packages

Publish and Apply

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


Agenda

Why Design Manager?

Accessing Design

Manager


Page Layouts


Display Templates

Device Channels

Design Packages

Publish and Apply


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 PageDemo


Agenda

Why Design Manager?

Accessing Design

Manager


Page Layouts


Display Templates

Device Channels

Design Packages

Publish and Apply

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 LayoutDemo


Agenda

Why Design Manager?

Accessing Design

Manager


Page Layouts


Display Templates

Device Channels

Design Packages

Publish and Apply

Display Templates

The center of displaying SharePoint 2013 Search

Replaces XSLT!


Control Templates

Item Templates

Do not touch the JavaScript!

Display TemplatesDemo


Agenda

Why Design Manager?

Accessing Design

Manager


Page Layouts


Display Templates

Device Channels

Design Packages

Publish and Apply

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

Agenda

Why Design Manager?

Accessing Design

Manager


Page Layouts


Display Templates

Device Channels

Design Packages

Publish and Apply

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 PackageDemo


Agenda

Why Design Manager?

Accessing Design

Manager


Page Layouts


Display Templates

Device Channels

Design Packages

Publish and Apply

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 ApplyDemo


It can be your friend

If you let it

Embrace Design Manager


Eric Overfield@EricOverfield

[email protected]

Thank You

From HTML to SharePoint

The 2013 Design Manager

sharepoint 2013 design manager – from html to sharepoint

Education