sharepoint 2010 branding

This page contains a list of resources useful for SharePoint 2010 Branding, User Interface, Design and Web Content Management solutions.

As I was researching SharePoint 2010 Design for our new book Beginning SharePoint Designer 2010 (wrox), I collected several links to good resources. I hope you find them as helpful as I did. I tried to bucket them in order of design/dev cycle. Why? Probably because I’m an Information Architect at heart. No reason really.

 

Key Resources

• The most important source of information is the SDK.
• The other critical SharePoint 2010 Branding & Customization resource is MSDN’s Real World Branding with SharePoint 2010 Publishing Sites

Planning and Design

Usability

• 20 Do’s and Don’ts of Effective Web Design
• Introduction to Good Usability
• 10 Useful Usability Findings and Guidelines
• Universal Usability Guidelines

Information Architecture

• Brief overview: “Information Architecture Deliverables”
• Information Architect by Peter Morville

Wireframes and prototypes

• Mockflow – I love love love this web app. WIreframes, interactive flow and site map all at once.
• Adobe Illustrator - I recommend Adobe Illustrator for the fastest wireframes with loads of content.
• Notable – I use this app religiously. Works so well for remote discussions about visual requirements.
• SharePoint 2010 Visio Stencils by John Chapman

Web Content Management

• WCM improvements in SharePoint 2010 – Mike Ferrara
• Content Strategy – Kristina Halvorson
• SharePoint 2010 Web page planning worksheet – Technet (What a gem for planning SharePoint 2010 publishing sites. Much better than SharePoint 2007’s page planner!
• Plan Pages in SharePoint -Technet
• IntranetFactory – Get a Content Inventory of your SharePoint site
• Jumpchart – a great tool to give to your marketing team to work on content while you are building your SharePoint solution.  It may sound hacky but it keeps marketing out of a site that isn’t yet finished. (that’s good for everyone)

User Interface Design

• SharePoint 2010 Layered Photoshop File! – Erik Swenson
• The Pursuit of Interface Design Simplicity -Luke Wroblewski
• Visible Narratives: Understanding Visual Organization -Luke Wroblewski
• Common Visual Design Misconceptions – Luke Wroblewski

Implementation

 

Microsoft SharePoint Designer 2010

Downloads:

• SharePoint Designer 2010 (32 bit)
• SharePoint Designer 2010 (64 bit)

CSS and HTML Resources

SharePoint 2010 requires a better understanding of CSS than you needed in SharePoint 2007. You really should be able to plan your css. If you can use the box model on purpose. If you know how to clear a float. If you understand a stacking index, you are okay. If you don’t, practice on plain old HTML first. Build your own HTML from scratch and style it. Draw a design and build it from scratch Plan it.

• XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition) -w3.org
• Grid Builder – developer.yahoo.com/yui
• CSS Box Model – css-tricks.com (Advanced CSS design patterns are used in SP2010. You need to understand the impact of changing a value in one place.)
• CSS Overflow (you need to know the impact of this property)
• CSS Overflow (css-tricks.com.)

CSS Sticky Footer – You may find yourself struggling to get your footer to stay at the bottom of your page. If you really want this to be a part of your site, test the layout and structure all alone to troubleshoot. Test with and without content on as many site templates as possible. CSS Sticky Footer, CSS Sticky Footer II, CSS Sticky Footer III

• JS Sticky Footer If all else fails, use this JS Sticky Footer. Be sure to test your site with real content!! If it’s not in the body of the site, look to the CSS overflow as the culprit.
• Understanding Floats (another advanced technique but helpful alternative to overflow)

Themes

• SharePoint 2010 Themes – Erik Swenson
• How the SharePoint 2010 Theming Engine Works – Buta No IE
• SharePoint 2010 keeps copy of modified theme

General SharePoint CSS and Markup

• SharePoint 2010 CSS Reference chart – Heather Solomon
• The Shiny New CSSRegistration Control in SharePoint 2010 – Buta No IE
• SharePoint 2010 CSS references in Master Pages – Erik Swenson
• https://www.nothingbutsharepoint.com/sites/eusp/Pages/Use-font-face-in-Rich-Text-Editor-of-SharePoint-2010.aspx

SharePoint Navigation

• Adding Navigate Up breadcrumb on your search center
• Very cool Mega Drop Down Navigation

Master Pages

