Pretty Up My

4th of March 2017@MS HQ Munich

Corinna Lins

@corinna_lins

Pretty Up My SharePointTips and tricks for designing the UI

#SPSMUC14

Pretty Up My

Pretty Up My

About me

• SharePoint Consultant, for 5 years

• Focus areas: SharePoint/Office365 UI Customizing and Consulting, HCI, UI and UX

• Since 2015 at Munich

Pretty Up My

Please make my SharePoint not look and feel like SharePoint!

Pretty Up My

Session topics

Define

RequirementsBranding

the UI

What is UI/UX? Browser Styleguides Responsive design Mock Ups SharePoint issues Infrastructure

Pretty Up My

UI UX

Emotion

Meet user

needsVisual

Elements

Interaction

Pretty Up My

Do we need to define Requirementsfor UI Customizations in

?

Pretty Up My

Browser compatibility

Pretty Up My

Styleguide,

corporate identity,

existing sources

Pretty Up My

Responsive

Design

Pretty Up My

Use

Mock-ups

Pretty Up My

User Experience Expectation

Modern document library experience in SharePointClassic document library experience in SharePoint

Pretty Up My

Understand

SharePoint

Structure

Elements

• Contains left and top navigation

• Loads resources (CSS and JS)

• Uses content placeholders

• Layout of the content area

• Used in publishing sites

Pretty Up My

Check SharePoint

concerning issues

e.g.: Publishing Feature

Site collection feature

Site feature

Pretty Up My

Check Infrastructure

vs.

Pretty Up My

Define Requirements for UI Customizations

PROS

• Less investment of time, more customer satisfaction

• Better overview of technical challenges in SharePoint

• Common understanding by precise UI requirements

Pretty Up My

Do you know other important

Requirements for UI Customizations

in ?

Pretty Up My

Session Topics

Define

RequirementsBranding

the UI

CSS Color Palette Tool Themes Responsive design Retrieve data Display templates

Pretty Up My

Pretty up with CSS

• Alternate CSS

• Content editor webpart

• Custom actions

• CSS Reference in masterpage

• Display templates

• Page layouts

• SPFx

Pretty Up My

Use Browser Developer Tools

Press F12

Pretty Up My

SharePoint

Color

Palette

Tool

Create SharePoint Themes

Pretty Up My

What about custom theme in modern site?

# Apply a custom theme to a Modern Site

Add-PnPFile -Path .\SPcolorFile.spcolor -Folder SiteAssets

# Second, apply the theme assets to the site

$web = Get-PnPWeb

$palette = $web.ServerRelativeUrl + "/SiteAssets/SPcolorFile.spcolor"

# Method: public void ApplyTheme(string colorPaletteUrl, string fontSchemeUrl, string backgroundImageUrl, bool shareGenerated)

$web.ApplyTheme($palette, [NullString]::Value, [NullString]::Value, $true)

$web.Update()

…

$web.Context.ExecuteQuery()

See also: https://msdn.microsoft.com/en-us/pnp_articles/modern-experience-customizations-customize-sites

Only

PowerShell

Pretty Up My

DEMOComposed Looks andCSS in SharePoint

Pretty Up My

Make SharePoint Responsive

Only CSS

example

SharePoint Patterns & Practices Responsive Design

UI Frameworks (e.g.: Bootstrap)

Pretty Up My

DEMOResponsive Design with PnP

Pretty Up My

UserData

How to retrieve data?

• SharePoint REST API

• SharePoint Client Context

• SP Services (SharePoint 2010)

• Search API

• Graph API

Libraries

Lists

User Profile

Information

Visualisation

Pretty Up My

Search and Display Templates

Pretty Up My

DEMODisplay Templates in use

Pretty Up My

SPFxWebPart

SPFx 40 Fantastics Web Parts

Pretty Up My

Customizations in SharePoint

Techniques

• SharePoint Themes

• Masterpage

• Page Layouts

• Display Templates

• JSLink

• Manipulation with JavaScript

• PnP Solutions

Tools

• Design Manager

• Color Palette Tool

• UI and JS Frameworks

• PowerShell

• SPFx

Pretty Up My

SharePoint Rocks!

Pretty Up My

Useful Links

SharePoint Color Palette Tool, https://www.microsoft.com/en-us/download/details.aspx?id=38182

Step by Step create a SharePoint 2013 Composed Look, https://bniaulin.wordpress.com/2012/12/16/step-by-step-create-a-sharepoint-2013-composed-look/

Image Slider with SharePoint 2013 Search Results Web Part, https://en.share-gate.com/blog/image-slider-with-sharepoint-2013-search-results

SharePoint 2013 Search Query Tool, https://sp2013searchtool.codeplex.com/

SharePoint 2013/2016/Online Responsive UI, https://github.com/SharePoint/PnP-Tools/tree/master/Solutions/SharePoint.UI.Responsive

SPFx 40 Fantastics Web Parts, https://github.com/OlivierCC/spfx-40-fantastics

PnP SharePoint 2013/2016/Online Responsive UI, https://github.com/SharePoint/PnP-Tools/tree/master/Solutions/SharePoint.UI.Responsive

Pretty Up My

Please visit our sponsors who made this day possible!

Thank you!

Rate this session with the event app

http://app.spsmuc.com