Presentation is loading. Please wait.

Presentation is loading. Please wait.

Meeting # 93http://www.sharepointmn.com Welcome to the Minnesota SharePoint User Group August 8 th, 2012 SharePoint Branding:

Similar presentations


Presentation on theme: "Meeting # 93http://www.sharepointmn.com Welcome to the Minnesota SharePoint User Group August 8 th, 2012 SharePoint Branding:"— Presentation transcript:

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

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

3 Meeting # 93http://www.sharepointmn.com 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 # 93http://www.sharepointmn.com Introductions – MNSPUG Sponsors Avtex (www.avtex.com)www.avtex.com Technology consulting company Practice area focused on SharePoint Benchmark Learning (www.benchmarklearning.com)www.benchmarklearning.com Training on many technologies Microsoft (www.microsoft.com)www.microsoft.com Wrox Press (www.wrox.com)www.wrox.com O’Reilly (www.oreilly.com)www.oreilly.com

5 Meeting # 93http://www.sharepointmn.com www.SharePointMN.com Website for user group SharePoint resource documents SharePoint resource links RSS Feeds Meeting Schedule Past User Group Presentations sharepoint@sharepointmn.com www.sharepointmn.com

6 Meeting # 93http://www.sharepointmn.com 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

7 Meeting # 93http://www.sharepointmn.com 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 www.SharePointMN.com for updates!www.SharePointMN.com Ongoing Schedule 2 nd Wednesday of every month 9:00 to 11:30 am Microsoft Technical Center - Edina

8 Meeting # 93http://www.sharepointmn.com Local and Online Events

9 Meeting # 93http://www.sharepointmn.com 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: sharepoint@sharepointmn.comsharepoint@sharepointmn.com Name Contact Information Background Information Subjects comfortable talking about

10 Meeting # 93http://www.sharepointmn.com Surveys & Giveaways!

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

12 Meeting # 93http://www.sharepointmn.com Quick Intro Kristin Grider User Experience Designer, Avtex Pinterest DIY fanatic kgrider@avtex.com Steven Ray User Experience Developer, Avtex Photographer extraordinaire http://blog.avtex.com/author/sray sray@avtex.com

13 Meeting # 93http://www.sharepointmn.com SharePoint Branding: “Anything* is possible…” *almost

14 Meeting # 93http://www.sharepointmn.com 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 # 93http://www.sharepointmn.com Meeting # 80

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

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

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

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

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

21 Meeting # 93http://www.sharepointmn.com 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 # 93http://www.sharepointmn.com 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 # 93http://www.sharepointmn.com Who should brand? The Dream Team: a collaborative group consisting of… Marketing User Experience IT Front-end developer

24 Meeting # 93http://www.sharepointmn.com 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 # 93http://www.sharepointmn.com 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 chart http://sharepointexperience.com/csschart/csschart.html?utm_sou rce=spexp.me&utm_medium=urlshortener Layered PSD of OOB 2010 https://skydrive.live.com/?cid=ed1a37150dabcd2d&id=ED1A3715 0DABCD2D!385

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

27 Meeting # 93http://www.sharepointmn.com Master Pages and Page Layouts

28 Meeting # 93http://www.sharepointmn.com 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 # 93http://www.sharepointmn.com Master pages The overall frame of the page,, Ribbon #s4-workspace Site master vs. System master Fixed width vs. liquid (default)

30 Meeting # 93http://www.sharepointmn.com Master Page: PlaceHolderAdditionalPageHead PlaceHolderSiteName PlaceHolderPageTitleInTitleArea PlaceHolderSearchArea PlaceHolderTopNavBar PlaceHolderMain

31 Meeting # 93http://www.sharepointmn.com 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 # 93http://www.sharepointmn.com Master Page tip #2: server-relative URLs " /> Sometimes you need full URL: Or tag: ">

33 Meeting # 93http://www.sharepointmn.com 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 # 93http://www.sharepointmn.com Page Layouts

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

36 Meeting # 93http://www.sharepointmn.com 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 # 93http://www.sharepointmn.com SharePoint HTML/CSS Structure

38 Meeting # 93http://www.sharepointmn.com 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 # 93http://www.sharepointmn.com 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 # 93http://www.sharepointmn.com 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 # 93http://www.sharepointmn.com 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 # 93http://www.sharepointmn.com 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 li >.menu-item Or how about this one: body #s4-leftpanel-content

43 Meeting # 93http://www.sharepointmn.com HTML/CSS Tip #2: Some tools CSS Reset, by Kyle Schaeffer http://kyleschaeffer.com/sharepoint/css-reset/ http://kyleschaeffer.com/sharepoint/css-reset/ CSS Frameworks like LessCSS (http://lesscss.org/)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

44 Meeting # 93http://www.sharepointmn.com 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 # 93http://www.sharepointmn.com Google Chrome Scrollbars

46 Meeting # 93http://www.sharepointmn.com 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/

47 Meeting # 93http://www.sharepointmn.com SharePoint Modules

48 Meeting # 93http://www.sharepointmn.com 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 # 93http://www.sharepointmn.com 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 # 93http://www.sharepointmn.com Dialog Boxes

51 Meeting # 93http://www.sharepointmn.com 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 # 93http://www.sharepointmn.com Dialog-related classes.s4-notdlg: Use this on any element that shouldn’t appear in dialog boxes.ms-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 # 93http://www.sharepointmn.com 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/

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

55 Meeting # 93http://www.sharepointmn.com SharePoint and Responsive Design

56 Meeting # 93http://www.sharepointmn.com 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 # 93http://www.sharepointmn.com 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 # 93http://www.sharepointmn.com 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

59 Meeting # 93http://www.sharepointmn.com 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/sp201 0-branding-tip-6-mobile-browsers.html

60 Meeting # 93http://www.sharepointmn.com 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 # 93http://www.sharepointmn.com Demo

62 Meeting # 93http://www.sharepointmn.com 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 # 93http://www.sharepointmn.com 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 # 93http://www.sharepointmn.com Real-Life Example

65 Meeting # 93http://www.sharepointmn.com Retrofitting a SharePoint site to be responsive

66 Meeting # 93http://www.sharepointmn.com Retrofitting a SharePoint site to be responsive

67 Meeting # 93http://www.sharepointmn.com Sub-Branding

68 Meeting # 93http://www.sharepointmn.com Strategies for dealing with sub-brands Load custom css based on login credentials (user permissions) Either simple or complex

69 Meeting # 93http://www.sharepointmn.com Meeting # 80 Q & A

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

71 Meeting # 93http://www.sharepointmn.com Meeting # 80 Thanks for coming!


Download ppt "Meeting # 93http://www.sharepointmn.com Welcome to the Minnesota SharePoint User Group August 8 th, 2012 SharePoint Branding:"

Similar presentations


Ads by Google