Starter Master Pages

• Starter Master Pages on CodePlex – Randy Drisgill
• Starter-Master-2010-v1.0.txt – Kyle’s SharePoint Karate, theSUG.com
• Fixed Ribbon Starter Master Page – Kyle’s SharePoint Karate, theSUG.com
• Microsoft’s SharePoint 2010 Starter Master Page – MSDN
• GreenShade Free Master Page - TopSharePoint.com

Master Page Tips and Tricks that will save your ARSE

• Fixed Width Master Pages in SharePoint 2010 – Elumination Blog
• How to Create a Fixed-Width 3 Column layout – Tom Wilson, Styled Point
• Imtech Master Pages and Page Layouts Extension – Imtech
• Centered layout with CSS & v4.master on SharePoint 2010 – SharePoint Blues

Simply Cool Tips and Tricks

• Image slideshow with CQWP in SharePoint 2010 - Christian Stahl
• Sing Chan on general and SharePoint 2010 branding – Sing Chan
• Location aware content rollup – Serve’s SharePoint Blog
• Display Dynamic Messages in the Status Bar – Tobias Zimmerman
• Dealing with Background Images in Your Dialog Boxes – Heather Waterman
• How to print SharePoint 2010 page without header and navigation – sharepoint-sandbox.com

Upgrading 2007 Designs

• Upgrading an Existing Master Page to the SharePoint Foundation Master Page – MSDN

Ribbon

• Some SharePoint 2010 User Interface Terms – Mindsharp
• SharePoint 2010 developer – UI Enhancements – Ted Pattison
• Architecture of the Ribbon – msdn
• Customizing the Ribbon – msdn
• Customizing the Ribbon – Part I– Chris O’Brien Sharepointnutsandbolts.com
• Ribbon Customization Part 2 – Adding Items – Chris O’Brien Sharepointnutsandbolts.com
• Ribbon customizations – dropdown controls, Client Object Model and JavaScript Page Components – Chris O’Brien Sharepointnutsandbolts.com
• Enabling a Button on the Ribbon Based on Selection – Blogs.MSDN.com/SharePoint
• Creating a Custom Ribbon Tab in SharePoint 2010 – SharePoint Solutions.com
• Un-Floating the Ribbon in custom Master Pages – Randy Drisgill
• Ribbon Customization: Changing Placement, Look and Behavior – Tom Wilson, Styled Point
• Customizing Ribbon Positioning – Jonathan Kern UX Developer, SharePoint Foundation
• Code to Hide the Ribbon and Site Actions Menu for Anonymous Users – Elumination (Useful for public facing SharePoint sites)

Mobile

• Blog Post: SharePoint 2010 Mobile Devices and Scrolling
• Branding Tip #6 – Mobile Views

Templates, Tools & Themes

• 2 Free templates for SharePoint 2010 Publishing sites
• SharePoint 2010 Themes

SharePoint Design Galleries

• Top SharePoint
• WSS Demo (Live Pivot View… Very cool)

Videos

• Creating complex SharePoint 2010 ribbon elements – Yaroslav Pentsarskyy
• Getting started with SharePoint 2010 ribbon – Yaroslav Pentsarskyy

Developer Links

• Customize the ribbon programmatically from web parts and field controls – (sharepointnutsandbolts .com – Chris Obrien)
• Creating a SharePoint 2010 Ribbon extension – part 1 (Wictor Wilen)
• Creating a SharePoint 2010 Ribbon extension – part 2 (Wictor Wilen)

Web Analytics in SharePoint 2010

As part of SharePoint Server 2010, there is a new set of features to help you collect, report, and analyze the usage and effectiveness of your SharePoint 2010 deployment – whether it’s used as an internal or external web portal, a collaboration tool or a document and records management repository.  These features are part of the Web Analytics capabilities of SharePoint 2010.

This blog post will give you more insight into the enhanced Web Analytics features that built into SharePoint 2010. This post will provide an overview of the new Web Analytics features.

Overview

 

Web Analytics Reports

In SharePoint 2010, they improved the set of Web Analytics reports that are available out-of-the-box, which will provide insights into the behavior of users of your SharePoint sites.  There are three categories of reports that you will find:

