Tuesday, September 30, 2008

Blogger and Windows Live Writer

After a long time I finally decided to start blogging (Little help from Fox, Paul, and Natalya). I was first looking for a nice free SharePoint blog site (Wanted to eat my own dog food), but I really could not find one. So I decided to go with Blogger. I figured that I would simply edit my posts in Word 2007 and publish it to blogger… Umm yea it works but not completely. Since Blogger is owned by Google it uses Picasa web as its native Image repository engine. So, low and behold Word does not integrate with Picasa web, and I could not use Word 2007 to post images. So I needed to find another solution.

image I found an article on the web talking about a new product called:
Windows Live Writer

Hmmm never heard of it before. So I took a quick look and I was actually really surprised on how easy it was to use. It integrated with Blogger and Picasa web seamlessly. Here are some of the features that I use within Windows Live Writer:

  • Creation of Categories
  • Ability to manage all posts
  • Visual display of my custom template
  • Ability to have Draft Posts
  • Option for video (Have not tried this yet)
  • Its Free!

image
Windows Live Writer Screenshot 

So if you are looking to create your own blog try out Blogger with Windows Live Writer!

Monday, September 29, 2008

How to use the !important tag in CSS

"CSS" stands for: "Cascading Style Sheets'. 

This means that the styles cascade and are applied in order as they are read by the browser. The browser reads CSS from top down. The first style is applied and then the second and so on. So if a style appears at the top of a style sheet and then is changed lower down in the document, the last one wins!

For example, in the following style sheet, the div class "text" will be white, even though the first style property applied is black:

#text{ color: #000000;}

#text{ color: #FFFFFF;}

The !important rule is a way to force styles out of order. A rule that has the !important property will always be applied no matter where that rule appears in the CSS document. So if you wanted to make sure that a property always applied, simply add the !important property to the tag.

So, to make the div class text always black, simply add the
"!important" tag right before the closing semicolon.

#text{ color: #000000 !important;}

#text{ color: #FFFFFF;}

To relate this back to SharePoint here are  few examples where you might need to use the !important tag to get your styles listen.

Example 1: You have applied a custom theme to a site. But on some of your pages the colors are inconsistent. Use the !important tag to force the class attributes so that all color behaviors act as expected.

Example 2: You are in the middle of creating your custom brand and notice that around the content area there is some hard coded margins. You could either create your own custom master page to fix this or you could force the margins the way you want them by using the !important tag.

I do not suggest using the !important tag for everything. Its a bit of a cop out. But there are some cases where it really does help keep your design functioning as your want it.

Friday, September 26, 2008

Using Visio for SharePoint Wireframes

I started out my career creating custom forms, stationary, and illustrations/diagrams for a book publishing company. imageYou can see my old illustration art here: http://www.noreastdesign.com/erik/*Keep in mind this was last modified back in 2004, so the resume is way out dated...*

Back in 2004 I was working exclusively on a MAC. So when clients (Book Authors) sent us Visio files, we would cringe because all we saw was very rough boxes and squares.

As my career changed to consulting, and my PowerBook laptop turned into a Dell Latitude, I started looking at Visio a little closer. After being  given a task to take screenshots and re-draw all SPS 2003 default pages and admin screens in Visio(~70 screens) I started seeing that this application could really be more than boxes and squares.

So I put down my Illustrator, Freehand, and other vector programs and really dove deep into what Visio had to offer. I found it actually really easy to create great looking wireframes.

image
Example SPS2003 Home Page Wireframe created in Visio 

I had the ability to draw complex icons, webparts, and layouts. This was a great way to learn SharePoint and Visio at the same time since I am a very visual learner. But what do I do with it now?

image

We started using this for a few projects and it was a great success. But by the time we started getting other people to use it in our practice, MOSS Beta 2 was just getting released. So back to the drawing board... To learn about the new features in MOSS I whipped up a VM image, got an instance installed, and started taking screenshots and Wireframing.

