Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations

Presentation on theme: "Meeting # 93 Welcome to the Minnesota SharePoint User Group August 8 th, 2012 SharePoint Branding:"— Presentation transcript:

1 Meeting # 93 Welcome to the Minnesota SharePoint User Group August 8 th, 2012 SharePoint Branding: “Anything* is possible…” Kristin Grider and Steven Ray

2 Meeting # 93 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

3 Meeting # 93 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

4 Meeting # 93 Introductions – MNSPUG Sponsors Avtex ( Technology consulting company Practice area focused on SharePoint Benchmark Learning ( Training on many technologies Microsoft ( Wrox Press ( O’Reilly (

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

6 Meeting # 93 Social Networking Linked In group – The most interactive… includes job postings… Post Job Posting on the Jobs Discussion page Twitter tags - @MNSPUG and #MNSPUG

7 Meeting # 93 Upcoming Schedule Next Meeting Sept 5 th 9:00 AM to 11:30 AM **Not our normal week! SharePoint Discussion Panel Microsoft Technology Center Check for updates! Ongoing Schedule 2 nd Wednesday of every month 9:00 to 11:30 am Microsoft Technical Center - Edina

8 Meeting # 93 Local and Online Events

9 Meeting # 93 We Want You! MN SharePoint User Group looking for speakers You know something about SharePoint Someone you know, knows something about SharePoint Speak about something you implemented Email: Name Contact Information Background Information Subjects comfortable talking about

10 Meeting # 93 Surveys & Giveaways!

11 Meeting # 93 Presenters

12 Meeting # 93 Quick Intro Kristin Grider User Experience Designer, Avtex Pinterest DIY fanatic Steven Ray User Experience Developer, Avtex Photographer extraordinaire

13 Meeting # 93 SharePoint Branding: “Anything* is possible…” *almost

14 Meeting # 93 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

15 Meeting # 93 Meeting # 80

16 Meeting # 93 Meeting # 80

17 Meeting # 93 Meeting # 80

18 Meeting # 93 Meeting # 80

19 Meeting # 93 Meeting # 80

20 Meeting # 93 Meeting # 80

21 Meeting # 93 Why to brand? to enhance user and customer experience to create user buy-in for intranets to promote corporate identity to unify employees

22 Meeting # 93 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

23 Meeting # 93 Who should brand? The Dream Team: a collaborative group consisting of… Marketing User Experience IT Front-end developer

24 Meeting # 93 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

25 Meeting # 93 Tools for branding SharePoint Designer Firebug or IE dev toolbar jQuery/CSS/HTML Randy Driscoll’s v4 master sharepoint.html Heather Solomon’s 2010 CSS chart Layered PSD of OOB 2010 0DABCD2D!385

26 Meeting # 93 How to brand? Master page vs page layouts SharePoint HTML/CSS structure Google Chrome SharePoint modules Dialog boxes Responsive Design

27 Meeting # 93 Master Pages and Page Layouts

28 Meeting # 93 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.

29 Meeting # 93 Master pages The overall frame of the page,, Ribbon #s4-workspace Site master vs. System master Fixed width vs. liquid (default)

30 Meeting # 93 Master Page: PlaceHolderAdditionalPageHead PlaceHolderSiteName PlaceHolderPageTitleInTitleArea PlaceHolderSearchArea PlaceHolderTopNavBar PlaceHolderMain

31 Meeting # 93 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.

32 Meeting # 93 Master Page tip #2: server-relative URLs " /> Sometimes you need full URL: Or tag: ">

33 Meeting # 93 Master Page tip #3: Favicons SharePoint makes this easy Just change IconUrl path to your custom icon Test on a new browser to avoid caching issues

34 Meeting # 93 Page Layouts

35 Meeting # 93 Page Layout structure Whatever content you want Can do layout-specific CSS, JS, etc. Only place you can put Web-part Zones:

36 Meeting # 93 Page Layouts: Web-part Zones Designates areas where users can add/edit/delete web parts Page Layout Tip #1: Turn off the chrome

37 Meeting # 93 SharePoint HTML/CSS Structure

38 Meeting # 93 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

39 Meeting # 93 Challenge #2: Anonymous HTML A lot of SharePoint structure is anonymous HTML Or worse, is anonymous HTML with inline styling Division Site Pages

40 Meeting # 93 Challenge #3: Semi-anonymous HTML Here's a sample web part. 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

41 Meeting # 93 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

42 Meeting # 93 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: Libraries</span 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

43 Meeting # 93 HTML/CSS Tip #2: Some tools CSS Reset, by Kyle Schaeffer CSS Frameworks like LessCSS ( 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

44 Meeting # 93 HTML/CSS Tip #3: Remove the IE metatag 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

45 Meeting # 93 Google Chrome Scrollbars

46 Meeting # 93 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: and-disable-fake-scrollbars-in-sharepoint-2010/

47 Meeting # 93 SharePoint Modules

48 Meeting # 93 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)

49 Meeting # 93 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.

50 Meeting # 93 Dialog Boxes

51 Meeting # 93 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.

52 Meeting # 93 Dialog-related classes.s4-notdlg: Use this on any element that shouldn’t appear in dialog Class added to 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.

53 Meeting # 93 Dialog gotchas.s4-ca: don’t apply any sort of “overflow” value.s4-wp-cell-plain,.s4-wpcell: Beware of padding or margin branding-gotchas/

54 Meeting # 93 Break

55 Meeting # 93 SharePoint and Responsive Design

56 Meeting # 93 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”

57 Meeting # 93 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

58 Meeting # 93 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 Username: mnspugdemo Password: 12345

59 Meeting # 93 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” 0-branding-tip-6-mobile-browsers.html

60 Meeting # 93 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)

61 Meeting # 93 Demo

62 Meeting # 93 Responsive Design steps 1.Get rid of min-width on #s4-bodyContainer 2.Get rid of min-height on.s4-ca 3.Decide how to handle images 1.Max-width:100%; is a good start 4.Add metatags to tell browsers that site is mobile-friendly:

63 Meeting # 93 Responsive Design example breakpoint 1.Decide at what width you want to hide #s4-leftpanel 2.Hide it and remove left margin from.s4-ca

64 Meeting # 93 Real-Life Example

65 Meeting # 93 Retrofitting a SharePoint site to be responsive

66 Meeting # 93 Retrofitting a SharePoint site to be responsive

67 Meeting # 93 Sub-Branding

68 Meeting # 93 Strategies for dealing with sub-brands Load custom css based on login credentials (user permissions) Either simple or complex

69 Meeting # 93 Meeting # 80 Q & A

70 Meeting # 93 Last But Not Least Please Fill Out Evaluations Drawings for Giveaways Today’s Presenters: Kristin Grider and Steven Ray

71 Meeting # 93 Meeting # 80 Thanks for coming!

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

Similar presentations

Ads by Google