benjamin niaulin presented at: sharepoint saturday utah sharepoint geek step into the sharepoint...
TRANSCRIPT
Benjamin NiaulinPresented at: SharePoint Saturday Utah
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.
#SPSUtah
share-gate.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
INTRODUCTION
THE BRANDING PROCESS
ONE STEP AT A TIME
share-gate.com@bniaulin
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 architecture (XMind or Mind Manager)Content 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
share-gate.com@bniaulin
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
share-gate.com@bniaulin
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
https://gsoft.mybalsamiq.com/projects/sharepointbreakfast/
share-gate.com@bniaulin
Mockup
Information and PSDfiles available for download on technet
http://msdn.microsoft.com/en-us/library/gg430141.aspx
HOW DO WE GET THERE
share-gate.com@bniaulin
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
share-gate.com@bniaulin
What we play with
Master PagesPage LayoutsCSSWeb Parts (DVWP, CQWP, CEWP, RSS Feed, etc)jQuery
MASTER PAGES
share-gate.com@bniaulin
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
share-gate.com@bniaulin
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
**Note the s4-notdlg
share-gate.com@bniaulin
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/
PAGE LAYOUTS
share-gate.com@bniaulin
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
share-gate.com@bniaulin
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
share-gate.com@bniaulin
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
DEMO
LET’S GET OUR HANDS DIRTY
Q&A
share-gate.com@bniaulin
THANK YOU!
Follow me on twitter for updates! Tweet me if youneed the files (CSS, jQuery used in demo)
@BNIAULIN
Benjamin Niaulin