This time with the intention on creating not just a documented version of SharePoint in Visio, I wanted to create a Toolkit that could be used throughout our practice for a consistent way of creating SharePoint Wireframes.

image
Example MOSS 2007 Home Page Wireframe created in Visio 

So this time I created a ~50 page toolkit that spanned from Basic Home Page, to Team Site Templates, to My Sites and all the way down to the Site Settings screens. This was a huge undertaking but once finished, I had created a tool that someone could simply drag and drop Webpart Shapes such as document libraries, Issues Lists, Announcement lists, Etc right onto the page.

image

By creating a consistent way of creating wireframes it is now easier for my group to create and share new layouts, templates, webparts without worrying about how to convert an Illustrator, Fireworks, or PPT template for re-use.

I am not saying that Visio is Holy Grail of Wireframing applications. There are some tools such as Omnigraffle that do a good job as well, but since Visio is part of the Office Suite, its easier for people to get a copy and install it.

So I encourage you all when the next SharePoint version is released, go out and create your own SharePoint wireframes in Visio you might just hit two birds with one stone.

** Update **

I know you are thinking to yourself, great cool, when and how can I get it.. I really wish I could share it, but since this is a document that was created in-house (EMC Consulting) I cannot share... I get asked this all the time at clients sites... God knows how many people have actually offered $ for it... But at the end of the day I really cannot share... SORRY for all the Hype but nothing to show.

Thursday, September 25, 2008

SharePoint Branding Process

This post was originally created in a 26 page PPT deck that I created. Here are the highlights of that presentation.

Anything is Possible: With the ability to create custom Master Pages/layouts, the amount of customizations are endless...

Examples of Highly Customized MOSS sites:

  1. Games For Windows
  2. Glue Mobile Games
  3. HedKandi
  4. Choose Chicago
  5. Hawaiian Air
  6. And Many More

Please keep the following in mind

Not all projects are the same.

  • Some require more 1 on 1 attention
  • Some defer all branding look and feel requirements to either their own internal marketing departments or external vendors for definitions.
  • Some allow full creative freedom, while others are pre-defined.

The Process

  • The process described in this post is intended for internal small scale sites. And not intended as a basis for all implementations!

What is UI Design?

  • User Interface Design is the process of creating a consistent, successful, integrated design solution.  This solution follows the information architecture and technical underpinnings of the site, and provides an expression of those elements through consistent look and feel.  The UI designer melds typography, screen layout, color palettes, iconography, site photography and all other user-facing elements into a finished expression of visual style.

Example Project Estimated Hours: Again this is just a sample and should not be a basis for all projects

Brand Adaptation for MOSS 2007 ~ 1-2 Weeks

  • 1-2 Days for requirements
  • 2-3 Days for design (1-2 design Mock ups, 1 cycle for revisions)
  • 2-4 Days for building of CSS, Images, and if needed Master Pages.
  • 1-2 Days for testing/bug fixes

Custom design for MOSS 2007 ~ 2-4 Weeks

  • 1-2 Days for requirements
  • 4-8 Days for design (2-3 design Mock ups, 2 cycles for revisions)
  • 4-8 Days for building of CSS, Images, and if needed Master Pages.
  • 2-3 Days for testing/bug fixes

Example Design Artifacts

  • Discovery:
    • Creation of the Creative Brief
  • Definition:
    • Creation of Visual design compositions
  • Construction:
    • Creation of CSS, Images, and Master Pages
  • Delivery:
    • Creation of Branding Style Guide

Design Process

Gather Requirements: See my blog post - It’s like pulling teeth…

