Meeting # 93 Welcome to the Minnesota SharePoint User Group August 8 th, 2012 SharePoint Branding:

Meeting # 93http://www.sharepointmn.com

Welcome to the Minnesota SharePoint

User Group

http://www.sharepointmn.com

August 8th, 2012

SharePoint Branding: “Anything* is possible…”

Kristin Grider and Steven Ray

Meeting # 93http://www.sharepointmn.comhttp://www.sharepointmn.com

Agenda

• Introductions• Why, when, who, what and how to brand• Tools for branding• Break• Branding extras: responsive design (demo) and strategies for

dealing with sub-brands• Q & A• Wrap-up and Giveaways


User Group Goal / Objectives

Develop and support a local community focused on Microsoft SharePoint Technologies

• Educate user group members about SharePoint Technologies• Transfer knowledge within the community• Communicate best practices• Introduce new products / solutions


Introductions – MNSPUG Sponsors

Avtex (www.avtex.com) • Technology consulting company• Practice area focused on SharePoint

Benchmark Learning (www.benchmarklearning.com)• Training on many technologies

Microsoft (www.microsoft.com)

Wrox Press (www.wrox.com) O’Reilly (www.oreilly.com)

http://www.avtex.com/

http://www.newhorizonsmn.com/

http://www.microsoft.com/

http://www.wrox.com/

http://www.oreilly.com/


www.SharePointMN.com

• Website for user group• SharePoint resource documents• SharePoint resource links• RSS Feeds • Meeting Schedule• Past User Group Presentations

• [email protected] www.sharepointmn.com

http://www.sharepointmn.com/

mailto:[email protected]



Social Networking• Linked In group – The most interactive… includes job postings…

Post Job Posting on the Jobs Discussion page

http://www.linkedin.com/groups?gid=1878792

• Twitter tags - @MNSPUG and #MNSPUG

http://www.linkedin.com/groups?gid=1878792


Upcoming Schedule• Next Meeting

• Sept 5th 9:00 AM to 11:30 AM **Not our normal week!

•SharePoint Discussion Panel

•Microsoft Technology Center

•Check www.SharePointMN.com for updates!

• Ongoing Schedule• 2nd Wednesday of every month

• 9:00 to 11:30 am

• Microsoft Technical Center - Edina



Local and Online EventsMicrosoft Webcast Calendar of Eventshttp://www.microsoft.com/events/webcasts/calendar/monthview.aspx#filter

SharePoint ShopTalk (Online) – Every Thursday @ 11:30 AMhttp://sharepointshoptalk.blogspot.com/

SharePoint Legal Users Group – 3rd Thursday @ 12:00 to 1:00 p.m.http://sharepointmnlegal.com

Minnesota Developers SharePoint Users Group – 4th Wednesday@ 8:30 to 10:30 a.m.http://mndevspug.com

SharePoint Saturday Twin Cities – November 3rd, 2012 Normandale Community College, Bloomingtonhttp://sharepointsaturday.com/twincities

Microsoft SharePoint Conference 2012 – November 12 – 15, 2012 Las Vegas, Nevadahttp://www.mssharepointconference.com/Pages/default.aspx

Anything Else?

http://www.microsoft.com/events/webcasts/calendar/monthview.aspx

http://www.microsoft.com/events/webcasts/calendar/monthview.aspx

http://sharepointshoptalk.blogspot.com/

http://sharepointshoptalk.blogspot.com/

http://sharepointmnlegal.com/

http://sharepointmnlegal.com/

http://mndevspug.com/

http://sharepointsaturday.com/twincities

http://www.mssharepointconference.com/Pages/default.aspx

http://www.mssharepointconference.com/Pages/default.aspx


Surveys & Giveaways!


Presenters


Quick IntroKristin Grider• User Experience Designer, Avtex• Pinterest DIY fanatic• [email protected]

Steven Ray• User Experience Developer, Avtex• Photographer extraordinaire • http://blog.avtex.com/author/sray• [email protected]


http://blog.avtex.com/author/sray



