Upload
dsakdjklasjdlkasj
View
226
Download
0
Embed Size (px)
Citation preview
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
1/53
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
2/53
SharePoint911
Established in 2004 by SharePoint MVP Shane Young Full service SharePoint Consulting
ro ec ann ng
Architecture
Development
Help Desk
We truly are The SharePoint Authority.
http://www.sharepoint911.com
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
3/53
Randy Drisgill MVP SharePoint Server
Branding and Design Lead SP911
Author
Professional SharePoint 2007 Design
Professional SharePoint 2010 Branding (Q2 2010)
Real World SharePoint 2010 2 2010
Blog:
http://blog.drisgill.com
http://twitter.com/Drisgill
Orlando, FL
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
4/53
John Ross MVP SharePoint Server
Sr. SharePoint Consultant SP911
Author
MOSS Explained
Professional SharePoint 2007 Design
Real World SharePoint 2010 (Q2 2010)
Blog:
p: www.rossonmoss.com Twitter:
http://twitter.com/johnrossjr
Orlando, FL
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
5/53
And the Audience?
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
6/53
Agenda
What is Branding? Terminolo
SP2010 UX Overview
Approaches to Branding in SP2010
Getting Started
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
7/53
What does branding mean?
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
8/53
What does branding mean?
Branding: The act of building a specific image or identity that
peop e recogn ze n re at on to your company
Website Branding: The colors, fonts, logos, and supporting graphics that
make up the general look and feel of a corporatewebsite.
Branding for SharePoint:
, , , , ,images, etc.
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
9/53
Clarification
The word design can often be confused withSoftware Design (planning for softwareeve opmen
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
10/53
Vocabulary Lesson
SharePoint Foundation 2010 is the free version ofSharePoint
ocuse on co a orat on w t ocuments an g tediting of web pages
SharePoint
Includes amon other ca abilities the PublishinFeature
Much better platform for creating a strongly brandedweb site
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
11/53
Whats new?
Master Pages UX
Standards and Compliance
More fanciness
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
12/53
SharePoint 2010 UX
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
13/53
SP2010 UX Overview
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
14/53
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
15/53
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
16/53
Master Page Enhancements
Can be applied to Application pages Pages with _layouts in the URL
In 2007 this meant creating a Theme or even
worse customizing the Application.master
Some pages still reference Simple.master likelogin and errors
What does this mean to Branders?
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
17/53
OOTB Master Pages
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
18/53
Master Page applied to _layouts
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
19/53
Web Standards Enhancements Web Content Accessibility Guidelines (WCAG) 2
Cross-browser support: IE, Firefox, Safari
NO IE6
Less HTML Tables
CSS Sprites Better caching for
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
20/53
Browsers in 2010Level 1 Experience
Windows XP, Windows Vista, Windows Server 2003, Windows Server
Internet Explorer 7, Internet Explorer 8, Mozilla Firefox 3.5
Windows 7, Windows Server 2008 R2
Internet Explorer 8 (32-bit), Firefox 3.5
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
21/53
Browsers in 2010Level 2 Experience
Apple Mac OS X Snow Leopard
App e Sa ar 4.x, Moz a F re ox 3.5
Windows XP, Windows Vista, Windows Server 2003, Windows Server
2008
Internet Explorer 7, Internet Explorer 8 (64-bit)
Windows 7, Windows Server 2008 R2
Internet Explorer 8 (64-bit)
UNIX/Linux 8.1
re ox .
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
22/53
Navigation Enhancements
The AspMenu now has a Simple Renderingmode
Cleaner code based on HTML unordered lists
Can be styled to look the same as always
If this frightens you, turn off Simple Rendering
method and all your old CSS styling will work
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
23/53
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
24/53
Simple Rendering Mode HTML
=" - "
Heading
Item
< >
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
25/53
New Theming Infrastructure
SharePoint 2007 Themes Were hard to build
Only worked with default.master
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
26/53
SharePoint 2010 Themes Colors (including shading images) + fonts in open XML
format
Can be created and adjusted by site owners in their
browser!
CSS has comments in the markup that tell SharePoint whatcolors and fonts to replace
Can apply to your custom branding if you use thecomments / themeable folder
/* [Re laceColor(themeColor:"Li ht1")] */
background-color:#fff;
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
27/53
SharePoint 2010 Themes
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
28/53
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
29/53
Wiki Pages
Tagging and Ratings Team Sites
Easy page editing / linking
n erpr se rep aces o a ora on or a
Wiki pages + Publishing
Page Layouts, Workflows, Master pages,caching, etc
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
30/53
Wiki Pages
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
31/53
The Ribbon
Contextual user interface Can have fixed osition or floatin
You can add and remove buttons easily
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
32/53
Status Bar / Notification Area
Status bar Below the ribbon
Displays color coded messages
Notification Area
ppears on e r g s e op Messages show for 5 seconds
Can be extended with Server or client code
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
33/53
Status Bar / Notification Area
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
34/53
Dialog Framework
Often used to add and edit items
Reduces number of a e refreshes
Dragable, Resizeable
Custom Master Page applies to both the site and
hide elements of the Master Page with the CSS -
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
35/53
Dialog Framework
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
36/53
Visual Upgrade
SharePoint 2007 / 3.0 Styles
Existing master pages & page layouts retained
Only a temporary solution
Remove 2007 controls
Add Ribbon
Add 2010 controls
Use 2010 Simple Navigation
Adjust CSS
More info: http://bit.ly/3xapTl
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
37/53
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
38/53
Other Awesomeness
Silverlight
Silverlight web parts allows easy Silverlight
Client Object Model
programmatically
Filter based on page fields
ommon ew e s
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
39/53
Other Awesomeness
Multi-lingual User Interface (MUI)
Alternate languages for various UI elements
Enabled once Language Packs are installed
Asset Library optimized for digital assets
e a e ar ver g v eo p ayer Media Field Control
Media in Content Query Web Part
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
40/53
SharePoint Designer 2010
Not sold in stores
Made in Redmond
Beware of imitators
SharePoint Designer
www.microsoft.com/spd SPD 2010 Beta -
http://bit.ly/7G9rCY
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
41/53
SharePoint Designer 2010 Still very affordable
Can be more restricted by Admins
New Ribbon UI
Can create Lists, pages, sites, content types, site columns Other features
Reusable workflows
Business data sources
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
42/53
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
43/53
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
44/53
Approaches to Branding in SP2010 Low Effort
Use the out of the box branding
V4.master, N g tAn Day.master, OOTB T emes
Medium Effort
Create Alternate CSS
Hi h Effort
Custom Master Pages, Page Layouts, custom CSS
Good for ublic internet sites, em lo ee ortals, artner
extranets, etc.
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
45/53
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
46/53
Recreating in Your Environment
Create a theme with Office and import intoSharePoint and apply it to the site
Create a wide header graphic
A l header with Alternate CSS Add a logo by setting the site icon
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
47/53
Can I upgrade my branding?
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
48/53
Answer!!!
Definitely without a doubt with somework
Visual Upgrade
Custom themes?
Have you ear a out t e new t eme engine?
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
49/53
Converting Existing Master Pages Remove 2007 controls
Publishing Console, Site Actions, Login
Stick it to the top of the page if you want
Content
CSS: body { overflow: hidden; }
SPPageManager, ScriptManager, ScriptLink
More info: http://bit.ly/3xapTl
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
50/53
Converting Existing Master Pages Use 2010 Simple Navigation
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
51/53
Starting a New SharePoint 2010 Master
The 2007 term Minimal Master Page has beenreplaced with Starter Master Page
M SharePoint Server 2010 and SharePointFoundation 2010 Starter Master Pages:
htt ://startermaster a es.code lex.com/
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
52/53
Starter Master Page
8/4/2019 SPTechCon - Introduction to Share Point 2010 Branding
53/53
Contact Information Blog:
http://blog.drisgill.com
http://www.rossonmoss.com
Twitter:
ttp: tw tter.com r sg
http://twitter.com/johnrossjr
ma
randy @ sharepoint911.com
.