Your SlideShare is downloading. ×
10 Worst Mistakes in SharePoint Branding
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

10 Worst Mistakes in SharePoint Branding

5,946
views

Published on

Earlier this year I wrote a blog on the Top 10 Mistakes in SharePoint 2010 Branding and UI Design (http://bit.ly/ITzlJl) and had such an overwhelming response that I wanted to present it to the …

Earlier this year I wrote a blog on the Top 10 Mistakes in SharePoint 2010 Branding and UI Design (http://bit.ly/ITzlJl) and had such an overwhelming response that I wanted to present it to the community. I brought in a front end developer (Tom Daly) and a Developer (Mike Mukalian) to help me convey the different perpsectives that each of our roles takes. My original list of mistakes changed a bit when we brainstormed on overall cost and commonality of branding messes. I still stand by my original listing in the blog but by adding different roles in the mix, we were able to provide a depth of experience to support these 10 costly and common mistakes in SharePoint Branding and UI Development.­

Published in: Technology

2 Comments
4 Likes
Statistics
Notes
  • I'm sorry but a lot of the examples you give are really just the result of underskilled SharePoint developers. The content overflow regarding a fixed width design is just poor use of CSS. Fixed widths are very prevalent because they preserve the aspect ratios of images (think about image renditions), content islands (think carousels), and overall whitespace between elements. There are other items which are indicitive of inexperience such as "breaking" master pages. This is easily avoided during development and testing.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Nice presentation. Let me introduce you Bind Tuning http://bindtuning.com a tool that comes to revolutionize the way how SharePoint sites are branded, with a lot of themes that are fully customizable you can give to the sharepoint site a unique design in just a few clicks.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
5,946
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
114
Comments
2
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Tom Daly, Marcy Kellar, and Michael Mukalianand Host: Jason HimmelsteinSharePoint Saturday NYC | July 28, 2012
  • 2. 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
  • 3. 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
  • 4. Don’t Let the Designer Get Carried AwayWhat Is It?Designers have “crazy” ideasthat may not translate well intoSharePoint.
  • 5. 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
  • 6. 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
  • 7. Re-inventing SharePoint FormsNo custom code budgeted, or even possible to deploy intimeframe People Picker Upload Control
  • 8. 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
  • 9. Rounded Cornershttp://freecsstemplates.over-blog.com/
  • 10. 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..
  • 11. 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
  • 12. ConstrainedWebPart
  • 13. System Page Issue with Fixed Width
  • 14. Content “Spillage” on System Pages
  • 15. Quick CSS Fix on Content Area
  • 16. Solution: Add 95% Width instead of Fixed
  • 17. Collaboration Site Example
  • 18. Using Too Many Master PagesWhat Is It?Using Master Pages to managevariations and using too many.
  • 19. 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
  • 20. Example Scenario• 1 Distinct Design My Sites• All sites in scope Collaboration Search Center Meeting Workspaces Publishing
  • 21. 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)
  • 22. 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
  • 23. Breaking the Master Page DevelopmentWhat Is It?Breaking the Master PageDuring DevelopmentIf you don’t test along the way,its get’s messy
  • 24. 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
  • 25. Use Code View in SPD
  • 26. 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
  • 27. 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
  • 28. First View of MockupExample of MockupprovidedUse of Lorem Ipsum(Placeholder Text) • Marcy - screenshot of Top Nav wrap
  • 29. Fixing the Width of the RibbonWhat Is It?Fixing the width of the ribbon to match the fixed width of the contentarea
  • 30. 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
  • 31. Using Content Editor Web Parts for Web ContentWhat Is It?Using the Content Editor WebPart for Web Content
  • 32. 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;
  • 33. Removing the Quick Launch ContentPlaceholder from Master PageWhat Is It?Removing the Quick Launchcontrol from the Master Page
  • 34. 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
  • 35. 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
  • 36. Johnny Smith’s codeAll items are easily accessible via CSS Selectors
  • 37. 3rd Party ControlClass on everylevelThey are even niceenough to classthe first and lastitems of sets
  • 38. 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.
  • 39. 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
  • 40. 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
  • 41. 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
  • 42. 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

×