Home >Technology >Branding Modern SharePoint

Branding Modern SharePoint

Date post:12-Apr-2017
Category:
View:1,540 times
Download:1 times
Share this document with a friend
Transcript:

PowerPoint Presentation

SharePoint Advocate and EnthusiastPixelMillERIC OVERFIELD | @ericoverfieldBRANDINGMODERNSHAREPOINT

Slides will be available from blog and twitterLook at branding tools available to us in SharePoint 2013 and SharePoint OnlineHow many people here are new to SharePoint? Anyone taking stabs at branding SP? Anyone doing this for first time?101 level overview. Good demos of options but going to limit how deep we go right now. Lots of valuable resources at the end to help you with your journeyMany sub-classes of branding SP and different camps. This is a look at the tools and how they work, leave it up to other sessions to help you find the best solution for your particular project1

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

Will make available on blog and twitter (slideshare.net), so if you remember one of those then you can always review everything we discuss

2

WHAT YOU WILL LEARN TODAY SHAREPOINT BRANDING 1011THAT WHAT AND WHY OF BRANDING SHAREPOINT2BRANDING TOOLS IN SHAREPOINT ONLINE/2013/20163BRANDING THE FUTURE OF SHAREPOINT

ericoverfield.com

@ericoverfield4CHOOSING THE RIGHT STRATEGY

3

BRANDING?WHAT AND WHY

4

BRANDING IN GENERAL AND BRANDING BENEFITSHistorically the practice of burning your mark (or brand) onto your products

Improve SharePoint User eXperience (UX)Enhance user adoption

Further your organizations brandProvide a cohesive strategy

In order words, make SharePoint not look like SharePoint

ericoverfield.com

@ericoverfield

5

SHAREPOINTBRANDING TOOLSONLINE/2013/2016

NO CODE | MINIMAL CODE SOLUTIONSLogo replacementComposed LooksReplaces SharePoint 2010 themesUse OOTB Composed Looks or create your ownSharePoint Color Palette ToolOffice 365 ThemesTenant wide very basic themingCustom CSS Alternative CSSAvailable in publishingCSS and JavaScript embed with PnP PowerShellUse PnP - SharePoint 2013/2016 Responsive UI (*SP 2013 May 2015 CU+)

ericoverfield.com

@ericoverfield

7

SharePoint Service

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

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

23

CSOM / RESTREMOTE DEPLOYING JAVASCRIPT EMBEDDING

EO slide

EO: Starting with our SP service, using remote provisioning, again say a console application, PnP Powershell, provision a custom action and assets to SharePoint. Upon page processing, JS is injected as that custom action and delivered to the client. The browser then uses this JS and processed it normally.

TM: yes, and you may have heard last week our announcement of the Office 365 Public CDN Developer Preview that you can start to play with as well8

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

DEMO

Logo replacementAlternative CSS with look at finding classesComposed looks with BG image and linking to OsloPnP Review

9

WHAT TO DO WHEN YOU NEED MORECustomize Master Pages and Page LayoutsDisplay TemplatesDevice ChannelsThe Future The SharePoint Framework

ericoverfield.com

@ericoverfield

10

MASTER PAGESProvides main HTML wrapper used by all pagesDefines HTML , and tagsLoads resources such as JS and CSS filesDefines page flow and shared page componentsHeader, footer, logo, navigation, suite bar / ribbon, etc.Uses ContentPlaceHolders for replaceable areasOOTB, no longer uses tables for layout!

ericoverfield.com

@ericoverfield

11

MASTER PAGE COMPONENTS

ericoverfield.com

@ericoverfield

Suite BarRibbonHeaderCurrent NavPage Wrapper

12

PAGE LAYOUTSDefines content layout for a given page Contains Content blocks that link to Master PageAssociated with a Content TypeMay surface Content Type columnsSpecific to Publishing sitesVery powerful

ericoverfield.com

@ericoverfield

13

PAGE LAYOUT COMPONENTS

ericoverfield.com

@ericoverfield

Site ColumnsSnippetsContent Place Holder

14

A SHAREPOINT BRANDING TOOLDESIGN MANAGER

Web Distributed Authoring and Versioning

15

