10 worst mistakes in sharepoint branding
Post on 27-Jan-2015
106 Views
Preview:
DESCRIPTION
TRANSCRIPT
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.
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
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
top related