+ All Categories
Transcript
Page 1: Branding Modern SharePoint

SharePoint Advocate and EnthusiastPixelMill

ERIC OVERFIELD | @ericoverfield

BRANDINGMODERNSHAREPOINT

Page 2: Branding Modern SharePoint

Founder and SharePoint Branding/UI Lead, PixelMillSpeaker, Teacher, Advocate, AuthorSharePoint Community OrganizerLocated in Davis, CA

Co-author: “Black Magic Solutions for White Hat

SharePoint”

(August, 2013)

Co-author: “Pro SharePoint 2013 Branding and Responsive Web

Development” (Apress – June 12th, 2013)Order Your Copyhttp://pxml.ly/zsqykd

ericoverfield.com @ericoverfield

INTRODUCTION ERIC OVERFIELD

Page 3: Branding Modern SharePoint

WHAT YOU WILL LEARN TODAY SHAREPOINT BRANDING 101

1 THAT WHAT AND WHY OF BRANDING SHAREPOINT

2 BRANDING TOOLS IN SHAREPOINT ONLINE/2013/2016

3 BRANDING “THE FUTURE OF SHAREPOINT”

ericoverfield.com @ericoverfield

4 CHOOSING THE RIGHT STRATEGY

Page 4: Branding Modern SharePoint

BRANDING?WHAT AND WHY

Page 5: Branding Modern SharePoint

BRANDING IN GENERAL AND BRANDING BENEFITS

Historically the practice of burning your mark (or brand) onto your products

Improve SharePoint User eXperience (UX) Enhance user adoption

Further your organization’s brand Provide a cohesive strategy

In order words, make SharePoint not look like SharePointericoverfield.com @ericoverfie

ld

Page 6: Branding Modern SharePoint

SHAREPOINTBRANDING TOOLSONLINE/2013/2016

Page 7: Branding Modern SharePoint

NO CODE | MINIMAL CODE SOLUTIONS

Logo replacement Composed Looks

Replaces SharePoint 2010 themes Use OOTB Composed Looks or create your own

SharePoint Color Palette Tool Office 365 Themes

Tenant wide very basic theming Custom CSS – Alternative CSS

Available in publishing CSS and JavaScript embed with PnP PowerShell

Use PnP - SharePoint 2013/2016 Responsive UI (*SP 2013 May 2015 CU+)ericoverfield.com @ericoverfie

ld

Page 8: Branding Modern SharePoint

SharePoint Service

RemoteDeployment

1

Deploy JavaScript and associate with JavaScript embedding (user custom action) to the site

<<Reference>>

UI/UX components / elements manipulated with JavaScript stored either in SharePoint or CDN

23

CSOM / REST

REMOTE DEPLOYING JAVASCRIPT EMBEDDING

Page 9: Branding Modern SharePoint

DEMO

THEMEING ANDJAVASCRIPTEMBEDDING

https://github.com/eoverfield/Ignite2016-TeamSiteBranding/tree/master/Theminghttps://github.com/eoverfield/Ignite2016-TeamSiteBranding/tree/master/AlternativeCSS

Page 10: Branding Modern SharePoint

WHAT TO DO WHEN YOU NEED MORE

Customize Master Pages and Page Layouts

Display Templates

Device Channels

The Future – The SharePoint Framework…

ericoverfield.com @ericoverfield

Page 11: Branding Modern SharePoint

MASTER PAGES

Provides main HTML wrapper used by all pages Defines HTML <html />, <head /> and <body /> tags Loads resources such as JS and CSS files Defines page flow and shared page components

Header, footer, logo, navigation, suite bar / ribbon, etc. Uses ContentPlaceHolders for replaceable areas OOTB, no longer uses tables for layout!

ericoverfield.com @ericoverfield

Page 12: Branding Modern SharePoint

MASTER PAGE COMPONENTS

ericoverfield.com @ericoverfield

Suite Bar

RibbonHeader

Current Nav

Page Wrapper

Page 13: Branding Modern SharePoint

PAGE LAYOUTS

Defines content layout for a given page Contains “Content” blocks that link to Master Page Associated with a Content Type

May surface Content Type columns Specific to Publishing sites

Very powerful

ericoverfield.com @ericoverfield

Page 14: Branding Modern SharePoint

PAGE LAYOUT COMPONENTS

ericoverfield.com @ericoverfield

Site Columns

Snippets

Content Place Holder

Page 15: Branding Modern SharePoint

A SHAREPOINT BRANDING TOOLDESIGN MANAGER

Page 16: Branding Modern SharePoint

DESIGN MANAGER OVERVIEW

New to SharePoint 2013 Available in SharePoint Online/2013/2016

Requires Publishing Infrastructure Import a HTML prototype directly into SharePoint

SharePoint handles conversion Interface for custom Master Pages and Page Layouts Also includes Display Templates and Device Channels No longer limited by SharePoint Designer

ericoverfield.com @ericoverfield

Page 17: Branding Modern SharePoint

HTML MASTER PAGES

Convert a HTML prototype directly into SharePoint Some assembly required

ericoverfield.com @ericoverfield

Page 18: Branding Modern SharePoint

HTML PAGE LAYOUTS

Must derive from a Master Page

Many out of the box layouts

Also uses Snippets and Snippet Manager

Only edit what is in “Content” blocks

ericoverfield.com @ericoverfield

Page 19: Branding Modern SharePoint

DEMO

MASTER PAGESPAGES LAYOUTS

Page 20: Branding Modern SharePoint

BRANDING OPTIONS REVIEW

Page 21: Branding Modern SharePoint

Leve

l of e

ffort

Flexibility

High

Low

HighLow

Office 365 ThemingComposed Looks

Alternative CSS

JavaScript Embed

Custom master page

BRANDING OPTIONS

Page 22: Branding Modern SharePoint

“Yes or no, can I create a custom master page?”

Yes - this is supported for classic sites and will be for the foreseeable future.

Page 23: Branding Modern SharePoint

CUSTOMSEARCH RESULTSDISPLAY TEMPLATES

Page 24: Branding Modern SharePoint

DISLPAY TEMPLATES

The center of displaying SharePoint Online/2013/2016

Search

Replaces XSLT with HTML and JavaScript!

Control Templates

Item Templates

ericoverfield.com @ericoverfield

Page 25: Branding Modern SharePoint

ericoverfield.com @ericoverfield

Page 26: Branding Modern SharePoint

ericoverfield.com @ericoverfield

Page 27: Branding Modern SharePoint

DEMO

DISPLAYTEMPLATES

Thanks to TouchTouchhttp://tutorialzine.com/2012/04/mobile-touch-gallery/

Page 28: Branding Modern SharePoint

THE FUTURE OFBRANDING SHAREPOINT

Page 29: Branding Modern SharePoint

THE FUTURE OF SHAREPOINT

Microsoft Announced the SharePoint Framework in May 2016 The Framework is now in Developer Preview

Released for Webparts first Scheduled to make it to SharePoint 2016 in 2017

New client side rendering (CSR) method for site / data presentation

“Classic” Master Pages, Page Layouts not going away Review resources for links to videos and blog posts

ericoverfield.com @ericoverfield

Page 30: Branding Modern SharePoint

MODERN DEVELOPMENT ENVIRONMENT

Sass / SassScript Syntactically Awesome Stylesheets Scripting language that provides a programming like language for

CSS “Replacement” for CSS though final product is CSS

NodeJS / Bower / Grunt / Gulp Compiling, Package Manager and Task Processing

CSS/HTML Grids – Bootstrap, Susy and others Yeoman or other webapp scaffolding for quick development

ericoverfield.com @ericoverfield

Page 31: Branding Modern SharePoint

DEMOA PEEK INTOTHE FUTURE OFSHAREPOINT BRANDING

Page 32: Branding Modern SharePoint

CHOOSE THERIGHT STRATEGY

Page 33: Branding Modern SharePoint

WHAT IS BEST FOR YOU

Build a solid foundation first Line up project sponsors Get the content, structure and purpose right before branding Secure resources, talent and budget

This will help set level of effort Sitemaps, IA, wireframes, mockups Branding SharePoint Online requires additional consideration

ericoverfield.com @ericoverfield

Page 34: Branding Modern SharePoint

A QUICK REVIEW

1

2

3

ericoverfield.com @ericoverfield

4

THAT WHAT AND WHY OF BRANDING SHAREPOINT

BRANDING TOOLS IN SHAREPOINT ONLINE/2013/2016

BRANDING “THE FUTURE OF SHAREPOINT”

CHOOSING THE RIGHT STRATEGY

Page 35: Branding Modern SharePoint

RESOURCES

ericoverfield.com @ericoverfield

Responsive Frameworks for SharePoint 2010 and 2013http://responsivesharepoint.codeplex.com

SharePoint 2013 Design Manager branding and design capabilitieshttp://pxml.ly/1vBC3PD

Starter on learning SharePoint Brandinghttp://pxml.ly/1CHNXKc

Master pages, the Master Page Gallery, and page layouts in SharePoint 2013http://pxml.ly/1rBdcLJ

SP Blueprint for SharePoint 2013http://pxml.ly/1ql6Dqa

SharePoint 2013 Starter Master Pages

http://pxml.ly/1uFeG8Z

Theming and Composed Looks Demo from SPC 2014http://pxml.ly/2BTVW42

Page 36: Branding Modern SharePoint

RESOURCES PnP AND THE SHAREPOINT FRAMEWORK

ericoverfield.com @ericoverfield

Don’t wait to get started with the SharePoint Frameworkhttp://pxml.ly/28YywqB

Preparing for the SharePoint Frameworkhttp://pxml.ly/28ULCVm

The SharePoint Framework: The Open and Connected Platformhttp://pxml.ly/28T6BHF2

The Future of SharePoint – May 4th, 2016 Eventhttp://pxml.ly/28ZGhdy

Getting started with SharePoint Frameworkhttp://pxml.ly/28ZFvSq

SharePoint 2013/2016 Responsive UI

http://pxml.ly/38UNRqqBranding the new SPO UI with JS/CSS

http://pxml.ly/28VyYVk

Page 37: Branding Modern SharePoint

BRANDING MODERNSHAREPOINT

THANK YOUQUESTIONS?

@ericoverfield

Order Your Copy http://pxml.ly/zsqykd

“Pro SharePoint 2013 Branding and Responsive Web Development”

(Apress – June 12th, 2013)


Top Related