+ All Categories
Home > Documents > Branding Initiation Eric Overfield SharePoint Advocate and Enthusiast PixelMill Your SharePoint 2013...

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

Date post: 14-Dec-2015
Category:
Upload: kaitlin-simes
View: 221 times
Download: 1 times
Share this document with a friend
Popular Tags:
36
Branding Initiation Eric Overfield SharePoint Advocate and Enthusiast PixelMill Your SharePoint 2013 http://pxml.ly/EO-SP2013- BrandingIntro
Transcript
Page 1: Branding Initiation Eric Overfield SharePoint Advocate and Enthusiast PixelMill Your SharePoint 2013 .

Branding Initiation

Eric OverfieldSharePoint Advocate and Enthusiast

PixelMill

Your SharePoint 2013

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

Page 2: Branding Initiation Eric Overfield SharePoint 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)

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

Agenda

Why Brand SharePoint

Branding Tools in SharePoint 2013

Choosing the Right Strategy

@EricOverfield - pixelmill.com

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

Why BrandSharePoint?

@EricOverfield - pixelmill.com

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

The Benefits of Branding

Improve SharePoint User eXperience (UX)

Enhance user adoption

@EricOverfield - pixelmill.com

Further your organization brand

Provide a cohesive strategy

In other words, make it not look like SharePoint

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

@EricOverfield - pixelmill.com

Publishing Sites

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

@EricOverfield - pixelmill.com

Non-publishing Sites

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

@EricOverfield - pixelmill.com

What is Possible

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

@EricOverfield - pixelmill.com

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

@EricOverfield - pixelmill.com

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

SharePoint 2013Branding Tools

@EricOverfield - pixelmill.com

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

No-Code / Minimal Code Solutions

Composed Looks

Replaces SharePoint 2010 themes

@EricOverfield - pixelmill.com

Use OOTB Composed Looks or create your own

Use SharePoint Color Palette Tool to generate custom

looks

Logo replacement

Custom CSS

Use browser developer toolbar for inspection

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

No-codeDemo

@EricOverfield - pixelmill.com

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

What to do When You Need More

Customize Master Pages and Page Layouts

@EricOverfield - pixelmill.com

Custom CSS and JavaScript

Display Templates

Device Channels

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

Master Pages

Provides main HTML wrapper used by all pages

@EricOverfield - pixelmill.com

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!

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

@EricOverfield - pixelmill.com

Suite Bar

Ribbon

Header

Current Nav

Master Page Components

Page Wrapper

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

Page Layouts

Defines content layout for a given page

@EricOverfield - pixelmill.com

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 18: Branding Initiation Eric Overfield SharePoint Advocate and Enthusiast PixelMill Your SharePoint 2013 .

@EricOverfield - pixelmill.com

Page Layout Components

Site Columns

Snippets

Content Place Holder

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

Design Manager

SharePoint Designer not required

The New SharePoint Branding Tool

@EricOverfield - pixelmill.com

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

Design Manager Overview

New to SharePoint 2013

@EricOverfield - pixelmill.com

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

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

HTML Master Pages

Convert a HTML prototype directly into SharePoint

@EricOverfield - pixelmill.com

Some assembly required

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

HTML Page Layouts

@EricOverfield - pixelmill.com

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

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

Design ManagerDemo

@EricOverfield - pixelmill.com

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

Display Templates

Dump the XSLT

Custom Search and Results

@EricOverfield - pixelmill.com

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

Display Templates

The center of displaying SharePoint 2013 Search

Replaces XSLT with HTML and JavaScript!

@EricOverfield - pixelmill.com

Control Templates

Item Templates

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

@EricOverfield - pixelmill.com

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

@EricOverfield - pixelmill.com

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

Display TemplatesDemo

@EricOverfield - pixelmill.com

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

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

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

@EricOverfield - pixelmill.com

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

Device Channels – An Example

@EricOverfield - pixelmill.com

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

Choose theRight Strategy

@EricOverfield - pixelmill.com

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

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

@EricOverfield - pixelmill.com

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

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

@EricOverfield - pixelmill.com

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

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

@EricOverfield - pixelmill.com

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

Resources

@EricOverfield - pixelmill.com

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

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

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


Recommended