Step into the SharePoint branding world, tools and techniques

Step into the SharePoint
Branding World:
Tools and Techniques

Benjamin Niaulin
Presented at: SharePoint Saturday SharePoint Geek
Redmond

Description
Everyone expects their SharePoint to be beautiful and for you to
brand it in no time. However, you are not a web designer and the
task is proving more difficult than you anticipated. In this session,
you will learn how to start branding a SharePoint Site so that you
can get closer to the look and feel of the famous Ferrari.com that
consultant talked to you about.

In this session, we will look at the tools available and the
different ways to brand your SharePoint Site from start to finish.
From CSS to HTML passing by Master Pages, at the end of this
session you will be able to start branding your SharePoint site
and Re-Experience SharePoint.

#SPSRED

@bniaulin share-gate.com

Who is this guy talking?
Benjamin Niaulin
Speaker, Trainer, Consultant, SCRUM Master
Blog
bniaulin.wordpress.com
Website
share-gate.com
nothingbutbranding.com
Email
benjamin.niaulin@share-gate.com
TWITTER!: @bniaulin


ONE STEP AT A TIME
THE BRANDING PROCESS

Overview and checklist
Make sure to have a Project Sponsor
Has clear vision of the needs and the goals
No one brands to brand… have goals you can measure
Site Map architecture
Content Architecture
What shows up in each part of the site map?
Ex: What do we want on the home page?
Wireframe
Mockup (does not = Wireframe)
Build it
Test it


Wireframe
Is used to get an idea of where things will be placed for the
mockup of the design to come.
Is Not final.

Tools:
Balsamiq**
Visio
Photoshop


Wireframe

http://www.sp2010.com

User Name
Site Actions Breadcrumb

Section also functions
Image Site Title as ribbon I Like It
Tags &
Notes

Home Sub site 1 Sub site 2 Sub site 3 S

Quick Launch
Header
Doc Library

List

Other Link


Mockup
Information and PSD
files available for
download on technet

http://msdn.microsoft.com/en-us/library/gg430141.aspx


Site Templates

Not all SharePoint sites can use the same branding
Differences in:
Team Site
Publishing Site
My Site
Search Site
Have some common elements but one size does not fit all


What we play with
Master Pages
Page Layouts
CSS
Web Parts (DVWP, CQWP, CEWP, RSS Feed, etc)
jQuery


What is it?
HTML that says where things are on the page
Controls flow of the page
Defaults visitor to IE8 even if using IE9
Content PlaceHolders are placed to tell SharePoint where
to load it’s features
Huh?
List of content placeholders
http://office.microsoft.com/en-us/sharepoint-designer-help/modify-the-default-sharepoint-content-
placeholders-HA010165120.aspx

Standardize brand across sites with a single page
Loaded first
Loads resources like CSS or jQuery Libraries


Can be used to add a footer
<div class="s4-notdlg" style="clear: both; background-
color#E36C09; padding: 10px;">© Copyright 2012
Benjamin Niaulin – Sharegate Geek</div>

Added after dev dashboard


downloads
Heather Solomon’s just the essentials
http://blog.sharepointexperience.com/2011/09/09/just-the-essentials-
sharepoint-master-pages/#more-29

Starters by Randy Drisgill
http://startermasterpages.codeplex.com/


What is it?
Used in Publishing Sites
Loaded after Master Page
Created from Content Types
Allows for site columns to be part of the design
Pages created become tagged content as it is authored
Have different page designs within the content of the
master page in the Main placeholder

Very powerful with Intranets/Extranets
News, Calendars, Articles, etc..


What is it?
Add colors and design to the HTML structure
HTML uses ID and CLASS to tell which CSS to apply
Start learning by overriding CSS
Tools:
Heather Solomon’s Chart
My home page CSS summary
Ribbon CSS explained
Browser Tools (F12)
Branding Series for beginners
Learn CSS in 24 hours


Tools & Techniques
CSS Reset by Kyle Schaeffer
SharePoint CSS will override you every step of the way
http://caniuse.com/
Make sure your CSS or HTML can be used by your
browsers
Content Editor Web Part
Allows to write CSS to affect the page on which the Web
Part has been added.
Can be linked to a centralized text file
Useful to test CSS
Use the Style Library to store your files


DEMO
LET’S GET OUR HANDS DIRTY

Demo


THANK YOU!

Follow me on twitter for updates! Tweet me if you
need the files (CSS, jQuery used in demo)

@BNIAULIN

Benjamin Niaulin


Step into the SharePoint branding world, tools and techniques

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (15)

Similar to Step into the SharePoint branding world, tools and techniques

Similar to Step into the SharePoint branding world, tools and techniques (20)

More from Benjamin Niaulin

More from Benjamin Niaulin (14)

Recently uploaded

Recently uploaded (20)

Step into the SharePoint branding world, tools and techniques

Editor's Notes