Agenda
28
OXBOW BUSINESS INTELLIGENCE APPLICATION DEVELOPMENT SHAREPOINT Agenda Definition of Branding Why Brand SharePoint? Branding Examples How Branding Works in SharePoint Creating Wireframes Tools of the Trade Driving User Adoption
description
Agenda. Definition of Branding Why Brand SharePoint? Branding Examples How Branding Works in SharePoint Creating Wireframes Tools of the Trade Driving User Adoption. Definition of Branding. - PowerPoint PPT Presentation
Transcript of Agenda
OXBOWB U S I N E S S I N T E L L I G E N C E
A P P L I C A T I O N D E V E L O P M E N T
S H A R E P O I N T
Agenda
Definition of Branding
Why Brand SharePoint?
Branding Examples
How Branding Works in SharePoint
Creating Wireframes
Tools of the Trade
Driving User Adoption
OXBOWB U S I N E S S I N T E L L I G E N C E
A P P L I C A T I O N D E V E L O P M E N T
S H A R E P O I N T
Definition of Branding
B r a n d i n g i s t h e a c t o f c r e a t i n g a s p e c i f i c i m a g e o r i d e n t i t y t h a t p e o p l e r e c o g n i z e i n
r e l a t i o n t o a c o m p a n y o r p r o d u c t .
OXBOWB U S I N E S S I N T E L L I G E N C E
A P P L I C A T I O N D E V E L O P M E N T
S H A R E P O I N T
Web Site Branding
HTML tags
Images
Colors
FontsLogos
Styles
OXBOWB U S I N E S S I N T E L L I G E N C E
A P P L I C A T I O N D E V E L O P M E N T
S H A R E P O I N T
Why Brand SharePoint
The most common reason is to make it unique.
Making it “NOT look like SharePoint” is a basic request.
For intranet site: A company might want to brand its intranet site to help convey to employees a sense of collaboration, teamwork, and even family.
For internet site: A company want to communicate to this external audience information about your company, such as its services or products.
OXBOWB U S I N E S S I N T E L L I G E N C E
A P P L I C A T I O N D E V E L O P M E N T
S H A R E P O I N T
Out of the Box SharePoint 2010
OXBOWB U S I N E S S I N T E L L I G E N C E
A P P L I C A T I O N D E V E L O P M E N T
S H A R E P O I N T
Example SharePoint Sites
http://spbuzz.it/sptopsites
OXBOWB U S I N E S S I N T E L L I G E N C E
A P P L I C A T I O N D E V E L O P M E N T
S H A R E P O I N T
What to concentrate on
• Branding is about site AND content design.• Spend the time and plan a site taxonomy.• With a solid taxonomy, site requirements
are easily identifiable• SharePoint features• Custom web parts & features• Content Types• Page Layouts• Audience needs drive page content
B U S I N E S S I N T E L L I G E N C E
A P P L I C A T I O N D E V E L O P M E N T
S H A R E P O I N T
Browser Market Share
B U S I N E S S I N T E L L I G E N C E
A P P L I C A T I O N D E V E L O P M E N T
S H A R E P O I N T
Browser Resolution
OXBOWB U S I N E S S I N T E L L I G E N C E
A P P L I C A T I O N D E V E L O P M E N T
S H A R E P O I N T
Secrets to Successful Branding Organize your content End users are more likely to use search then navigation
Follow Web Standards Optimize and accessibility standards
Listen to your users If you build what they want they will use it
OXBOWB U S I N E S S I N T E L L I G E N C E
A P P L I C A T I O N D E V E L O P M E N T
S H A R E P O I N T
How Branding Works in SharePoint
OXBOWB U S I N E S S I N T E L L I G E N C E
A P P L I C A T I O N D E V E L O P M E N T
S H A R E P O I N T
Theme or Master Page approachThemes (simple)
In SharePoint 2010, themes are created with the Microsoft Office client software (2007 and above), using either Word or PowerPoint to create .THMX files that describe the 12 theme colors and two fonts available in the new SharePoint themes
Master Page (powerful)
V4.MASTER : default master page that is used for many of the site templates
NIGHTANDDAY.MASTER: This master page is accessible only in a SharePoint Server 2010
MINIMAL.MASTER: This master page is used only on pages that have their own navigation or need extra space (such as dedicated application pages or the search center).
OXBOWB U S I N E S S I N T E L L I G E N C E
A P P L I C A T I O N D E V E L O P M E N T
S H A R E P O I N T
Approaches (skillset and tools)
OXBOWB U S I N E S S I N T E L L I G E N C E
A P P L I C A T I O N D E V E L O P M E N T
S H A R E P O I N T
Theme Example
Theme colors override your CSS/* [ReplaceColor(themeColor:"Dark2")] */ color:#3b4f65;
OXBOWB U S I N E S S I N T E L L I G E N C E
A P P L I C A T I O N D E V E L O P M E N T
S H A R E P O I N T
Map the AttributesUnderstand what you have to work with
OXBOW Ribbon & Font Styles (Spend Time Here)
H1.ms-rteElement-H1Blue { -ms-name:Blue Heading 1; color: blue;}
.ms-rteStyle-BlueBackground { -ms-name:Blue Background; background-color: blue; color: white;}
OXBOWB U S I N E S S I N T E L L I G E N C E
A P P L I C A T I O N D E V E L O P M E N T
S H A R E P O I N T
Mock Up Tools (Spend Time Here)
http://intranetfactory.com/http://www.balsamiq.com/
OXBOWB U S I N E S S I N T E L L I G E N C E
A P P L I C A T I O N D E V E L O P M E N T
S H A R E P O I N T
What Master Page should I use?
•Team site master page•User content pages (lists\content pages\etc)•_layouts pages (site settings, etc)
v4.master
•For app experiences, like Search or Office Web Applications• If you do not need site navigation, do not have a ribbon• If your app needs the space
minimal.master
•For error pages or login pages•Not customizable, but pages can be replacedsimple.master
•Show site using legacy interface•No Ribbon, no fluencydefault.master
OXBOWB U S I N E S S I N T E L L I G E N C E
A P P L I C A T I O N D E V E L O P M E N T
S H A R E P O I N T
How the pieces get assembled
OXBOWB U S I N E S S I N T E L L I G E N C E
A P P L I C A T I O N D E V E L O P M E N T
S H A R E P O I N T
The Visual Blend
OXBOWB U S I N E S S I N T E L L I G E N C E
A P P L I C A T I O N D E V E L O P M E N T
S H A R E P O I N T
The purpose of Place Holders
OXBOWB U S I N E S S I N T E L L I G E N C E
A P P L I C A T I O N D E V E L O P M E N T
S H A R E P O I N T
Placeholders Defined
Content Placeholder Description
PlaceHolderAdditionalPageHeadUsed to add extra components such as JavaScript, Jscript, and Cascading Style Sheets in the head section of the page.
PlaceHolderBodyAreaClassThe class of the body area. This placeholder is no longer used in SharePoint 2010.
PlaceHolderBodyLeftBorderThis placeholder does not appear as part of the interface but must be present for backward compatibility.
PlaceHolderBodyRightMarginThis placeholder does not appear as part of the interface but must be present for backward compatibility.
PlaceHolderCalendarNavigator The date picker used when a calendar is visible on the page.
OXBOWB U S I N E S S I N T E L L I G E N C E
A P P L I C A T I O N D E V E L O P M E N T
S H A R E P O I N T
CSS Registration
<SharePoint:CSSRegistration Name=“1.css” After=“corev4.css” runat=“server”/><SharePoint:CSSRegistration Name=“2.css” After=“corev4.css” runat=“server”/>
Outputs <link rel=“stylesheet” type=“text/css” href=“/_layouts/1033/styes/core.css?rev=…”/><link rel=“stylesheet” type=“text/css” href=“2.css”/><link rel=“stylesheet” type=“text/css” href=“1.css”/>
OXBOWJeff Forsyth CEO Oxbow SoftwareSharePoint Branding = End User Adoption
Jeff Forsyth is Founder and Chief Architect at Oxbow Software. Jeff is an experienced consultant that has more than 15 years of business and technology consulting experience. Prior to founding Oxbow Software Jeff led the Application Services practice at GreenPages, an industry leading VAR500 managed services provider, concentrating on Business Process Optimization through the implementation of software solutions guide by proven methodologies.
Founded in 2010, Oxbow Software (Oxbow) helps clients adopt and integrate new and emerging application technologies and build enterprise architectures that manage information, connect disparate systems, protect IP, and generate substantial ROI for your organization.
Jeff ForsythOxbow Software
Maine SPUGNovember 13, 2012
SharePoint Branding End User Adoption
