Your SlideShare is downloading. ×
SharePoint Branding Guidance @ SharePoint Saturday Redmond
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

SharePoint Branding Guidance @ SharePoint Saturday Redmond

3,260
views

Published on

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.

Published in: Technology

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,260
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
106
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • 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.
  • Transcript

    • 1. 1
      SharePoint Branding Guidance
      Kanwal Khipple
      Enterprise Architect
      Navantis
    • 2. Audience
      Introduction to Branding
      Designers
      Developers
      Information Workers
      Level 100
    • 3. 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
    • 4. Welcome!
      What is Branding?
      Why Brand SharePoint?
      Tools for Branding
      New Features in SharePoint 2010
      Real World Examples
      OOTB Customization
      Upgrade Guidance
      Recommendations
    • 5.
    • 6. What is Branding?
      HTML tags
      Images
      Colors
      Fonts
      Logos
      Styles
    • 7.
    • 8.
    • 9. Why Brand SharePoint?
    • 10. Why Brand SharePoint?
      Make SharePoint Not Look Like SharePoint
      Manage your brand image
      Consistent User Experience
      10
    • 11.
    • 12.
    • 13. http://www.wssdemo.com/livepivot/
    • 14. What’s New
      SharePoint 2010
    • 15. The SharePoint 2010 User Interface
    • 16. 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
    • 17. 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.
    • 18. 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
    • 19. Wireframes
      Paper Prototyping Comes First
      Wireframes Come Second and Must be Shared
    • 20. DEMO
      Balsamiq Mockup
    • 21. What’s Involved?
      Taxonomy design
      Information Architecture
      Wireframes
      Design
      Branding
      Page Layouts
      Master Pages
      HTML, CSS, JavaScript
    • 22. MASTER PAGe
      SharePoint Terminology
    • 23. Top Navigation
      Content Frame
      Footer
    • 24.
    • 25. Master Pages
    • 26. Pages using simple.master
      Login.aspx
      SignOut.aspx
      Error.aspx
      ReqAcc.aspx
      Confirmation.aspx
      WebDeleted.aspx
      AccessDenied.aspx
    • 27. 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
      • 28. Lots and lots of styles
      • 29. Mostly same list of content placeholders
      • 30. Inconsistent Web Part markup injection
      • 31. Same default and custom master page tokens
      Custom Master Pages:
      Copy V4.master and tweak
      Start with Minimal or the *Starter* Master Page
    • 32. DEMO
      SharePoint Master Pages
    • 33. PAGe Layout
      SharePoint Terminology
    • 34. Page Layouts
    • 35. Putting it All Together
    • 36.
    • 37. Themes
      SharePoint Terminology
    • 38. /* [ReplaceColor(themeColor:"Dark2")] */ color:#3b4f65;
    • 39. CUSTOMIZATION OPTIONS
    • 40. 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
    • 41. 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
    • 42. 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
    • 43. DEMO
      Building a site from scratch
    • 44. UPGRADING YOUR DESIGNS
      SharePoint 2007 to SharePoint 2010
    • 45. 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
    • 46. 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
    • 47. ADVANCED TIPS
      SharePoint 2010
    • 48. 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” …/>
    • 49. DEMO
      SharePoint Advanced Tips
    • 50. 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
    • 51. 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
    • 52. Professional SharePoint 2010 Branding and User Interface Design
      Provides expert tips, techniques, and insights from the author team of SharePoint 2010 branding experts
    • 59. Secret to Success in Branding
      Fail to plan, is a plan to fail
      - Unknown
    • 60. 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!