BRANDING MODERN SHAREPOINT - GChristopher Design · BRANDING MODERN SHAREPOINT SPTechCon Boston 2016 ... (CSR) method for site ... SharePoint 2013 Design Manager branding and design

SharePoint Advocate and EnthusiastPixelMill

ERIC OVERFIELD | @ericoverfield

BRANDINGMODERNSHAREPOINT

SPTechCon Boston 2016Tuesday June 28th

1:45 PM – 3:00 PM

Founder and SharePoint Branding/UI Lead, PixelMillSpeaker, Teacher, Advocate, Author

SharePoint 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 Copy

http://pxml.ly/zsqykd

ericoverfield.com @ericoverfield

INTRODUCTION ERIC OVERFIELD

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”


4 CHOOSING THE RIGHT STRATEGY

BRANDING?WHAT AND WHY

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 SharePoint


Ah, but can we brand SharePoint?YesIncludingSharePoint Online?

PUBLISHING SITES


NON-PUBLISHING SITES


WHAT IS POSSIBLE


WHAT IS POSSIBLE


WHAT IS POSSIBLE


SHAREPOINTBRANDING TOOLSONLINE/2013/2016

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

§ https://www.microsoft.com/en-us/download/details.aspx?id=38182

§ Custom CSS§ Use browser developer toolbar for inspection

§ JavaScript Injection§ Use PnP - SharePoint 2013/2016 Responsive UI (*SP 2013 May 2015 CU+)


DEMO

NO-CODESOLUTIONS

WHAT TO DO WHEN YOU NEED MORE

§ Customize Master Pages and Page Layouts

§ Custom CSS and JavaScript

§ Display Templates

§ Device Channels

§ The Future – The SharePoint Framework…


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!


MASTER PAGE COMPONENTS


Suite Bar

Ribbon

Header

Current Nav

Page Wrapper

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


PAGE LAYOUT COMPONENTS


Site Columns

Snippets

Content Place Holder

THE NEW SHAREPOINTBRANDING TOOLDESIGN MANAGER

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


HTML MASTER PAGES

§ Convert a HTML prototype directly into SharePoint

§ Some assembly required


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


DEMO

MASTER PAGESPAGES LAYOUTS& DESIGN MANAGER

CUSTOMSEARCH RESULTSDISPLAY TEMPLATES

DISLPAY TEMPLATES

§ The center of displaying SharePoint Online/2013/2016 Search

§ Replaces XSLT with HTML and JavaScript!

§ Control Templates

§ Item Templates




DEMO

DISPLAYTEMPLATES

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

DEVICE CHANNELS

§ New to SharePoint 2013 and available on SharePoint Online

§ Interfaces tailored and mapped to specific device(s)

§ Custom Master Pages per Channel

§ Custom DeviceChannelPanels

§ *Replaced by Responsive Web Design


DEVICE CHANNELS AN EXAMPLE


THE FUTURE OFBRANDING SHAREPOINT

THE FUTURE OF SHAREPOINT

§ Microsoft Announced the SharePoint Framework in May 2016

§ The Framework to be released to SPO in second half of 2016

§ Scheduled to make it to SharePoint 2016 in 2017

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

§ Includes a new webpart engine as well

§ “Classic” Master Pages, Page Layouts not going away

§ Review resources for links to videos and blog posts


DEMOA PEEK INTOTHE FUTURE OFSHAREPOINT BRANDING

CHOOSE THERIGHT STRATEGY

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


A QUICK REVIEW

1

2

3


4

THAT WHAT AND WHY OF BRANDING SHAREPOINT

BRANDING TOOLS IN SHAREPOINT ONLINE/2013/2016

BRANDING “THE FUTURE OF SHAREPOINT”

CHOOSING THE RIGHT STRATEGY

RESOURCES


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 Pageshttp://pxml.ly/1uFeG8Z

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

RESOURCES PnP AND THE SHAREPOINT FRAMEWORK


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 UIhttp://pxml.ly/38UNRqq

Branding the new SPO UI with JS/CSShttp://pxml.ly/28VyYVk

BRANDING MODERN

SHAREPOINT

THANK YOUQUESTIONS?

@ericoverfieldSPTechCon Boston 2016

http://pxml.ly/EO-SP2013-BrandingIntro

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

“Pro SharePoint 2013 Branding and Responsive Web Development”

(Apress – June 12th, 2013)

BRANDING MODERN SHAREPOINT - GChristopher Design · BRANDING MODERN SHAREPOINT SPTechCon Boston 2016 ... (CSR) method for site ... SharePoint 2013 Design Manager branding and design

Documents