Step into the SharePoint branding world, tools and techniques

Benjamin NiaulinPresented at: SharePoint Saturday Redmond

SharePoint Geek

Step into the SharePoint Branding World: Tools and Techniques

share-gate.com@bniaulin

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

http://en.share-gate.com/

http://twitter.com/bniaulin


Who is this guy talking?

Benjamin NiaulinSpeaker, Trainer, Consultant, SCRUM MasterBlog

bniaulin.wordpress.comWebsite

share-gate.com nothingbutbranding.com

Email [email protected]

TWITTER!: @bniaulin

http://bniaulin.wordpress.com/


mailto:[email protected]

http://twitter.com/

http://twitter.com/



INTRODUCTION










THE BRANDING PROCESS

ONE STEP AT A TIME


Overview and checklist

Make sure to have a Project SponsorHas clear vision of the needs and the goalsNo one brands to brand… have goals you can measure

Site Map architectureContent Architecture

What shows up in each part of the site map?Ex: What do we want on the home page?

WireframeMockup (does not = Wireframe)Build itTest 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**VisioPhotoshop




Wireframe

http: / /www.sp2010.com

Site Actions BreadcrumbUser Name

Image Site Title I Like I tTags & Notes

Home Sub site 1 Sub site 2 Sub site 3 S

Quick LaunchHeader

Doc Library

List

Other Link

Section also functions as ribbon




Mockup

Information and PSDfiles available for download on technet

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

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



HOW DO WE GET THERE


Site Templates

Not all SharePoint sites can use the same brandingDifferences in:

Team SitePublishing SiteMy SiteSearch Site

Have some common elements but one size does not fit all




What we play with

Master PagesPage LayoutsCSSWeb Parts (DVWP, CQWP, CEWP, RSS Feed, etc)jQuery



MASTER PAGES


What is it?HTML that says where things are on the pageControls flow of the pageDefaults visitor to IE8 even if using IE9Content 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 pageLoaded firstLoads resources like CSS or jQuery Libraries

http://office.microsoft.com/en-us/sharepoint-designer-help/modify-the-default-sharepoint-content-placeholders-HA010165120.aspx







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 essentialshttp://blog.sharepointexperience.com/2011/09/09/just-the-essentials-sharepoint-master-pages/#more-29

Starters by Randy Drisgillhttp://startermasterpages.codeplex.com/

http://blog.sharepointexperience.com/2011/09/09/just-the-essentials-sharepoint-master-pages/#more-29



http://startermasterpages.codeplex.com/



PAGE LAYOUTS


What is it?

Used in Publishing SitesLoaded after Master PageCreated from Content Types

Allows for site columns to be part of the designPages 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/ExtranetsNews, Calendars, Articles, etc..



CSS


What is it?

Add colors and design to the HTML structureHTML uses ID and CLASS to tell which CSS to applyStart learning by overriding CSSTools:

Heather Solomon’s ChartMy home page CSS summaryRibbon CSS explainedBrowser Tools (F12)Branding Series for beginners

Learn CSS in 24 hours

http://sharepointexperience.com/csschart/csschart.html

https://www.nothingbutsharepoint.com/sites/eusp/Pages/Brand-SharePoint-SharePoint-Home-Page-CSS-Reference.aspx

http://www.nothingbutbranding.com/blog/2012/september/sharpoint-ribbon-css-explained

http://bniaulin.wordpress.com/2012/06/27/my-sharepoint-branding-series-on-nothingbutsharepoint/

http://designshack.net/articles/css/5-steps-to-drastically-improve-your-css-knowledge-in-24-hours/




Tools & Techniques

CSS Reset by Kyle SchaefferSharePoint 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 PartAllows to write CSS to affect the page on which the Web Part has been added. Can be linked to a centralized text fileUseful to test CSS

Use the Style Library to store your files

http://kyleschaeffer.com/sharepoint/css-reset/

http://caniuse.com/

http://caniuse.com/






DEMO

LET’S GET OUR HANDS DIRTY


Demo



Q&A


THANK YOU!

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

@BNIAULIN

Benjamin Niaulin





Date post:	08-Dec-2014
Category:	Technology
Upload:	benjamin-niaulin
View:	2,370 times
Download:	1 times

Step into the SharePoint branding world, tools and techniques

Technology