Fabian Moritz | MVP SharePoint Server

Brand My SharePoint – Gestaltung und Anpassung von SharePoint-Webseiten

Die Ebenen des Branding

Standard UI Themes Design Manager& Master Pages

UI-Customizings

Einheitliche Plattform + Standards

> Aufwand: 0

> Skills: wenig

> Aufwand: klein

> Skills: SP-Standard

> Aufwand: hoch

> Skills: HTML, CSS, SP

> Aufwand: rel. klein

> Skills: SP, JavaScript

Die Evolution von SharePoint

2003 2007

2010 2013

2001

Minimale Download Strategie (MDS)

DemoMDS in SharePoint 2013

Die Ebenen des Branding

Standard UI Themes Design Manager& Master Pages

UI-Customizings

Einheitliche Plattform + Standards

> Aufwand: 0

> Skills: wenig

> Aufwand: klein

> Skills: SP-Standard

> Aufwand: hoch

> Skills: HTML, CSS, SP

> Aufwand: rel. klein

> Skills: SP, JavaScript

Designs (Composed Looks)

v

Farben und Schriften

DemoDesigns in SharePoint 2013

Die Ebenen des Branding

Standard UI Themes Design Manager& Master Pages

UI-Customizings

Einheitliche Plattform + Standards

> Aufwand: 0

> Skills: wenig

> Aufwand: klein

> Skills: SP-Standard

> Aufwand: hoch

> Skills: HTML, CSS, SP

> Aufwand: rel. klein

> Skills: SP, JavaScript

Design Manager

• Neues UI Management Tool• Erstellung, Bereitstellung und

Verwaltung von Design-Elementen

• Einfache Master Page-Generierung mit beliebigen Tools

• Export und Import

Einfache HTM

Snippet Gallery

Master Pages umsetzen

• 3 Optionen:– HTML Master Page– Minimal Master Page– Starter Master Pages (Codeplex)

startermasterpages.codeplex.com

• Tools– SharePoint Designer 2013– 3rd Party Tools– Browser Tools

• Nicht vergessen: Daten im TFS abspeichern!

Device Manager

• Verschiedene “Channels” für mobile Geräte• Definition auf Basis des User Agent Strings• Zuordnung einer Master Page• Spezielle Controls für Channels

DemoSharePoint Master Pages

Branding Projekte

Ziele und Anforderungen

Wireframes und Scribbles

Designentwürfe und Styleguide

HTML-GerüsteMaster Pages, Page Layouts

(inkl. Platzhalter)

Webparts und Controls

Optimierung, Nachjustierung Testing & QS

Features, Solutions und Deployment

Wireframing

Wireframing Tools

• Blend + Sketch Flow for Visual Studio 2012

• Balsamiq Mockups

• Microsoft Visio 2013

• …

Die Ebenen des Branding

Standard UI Themes Design Manager& Master Pages

UI-Customizings

Einheitliche Plattform + Standards

> Aufwand: 0

> Skills: wenig

> Aufwand: klein

> Skills: SP-Standard

> Aufwand: hoch

> Skills: HTML, CSS, SP

> Aufwand: rel. klein

> Skills: SP, JavaScript

Möglichkeiten beim UI Customizing

HTML, CSS, XSLT, JavaScript

.NET

Browser SharePoint Designer

Browser AppsHTML5, CSS3,

JavaScript.NET

2010

2013

Client Side Rendering (CSR)

• Daten + .JS = HTML• XSLT ist Vergangenheit• Technologien:

– JavaScript– HTML– CSS

• Deployment via App, Solution oder manuell

DemoClient Side Rendering

Die Ebenen des Branding

Standard UI Themes Design Manager& Master Pages

UI-Customizings

Einheitliche Plattform + Standards

> Aufwand: 0

> Skills: wenig

> Aufwand: klein

> Skills: SP-Standard

> Aufwand: hoch

> Skills: HTML, CSS, SP

> Aufwand: rel. klein

> Skills: SP, JavaScript

Und jetzt?

• Laden Sie sich die Präsentation und Beispiele herunterhttp://sharepointcommunity.de/fabianm

• Machen Sie sich mit dem Design Manager vertrauthttp://msdn.microsoft.com/en-us/library/jj822363.aspx

• Nutzen Sie Wireframing Tools während der Planunghttp://www.balsamiq.com

• Beschäftigen Sie sich mit Client Side Renderinghttp://msdn.microsoft.com/en-us/library/jj220045.aspx

• Besuchen Sie BrandMySharePoint.dehttp://www.brandmysharepoint.de

Fabian MoritzITaCS GmbHMVP SharePoint Server

Fabian.Moritz@itacs.dehttp://www.itacs.de

@FabianMoritz

http://sharepointcommunity.de/fabianm