SharePoint Branding: “Anything* is possible…”

*almost


Almost any design can be implemented in SharePoint…

…but it is a balancing act!

• Design complexity depends on• The time allowed• Project budget • Team’s skill set

Meeting # 93http://www.sharepointmn.comhttp://www.sharepointmn.com Meeting # 80


Why to brand?

• to enhance user and customer experience• to create user buy-in for intranets• to promote corporate identity• to unify employees


When to brand?

• ideally before you build • best when upgrading, less

duplication of effort• Mini-branding: seasonal changes

in color scheme/imagery, changes in corporate agendas/campaigns• These are especially effective at

cultivating buy-in and participation in intranets.

“You can use an eraser on the drafting table or a sledgehammer on the construction site.” --Frank Lloyd Wright


Who should brand?

• The Dream Team: a collaborative group consisting of…• Marketing• User Experience• IT• Front-end developer


What to brand?

• Quick and easy vs. Slow and comprehensive• Themes: • good for quick color changes• paints with a very broad brush• difficult to customize themes• additional custom css is usually required for an

acceptable result


Tools for branding• SharePoint Designer• Firebug or IE dev toolbar• jQuery/CSS/HTML• Randy Driscoll’s v4 master

http://blog.drisgill.com/2009/11/starter-master-pages-for-sharepoint.html

• Heather Solomon’s 2010 CSS charthttp://sharepointexperience.com/csschart/csschart.html?utm_source=spexp.me&utm_medium=urlshortener

• Layered PSD of OOB 2010https://skydrive.live.com/?cid=ed1a37150dabcd2d&id=ED1A37150DABCD2D!385




http://sharepointexperience.com/csschart/csschart.html?utm_source=spexp.me&utm_medium=urlshortener




https://skydrive.live.com/?cid=ed1a37150dabcd2d&id=ED1A37150DABCD2D!385




How to brand?

• Master page vs page layouts• SharePoint HTML/CSS structure• Google Chrome• SharePoint modules• Dialog boxes• Responsive Design


Master Pages and Page Layouts


Master pages, Page layouts and pages

• Master page is the overall frame that pages and page layouts fit into.

• Page layouts provide structures for the unique content on each page.

• Pages are the unique content (webparts) for an individual page.

• Each page uses a page layout.• One page layout can be used by an infinite number of pages.


Master pages

• The overall frame of the page• <html>, <head>, <body>• Ribbon• #s4-workspace

Site master vs. System master• Fixed width vs. liquid (default)


Master Page: <asp: ContentPlaceholder>

• PlaceHolderAdditionalPageHead• PlaceHolderSiteName• PlaceHolderPageTitleInTitleArea• PlaceHolderSearchArea• PlaceHolderTopNavBar• PlaceHolderMain


Master Page tip #1: Turn off master-page approval

• Good idea for production, but time-consuming for development

• In the “Site Actions” menu, choose “Manage Content and Structure”.

• Right-click on “Master Page Gallery” in the left menu.• Select “Edit Properties”• Select “Versioning Settings”• In the first section, you can choose whether content approval

applies to that library.


Master Page tip #2: server-relative URLs

• <% $SPUrl:~SiteCollection %>• <link rel="stylesheet" type="text/css“

href="<% $SPUrl:~SiteCollection/Style Library/mystyles.css %>" />

• Sometimes you need full URL:• <script type="text/javascript" src="http://yoursite.com/Style

%20Library/scripts/myscript.js"></script>

• Or <asp:literal> tag:• <script type="text/javascript" src=“<asp:literal runat=‘server’

Text=‘<% $SPUrl:~SiteCollection/Style%20Library/scripts/myscript.js’ />"></script>


Master Page tip #3: Favicons

• SharePoint makes this easy• <SharePoint:SPShortcutIcon runat="server"

IconUrl="/_layouts/images/favicon.ico"/>• Just change IconUrl path to your custom icon• Test on a new browser to avoid caching issues


Page Layouts


Page Layout structure

• <asp:content></asp:content>• <asp:Content ContentPlaceholderID =

