• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
SharePoint Branding Guidance @ SharePoint Saturday Redmond
 

SharePoint Branding Guidance @ SharePoint Saturday Redmond

on

  • 3,628 views

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 ...

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.

Statistics

Views

Total Views
3,628
Views on SlideShare
3,622
Embed Views
6

Actions

Likes
0
Downloads
99
Comments
0

1 Embed 6

http://www.linkedin.com 6

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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.AUDIENCE: Developers - Power UsersTOPICS: Information Architecture - Case Studies - Tools and Technics100 - Introductory Track
  • Site content is not branding.  Branding is anything that is used to implement the "skin" of the user interface of the site. Branding assets can be master pages, images, or CSS files—elements that implement a corporate brand or theme. 
  • Why brand sharepoint?Builds user loyaltyConnects people emotionallyDelivers your message clearly
  • The cherry is a brand’s promise. The ice cream represents all your products and services. The apples are the corporation itself—the corporate environment. The crust is the structure of your company—not the building (although how it looks is part of branding) but your systems.
  • Hawaiian Air Website http://www.hawaiianair.comCase Study: How we did it http://is.gd/gvbo
  • I have taken some samples from Ian Morrish’s WSS Demo Top 100 Best Looking Public SharePoint sites. My intention of putting these slides in is to give you a feeling that anything is possible. However, it’s not to say that every sharepoint site should have a wiz and bang effect.It really depends on the user base and how the site is going to be used.You would not want to put a 600px high header in a corporate internal website for 120 thousand users who really just care about getting access to their project documents.
  • Launch
  • Google Chrome
  • http://mobile.tutsplus.com/tutorials/mobile-design-tutorials/5-steps-for-wireframing-and-paper-prototyping-mobile-apps/
  • Show the sharepoint demo siteCreate a new siteActivate Wiki Page home page featureChange page layout to Three columns with headerAdd items to Top Link BarChange Permissions – allow anonymous accessSite settings > Users and Permissions > Site Permissions >
  • Now that pages are the topic of discussion, master pages and a little branding fits in too. SharePoint 2010 ships with a number of master pages. Important topics to discuss on this slide is how application pages can now also make use of branded master pages, and how there is a default.master that ships the (non-fluent) v3 UI for backwards compatibility.SharePoint 2010 brings a few new master pages that you may want to know about.  There are additional master pages to accommodate both the old and new versions of UI.  There are also some simplified pages to take note in.The first master page we will talk about is v4.master.  This is the default team site master page used with version 4 (obviously) of the UI.  This will be the master page you typically use. It provides the ribbon bar and all of the other new visual UI changes such as the site actions menu on the left side.If you did an upgrade to SharePoint 2010 and haven’t transitioned to the new UI yet, the old master page is still in default.master.  This looks just like the master page you use in SharePoint v3 today.  It doesn’t have the ribbon bar and the site actions menu is still on the right side.The search pages by default now use minimal.master.  This is a really slimmed down master page with next to nothing on it.  It doesn’t even have navigation.  I’m not sure why they opted to use this page in Search Center, but I think it provides and issue with people trying to leave the search center.  The Office Web Applications also use this master page but that makes a little more sense because it provides more screen real estate.The last page I will mention is simple.master.  This page is used for login and error pages.  From what I understand, it can’t be customized (I have no idea why), but it can be replaced.I hope this helps if you were curious about the new master pages.  I’ll also remind you again that application pages can also now make use of any branded master pages you might have created.  I’ll also point out that the master pages all use properly formed XHTML although I am not sure about default.master.  I will check that when I get a chance.Types of SharePoint 2010 Master Pages This section was largely derived from Quick Overview of Master Pages in SharePoint 2010 by Corey Roth v4.masterDefault team site master page. Provides ribbon bar and other UI changes.Characteristics·         Site actions are updated for 2010 and appear on left.·         Ribbon bar is availabledefault.masterSites upgraded from SharePoint 2007 use this unless they are changed to use a v4 version.Characteristics·         Site actions on right side and are same as SharePoint 2007 version·         No ribbon bar.minimal.masterMaster page contains almost nothing. It is used by the Search Center and Office Web Applications. This master should not be confused with minimal master pages from 2007 which were trimmed down custom master pages developed by users. The minimal.master is now an out-of-the box master page. These trimmed-down custom master pages are commonly referred to as Starter Master Pages in SharePoint 2010. Characteristics of minimal.masterNo navigation includedStarter Master PagesCommonly referred to as “minimal master pages” in SharePoint 2007, these quick start pages are created by developers to better enhance their ability to quickly create and customize a functional master. Sources for Starter Master PagesStarter Master Pages for SharePoint 2010 by Randy Drisgrillsimple.masterThis master is used by login and error pages. To customize these pages, a replacement page must be created and stored in the _layouts directory on the server. For more information see Default Master Pages in SharePoint  on MSDN.Pages using simple.master·         Login.aspx·         SignOut.aspx·         Error.aspx·         ReqAcc.aspx·         Confirmation.aspx·         WebDeleted.aspx·         AccessDenied.aspxOther Master PagesOther miscellaneous master pages are generally not manipulated when branding a site. These include:·         application.master·         applicationv4.master·         dialog.master·         layouts.master·         layoutsv3.master·         pickerdialog.master·         rtedialog.master·         simple.master·         simplev4.master·         mwsdefault.master·         mwsdefaultv4.master·         admin.master·         popup.master
  • Create new master pageChange page layoutShow theme menu and default theme selected works for our scenario
  • http://hermansberghem.blogspot.com/2010/04/2010-how-to-apply-corporate-branding.html?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+HermansBerghem+%28Serv%C3%A9%27s+Sharepoint+blog%29&utm_content=Google+Reader/* [ReplaceColor(themeColor:"Dark2")] */ color:#3b4f65;
  • Use existing 2007 Master PageStart from ScratchUpgrade Master Page
  • http://www.sharepointnutsandbolts.com/2009/06/my-checklist-for-optimizing-sharepoint.html
  • CSS Sprites - are built by grouping small images into one large image and referring part of the image using CSS class. This reduces number of images downloaded from the client browser and improves the overall page loading speed. More details on CSS sprites can be found at http://css-tricks.com/css-sprites/. Since, CSS sprites are not supported in IE6, it cannot be used in organizations that still support IE6.Consolidate JS and CSS files - Since number of HTTP requests are more expensive than downloading single large file, consolidating multiple JS or CSS files into single large file would improve the overall resource load times. Also, we observed that combining most commonly used files together yielded better performance (combining too many files may adversely impact the download speed & processing performance due to large file size).Group CSS files by Browser type - Since, browser type is unique for each customer request, we observed it as the best way to combine the commonly used CSS files. Also, CSS expressions were avoided due to performance concerns.Anonymous access for CSS, JS and image files - Since NTLM requests require at least one additional roundtrip (typically for 401 unauthorized responses), enabling anonymous access to unsecure branding resources reduces the number of roundtrips and improves the page download speeds.Also, when SharePoint return “401 unauthorized” response, it includes the entire Error page response (see in Fiddler), reducing the size of “401 unauthorized” page would reduce the response payload and reduce bandwidth utilization.Cache JS, CSS and image files in browser - Since SharePoint supports this natively, no additional work is required to cache the resource files. However, if the resource files are dynamic in nature (changes with releases) then these resources should be accessed using unique querystring to invalidate the browser cache.In our implementation, to ensure unique query string for JS & CSS files, a simple HTTP handler was implemented to render unique query string based on file checksum. Files hosted in SharePoint layouts folder can use MakeBrowserCacheSafeLayoutsUrl() function to render unique url.Avoid Minification of JS and CSS - Minification removes extra characters and spaces in the JS & CSS files to reduce the file size and to improve the download speed. However, when the file is compressed, the minified file has little or no change in the download. Also, a minified file is harder to troubleshoot than a regular file. So, Minification was avoided for better maintainability.Include JS files and CSS files in the header - Since browser interpret HTML head content and body content differently, i.e., 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, reducing the referenced content in body improves the page rendering experience. This is achieved - by referencing all required scripts at the time of page load in body tag and rest of them in the head tag. CSS files are always referenced in head tag.

