Your SharePoint 2013 Branding Initiation

Branding Initiation

Eric OverfieldSharePoint Advocate and Enthusiast

PixelMill

Your SharePoint 2013

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

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

You can still import prototypes and use Snippet

Gallery

Private sites can be fully customized


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

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)

Date post:	01-Dec-2014
Category:	Design
Upload:	eric-overfield
View:	444 times
Download:	1 times