Have Client/Marketing fill out Branding/IA questionnaire before Kickoff.

  • What type of UI customization is this?
    • Brand Adaptation: Apply logo, colors only, keep out of the box layout and tab styles
    • Custom brand: More design treatments, changes to lines, controls, tab styles.. stay within master page layout
    • Full custom design: Change layout of master page completely.. i.e. navigation may not be in tabs, etc
  • Understand the Scale
    • Full portal modification: All sites, My Sites, and Administration page
    • Sites only: Themes or alternate style sheets
    • Page Only: Alternate style sheets, Content editor web part <style></style>)
    • Master Page Modification: Custom Layout and styles
      • Portal Wide, Site wide (cascading master), single page.
  • What are the Brand Requirements?
    • Define Colors, Fonts, Imagery, Layout, Logos, etc.
  • What are the Browser Requirements?
    • Liquid versus Fix width
    • Visibility: Must be able to be viewed at least on 1024 X 768?
    • Support IE, FireFox, Safari, Oprea, Google Chrome, Etc.

Creative Brief

  • What is in a creative brief?
    • Introduction
    • Existing Brand/Creative
    • Vision & Approach
    • Visual Components
    • Brand/Identity
    • Colors
    • Fonts
    • Structural Elements
    • Shapes/Patterns/Imagery
    • User Profile Information
    • Iconography
    • Browser Requirements/Resolution
    • MOSS 2007 Accessibility Features
  • Why create one?
    • A creative brief gives the designer a written document to let the client know that we heard what they said and it will be a basis for which we design against.
    • It is recommended that this document get signed off on before proceeding to the visual design creation.

Mocking up the design

  • Create The Design Composite / Mockup
    • Photoshop Build: Do NOT use MS Paint!
    • Take Public website, reference websites, images, colors etc.
    • Adapt brand into SharePoint constraints
    • Take known elements and re-use
    • Draw guides
    • Create Folders in the layers to keep them organized
    • Name those layers, and create folders!

image

  • Photoshop Cut and Paste
    • Slice out elements and save as web ready files
    • Use existing images for support and size

~35 modified out of 2,000…

  • The majority of all images used within SharePoint are icons that you will rarely see/modify.
  • Only a hand full of images are used to support the visual building block of the site.

image

Cascading Style Sheet (CSS) Build

  • Layout Guide
    • Layout out the widths and heights of elements on paper or within Visio for easy reference
    • Document zone heights, widths, background colors, and borders (These will all go into the style guide eventually)
  • Tools
    • SharePoint Designer
    • IE Developers Toolbar
  • Where to begin?
    • Main site areas
      • Top Banner
      • Title area / Search
      • Main Navigation / Actions
      • Quick Launch area
    • Body area
      • Webpart headers
      • Fonts
    • My Site
    • Templates – Teamsites, Blogs, Wiki’s, Meeting Workspaces, MS Training Center
    • Administrative
    • Central Administration

Branding Methods - See my post about this section HERE

Server Site Information

  • External Style Sheets
    • CALENDAR.CSS
    • CONTROLS.CSS
    • CORE.CSS (Main)
    • datepicker.css
    • EwrDefault.css
    • HELP.CSS
    • HtmlEditorCustomStyles.css
    • HtmlEditorTableFormats.css
    • MENU.CSS
    • OWSNOCR.CSS
    • PORTAL.CSS (Supporting)
    • RCA.CSS
    • SiteManagerCustomStyles.css
  • Image Folder Details
    • Size: 2.78 MB
    • Size on disk: 9.28 MB
    • Contains: 2,050 Files, 0 Folders
  • Folder Locations on Server
    • Images
      • C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\IMAGES
    • Styles
      • C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\STYLES

I hope this comes in handy for anyone who reads it.

Drop me a comment!

Wednesday, September 24, 2008

Creating Reflections In Photoshop/Office 2007

If you look around at most advertising today, you more than likely will see some type of glossy reflection. Either its on a logo, Car, text, or basically any element its there. If you go to apple.com you will see just about every object has some type of reflection to it.

image image

In Microsoft Office 2007 they have actually built this feature right into the Photo Tools Special Effects. The Photo effects are really great features and if you don't have Photoshop this might be a good substitute for you.

image

