SharePoint Branding Build Test Checklist

During the creation of the CSS, Master Pages, and Page layouts its critical to stay on top of your Front End Development testing.

As you know many classes in SharePoint are shared classes so when you make a modification to one element you have to test, test, test.

Below are some helpful things to review before giving that oh so critical demo… Hopefully these will help you out during your development process and testing.

• Create and test all OOTB SharePoint templates
1. Publishing Sites
• Publishing Toolbar
• Page Layouts (All that are available)
2. My Sites
• My Profile
• Organization Hierarchy web part
• In Common with you web part
3. Team Sites
4. Meeting Workspaces
• Tabs
• Recurring Meeting Workspaces Quick Launch
5. Blog
• Unique Quick Launch
• Post date, title, content, and links
6. Wiki
• Functional Links (Edit, History, Incoming Links)
• Unique Quick Launch (Recent Changes)
• Last Modified
7. Search
• People search drop down options
• Search Results
• Advanced Search Link
• Advanced Search Page
8. Central Administration
• Don’t spend to much time on these
• Test as many SharePoint functions as you can
1. Fly Out Menu’s/Drop Downs
• My Links
• Top Navigation
• Site Actions
• Modify Web Part
• Quick Launch if enabled
• Multi Tier/level if enabled
• Document Item Drop Down
2. Button Hovers
• Search/Go
• Global Links (Top Links like My Links)
• SPLink (Welcome & Console Toolbar Buttons)
• Toolbar View Button
3. Quick Launch
• Headers
• List Items
• Selected headers/Items
• Tree View
4. Breadcrumbs
• Text
• Hyperlinks
• Carrots “>”
5. Toolbars
6. Calendar
• Date Picker
• Month View
• Week View
• Day View
• Current Day Indicators
7. Lists/Libraries
• Datasheet View
• Alternating item shade (ms-alternating)
8. Webpart
• Chrome/Title
• Border color/width if selected (ms-WPBorder)
• Separator Lines
9. Edit Page
• Webpart Zone Colors
• Drag and Drop Style
• Webpart Chrome/Title’s
• Advanced Webpart Gallery and Options
10. Admin Pages
• Site Settings
• List Forms
• Form Background (ms-authoringcontrols)
• Upload Document
• Error Pages
11. OOTB Themes
• If you are going to allow OOTB themes you will have to test, test, and triple test that all themes work and function as expected with your custom design…
12. Fonts/Colors
• Stick to system Fonts so that everyone gets the same experience. (Verdana, Tahoma, Arial, Etc)
• Page Titles
• Body Content
• Hyperlinks
• Hover Text
• Visited State
13. Images
• Teamsite Default Image
• Social Meeting Workspace Image
14. Customization/3rd Party
• Its kinda a given but any custom web parts, 3rd Party or custom controls implemented will need to have branding applied or tested before deployment onto prod servers.

I’m sure there are some that I missed but drop me a comment if you have some that I missed and I will add to the list above.

Rounded Corners in SharePoint

Rounded corners have become a staple in website design. But they come with a price. Don't get me wrong I really like the look of them and they really help soften the look of the site.

In most cases you can create this look by using the method below. Later on in this post I will highlight some of the things you can do and some of the things not technically possible without major custom development.

Design 1: Rounded corners to frame a site:

1. Open up your master page and add 1 <div> tag right before the ms-main table to represent the site container (This is used to position the site and give it its width)
2. Add 4 more <div> tags before the ms-main table to represent your 4 corners (top left, top right, bottom left, bottom right)
3. <div id="xyz-content-corner-tl">
   <div id="xyz-content-corner-tr">
   <div id="xyz-content-corner-bl">
   <div id="xyz-content-corner-br">
4. Add in the following to CSS attributes to represent the 4 corners

