Tom Daly, Marcy Kellar, and Michael Mukalian and Host: Jason Himmelstein

SharePoint Saturday NYC | July 28, 2012

What You Will Get Out of this Panel

– The ability to steer clear of making big mistakes

– An opportunity to ask questions and share your experience

– The excitement of watching the MAGIC between different roles

Panel Contact Information

Designer Marcy Kellar

@marcykellar

thesharepointmuse.com

Front End Developer Tom Daly

@_tomdaly_

thomasdaly.net

Developer Mike Mukalian

@mmukalian

www.mukalian.com/blog

Don’t Let the Designer Get Carried Away

What Is It? Designers have “crazy” ideas that may not translate well into SharePoint.

Summary:

Don’t Let The Designer Get Carried Away

• What is it? – Designers define and document a vision without considering

implementation costs and/or feasibility in SharePoint • Why is this a mistake?

– Just because you can design it, doesn’t mean it will work in SharePoint – Potential compromise of functionality

• What is the impact or cost? – Dissatisfied business customers – Inaccurate budget / timeline

• Are there any exceptions? – No – But SharePoint Branders should be involved in part of the design

process and/or should be used to provide guidance • What is the fix or workaround if I’ve already made the mistake?

– Come to “insert religious icon or choice” meeting (Come to Jesus meeting) – Work with designers /design firm that understands SharePoint

Impossible Drop Down Navigation

Having the flyouts render horizontal instead of vertically. This was with the 2007 table based navigation Wouldn’t work correctly in all browsers No budget + not in scope to create new navigation

Re-inventing SharePoint Forms

No custom code budgeted, or even possible to deploy in timeframe

People Picker

Upload Control

Impossible Left Navigation

• No way to accomplish this with OOTB Nav

• Need 3rd party or custom control

3 levels (impossible w/ OOTB) with expanding children on the current site

2 levels w/ grouping (Fine) with expanding children on the current site.

Rounded Corners

http://freecsstemplates.over-blog.com/

Applying Fixed Width to Collaboration Sites and System Pages

What Is It? Fixing the width of the layout on any site where users are primarily collaborating.

Collaboration Sites: • Team Site • Meeting Workspace • Document Center • Record Center • Etc..

Summary:

Applying Fixed Width to Collaboration Sites & System Pages

• What is It? – Fixing the width of the layout on any site where users are primarily

collaborating. • Why is this a mistake?

– Limits space for collaboration – Users have to scroll – Content spillage

• What is the impact or cost? – User Experience – Usability

• Are there any exceptions? – Never – Must keep lists views, web parts – keep small; governance on content

• What is the fix or workaround if I’ve already made the mistake? – Width:95%;display table ;margin:0 auto; – Make system pages inherit default branding or branded without fixed width – Make inner scroll

Constrained WebPart

System Page Issue with Fixed Width

Content “Spillage” on System Pages

Quick CSS Fix on Content Area

Solution: Add 95% Width instead of Fixed

Presenter

Presentation Notes

Solution – system pages to inherit default. Source of information

Collaboration Site Example

Using Too Many Master Pages

What Is It? Using Master Pages to manage variations and using too many.

Summary:

Using Too Many Master Pages

• What is This?

– Using Master Pages to manage variations and using too many. • Why is this a mistake?

– More assets to manage – More development work – Costly and /or complex Migration

• What is the impact or cost?

– Migration and / or redesign cost and time – Consistency across sites – Hard to maintain/manage changes

• Are there any exceptions?

– “Too Many” is relative to scenario – 1 master page per distinct design and template

• What is the fix or workaround if I’ve already made the mistake?

– Enforce governance/ remove permissions – Consolidate master pages. Manage variations with page layouts, alternate CSS or

custom controls – Most of the reasons you think you need a new master page, you can use page layout or

alternate CSS

• 1 Distinct Design • All sites in scope

Example Scenario

Publishing

Collaboration

Meeting Workspaces

Search Center

My Sites

Master Pages

Example Scenario

Publishing

Collaboration

My Site Personal (My Content)

Minimal (Search)

My Site Host (Newsfeed, Profile)

Meeting Workspace 1 Master Page per distinct Site Template = 6 Master Pages Potential to need a separate master page for system pages.

mws.css

minimal.css

mysitehost.css

Pub.css

collab.css

mysitepersonal.css

Master Pages

Example Scenario

Publishing

Collaboration

My Site Personal (My Content)

Minimal (Search)

My Site Host (Newsfeed, Profile)

Meeting Workspace

sharepoint

style.css

Base Branding

Breaking the Master Page Development

What Is It? Breaking the Master Page During Development If you don’t test along the way, its get’s messy

Summary:

Breaking the Master Page During Development

• What is it? – Breaking the Master Page During Development

• Why is this a mistake? – There are so many ways to break the master page

• What is the impact or cost? – Broken Master Pages – Rework, Scratching an idea – Functional issues that aren’t evident until site being used. – The further along you get, the harder is to fix a break

• Are there any exceptions? – No

• What is the fix or workaround if I’ve already made the mistake? – Constantly test – Start over

Use Code View in SPD

Not Designing Around Real Content

What Is It? • Not using real content to guide the design. • Using filler / fake content

Vector Graphic courtesy of http://dryicons.com

Summary:

Not Designing Around Real Content

• What is this?

