Upload
kanwal-khipple
View
2.583
Download
0
Embed Size (px)
DESCRIPTION
In this session, we are going to brand a SharePoint site from start to finish. We will use SharePoint Designer, HTML and custom CSS to design a site how not to look like SharePoint. We'll touch upon themes, page layouts as well as master page design. As well as learn how to upgrade a SharePoint 2007 design to SharePoint 2010. This session is focused on designers well versed with HTML and CSS but might not have the SharePoint development experience. Within the session, we'll also look at usability, accessibility and best practices on branding SharePoint public facing sites.
Citation preview
1
Branding Guidance for SharePoint
Kanwal KhippleEnterprise ArchitectNavantis
Audience
• Introduction to Branding– Designers– Developers– Information Workers
• Level 100
Who am I?• Enterprise Architect for Navantis• 5 years of SharePoint consulting experience• MVP for SharePoint Server
• Contact Details– http://www.kanwalkhipple.com– [email protected]– @kkhipple on twitter
– 416-888-7777
Welcome!
• What is Branding?• Why Brand SharePoint?• Real World Examples• New Features in SharePoint 2010• OOTB Customization• Tools for Branding• Gathering Requirements• Upgrade Guidance
6
What is Branding?
• Make SharePoint Not Look Like SharePoint• Manage your brand image• Consistent User Experience
Why Brand SharePoint?
What is SharePoint Branding?
• HTML tags• Images• Colors
• Fonts• Logos• Styles
http://www.wssdemo.com/livepivot/
WHAT’S NEWSharePoint 2010
The SharePoint 2010 User Interface
WCM Features• Browser Support• WSIWYG Editor• Dialog Boxes• Status Bar• Notifications• Themes• Server Ribbon• Rich AJAX Interactions• Managed Metadata Service• Tagging & Rating• Content Organizer• Client OM
What’s Involved?
• Taxonomy design• Information Architecture• Wireframes• Design• Branding• Page Layouts• Master Pages• HTML, CSS, JavaScript
DEMOSharePoint 2010
MASTER PAGESharePoint Terminology
Top Navigation
Content Frame
Footer
Master Pages
• 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
Pages using simple.master
• Login.aspx• SignOut.aspx• Error.aspx• ReqAcc.aspx• Confirmation.aspx• WebDeleted.aspx• AccessDenied.aspx
Other Master Pages
• Other miscellaneous master pages are generally not manipulated when branding a site.
• These include:
application.masterapplicationv4.masterdialog.masterlayouts.masterlayoutsv3.master
pickerdialog.masterrtedialog.mastersimple.mastersimplev4.master
mwsdefault.mastermwsdefaultv4.masteradmin.masterpopup.master
What’s new with Master Pages
Changes to Master Pages:• Placeholders the same between
content and application pages• Application (_layouts) pages use same
site master pages• Greater use of DIV/CSS layouts vs. Table
Layouts• XHTML Strict document type• Much better support for Accessibility• Cross-Browser support
CodePlex : Starter Master Page for SP2010http://startermasterpages.codeplex.com/
What has not changed:• Complex nested page
structures• Lots and lots of styles• Mostly same list of content
placeholders• Inconsistent Web Part markup
injection• Same default and custom
master page tokens
Custom Master Pages:• Copy V4.master and tweak• Start with Minimal or the
*Starter* Master Page
PAGE LAYOUTSharePoint Terminology
THEMESSharePoint Terminology
Anatomy of Themes• Location: 14\Template\Global\Lists\Themes• Packaged using Office Open XML format (.THMX)
Putting it All Together
DEMOSharePoint Master Pages
CUSTOMIZATION OPTIONS
Customization Options
• In-browser editing– E.g. Apply a different master page, hide and target
navigational links• SharePoint Designer– E.g. Create a new master pages, change the style
of the navigation• Visual Studio 2010– E.g. Create custom Web parts, build custom
workflows
3 Approaches to Branding
1. Out-of-the-box customization by selecting different themes
2. Customize an instance of a site template using SharePoint Designer
3. Customize a site by Site Definitions and Visual Studio
Master PagesThree ways to build the custom master pages:
1.From scratch1. Not recommended as SharePoint 2007 needs a
few placeholders to be present in the master page or else the pages will not work.
2.From minimal.master1. Not recommended for a collaboration intranet2. You want to use OOB features and controls
3.From default.master1. Recommended as it provides most of the
collaborative controls already present on the master page
2. Master page does have a learning curve though
Tools• SharePoint Designer 2010• Visual Studio 2010• Photoshop• Balsamiq Mockups• Notepad++
• Supported Browsers (http://bit.ly/sp2010browsers)– Internet Explorer 7 & 8 (32-bit)• IE Dev Toolbar (embedded in IE8)
– Mozilla Firefox 3.6• FireBug (addon to Firefox)
– Safari 4.04
Wireframes• Paper Prototyping Comes First• Wireframes Come Second and Must be
Shared
DEMOBuilding a site from scratch
UPGRADING YOUR DESIGNSSharePoint 2007 to SharePoint 2010
Visual Upgrade• Visual upgrade allows separation of data upgrade from UI upgrade
• The UI mode can be changed:– PSConfig during upgrade– Web Application– Site Collection– Site
• Default upgrade UI mode is V3• When upgrading a content database, there is
an optional parameter to preserve the old “V3” UI
• Allows controlling when and how you upgrade your users to the new Ribbon UI, and other new UX features
Visual Upgrade
1. Attach a WSSv3 content database– Preserve the V3 UI
2. Preview site in V43. Upgrade site to V44. Use PowerShell to revert site back to V3
ADVANCED TIPSSharePoint 2010
Accessibility• Built-in support for keyboard navigation• Web Content Accessibility Guidelines 2.0, WCAG 2.0, and set a
goal for Level AA.– perceivable, operable, understandable, and robust
• Proper use of heading structures (H1, DIV, SPAN, etc.)– informational, organizational, and navigational benefits
• Improved language support • Support for browser zoom settings and OS increase font sizes• Dramatically improved the cross-browser support - Doc Types
and specify CSS-standards rendering for the master pages• Rich text editor - clean markup and a function to convert its
content into XHTML.
Usability
Advanced Tips & Tricks
• Show content based on UI version– <SharePoint:UIVersionedContent runat="server"
UIVersion="<=3">
• Security controlled content– <Sharepoint:SPSecurityTrimmedControl runat="server" Permissions="ManageWeb">
• Warn users when they are using an unsupported browser– <SharePoint:WarnOnUnsupportedBrowsers runat="server"/>
DEMOSharePoint Advanced Tips
Performance
Goals• Reduce page weight
Techniques• Output Caching• Blob Caching• Ensure not downloading core.js etc for anonymous
users/delay-loading for authenticated.
Tools• YSlow
Performance
• CSS Sprites – Reduces number of images downloaded from the client browser – improves the overall page loading speed
• Consolidate JS and CSS files – multiple JS or CSS files into single large file – improve the overall resource load times
• Group CSS files by Browser type• Anonymous access for CSS, JS and image files
Performance
• Cache JS, CSS and image files in browser – Files hosted in SharePoint layouts folder can use
MakeBrowserCacheSafeLayoutsUrl() function to render unique url
• Minification of JS and CSS– removes extra characters and spaces in the JS & CSS files
to reduce the file size – improve the download speed
• Include JS files and CSS files in the header – all script references in head tag are loaded after the page
is loaded and references in body tag are loaded at the time page load
Professional SharePoint 2010 Branding and User Interface Design
• CSS• master pages• page layouts• SharePoint themes• XSLT• jQuery• Silverlight
Provides expert tips, techniques, and insights from the author team of SharePoint 2010 branding experts
SharePoint Branding
SharePoint can be transformed into whatever you want
http://[email protected]
@kkhipple
Your Feedback Is Very Important To Me
SharePoint Saturday San Diego 2011
Topic: SharePoint Branding Guidance
Thank you!