• Traffic reports: These reports provide metrics such as:
1. How much traffic your site gets (Number of Page Views);
2. Who visits your sites (Top Visitors);
3. How visitors arrive at your site (Top Referrers);
4. Daily Unique Visitors, Top Destinations, Top Browsers, etc;
• Search reports: These reports give you insight into what users are searching for, for example:
1. How many times users searched (Number of Queries);
2. What were the most used search terms (Top Queries);
3. What queries have high failure rates (Failed Queries);
4. Best Bet Usage, Search keywords, etc;
• Inventory reports: These reports display key metrics regarding the inventory of your sites:
1. What is the total disk drive space user (Storage Usage);
2. How many sites exist (Number of Sites);
3. Top Site Product Versions, Top Site Languages, etc;

These reports aggregated at the following levels:

1. Per web application in the farm
2. Per site collection
3. Per site
4. Per search service application

Out-of-the-box, these reports are visible to Administrators at each level.  For example, site-level reports are available to Site Administrators of those sites.  We have also added a new permission level, “View Web Analytics Data,” that will allow users to access these reports without having to give them Administrator privileges.

You can access Web Analytics reports by going to Site Actions -> Site Settings.  Under the Site Actions heading you will see two links, Site Web Analytics Reports and Site Collection Web Analytics Reports. 

When you click on either link, you are taken to an overview page that shows you key metrics for your site.  You can then drill down to other reports by clicking on them on the left navigation. You can also change the date range for the reports by clicking on the Analyze tab on the Ribbon.

Custom Web Analytics Reports

The out-of-the-box reports are useful to get a general understanding of what is happening on your sites.  However, they made it easy for you to get a deeper level of analysis, or to simply create your own reports.  To get started, click on the Customize Report button under the Analyze tab in the Ribbon.  Clicking this button will export the data contained in this report to Excel.  Excel is a power analytics tools and makes it easy for non technical users to add your own charts, set specific filters, and combine data from multiple reports.  In addition, the data within Excel is refreshable, which means that, once you customize the report, it will always be up-to-date with the latest data.  To get more details on the great new features in Excel 2010 for building charts, reports and pivot tables, take a look at the Excel Team blog.

Web Analytics Workflows

Web Analytics Workflows is a powerful new feature set that enables you to get reports sent out either on a schedule or when specific conditions are met.  For example, you can set them up to receive an email every time the total number of pages views drop by 80% week over week.

To setup a Web Analytics Workflow, go to the Web Analytics report that you are interested in and click on Schedule Alerts or Reports on the Analyze tab in the Ribbon.

Clicking this button will guide you through a series of steps to create your Workflow.

Best Bets Suggestions

Best Bets allow Search Administrators to determine what the most relevant search result is for a given keyword. Up until now, Search Administrators had to look at different reports and data to determine which best bets needed to be added. That process is no longer necessary as SharePoint 2010 periodically sends out suggestions for new Best Bets using all the search metrics it has collected. Now, Search Administrators can simply look through each of the Best Bet suggestions and easily accept or reject them.

To access the Best Bet Suggestions, go to Site Actions, click on Site Collection Web Analytics Reports, and the click on Best Bets Suggestions on the left navigation.

Web Analytics Web Part

They created a new web part, the Web Analytics Web Part, targeted at Site Managers. This new Web Part is an end-user facing Web Part that can be easily inserted into any page on your site.  It can be configured to display the ‘most viewed content’ or the ‘most frequent search queries’ in the site. The data in the Web Part is continuously refreshed as new content or new search queries become more popular.

To use this Web Part, go into the Edit mode of one of your Site Pages and click on any place you can add a Web Part.  Then, from the Insert tab on the Ribbon, click on Web Part.  Finally, click on the Content Rollup category and select the Web Analytics Web Part.

After you have inserted the Web Analytics Web Part, you can then configure it to display the data you are interested in.

Conclusion

Using the new Web Analytics features in SharePoint 2010, you will be able to get a deeper understanding of what users are doing, what they want from your site and how you can tailor the SharePoint experience to bets meet their needs.   Keep an eye out for future posts where we will delve deeper into each of the features mentioned above.

Behind the Mobile View in SharePoint 2010

Mobile view in SharePoint 2010 has been greatly enhanced from SharePoint Server 2007. Now Excel, Word and PowerPoint files can be viewed in mobile browsers directly. But, there’re so many different mobile browsers (even it may be the same browser, considering the experience on different phone models, the capability maybe vary), and new devices are coming out every month, what kind of supportability will SharePoint 2010 provide?