– A design that hasn’t considered real content; – Using non-representative filler/fake content – Using “Lorem Ipsum”

• Why is this a mistake?

– Impacts layout, growth / stretching/ empty areas – Real content helps define patterns

• What is the impact or cost?

– Rework based on real content to support actual content once migrated or created.

• Are there any exceptions?

– Sites where design dictates content or that have copywriters • What is the fix or workaround if I’ve already made the mistake?

– Set expectations that rework will occur after content is introduced. – Go back to design phase. Make changes accordingly after real content is

reviewed. Use representative content in Photoshop design – Try to anticipate areas where there could be issues by doing bounds testing. – Staging environment

First View of Mockup

• Marcy - screenshot of Top Nav wrap

Example of Mockup provided Use of Lorem Ipsum (Placeholder Text)

Fixing the Width of the Ribbon

What Is It? Fixing the width of the ribbon to match the fixed width of the content area

Summary:

Fixing the Width of the Ribbon

What is it? – Fixing the width of the ribbon to match the fixed width of the content area – Constraining the ribbon (a huge UX investment) to a width smaller than

100%

Why is this a mistake? – Not consistent throughout organization – Administrative tools change size, icon, location

What is the impact or cost? – Training especially 3rd party

• Are there any exceptions? – If design is very important to your organization

What is the fix or workaround if I’ve already made the mistake? – Update your implementation to expand Ribbon to full width. – Or create your own training materials to reflect the look of the custom

ribbon

Using Content Editor Web Parts for Web Content

What Is It? Using the Content Editor Web Part for Web Content

Summary:

Using Content Editor Web Parts for Web Content

• What is It?

– Using a Content Editor Web Part instead of using the right tools for web content • Why is this a mistake?

– No versioning of content – Not best method for managing web content

• What is the impact or cost?

– No versioning – Publishing model / Approval – Search

• Are there any exceptions?

– Foundation Server only – You Tube Videos

• What is the fix or workaround if I’ve already made the mistake?

– Plan to move most frequently changed content into RTE (PageContent Control) in page layouts

– If default SharePoint page layouts don’t work, create custom page layouts with field controls. This is the right way to do it.

– If you have a lot of web content, consider a standard or enterprise license. – In SP2010, use txt files to manage content;

Removing the Quick Launch ContentPlaceholder from Master Page

What Is It? Removing the Quick Launch control from the Master Page

Summary:

Removing the Left Nav Controls from Master Page

• What is it? – Removing the Left Navigation Controls from master page

• Why is this a mistake? – Can’t take advantage of left nav anywhere that master page is

referenced. • What is the impact or cost?

– Can’t use QL on other pages – Lost functionality on calendars, wiki pages, blogs, meeting sites,

tree view, group work site, and managed metadata navigation • Are there any exceptions?

– Public facing SharePoint sites • What is the fix or workaround if I’ve already made the

mistake? – Add QL back into MP – Use page layouts to dictate hiding or showing

Not Considering the UI in Custom Development

What Is It? When developing a web part or ui component, you need to consider how it will be presented in the UI.

Joe Cool’s WebPart

• Simple Example • No way to select the items in the web part cleanly

using css

Johnny Smith’s code

All items are easily accessible via CSS Selectors

3rd Party Control Class on every level They are even nice enough to class the first and last items of sets

Summary:

Not Considering the UI in Custom Development

• What is this?

– When developing a web part or ui component, you need to consider how it will be presented in the UI.

• Why is this a mistake?

– Without “hooks” to manipulate the UI, hard to style • What is the impact or cost?

– Hard or impossible to brand – Development time

• Are there any exceptions?

– No. Bad practice. • What is the fix or workaround if I’ve already made the mistake?

– Specificity – Pseudo classes – Jquery (not recommended) – Change web parts if designed in house – Be considerate of the UI interface and put css classes on your web controls. If

you're unsure of what to class, then heres my rule; #1 Class Everything.

Modifying Default Files

What Is It? Going into the 14 hive in SharePoint and modifying default files

A Violation of the #1 Rule of SharePoint Branding Club

Graphic by Marcy Kellar

Summary:

Modify Default Files

• What is It?

– Making changes to default files on the SharePoint Server (14 hive) • Why is this a mistake?

– These files are the originals. You just don’t mess with the originals. – Changes may impact the entire farm. – Multiple WFE with load balancing mean changes need to be made in more than

one place. • What is the impact or cost?

– Difficult to troubleshoot – Cumulative Updates – Migration

• Are there any exceptions?

– No • What is the fix or workaround if I’ve already made the mistake?

– Replace anything that has been modified with a clean copy of the originals – Move your customizations out of the file and package into a feature

Summary:

The Top 10 Worst Mistakes in SharePoint Branding

1. Letting the Designer Get Carried Away

2. Applying Fixed Width to Collaboration Sites and System Pages

3. Using Too Many Master Pages

4. Breaking the Master Page During Development

5. Not Designing Around Real Content

6. Fixing the Width of the Ribbon

7. Using Content Editor Web Parts for Web Content

8. Removing the Left Nav Controls from Master Page

9. Not Considering the UI in Custom Development

10. Modifying Default Files

Panel Contact Information

Designer Marcy Kellar

@marcykellar

thesharepointmuse.com

Front End Developer Tom Daly

@_tomdaly_

thomasdaly.net

Developer Mike Mukalian

@mmukalian

www.mukalian.com/blog