“PlaceHolderPageTitle” runat=“server”>Whatever content you want

</asp:Content>

• Can do layout-specific CSS, JS, etc.• Only place you can put Web-part Zones:


Page Layouts: Web-part Zones

• Designates areas where users can add/edit/delete web parts• <WebPartPages:WebPartZone

id="g_EC922EB9346B4F99A1A96BCB47226BD7" runat="server" title=“sidebar"></WebPartPages:WebPartZone>

Page Layout Tip #1: Turn off the chrome• <WebPartPages:WebPartZone

id="g_EC922EB9346B4F99A1A96BCB47226BD7" runat="server" title=“sidebar“ PartChromeType=“none”></WebPartPages:WebPartZone>


SharePoint HTML/CSS Structure


Challenge #1: No Designer access to _layout

• A lot of OOTB images and CSS files are in the _layout folder• But SharePoint Designer can’t access that folder• Rely on overrides


Challenge #2: Anonymous HTML

• A lot of SharePoint structure is anonymous HTML• Or worse, is anonymous HTML with inline styling<td class="s4-titletext"> <h1 name="onetidProjectPropertyTitle"> <a href="/departments/" id="ctl00_PlaceHolderSiteName_onetidProjectPropertyTitle">Division</a> </h1> <span class="s4-nothome s4-bcsep s4-titlesep" id="onetidPageTitleSeparator"> <span> <span style="height:11px;width:11px;position:relative;display:inline-block;"> <img style="border-width:0px;position:absolute;left:-0px !important;top:-585px !important;" alt=":" src="/_layouts/images/fgimg.png"> </span> </span> </span> <h2> <a href="/departments/SitePages">Site Pages</a> </h2></td>


Challenge #3: Semi-anonymous HTML

• <div allowdelete="false" class="ms-WPBody noindex ms-wpContentDivSpace" width="100%" id="WebPartWPQ2" haspers="false" webpartid="0f7698ea-7db6-45ed-926c-45bd28089c9a"><p>Here's a sample web part.<br></p></div>

• Classes are generic• Web-part ID is based on number that changes

if web parts are added, removed or moved• Even “webpartid” property is brittle


HTML/CSS Tip #1: Edit the HTML

• Much of the default HTML isn’t hidden inside controls, so it can be edited directly in the master page or page layout

• To target a specific web part, wrap it in a div with a specific class or ID


A lot of very specific OOTB CSS

• A lot of SharePoint’s default CSS is very specific• Some of it uses !important tags• This makes it hard to override

For instance, the first item in the Quick Launch:<a href="" class="static menu-item">

<span class="menu-item-text">Libraries</span</a>Uses this style selector to differentiate it from the rest of the items in the list:.s4-ql ul.root > li > .menu-item

Or how about this one:body #s4-leftpanel-content


HTML/CSS Tip #2: Some tools

CSS Reset, by Kyle Schaeffer http://kyleschaeffer.com/sharepoint/css-reset/