DESIGN MANAGER OVERVIEWNew to SharePoint 2013Available in SharePoint Online/2013/2016Requires Publishing InfrastructureImport a HTML prototype directly into SharePointSharePoint handles conversionInterface for custom Master Pages and Page LayoutsAlso includes Display Templates and Device ChannelsNo longer limited by SharePoint Designer

ericoverfield.com

@ericoverfield

16

HTML MASTER PAGESConvert a HTML prototype directly into SharePointSome assembly required

ericoverfield.com

@ericoverfield

17

HTML PAGE LAYOUTSMust derive from a Master PageMany out of the box layoutsAlso uses Snippets and Snippet ManagerOnly edit what is in Content blocks

ericoverfield.com

@ericoverfield

18

MASTER PAGESPAGES LAYOUTS

DEMO

Convert prototype

19

BRANDING OPTIONS REVIEW

EO slide

If you do want to brand your current team sites, there are options. Tejas, lets provide an overview of options first and then we can go into details.

EO transition to TM

Notes;Low logo replacement, composed looksMedium alternative CSS, PnPHigh Full master page, js, provisioning

2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.10/29/2016 11:46 AM20

Level of effortFlexibilityHighLowHighLow

Office 365 Theming

Composed Looks

Alternative CSS

JavaScript Embed

Custom master pageBRANDING OPTIONS

TMWeve got a spectrum of options for you to choose from when branding your team sites. They range in difficulty and flexibility lets enumerate them and then talk about them in more detail:Office 365 Theming & Composed Looks are the simplest forms of branding you can apply that require little effort, but are also limited in their flexibilityMoving up the scale a bit more, you can use alternative CSS that you can leverage to impose a different style on your siteMoving even further up the complexity scale we have JavaScript embedding, which allows you to inject custom JS without a custom master page, and allows you to take advantage of client side rendering and SP CSOM & REST APIsAnd finally we have the most flexible but also the one that requires most effort (have your cake and eat it too) is custom master pages

--after custom master page presented, EO jump in.

EO: Tejas, now custom master pages? Thats interesting. (Click)--------------------------------------------------------------------------------

https://support.office.com/en-us/article/Office-365-release-options-3b3adfa4-1777-4ff0-b606-fb8732101f47?ui=en-US&rs=en-US&ad=USApply branding, customizations here, redeployable, use a canary to know what is comingEnsure you have a playground (READ: extra tenant for dev/test) and a biz process for moving customizations to production (e.g. Metalogix)

Avoid custom master pagesStart with theming / Office 365 themesUse Alternative CSS for more complex requirementsEven responsiveConsider JavaScript Embed for UX/DOM manipulationUtilize PnP or add-in model for redeploymentAvoid feature framework and sandbox wsps. Even as declarative only sandbox solutions, remote provisioning is the way to go.Use development tenant that is set for first release

2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.10/29/2016 11:46 AM21

Yes or no, can I create a custom master page?Yes - this is supported for classic sites and will be for the foreseeable future.

EO: Many of you are liking asking yourself, as I would be if I were in the audience, can I still create custom master pages? Ive been hearing that with the new extensibility framework that they might not be compatible.

TM: Custom master pages are absolutely supported, and will be for the foreseeable future. Yes, we are investing in modern branding experiences and methods that well bring to market next year, but know that for classic team sites, the approaches we discuss in this session are supported and will be at least until we have parity in customization capability for modern sites

EO: Will Microsoft deprecate classic sites & with them customization approaches?

TM: Thats our aspiration, yes. BUT (BIG BUT) we know that it will take a *long time* and wont happen any time soonTo reassure you further, before we remove classic we need to:Ensure that we have capability parity between classic and modern from a branding customization perspectiveThis means that the new SP Framework allows for full customization of the experienceAnd that weve shipped the framework & necessary guidance to partners and customers to build modern replacementsAnd that Usage data shows that very few customers are still using classic modelSo lots of criteria, and we have a long time on this journey togetherThat context help?

TM: Awesome, with that, Eric, why dont you run through some more detail on the branding options we just identified

2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.10/29/2016 11:46 AM22

CUSTOMSEARCH RESULTSDISPLAY TEMPLATES

DISLPAY TEMPLATESThe center of displaying SharePoint Online/2013/2016 SearchReplaces XSLT with HTML and JavaScript!Control TemplatesItem Templates

ericoverfield.com