To bring this blog back to Photoshop here are the steps you might take to create this effect.

  1. Create a base background color for your image. image
  2. Add in your graphic that you want to make a reflection of.
     image
  3. In the layer panel, drag this layer on the "Create a new layer" Icon to Duplicate the layer 
    image
  4. Flip the duplicate layer Vertically
    image
  5. Move the layer just below the object
  6. Set the duplicate layer opacity to about 15%
    image
  7. Create a "Vector Mask" on the layer
    image
  8. Click on the Vector Mask and set your foreground and background to 100% black and 100% white.
    image
  9. Make a gradient from top to bottom of the duplicate object.
    image
  10. If you want, you can add in a lighting effect to increase the visual look of the glass reflection.
    image
  11. Here is the same effect with a white background and the logo color changed to blue.
    image 

Tuesday, September 23, 2008

Office Live Small Business | Highlights

I would like to highlight a few reasons why I think Office Live Small Business is a great product. Just to be clear I am not a Microsoft Sales person, I am simply a consumer.

  1. It's Free (Check it out HERE)
    • That's right boys and girls it will cost you nothing to create your own web site. If you want to have your own domain name without the "Officelive"  (Example: www.mydomain.officelive.com) then it would be free for the first year and then $14.95 for every year after that. If you already have your own domain name registered, you can simply configure the DNS to point to Microsoft's Servers free of charge. But the best thing is that the hosting is free (Currently right now 1Gig)!
  2. It's SharePoint
    • Both the Business Application side and the Public Website side are built on SharePoint technologies.
  3. It's Easy to use
    • The content management part of the product is basically like any other rich text editing application. I found it relatively simple to create pages and organize them. They allow for two levels of Parent/Child sites.
  4. It has a great Community behind it
    • If you have a question about how to do something either basic or advanced more than likely someone has already asked and gotten a solution for it HERE.
  5. Integrated with .Net Passport Authentication
    • You can use either your own existing Hotmail or live account or you can create your own.
  6. Allows for customizations
    • Since it is based on SharePoint technologies, you will be able to create custom applications with SharePoint Designer or Visual Studio.
  7. Business Applications
    • Maybe you have your own public website and you are simply looking for a cost effective way to collaborate with your peers. If you cannot afford the full SharePoint product, or have the servers to host it the functionality within the Business applications might be the next best thing.
  8. Pushing Content to and from Business Application and Public Website.
    • Have you ever struggled with creating those annoying online forms? I have and now its a simple as creating a custom list, and adding the Form Module(webpart) to the public website. Or if you wanted to publish list content on the site you can simply use the List Publisher Module.
  9. Oh and did I mention its Free!

So if you are looking for a cost effective way of getting a web presence out there, or if you simply need a way of collaborating on a document, Office Live Small Business might be your answer. You actually don't have to have a business either, you could use this technology for Family, Sports, Recreation, and even personal expression.

In any event take it for a spin, who knows you might just like it.

Saturday, September 20, 2008

My Application Shortcuts

How often do you find yourself going to that zoom in/out dropdown to choose a Percentage? How often do you click on the scroll bars within your office applications? Well if you find yourself not getting on the application shortcut bandwagon you might be surprised how much time you are spending on clicking on those menus…

Here is a list of basic Shortcuts grouped by my most frequently used applications that will save you tons of time.

Photoshop:

  • Zoom In – [Crtl] + [SpaceBar] + [Left Mouse Click}
  • Zoom Into Specific Area – [Crtl] + [SpaceBar] + [Left Mouse Click and Drag}
  • Zoom Out – [Crtl] + [Alt] + [SpaceBar] + [Left Mouse Click}
  • Fit Stage to Window – [Crtl] + [0]
  • Magic Wand Tool – [W]
  • Eye Dropper Tool – [I]
  • Marquee Tool – [M]
  • Gradient Tool – [G]
  • Switch Foreground and Background colors – [X]
  • Crop Tool – [C]

Visio:

  • Zoom in – [Ctrl] + [Mouse Scroll up &down]
  • Move stage Left & Right – [Shift] + [Mouse Scroll up &down]
  • Move stage Up & Down – [Mouse Scroll up &down]
  • Fit Stage to Window – [Crtl] + [W]

