UX & IA Design Thinking

Like many of you out there, you have more then 1 hat. I have set a goal for myself to have a good understanding of all aspects of consulting and SharePoint with an addition to a few Specialties. So here are my hats, drop me a comment with yours. Senior Consultant : Attend sales calls, proposal creation, requirements gathering, knowledge transfers, etc.. SharePoint Administrator: Creating, Configuring, and Troubleshooting SharePoint systems. SharePoint IA (Information Architecture): Taxonomy, Wireframe's, Layouts, Navigation. SharePoint Branding: Visual Design, CSS, Photoshop, Master Pages, Page Layouts SharePoint Governance: Gathering, Defining, and Delivering tailored plans. Also includes Communications, Vision, and Road Maps. Mentor/trainer/Contributor: Help contribute to the community and increase productivity and delivery standards. SharePoint Application Migration: Help analyze applications and function for migrations.

One of the things I have noticed is that if you throw out the word "Governance" you have some people say they don't have it but think it might be useful, and others who just run for d-hills. Its a normal reaction for people to not want restrictions or other people telling them how to use a system. But all in all it's best to have one. Within this post I would like to break down some of the common elements that you might see in a SharePoint Governance Plan. Hopefully this will make it easier for scheduling meetings and for getting everyone on the same page. I have broken out the following meetings into 4 sections: In my previous post about governance I stated that these plans are basically 1/2 Roles and Responsibilities and 1/2 Policies and Procedures . Please note that the time dedicated for each one of these meetings are estimations and should not be taken as written in stone. Meeting #1: Overview Meeting #2: People Meeting #3: Support Meeting #...

There are some things in SharePoint that you just have to take a second to shake your head in disbelief on why it was built that way. In most cases if you have been working with SharePoint as long as I have your perception on what is normal is a little skewed... To this point on many of my designs I have worked around this little gem. In most cases it does not effect the designs or I could create a simple fix for it. One of the functions of a publishing site the is not available for a WSS site is the  "Page Editing Toolbar". This toolbar is only suppose to be visible if you either click on Site Actions > Edit page, or Site Actions > Show Page Editing Toolbar. This is technically not the case. If you look at the screenshot below you will see that there is a 1px high by 100% wide background color of #79a7e3 from the toolbar showing through into the design in normal mode: Normally you would think this would be a border bottom to the main navigation but it is not....

Just because I work for EMC does not mean that I have to use VMware over Virtual PC or any other Virtual OS software. I just find VMware very easy to use. I have been using VMware for about 4 years now for all of my branding projects. I store them on an external drive and back it up frequently. This allows me to take all of my work on the road or to any client site as needed. As you can see from the screenshot on the left I normally start all of my projects from a base vanilla image of SharePoint. I have blurred out some of the names to protect my clients names. On this image I have all of the tools I need to create my branding masterpieces. (SharePoint Designer, Office 2007, IE Developer Toolbar, and Visual Studio) The great thing about VMware is that I can always go back to any of my past projects and make edits or changes as needed. Say for example you finished up a project about a month ago and you are knee deep into another project. When all of a sudden you get an email that...

If you have ever had the task of creating a SharePoint Design with a fixed width that is centered on the page here is a post that might help you. (Sorry about the length...) In your alternate stylesheet add the following classes and properties: body{ background-color:#EEE; font-family:verdana,arial,helvetica,sans-serif; color:#000; text-align: center; padding-top: 20px; } .ms-main{ width: 980px; border: 3px #006699 solid; border-bottom: 0px #0066699 solid; background-color:#FFF; } #mainTable{ width: 100%; } Here is an example of what the results of the code above would look like: Simplified HTML from OOTB SharePoint <HTML> <HEAD> </HEAD> < BODY >     <form>         <TABLE class="ms-main" >           </TABLE>     </form> ...

After all branding files have been created we as designers sometimes don't get the option to install and implement the visual design ourselves. So the creation of an Install Guide can be important in two ways. Ability for the site owner/Administrator to have a back up guide on how to re-apply the visual design in case of a Disaster Recovery. If someone other than the creator of the branding files needs to apply the branding due to security reasons/Location. Below are some install instructions for a site with the following: Publishing Site Custom Master Page Custom Page Layout Custom CSS Custom Images Step 1: Enable Publishing Feature: Enable the Office SharePoint Server Publishing Infrastructure Feature for the top level site collection. Click on Site Actions > Modify All Site Settings Click on Site collection features Make sure the "Office SharePoint Server Publishing Infrastructure" is Active Enable...

If you want to know more about CSS and how to use it, there are many great resources out there that can help you get started: I would start with http://www.w3schools.com/Css/default.asp Here are the basics that you will use: Syntax selector {property: value;} External Style Sheet - (Added within the <head> tags) <link rel="stylesheet" type="text/css" href="style.css" /> Internal Style - (Added within the <head> tags) <style type="text/css"> selector {property: value;} </style> Inline Style - (Added within the <body> tags) <tag style="property: value"> Or use the following table with some of the most basic Properties. I am using the .MS-Main class as a reference for all of the examples below. Properties Example Other Values Backgrounds ...

I have been in a giving mood lately, so I thought I might Package up my Pimp My Portal Theme and distribute it out to the masses. I have included the install instructions within the zip file called Read Me Install Instructions.txt and all of the support files here: Download This theme comes in really handy when April 1st comes around... Hint, Hint, Wink, Wink... And yes, if you have animations turned on in your browser settings you will get an extra special surprise with the hopping car. Old School at its best. Enjoy!

I have created a Photoshop layered file, based on the OOTB SharePoint look and feel. This file includes the following: Nested Folders Labeled Layers Editable Text Exact Font Colors and Type Separation of background elements Resolution set to 1024x768 You can download this file here: Download Enjoy! Write me a comment if you find this useful!

I will walk you though a few steps to implement your branding by using custom Site Definitions, Master Pages, and Features. Images: Place all modified images in a new folder in the following directory C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\IMAGES\Custom Styles: Create a separate CSS file and place it in a new folder in the following directory. C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\STYLES\Custom Application Master Page : *Modify only if you want Farm Wide System pages to have a consistent look and feel. Go to the following directory on the server (if there are more than 1 web server make sure this is done on each) C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS Add a <link type="text/css" rel="stylesheet" href="" /> in the head of the Application.Master to your alternate styleshee...

As part of our normal delivery on branding projects we usually supply a SharePoint style guide. This document is intended to be used by site owners/developers to support the branding once the project is complete. I have created many variations of this type of document, What I find really helpful for the consumers of this document is to provide some of the following: Branding Requirements: Example # Properties 1 Branding will be applied at the site collection level 2 Any Changes to branding (CSS, Images) will automatically get updated to the site. Admin will not have to force or re-apply styles 3 When a sub-site is created, it will automatically have branding applied. 4 All _layout application pages will have branding as well. As we all know there are many ways to add lipstick to the pig, so what I would suggest is to add the following as well: Mak...