Branding Initiation Eric Overfield SharePoint Advocate and Enthusiast PixelMill Your SharePoint 2013...

transcript

Branding Initiation

Eric OverfieldSharePoint Advocate and Enthusiast

PixelMill

Your SharePoint 2013

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

Introduction – Eric Overfield

Founder and SharePoint Branding/UI Lead,

PixelMill

Speaker, Teacher, Advocate

Author, SharePoint Community Organizer

Located in Davis, CA

ericoverfield.com

@EricOverfield

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

Co-author: “Pro SharePoint 2013 Branding and

Responsive Web Development” (Apress – June

12th, 2013)

Co-author: “Black Magic

Solutions for White Hat

SharePoint” (August, 2013)

Agenda

Why Brand SharePoint

Branding Tools in SharePoint 2013

Choosing the Right Strategy

@EricOverfield - pixelmill.com

Why BrandSharePoint?

The Benefits of Branding

Improve SharePoint User eXperience (UX)

Enhance user adoption

Further your organization brand

Provide a cohesive strategy

In other words, make it not look like SharePoint

Publishing Sites

Non-publishing Sites

What is Possible

SharePoint 2013Branding Tools

No-Code / Minimal Code Solutions

Composed Looks

Replaces SharePoint 2010 themes

Use OOTB Composed Looks or create your own

Use SharePoint Color Palette Tool to generate custom

Logo replacement

Custom CSS

Use browser developer toolbar for inspection

No-codeDemo

What to do When You Need More

Customize Master Pages and Page Layouts

Custom CSS and JavaScript

Display Templates

Device Channels

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!

Suite Bar

Ribbon

Header

Current Nav

Master Page Components

Page Wrapper

Page Layouts

Defines content layout for a given page

Contains “Content” blocks that link to Master Page

Specific to Publishing sites

Very powerful

Associated with a Content Type

May surface Content Type columns

Page Layout Components

Site Columns

Snippets

Content Place Holder

Design Manager

SharePoint Designer not required

The New SharePoint Branding Tool

Design Manager Overview

New to SharePoint 2013

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

Design ManagerDemo

Display Templates

Dump the XSLT

Custom Search and Results

Display Templates

The center of displaying SharePoint 2013 Search

Replaces XSLT with HTML and JavaScript!

Control Templates

Item Templates

Display TemplatesDemo

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

Device Channels

New to SharePoint 2013

Interfaces tailored and maps to specific device(s)

Custom Master Pages per Channel

Custom DeviceChannelPanels

Replaced by Responsive Web Design

Device Channels – An Example

Choose theRight Strategy

What is Best for You?

Build a solid foundation first

Line up project sponsors

Secure resources, talent and budget

Get the content right before branding

Sitemaps, IA, wireframes, mockups

What is Best for You?

Effort based on budget, requirements and talent

Composed looks are quick and easy

Custom Master Pages / Page Layouts require

developers

Developer skillset dependent on branding

requirements

Is mobile important? If so find experts in HTML,

CSS, JS

What About SharePoint Online?

Public Facing SPO site contains Design Manager

Few limitations in branding

Limited by backend customization

But Public Facing SPO end of life in ~early 2017

You can still import prototypes and use Snippet

Gallery

Private sites can be fully customized

Microsoft recommends only minimal

customizations

Resources

Responsive Frameworks for SharePoint 2010 and 2013

http://responsivesharepoint.codeplex.com

Starter on learning SharePoint Branding

http://pxml.ly/1CHNXKc

SP Blueprint for SharePoint 2013

http://pxml.ly/1ql6Dqa

Master pages, the Master Page Gallery, and page layouts in SharePoint 2013

http://pxml.ly/1rBdcLJ

Public Website help for Office 365

http://pxml.ly/1uhffnU

SharePoint 2013 Starter Master Pages

http://pxml.ly/1uFeG8Z

SharePoint 2013 Design Manager branding and design capabilities

http://pxml.ly/1vBC3PD

Theming and Composed Looks Demo from SPC 2014

http://pxml.ly/2BTVW42

SharePoint Color Palette Tool

http://pxml.ly/RGZND8

Eric Overfield@EricOverfield

ericoverfield.com Thank You

Branding Initiation

Your SharePoint 2013

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

“Pro SharePoint 2013 Branding and

Responsive Web Development” (Apress –

June 12th, 2013)

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

Branding Initiation Eric Overfield SharePoint Advocate and Enthusiast PixelMill Your SharePoint 2013...

Documents