SharePoint Branding Guidance @ SharePoint Saturday Redmond SharePoint Branding Guidance @ SharePoint Saturday Redmond Presentation Transcript

  • 1
    SharePoint Branding Guidance
    Kanwal Khipple
    Enterprise Architect
    Navantis
  • 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
    kanwal@khipple.com
    @kkhipple on twitter
    416-888-7777
  • Welcome!
    What is Branding?
    Why Brand SharePoint?
    Tools for Branding
    New Features in SharePoint 2010
    Real World Examples
    OOTB Customization
    Upgrade Guidance
    Recommendations
  • What is Branding?
    HTML tags
    Images
    Colors
    Fonts
    Logos
    Styles
  • Why Brand SharePoint?
  • Why Brand SharePoint?
    Make SharePoint Not Look Like SharePoint
    Manage your brand image
    Consistent User Experience
    10
  • http://www.wssdemo.com/livepivot/
  • What’s New
    SharePoint 2010
  • The SharePoint 2010 User Interface
  • WCM Features
    Better Browser Support
    WSIWYG Editor
    Dialog Boxes
    Status Bar
    Notifications
    Themes
    Server Ribbon
    Rich AJAX Interactions
    Managed Metadata Service
    Tagging & Rating
    Content Organizer
    Client OM
  • Accessibility Improvements
    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.
  • 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
  • DEMO
    Balsamiq Mockup
  • What’s Involved?
    Taxonomy design
    Information Architecture
    Wireframes
    Design
    Branding
    Page Layouts
    Master Pages
    HTML, CSS, JavaScript
  • MASTER PAGe
    SharePoint Terminology
  • Top Navigation
    Content Frame
    Footer
  • Master Pages
  • Pages using simple.master
    Login.aspx
    SignOut.aspx
    Error.aspx
    ReqAcc.aspx
    Confirmation.aspx
    WebDeleted.aspx
    AccessDenied.aspx
  • 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
    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
  • DEMO
    SharePoint Master Pages
  • PAGe Layout
    SharePoint Terminology
  • Page Layouts
  • Putting it All Together
  • Themes
    SharePoint Terminology
  • /* [ReplaceColor(themeColor:"Dark2")] */ color:#3b4f65;
  • 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
    Out-of-the-box customization by selecting different themes
    Customize an instance of a site template using SharePoint Designer
    Customize a site by Site Definitions and Visual Studio
    Enterprise solutions
    Multi-server farm
  • Master Pages
    Three ways to build the custom master pages:
    From scratch
    Not recommended as SharePoint 2007 needs a few placeholders to be present in the master page or else the pages will not work.
    From minimal.master
    Not recommended for a collaboration intranet
    You want to use OOB features and controls
    2BCodePlex: Starter Master Page for SP2010
    http://startermasterpages.codeplex.com/
    From default.master
    Recommended as it provides most of the collaborative controls already present on the master page
    Master page does have a learning curve though
  • DEMO
    Building a site from scratch
  • UPGRADING YOUR DESIGNS
    SharePoint 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
    Attach a WSSv3 content database
    Preserve the V3 UI
    Preview site in V4
    Upgrade site to V4
    Use PowerShell to revert site back to V3
  • ADVANCED TIPS
    SharePoint 2010
  • Advanced Tips & Tricks
    Show content based on UI version
    <SharePoint:UIVersionedContentrunat="server" UIVersion="<=3">
    Security controlled content
    <Sharepoint:SPSecurityTrimmedControlrunat="server" Permissions="ManageWeb">
    Warn users when they are using an unsupported browser
    <SharePoint:WarnOnUnsupportedBrowsersrunat="server"/>
    Remove specific content from Search Results
    Add noindexcss class to specific content
    <div class=“noindex” …/>
  • DEMO
    SharePoint 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
    Anonymous access for CSS, JS and image files
    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
  • 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
  • Secret to Success in Branding
    Fail to plan, is a plan to fail
    - Unknown
  • Your Feedback Is Very Important To Me
    SharePoint Saturday Redmond 2011
    Topic: SharePoint Branding Guidance
    http://www.kanwalkhipple.com
    kanwal@khipple.com
    Twitter @kkhipple
    @sharepointbuzz
    Thank you!