@ericoverfield

24

ericoverfield.com

@ericoverfield

Screenshot from http://sharepoint.microsoft.com/blog/Pages/BlogPost.aspx?pID=1041

25

ericoverfield.com

@ericoverfield

Screenshot from http://msdn.microsoft.com/en-us/library/jj945138.aspx26

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

DEMO

THE FUTURE OFBRANDING SHAREPOINT

THE FUTURE OF SHAREPOINTMicrosoft Announced the SharePoint Framework in May 2016The Framework is now in Developer PreviewReleased for Webparts firstScheduled to make it to SharePoint 2016 in 2017New client side rendering (CSR) method for site / data presentationClassic Master Pages, Page Layouts not going awayReview resources for links to videos and blog posts

ericoverfield.com

@ericoverfield

29

MODERN DEVELOPMENT ENVIRONMENTSass / SassScriptSyntactically Awesome StylesheetsScripting language that provides a programming like language for CSSReplacement for CSS though final product is CSSNodeJS / Bower / Grunt / GulpCompiling, Package Manager and Task ProcessingCSS/HTML Grids Bootstrap, Susy and othersYeoman or other webapp scaffolding for quick development

ericoverfield.com

@ericoverfield

Before we can get into branding SP with custom Something (css, js, html, etc), lets raise all of us up to modern coding techniqueshttp://sass-lang.com/http://rubyinstaller.org/https://nodejs.org/http://getbootstrap.com/http://susy.oddbird.net/http://yeoman.io/30

A PEEK INTOTHE FUTURE OFSHAREPOINT BRANDING

DEMO

Look at a webpart demo31

CHOOSE THERIGHT STRATEGY

WHAT IS BEST FOR YOUBuild a solid foundation firstLine up project sponsorsGet the content, structure and purpose right before brandingSecure resources, talent and budgetThis will help set level of effortSitemaps, IA, wireframes, mockupsBranding SharePoint Online requires additional consideration

ericoverfield.com

@ericoverfield

33

A QUICK REVIEW123

ericoverfield.com

@ericoverfield4THAT WHAT AND WHY OF BRANDING SHAREPOINTBRANDING TOOLS IN SHAREPOINT ONLINE/2013/2016BRANDING THE FUTURE OF SHAREPOINTCHOOSING THE RIGHT STRATEGY

34

RESOURCES

ericoverfield.com

@ericoverfieldResponsive Frameworks for SharePoint 2010 and 2013http://responsivesharepoint.codeplex.comSharePoint 2013 Design Manager branding and design capabilitieshttp://pxml.ly/1vBC3PDStarter on learning SharePoint Brandinghttp://pxml.ly/1CHNXKcMaster pages, the Master Page Gallery, and page layouts in SharePoint 2013http://pxml.ly/1rBdcLJSP Blueprint for SharePoint 2013http://pxml.ly/1ql6DqaSharePoint 2013 Starter Master Pageshttp://pxml.ly/1uFeG8Z

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

35

RESOURCES PnP AND THE SHAREPOINT FRAMEWORK

ericoverfield.com

@ericoverfieldDont wait to get started with the SharePoint Frameworkhttp://pxml.ly/28YywqBPreparing for the SharePoint Frameworkhttp://pxml.ly/28ULCVmThe SharePoint Framework: The Open and Connected Platformhttp://pxml.ly/28T6BHF2The Future of SharePoint May 4th, 2016 Eventhttp://pxml.ly/28ZGhdyGetting started with SharePoint Frameworkhttp://pxml.ly/28ZFvSqSharePoint 2013/2016 Responsive UIhttp://pxml.ly/38UNRqqBranding the new SPO UI with JS/CSShttp://pxml.ly/28VyYVk

36

BRANDING MODERNSHAREPOINT

THANK YOUQUESTIONS?

@ericoverfieldOrder Your Copy http://pxml.ly/zsqykdPro SharePoint 2013 Branding and Responsive Web Development(Apress June 12th, 2013)

Thank You!

Dont forget to check out my blog where you can download this presentation or the recording.

Easiest way to get to the material I referenced

37

of 37/37
SharePoint Advocate and Enthusiast PixelMill ERIC OVERFIELD | @ericoverfield BRANDING MODERN SHAREPOINT
Embed Size (px)
Recommended