#xyz-content-corner-tl{
background-image: url(/_layouts/images/xyz/xyz_content_corner_tl.gif);
background-position:left top;
background-repeat: no-repeat;
background-color: #ffffff;
}
#xyz--content-corner-tr{
background-image: url(/_layouts/images/xyz/xyz_content_corner_tr.gif);
background-position:right top;
background-repeat: no-repeat;
}
#xyz--content-corner-bl{
background-image: url(/_layouts/images/xyz/xyz_content_corner_bl.gif);
background-position:left bottom;
background-repeat: no-repeat;
height: 100%;
}
#xyz--content-corner-br{
background-image: url(/_layouts/images/xyz/xyz_content_corner_br.gif);
background-position:right bottom;
background-repeat: no-repeat;
height: 100%;
}

Example: Please note that the shadow effect is a bit more complex and requires two more <div> tags to represent the right side repeat and the bottom repeat.

Design 2: Rounded corners to frame content

1. This approach can achieved the same way as per above with 4 <div> tags but just needs to included around the <asp:ContentPlaceHolder id="PlaceHolderMain" runat="server"> control within the master page.

Example:

Design 3: Rounded corners around individual web parts

1. Now this one has some tricky elements that I am still trying to work out.
2. My Original thought was to use the approach above and simply add the 4 <div> tags around each individual webpart zone in a page layout. But there is a catch…
3. Normally webpart zones are wrapped in a <td> that has an id of "_invisibleIfEmpty" There is some java script that basically hides that zone from rendering on the page if there is no content in it.
4. However if you place those 4 div tags within that <td> you would assume that it would still hide that zone. But no basically its like a buffer and that JavaScript no longer thinks that zone is empty and it shows it on the page even if there is no webpart in that zone. So you end up with something like below: Notice that below the two web parts on the right there are two empty white containers with nothing in them.

Example:

So all in all its fairly easy to add in rounded corners to different areas within your design by using the approach above but there is still a need to have individual web parts with a container all for themselves.

If anyone out there has any ideas on either modifying the JavaScript to ignore the div tags and hide the empty zones or have any other approaches that have worked for them please don't hesitate to comment.

Thanks!

IA and Branding Process Presentation [Video]

Click to watch the video presentation (36MB WMV), thanks to my friend Paul Galvin for taking the video.

Update: For some reason the link was not good. I have updated it and it should work now.

IA and Design Process Presentation Download!

I want to thank everyone for attending my presentation. It was a great success! I had a co-worker video record the session but it will take a little while to get that uploaded/edited for the masses.

Here is the link to my presentation. I have included notes on each slide for the dialog.

Download: http://cid-ed1a37150dabcd2d.skydrive.live.com/self.aspx/Public/IA%20and%20Branding%20Process%7C_ErikSwenson.pptx?ccr=80

Thanks again, enjoy and please add your comments to this post!

User Experience Design Process: Teaser

As a teaser, I would like to provide a sample of my upcoming session at the SharePoint Summit 2009.

Roles:

	Information Architecture –Much of the interface navigation and page structure will be driven by the Information Architect.
	Designer – Skill depends on several factors, if leveraging native features, skill is very dependent on knowledge of SharePoint.
	SharePoint Front-End Development – MOSS-FED highly specialized skill set, especially if doing CSS-based changes.

UXD Process:

Agenda for SharePoint Summit 2009 Presentation

Here is the final agenda for my presentation for the SharePoint Summit in Montreal on April 8th from 9:15 a.m. - 10:00 a.m. I only have 45mins to get it all in so wish me luck.

• Anything is possible
• Roles
• Design process
  • Gathering Branding Requirements
  • Create Sitemap & Navigation
  • Create Wireframes
  • Create Visual Design
• Tools for building the design
• Implementation methods options
• Additional guides/references
• Q/A

Note: I will post my slide deck after the conference. Thanks for whoever posted that question in the comment area.

SharePoint Summit 2009 Presentation

As I prepare my slides and agenda for my presentation at the SharePoint Summit in Montreal Canada I would like your input.  Please provide your feedback/comments and if you plan on attending my session!

"IA and Branding Process: Sketches to Wireframes to Hi-Fidelity Designs".

• Methods to gathering requirements
• Benefits of a creative brief and Style guide
• Understand what functional concepts are and how they can be used
• Explore options on creating wireframes
• Creating the Design Composition (Differences between design adaptation and custom design)
• Building the design (CSS, Images, Master Pages, Page layouts, testing for multiple browsers and Mobile devices)

Thanks!