10 Worst Mistakes in SharePoint Branding

Tom Daly, Marcy Kellar, and Michael Mukalianand Host: Jason HimmelsteinSharePoint 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 Front End Developer Developer Marcy Kellar Tom Daly Mike Mukalian @marcykellar @_tomdaly_ @mmukalian thesharepointmuse.com thomasdaly.net www.mukalian.com/blog

Don’t Let the Designer Get Carried AwayWhat Is It?Designers have “crazy” ideasthat may not translate well intoSharePoint.

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 NavigationHaving the flyouts render horizontal instead of vertically.This was with the 2007 table based navigationWouldn’t work correctly in all browsersNo budget + not in scope to create new navigation

Re-inventing SharePoint FormsNo custom code budgeted, or even possible to deploy intimeframe People Picker Upload Control

Impossible Left Navigation• No way to accomplish this with OOTB Nav• Need 3rd party or custom control 2 levels w/ grouping (Fine) with expanding children on the current site. 3 levels (impossible w/ OOTB) with expanding children on the current site

Rounded Cornershttp://freecsstemplates.over-blog.com/

Applying Fixed Width to Collaboration Sites and System PagesWhat Is It?Fixing the width of the layouton any site where users areprimarily collaborating.Collaboration Sites:• Team Site• Meeting Workspace• Document Center• Record Center• Etc..

Summary:Applying Fixed Width to Collaboration Sites & SystemPages• 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

ConstrainedWebPart

System Page Issue with Fixed Width

Content “Spillage” on System Pages

Quick CSS Fix on Content Area

Solution: Add 95% Width instead of Fixed

Collaboration Site Example

Using Too Many Master PagesWhat Is It?Using Master Pages to managevariations 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

Example Scenario• 1 Distinct Design My Sites• All sites in scope Collaboration Search Center Meeting Workspaces Publishing

Example Scenario Master Pages 1 Master Page per distinct Site Publishing Meeting Workspace Template = 6 Master Pages Potential to need a separate master page for system pages. Collaboration Minimal (Search) My Site Personal My Site Host (My Content) (Newsfeed, Profile)

Base BrandingExample Scenario sharepoint style.css Master Pages Publishing Meeting Workspace Pub.css mws.css Collaboration Minimal (Search) collab.css minimal.css My Site Personal My Site Host (My Content) (Newsfeed, Profile) mysitepers mysitehost. onal.css css

Breaking the Master Page DevelopmentWhat Is It?Breaking the Master PageDuring DevelopmentIf 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 ContentWhat 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 MockupExample of MockupprovidedUse of Lorem Ipsum(Placeholder Text) • Marcy - screenshot of Top Nav wrap

Fixing the Width of the RibbonWhat Is It?Fixing the width of the ribbon to match the fixed width of the contentarea

Summary:Fixing the Width of the RibbonWhat 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, locationWhat is the impact or cost? – Training especially 3rd party• Are there any exceptions? – If design is very important to your organizationWhat 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 ContentWhat Is It?Using the Content Editor WebPart 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 PageWhat Is It?Removing the Quick Launchcontrol 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 DevelopmentWhat Is It?When developing a webpart or ui component, youneed to consider how it Joe Cool’s WebPartwill be presented in theUI. • Simple Example • No way to select the items in the web part cleanly using css

Johnny Smith’s codeAll items are easily accessible via CSS Selectors

3rd Party ControlClass on everylevelThey are even niceenough to classthe first and lastitems 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 youre unsure of what to class, then heres my rule; #1 Class Everything.

Modifying Default FilesWhat Is It?Going into the 14 hive in SharePointand modifying default filesA Violation of the#1 Rule of SharePointBranding ClubGraphic 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 Branding1. Letting the Designer Get Carried Away2. Applying Fixed Width to Collaboration Sites and System Pages3. Using Too Many Master Pages4. Breaking the Master Page During Development5. Not Designing Around Real Content6. Fixing the Width of the Ribbon7. Using Content Editor Web Parts for Web Content8. Removing the Left Nav Controls from Master Page9. Not Considering the UI in Custom Development10. Modifying Default Files

Panel Contact Information Designer Front End Developer Developer Marcy Kellar Tom Daly Mike Mukalian @marcykellar @_tomdaly_ @mmukalian thesharepointmuse.com thomasdaly.net www.mukalian.com/blog

http://www.twylah.com	129
http://lanyrd.com	38
http://www.weebly.com	10
http://www.onlydoo.com	4
http://aulamovil.weebly.com	4
https://si0.twimg.com	3
http://www.linkedin.com	3
https://twimg0-a.akamaihd.net	2
http://flashattackcrew.blogspot.fr	1
http://vrindavijayan.blogspot.in	1
https://twitter.com	1

10 Worst Mistakes in SharePoint Branding

by Marcy Kellar on Aug 03, 2012

Accessibility

Categories

Upload Details

Usage Rights

11 Embeds 196

Statistics

10 Worst Mistakes in SharePoint Branding Presentation Transcript