The New Design Manager! Louis-Philippe Lavoie SharePoint Specialist / What does it mean for you? November 23 rd, 2013

Description SharePoint Designer no longer has the Design view to help you build your brand in SharePoint. However SharePoint 2013 now offers the new Design Manager to help you convert your Designer’s HTML design into a Master Page. In this session, we will cover the features the Design Manager introduces: HTML to Master Page conversion Device Channels Display Templates Creating Design Packages This session will help you get ahead by understanding what comes out out-of-the-box with the Design Manager to help you build your brand on SharePoint.

Thank you to all of our Sponsors!!

twitter.com/bniaulin ca.linkedin.com/in/bniaulin bniaulin.wordpress.com en.share-gate.com/blog Original Slides by: Benjamin Niaulin

Who am I? Louis-Philippe Lavoie SharePoint Specialist lplavoie

Agenda Introduction – Problems and Previous Solutions The Design Manager Requirements and working with it Convert HTML to Master Page Device Channels Display Templates Page Layouts Design Packages Composed Looks

INTRODUCTION

Old problems   |   XSLT DIV ID=54rffvrh2dh238q7r7 72wdg8wucduasc

New Problems

The Design Manager

Requirements SharePoint Server Publishing Infrastructure This means nothing for Foundation And it also adds a other Web Parts and Features

Working with the Design Files

DEMO ACTIVATE FEATURE CONNECT FILES

Convert HTML to Master Page Work with Dreamweaver or any editor now Edit HTML and SharePoint will turn into Master Page! Using Snippets instead of coding: Step-by-Step convert HTML to Master Page

DEMO CONVERT HTML TO MASTER PAGE

DEVICE CHANNELS

Device Channels Change Master Page based on user agent string Pros vs. Cons Will not replace CSS Media Queries!

DISPLAY TEMPLATES

Display Template One of the most valuable new features in SharePoint 2013 No more XSLT!

Categories of Display Templates Control Similar to ContentQueryMain.xsl Filter, Group and Hover Panel Similar to Header.xsl +more Item Similar to itemstyle.xsl

Control The container for the “Groups, Filters and Items” to come Best way to reference custom files (JavaScript, CSS, etc…)

Item Controls what happens to each item rendered through the query Use Managed Properties to show the content you want where you want using HTML

Editing a Display Template Always comes in 2; a HTML and JS file NEVER edit the JS file – it is automatically generated

What is it made of? The Content Search Web Part is essentially 2 things 1. Query Builder 2. Display Templates

DESIGN PACKAGES

Design Packages Used to be complicated (Unless you had Visual Studio and knew how to use it) Makes it easy to work with third party Creates a WSP for you to deploy in SharePoint Watch out… it’s not perfect

COMPOSED LOOKS NOT REALLY DESIGN MANAGER BUT CLOSE

Composed Looks

Step by Step Composed Looks Preview Files - understanding them Composed Look step by step

Join us for SharePint today! Date & Time: Nov 23 rd, pm Location: The Observatory Pub, Algonquin Student’s Association Address: A-170 on Algonquin Campus Parking: No need to move your car! * Site: *Please drive responsibly! We are happy to call you a cab Remember to fill out your evaluation forms to win some great prizes! &