CSS Frameworks like LessCSS (http://lesscss.org/)• Automatically nests CSS styles• Variables and mix-ins let you set a property in one class, then

reference that class in other styles• Takes a little bit of getting used to

http://kyleschaeffer.com/sharepoint/css-reset/

http://lesscss.org/


HTML/CSS Tip #3: Remove the IE metatag

• <meta http-equiv=“X-UA-Compatible” content=“IE=8” />• Tells IE browsers to act like the specified version• Good for compatability, bad for advanced features• Caveat: Some things (like People Picker) throw errors without

it. If you start seeing namespace errors, restore the tag and see if that fixes it


Google Chrome Scrollbars


Google Chrome and the disappearing scrollbars

• As part of positioning ribbon, SharePoint disables the browser’s scrollbars and re-creates them with JS

• Works fine – except in Google Chrome

Solution: Override that function and position ribbon with CSS instead:

http://blog.avtex.com/2012/04/06/position-ribbon-and-disable-fake-scrollbars-in-sharepoint-2010/




SharePoint Modules


SharePoint modules

• Search Center, MySite, Blog, etc.

Challenges• Module-specific code and master pages• Duplicate code (MySite)• Different code styled to look the same (MySite)


Module solutions

• Include reference to core style sheets in your module master pages, then override as necessary

• We put MySites CSS in our top-level Style Library and hardcode an absolute URL to it in the master page.


Dialog Boxes


Dialog boxes: They’re really iFrames

• Use same master page as the rest of the site• That means they use the same styling and structure – header,

footer, etc.


Dialog-related classes

• .s4-notdlg: Use this on any element that shouldn’t appear in dialog boxes

• .ms-dialog: Class added to <html> tag of dialog boxes. Can use this to show/hide/change elements in dialog boxes.

• Default SharePoint structures work fine; mostly need to worry about your own code and CSS changes.


Dialog gotchas

• .s4-ca: don’t apply any sort of “overflow” value• .s4-wp-cell-plain, .s4-wpcell: Beware of padding or margin

http://blog.avtex.com/2012/01/31/sharepoint-2010-dialog-box-branding-gotchas/





Break


SharePoint and Responsive Design


What is Responsive Design?

• Way to build a site once, serve it to all devices, and have it display appropriately to each screen width

• Uses CSS media queries to control how the page looks at any given screen width

• Since it’s based on screen size, you don’t care what the actual device is. In theory, should display well on all devices, past and future.

• Each width where layout changes is called a “breakpoint”• “Progressive enhancement” vs “graceful degradation”


Useful screen sizes to know

Remember, don’t design for specific devices, but these provide a rough idea of what things specific resolutions look like in real life:• iPad: 800 x 1024• iPhone: 320 x 480


SharePoint is good at responsive design!

• Default liquid layout is mostly “responsive-ready”, although many individual web parts aren’t

• Just 20 lines of CSS needed to make overall structure responsive – and that includes comments, white space and a sample breakpoint

Demo site• http://tinyurl.com/mnspugDemo• Username: mnspugdemo• Password: 12345

http://tinyurl.com/mnspugDemo

http://tinyurl.com/mnspugDemo


What about SharePoint’s built-in mobile view?

• I recommend not using it• Relies on device detection• Gives you another thing you have to

style• Has limited functionality

Turning it off requires editing a file called “compat.browser”http://blog.drisgill.com/2009/11/sp2010-branding-tip-6-mobile-browsers.html

http://blog.drisgill.com/2009/11/sp2010-branding-tip-6-mobile-browsers.html

http://blog.drisgill.com/2009/11/sp2010-branding-tip-6-mobile-browsers.html


Responsive Design caveats

• Best with publishing pages. Some admin pages (like views of lists and libraries with lots of columns) simply aren’t going to be responsive

• Will still need to adjust a bunch of sub-elements at your chosen breakpoints

• Pay close attention to individual web parts• Content-Query Web Parts are your friend (XSL)• (Magic Data View Builder is good XSL-authoring tool)


Demo


Responsive Design steps

1. Get rid of min-width on #s4-bodyContainer2. Get rid of min-height on .s4-ca3. Decide how to handle images

1. Max-width:100%; is a good start4. Add metatags to tell browsers that site is mobile-friendly:

• <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

• <meta name="HandheldFriendly" content="true" />


Responsive Design example breakpoint

1. Decide at what width you want to hide #s4-leftpanel2. Hide it and remove left margin from .s4-ca


Real-Life Example


Retrofitting a SharePoint site to be responsive


Sub-Branding


Strategies for dealing with sub-brands

• Load custom css based on login credentials (user permissions)• Either simple or complex


Q & A


Last But Not Least

• Please Fill Out Evaluations• Drawings for Giveaways• Today’s Presenters:

Kristin Grider and Steven Ray


Thanks for coming!

Meeting # 93 Welcome to the Minnesota SharePoint User Group August 8 th, 2012 SharePoint Branding:

Documents

Transcript of Meeting # 93 Welcome to the Minnesota SharePoint User Group August 8 th, 2012 SharePoint Branding: