sharepoint branding - 3 most common mistakes

3 MOST COMMON MISTAKES

SharePoint Branding

@nicolepullin

#SPSToronto

http://brainlava.com

PRESENTED BY

ABOUT ME

❖ Quality Assurance Analyst

❖ Business Analyst

❖ Client Trainer

❖ Graphic Designer

❖ Interaction Designer

WORKED WITHPROJECT ROLES❖ SharePoint 2003

❖ WSS3

❖ MOSS 2007

❖ SharePoint 2010

SharePoint User Experience ConsultantCrafting & implementing SharePoint Solutions for 7 years

MISTAKE #1

JUMPING INTO CODE TOO SOON

DO I NEED PUBLISHING?

PUBLISHING SITE TEMPLATE TEAM SITE TEMPLATE

DO I NEED PUBLISHING?

DO I NEED PUBLISHING?

PUBLISHING SITE TEAM SITE

TEAM SITE + PUBLISHING?

a. Select “Site Actions” > “Site Settings”

b. Select “Site Collection Features” in the Site Collection Column

c. Activate “SharePoint Server Publishing Infrastructure” Feature

Root Level: Activate the “SharePoint Publishing Infrastructure” Feature

Site Level: Activate the “SharePoint Server Publishing” Feature

a. Select “Site Actions” > “Site Settings”

b. Select “Manage Site Features” in the Site Actions Column

c. Activate “SharePoint Server Publishing” Feature

1

2

IDENTIFY PATTERNS

IDENTIFY PATTERNS

HOME PAGE ANALYSIS❖ Header Navigation

❖ Search Input

❖ Top Navigation

❖ Anchor Links

❖ Wrapper Styling

❖ Footer

❖ Web Part Header

❖ Web Part Body

❖ Column Widths

❖ Fixed? Fluid? Responsive?

❖ Hover States?

❖ Web Part Zones?

❖ Page Editing Fields?

IDENTIFY PATTERNS

LANDING PAGE ANALYSIS❖ Left Navigation

❖ Image Treatments

❖ Document Libraries

❖ List Displays

❖ Summary Links

❖ Calendars

❖ Page Title

❖ Page Description

❖ Bread Crumb

❖ Web Part Zones?

❖ Page Editing Fields?

❖ Columns?

IDENTIFY PATTERNS

ARTICLE PAGE ANALYSIS❖ Second Level Left Navigation

❖ Headings

❖ Paragraphs

❖ Bulleted Lists

❖ Numbered Lists

❖ Block Quotes

❖ Page Title

❖ Blogs

❖ Wikis

MISTAKE #2

IGNORING THE ICEBERG

3 STEP TEST

MISSION3 STEP TEST

1. THE IMMEDIATE PAGE

❖ Regression test in all

supported browsers

❖ Editing view

❖ Adding & removing web parts

❖ Test drop downs

2. CUSTOM PAGES

❖ Styling consistencies

❖ Custom components

❖ Search for new emerging

patterns

❖ Combine common patterns to

reduce bloated code

3. OOTB PAGES

❖ Full list & library views

❖ Site Settings

❖ Dialog pop up

❖ Calendar View

❖ Blog

❖ Wiki

❖ Search

THE QUIRKS

MISSIONSHAREPOINT RIBBON

Messing with the Static Ribbon and Page Scrolling

{{

a. Default v4.master scenario

MISSIONSHAREPOINT RIBBON

Messing with the Static Ribbon and Page Scrolling

{{

b. Removing the #s4-workspace div

MISSIONSHAREPOINT RIBBON

No Page Scrolling!

MISSIONSHAREPOINT RIBBON

Messing with the Static Ribbon and Page Scrolling

{{

c. Removing the #s4-workspace div and overriding the CSS

MISSIONSHAREPOINT RIBBON

It scrolls! But...

MISSIONSHAREPOINT RIBBON

It scrolls! But...

We’ve lost our toolbar!

MISSIONSHAREPOINT RIBBON

Messing with the Static Ribbon and Page Scrollingd. Other methods

❖ Kyle Schaeffer’s CSS & JavaScript Ribbon solution

http://kyleschaeffer.com/sharepoint/sharepoint-2010-scrolling/

❖ My public facing ribbon solutionhttp://brainlava.com/fix-for-sharepoint-2010-scrolling-for-chrome-ios4-android/

MISSIONSHAREPOINT RIBBON

Recommendation

{{Stick with the default scenario unless you have a strong use case to alter the functionality

MISSION!important RABBIT HOLE

MasterPage Reference - Render AFTER corev4.css

MasterPage Reference - Render BEFORE corev4.css

MISSION!important RABBIT HOLE

Page Layout Reference - Render AFTER corev4.css

Page Layout Reference - Render BEFORE corev4.css

MISSIONMODAL WINDOW

Style overrides in the modal window

MISSIONMODAL WINDOW

Style overrides in the modal window

QUICK WINS

MISSIONLOGO LINK

Changing the link to point to the root site

V4.master

nightandday.master

{{

MISSIONFREE THE BREADCRUMB

Publishing Breadcrumb

Ribbon Breadcrumb

MISSIONFREE THE BREADCRUMB

MISSIONDEFAULT STYLES

Customizing the “Markup Styles”

MISTAKE #3

CODING FOR YOURSELF, NOT THE USER

MISSIONLEVERAGE REUSABLE CONTENT

MISSIONLEVERAGE REUSABLE CONTENT

MISSIONLEVERAGE REUSABLE CONTENT

Scenario 1: Global CopyrightVisit SharePoint Element & grab the code

to add the “Copyright” item from the

Reusable Content list to the MasterPage

1

http://www.sharepointelement.com/2012/01/27/

adding-reusable-content-within-master-pages//

2

2011 Brain Lava, all rights reserved.

MISSIONLEVERAGE REUSABLE CONTENT

Scenario 2: Sidebar Snippet

MISSIONLEVERAGE REUSABLE CONTENT

Scenario 2: Sidebar Snippet

MISSIONINCLUDE CONTEXTUAL HELP

MISSIONTRIM THE FAT

TRIM THE FAT

a. Select “Site Actions” > “Site Settings”

b. Select “Page layouts and site templates” in the Look and Feel Column

c. Activate “SharePoint Server Publishing Infrastructure” Feature

Hide site templates, page layouts & set defaults

TRIM THE FAT

a. Select “Site Actions” > “Site Settings”

b. Select “Page layouts and site templates” in the Look and Feel Column

c. Activate “SharePoint Server Publishing Infrastructure” Feature

Hide site templates, page layouts & set defaults

TRIM THE FAT

a. Select “Site Actions” > “Site Settings”

b. Select “Page layouts and site templates” in the Look and Feel Column

c. Activate “SharePoint Server Publishing Infrastructure” Feature

Hide site templates, page layouts & set defaults

MISSIONTRIM THE FAT

Jumping into code too soon1

Ignoring the iceberg2

Coding for yourself, not the user3

3 MOST COMMON MISTAKES

SharePoint Branding

Thank You!

@nicolepullinTWITTER:http://brainlava.comWEBSITE:

FOR YOUR ATTENTION