SharePoint 2010 Branding

Real World Branding with SharePoint 2010 Publishing Sites

http://msdn.microsoft.com/en-us/library/gg430141.aspx#Y13640

The most important source of information is the SDK. I can’t stress that enough. There is so much more documentation with this release than there was with 2007. However, we are all in the habit of looking to each other for information first. Researching the SDK and walking through the Development classes, even if you aren’t a developer. is an important step in understanding the complex relationships between the objects in SharePoint and ASP.NET.

Planning Strategy and Design

Visual Design

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

Usability

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

Wireframes and prototypes

• Mockflow – I love love love this web app. WIreframes, interactive flow and site map all at once.
• 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!

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

• Dealing with Background Images in Your Dialog Boxes – Heather Waterman
• :How to print SharePoint 2010 page without header and navigation - sharepoint-sandbox.com
• The Shiny New CSSRegistration Control in SharePoint 2010 - Buta No IE
• SharePoint 2010 CSS references in Master Pages - Erik Swenson

Master Pages

Starter Master Pages

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

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

• 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

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)