To answer this question, let’s go over how the mobile view is created by SharePoint. It is quite similar to 2007, but a few enhancements do help with the experience.

When user try to browse SharePoint 2010 site from his/her phone, the mobile browser submits a HTTP GET request to the website. In this request, a User Agent string is attached so the website can identify the browser and even the phone model. SharePoint analyzes this UA string, if it is a phone or mobile device, SharePoint will redirect the browser automatically to the mobile view and render the view based on the capability of the browser/phone type. A browser definition file is needed in this process to let SharePoint know what this browser can do.

Take one of my SharePoint 2010 farm as an example.

The browser definition file of a SharePoint Web Application which listening port 80 by default locates at

C:\inetpub\wwwroot\wss\VirtualDirectories\80\App_Browsers\compat.browser


In this file, you can find a very big list of different browsers and phone models. The schema of this file can be found in .Net Framework reference: Browser Definition File Schema (browsers Element)

Sample phone is AT&T HTC Fuze, it is also called HTC Touch Pro, or T7272. IE6 Mobile is the default browser. Here’s the section for it:

<!-- IE Mobile 6 plus browser -->
<!-- note: some IE Mobile 6 devices call itself as IEMobile 7+ -->
<!-- sample UA "HTC_Touch_Pro_T7272 Mozilla/4.0 (compatible; MSIE 6.0; Windows CE; IEMobile 7.11)" -->
<!-- sample UA "SAMSUNG-SGH-i908/1.0 Release/03.07 Browser/IE6 Profile/MIDP-2.0 Configuration/CLDC-1.1 (compatible; MSIE 6.0;
Windows CE; IEMobile 7.11)" -->
<browser id="IEMobile6Plus" parentID="Mozilla">
<identification>
          <userAgent match="Windows CE" />
          <userAgent match="IEMobile (?'version'((?'major'([6-9])+)(?'minor'\.\d*)))" />
      </identification>
      <capabilities>
          <capability name="browser"                              value="IE Mobile" />
          <capability name="canInitiateVoiceCall"                 value="true" />
          <capability name="isMobileDevice"                       value="true" />
          <capability name="javascript"                           value="true" />
          <capability name="optimumPageWeight"                    value="1500" />
          <capability name="tables"                               value="true" />
          <capability name="version"                              value="${version}" />
      </capabilities>
  </browser>

As a SharePoint Administrator, you can add more browsers definitions into the file. These definitions can also be updated by SharePoint updates.

Here’s the render difference example between a decent big touch screen phone and a Nokia 3120 (a 6 years old typical non-touch screen S40 phone). Please note this is not a real one – I changed my browser’s user agent to let SharePoint believe it’s a Nokia 3120.

(Left – modern touch screen mobile browser experience; Right – Nokia 3120 )

Home page – despite the styles difference, the text content on the page is not displayed directly on 3120. It can be accessed through button 1 – Show text only.




Excel Mobile Viewer commands – it shows more rows and columns to fit into the modern phone screen.




Don’t forget to check out Mobile administration section on TechNet!

Install MOSS 2007 & WSS 3.0 on Windows Server 2008 R2

Windows Server 2008 R2 RC is avaliable several days ago. You may ask questions: What if I want to install WSS/MOSS on Windows Server 2008 R2? Is that supported?

The answer: WSS/MOSS RTM & SP1 is not supported on WS2008R2. But with SP2, it is supported. If you try to run the installer without SP2 slipstreamed, it would be blocked and you cannot continue. Meanwhile, if you want to use SQL Server 2008, you will also need to apply SQL Server 2008 SP1 on it after installation.




So slipstream build of WSS and MOSS SP2 is required. WSS SP2 slipstream build can be found here: x86 x64. There’s no slipstream build for MOSS so you need to create your own one. Here’s a quick guide:

Remove all stuff inside the Updates folder of your MOSS installation directory. Download both wss and moss SP2 packages, extract them in command line using /extract:drive\path option,  and then put all into the Updates folder. Delete Wsssetup.dll, this is important. Otherwise only WSS SP2 will be installed.  

More details can be found on TechNet.

With SP2 slipstreamed, you can run the installer without any problem now. After installation, site version will be 12.0.0.6421.

 

 Windows Server 2008 SP2 is also supported by MOSS/WSS SP2.