Adobe Acrobat:

  • Zooming – [Same as Photoshop]
  • Fit Stage to Window – [Crtl] + [0]
  • View Full Screen – [Crtl] + [L]

If you have some of your own please drop a comment and I will add them to the list!

Friday, September 19, 2008

Governance Topics and Roles

I have been on a Governance kick the last month or so. If you want to learn more about governance and how it relates to SharePoint you need to understand that it is split into two areas.

  1. Roles/Responsibilities (~50%)
  2. Policies/Procedures (~50%)

Below I have taken our standard model and summarized them into these main roles.

Roles

  • Core Team (PM's, Business Owners, Administrators)
  • Infrastructure
  • Service/Help Desk
  • Application Administrators
  • Application Developers
  • Business Units (Owners, Contributors, Members)
  • Trainers
  • Business Analysis (TBD)

Below is an example schedule with the types of roles that should attend.

  • Overview of Governance Checklist/Base Document:
    • Core SharePoint Team
    • Business Units
    • Application Administrators
  • Roles & Responsibilities / Locations
    • Core SharePoint Team
  • Governance Communication
    • Core SharePoint Team
  • Site Use Confirmation & Deletion
    • Core SharePoint Team
    • Application Administrators
    • Infrastructure (TBD)
  • My Sites
    • Core SharePoint Team
    • Business Units
  • Site Provisioning
    • Core SharePoint Team
  • Site Policies
    • Core SharePoint Team
    • Application Administrators
    • Business Units
  • Search
    • Core SharePoint Team
  • Change Management Process
    • Core SharePoint Team
    • Application Administrators
    • Service/Help Desk
  • Deployment / Customization
    • Core SharePoint Team
    • Application Administrators
    • Application Developers
  • Release Schedule
    • Core SharePoint Team
    • Application Administrators
    • Application Developers
  • Service Level Agreements (SLAs)
    • Core SharePoint Team
    • Service/Help Desk
  • Training
    • Core SharePoint Team
    • Business Units
    • Trainers
  • Testing
    • Core SharePoint Team
    • Business Analysis
  • Security / Permissions
    • Core SharePoint Team
    • Application Administrators

I pulled a newbie yesterday

Well I thought that I had seen it all when it comes to quirky things in MOSS 2007 but again it always seems to find a way to throw me for a loop.

I was in the process of creating a custom content type. I based it off of the "Item" content type. I wanted to change the column from "Title" to "Client Name". Usually this is pretty standard when working with normal columns, simply click on the column name, change it and save. But when it comes to Content Types it's a whole new ball game. Since content types are simply a collection of site columns once your mage a change, everything changes…


Here is what I started with:

(Figure 1). You will notice that I have the OOTB System "Title" and a bunch of custom Site Columns below. I figured I could just simply change the name of "Title" to "Client Name" and be on my merry way…


Figure 1

So when I clicked on the title column I was presented with the following screen:

(Figure 2). I saw that there was a link to Edit Site Column in new window so I said heck why not.


Figure 2

I change the column to "Client Name" and everything was golden until I looked at another list and noticed that all columns that were based off of my Item Content type now had Client Name instead of Title… Well duhhh of course it did… So now I felt like a complete Newbie and had to go back and fix it before anyone had noticed. Sure it was only for that Sandbox Site Collection but still not very smart… So I went back to the custom content type and click on the column client name and was simply going to change it back to "Title" like nothing had changed… Well um yea that's not going to work because of course sharepoint things that that column is reserved and in use… Of course it does… So I when googling around and found this gem of a site: http://www.eggheadcafe.com/software/aspnet/29625393/title-site-column.aspx

In this thread a person a year ago did the same thing that I did… The solution was to navigate to the Change Site Column Page for "Title" _layouts/FldEdit.aspx and save the page as a Web Page Complete file down to your local hard drive. Then Open up that .html file and look for the following: "doesFieldNameConflict".



Then delete:

if (doesFieldNameConflict(DisplayName))

{
alert(L_alert3_Text);
frm.DisplayName.focus();
return false;
}

Save it and then open up the HTML file > change the name back to "Title" and click on "OK". IT WORKED!!!!

So if you are ever in this situation you now have a way of getting out of your Newbie mistake.

Creating Custom WCM Styles

When creating content on a publishing site through a Page Content HTML editor there are some basic styles that come OOTB: The styles are actually conditional and different styles appear based on the type of content selected.

Text:

  • Article By Line
  • Article Head Line
  • Article Title



Pictures:



Lists:

  • Square Bullet List (Only for un-numbered lists)


  • Roman Number List (Only for numbered lists)



Links:

  • Link Style

You can view the OOTB styles by going to "http://yourportalsite/_layouts/1033/styles/HtmlEditorCustomStyles.css"

There is also the option of using the paragraph formatting dropdown to style your content.



So how do you create your own custom styles?

  1. First you will have to create your own custom CSS file.
  2. Then you need to know how to classify your content. Use the following attribute in your custom CSS without the quotes of course. Replace the "yourstylename" with your own custom style name without spaces.
    1. Images: "IMG.ms-rteCustom-yourstylename"
    2. Links: "A:link.ms-rteCustom-yourstylename"
    3. Numbered Lists: "OL.ms-rteCustom-yourstylename"
    4. Un-Numbered Lists: "UL.ms-rteCustom-yourstylename"
    5. Basic text: ".ms-rteCustom-yourstylename"
  3. Note: If you are creating completely new styles they will override the OOTB styles and the examples above will not show. So if you like some of the OOTB style simply copy them over to your new CSS file.
  4. Upload your stylesheet to either the server or a document library, and under site settings set it as an alternate style sheet. Or you could add it to the bottom the core.css file so that it is available globally across all sites.

And that's about it! Good luck styling and let me know if you found this useful!

SharePoint Branding Methods

A while back I put together a quick table of branding methods and if they were applied how deep would those changes be visible.

Here are some of the ways that you can implement your branding into Share Point: going from least visible to the most.

  • Content Editor Web Part Style
    • Add a content Editor Web part on a page, then click on the source button and add:

      Example:

      • <style>
        .ms-WPHeader TD{
        background-color: #EEE;
        border-bottom: 2px solid #000099;
        }
        </style>
  • Alternate Stylesheet:
    • Configure by going to: Site Settings > Modify all site settings > Look and Feel > Master Page > Alternate CSS URL > Click on radio button "Specify a CSS file to be used by this publishing site and all sites that inherit from it." > Add in URL of alternate style
  • Custom Theme
    • Create your own custom theme.
  • Adding an Alternate style sheet to a custom master page
    • Upload your custom style to the server or document library.
    • Within Master page <head> add the following:
    • <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/customstyle.css"/>
  • Adding an Alternate style sheet to the application.master Master Page.
    • Upload your custom style to the server or document library.
    • Within the application.master Master page <head> add the following:
    • <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/customstyle.css"/>
  • Overriding the Server side CSS and Images
    • Not recommended for small changes, or multiple SharePoint Applications sharing the same Web Front Ends (Intranet + Extranet + Public Website)
    • Styles Location on server: C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\STYLES
      • Main Styles (core.css, portal.css)
    • Images Location on server: C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\IMAGES
      • Over 2,050 images. (.gif, .jpg, .png)

So what is the right choice for your branding project?

The first thing you should do is consider what level of branding does your client expect, or need?

Sometimes this is hard to define, and your client might not know. See my blog post Gathering Brand Requirements: It's like pulling teeth…

General Brand Levels: Refer to your SOW and make sure you are not promising anything that would be Out of Scope!

  • Brand Adaptation: Apply logo, colors only, keep out of the box layout and tab styles
  • Custom brand: More design treatments, changes to lines, controls, tab styles.. stay within master page layout
  • Full custom design: Change layout of master page completely.. i.e. navigation may not be in tabs, etc

Who is doing the design?

  • Your Company
    • By staying in house with the design we have better control over the design and keeping it to the approved brand level.
    • We also know that the design is created with SharePoint in mind. More on this below
  • Contractors
    • Most design firms have no clue what SharePoint is and how to design against it.
    • For that reason always make sure you share the designs in a internal peer review before showing it off to the client as our own.
  • Clients
    • Ok this one is a little tricky…
    • Most large companies have marketing departments that own their corporate brand.
    • In most cases they want to own the design and more often than not you can say goodbye to any creativity…

Who is doing the build?

  • Your Company
    • If the consultant/developer on the project does not have any experience with SharePoint CSS branding modifications than we need to find on that does!
  • Contractors
    • Make sure they are well trained and skilled before allowing any customizations
  • Clients
    • Again make sure they have the skills.

X = Changes will be applied
? = To be Determined
Blank = Does not apply to page

Branding Support Filesimage

Master Pageimage

Drop a comment

Gathering Brand Requirements: It’s like pulling teeth…

Ok, so maybe it's not that bad but in my experience clients really don't know what they want. Sometimes you get the people who just want a simple brand adaptation from an existing application, or public website. That's easy enough. Or they want to see some examples of designs that we have done for other clients. Sure no problem. Or you get clients that use the following terms when describing what they want their site to look like:

  • Flashy
  • Cool
  • Clean
  • Wow factor
  • Easy on the eyes
  • New Aged
  • Techy
  • Lots of white space
  • Fun (Umm yea... OK...)
  • Never allow anyone to put a requirement in the SRS that a portal must be fun…

So what does the client really mean when they want a site to be flashy, cool, or lots of white space? Well I have tried to streamline a few set of questions that draw those definitions out of the clients mouth and into my creative brief.

Sample Agenda for a branding JAD session:
You won't get through all of this but it is a nice take away for the client to pass onto their marketing folks.

1.) Accessibility (508 Compliancy) Standards: Is this required?

2.) Browser Standards

  • Min Browser size: 800X600, 1024X768
  • Browser Width: Full width (Liquid Design) vs. Fixed width

3.) Branding

  • Style guides: Ask for the most up to date version of their style guide
  • Site Name:
    • Is there one defined?
    • If so how is it represented: Text, Logo, Other?
  • Brand customization type
    • Brand Adaptation: To what level
    • Custom: Does not exists in clients environment
  • Brand Implementation: From top (Page) to bottom (All Site Collections)
    • Site Only:
      • Content Editor Web Part - Using <Style> tag
      • Alternate Style sheet – Specified in sites Site Settings
      • Theme – OOTB or Custom
    • Site and Option to push to Sub Sites:
      • Custom Master Page – In master page gallery
    • Across all Site Collections
      • Custom Master Page – Server Side
      • Modification of Core files (Core.css, Portal.css, etc.)
  • Logo:
    • Size
    • Treatment
    • Color
    • Either corporate or site logo
  • Colors: To be either defined by style guide or custom
  • Imagery: Approved imagery that can be used throughout the site (Announcements, Links, products, etc.)
  • 4.) Functional Standards

    • Navigation Types:
      • Consistent Main Horizontal Navigation
        • OOTB the main navigation does not span across multiple site collections
      • Side Quick Launch (Tree view?)
    • Dynamic Dropdowns: How many levels does it show? OOTB there is a max of 5
    • External application links: Does it open in a new window or the same?

    5.) Branding Mood Questions:

    Q1. What type of treatments do you feel are appropriate?

    • Gradations or flat colors
    • Rounded corners
    • Transparencies
    • White Text on dark background
    • Tabbed navigation
    • Pixel lines for separation
    • Shadows

    Q2. Branding Moods Extremes

    • Simple/Complex
    • Soft rounded/hard squared
    • Flat/gradients
    • Light/Dark
    • Open/filled in
    • Heavy Imagery/soft color transitions
    • Heavy/light web part title bars (Chrome)

    Q3. Colors

    • 1 color monotone
    • Multi color complimentary
    • Bold accent colors

    Other Basic Questions that might help:

    Q1. Has your company undergone any recent re-branding?

    • If so will we have access to the design files?
    • If not when was the last time?

    Q2. Will there be a need to change or include additional Icons?

    Q3. Who will be approving these designs?

    • Marketing (how many?)
    • Board Executives (how many?)
    • Project Managers (how many?)

    Q4. Will they be available for Q&A?

    Q5. How many design reviews do you think is needed?

    • 1st Round (2 comps) 1 day for review and 1 for revisions
    • 2nd Round (1 comps) 1/2 day for review and 1/2 for revisions
    • Final Round (1 comps) 1 day for review and 1/2 for revisions

    Q6. Is there a specific need to have a different design for each area?

    • Each Department or Office has their own design
    • Each Site has its own color scheme
    • Each Web Part has its own header style

    A little bit about me…

    Here is a little background of myself. I currently work for EMC Consulting as a Senior Practice Consultant.



    I am 29 years old and have two amazing little boys (Gavin 3yrs and Bryce 11mths) and a wonderful wife (Karissa).


    I got my bachelors degree in graphic design from Plymouth State College, in Plymouth NH. My first job was at a printing company formally named NEBS. I spent most of my time there creating custom forms and stationary, not a fun job at all… I then got a job doing illustrations and production work for a small publishing company in Atkinson, NH called GEX. It was a laid back 9-5 job, but it drove me crazy… I was also doing some web design work on my own at the time for some family and friends.

    I took a leap of faith and Joined Internosis in July of 2004 as a production artist. My Manager took me under his wing and molded me into the consultant that I am today. He gave me the opportunity to explore my creative side and work on my consulting skills (Presentations, leading meetings, etc.).

    My first project was a logo that needed to be created for our first internal portal. My Manager asked me to create 100 logo sketches by the next morning. 100 sketches was he crazy??? So I set off with my designs, I stayed up all night and got 45 done… The next morning we put them all up on the wall and counted them. At first he asked where the other 55 were and I had no answer… We reviewed them and took down all but 3 of them that we thought had a chance. I asked him did he really think I could have created 100 of them? He said no, but if I had asked you to create 10 then I would get 5. This exercise even though extreme gave me the mindset that if you spend too much time on one thing you forget about all of the other possibilities and that you always need to push yourself to the next level.

    I took another leap of faith and took a very old server test box that was sitting in the corner collecting dust and installed Windows Server 2003 and SPS 2003. I think it barely made the min. install requirements. 256MB ram, less than 500Mhz processor. Yea it was really slow but it worked. After I had it installed I needed to learn how to use it. My manager suggested that I could hit two birds with one stone. He had me go through all of the possible screens in SharePoint and make a wireframe of it. At this point I had a MAC Power book and did not have a lot of experience of Visio. I quickly requested a PC laptop and was on my way. Virtual PC on a MAC in those days was brutal. I feel that was the most beneficial exercise that I have done to date. This not only taught me how to use SharePoint but it also helped me get an edge and pave my way into the SharePoint world.


    I then started to explore the world of SharePoint branding. To date I have successfully been apart of over 30+ MOSS client projects, 22 SPS 2003 client Projects, and created over 20 demo designs. I have created quite a few tools that have been really useful within the practice. The MOSS 2007 Toolkit (Consistent Wireframes of all top level site templates) and the SharePoint Style Guide (a guide to define CSS classes for SharePoint).


    Most people know me for my experience in SharePoint branding, I guess you can say I am that go to guy. I do have some other tricks up my sleeve when it comes to SharePoint. I have expanded my knowledge in SharePoint IA including, wireframes, page layouts, taxonomies, governance, and workflows. I have also focused a lot of my time with SharePoint training, administration, and some custom development.


    I was lucky enough to attend Tech Ed 2007 last year and the SharePoint Best Practices this year! It was a great experience and I really learned a lot. I then went out on a limb and got my first MS certification: 070-630 Configuring MOSS 2007, that is pretty good for a crayons guy.


    If you would like to know more about me or had some questions please don't hesitate to contact me or leave a comment.