120
Meeting #116 http://sharepointmn.com Welcome to the Minnesota SharePoint User Group August 13 th , 2014 SharePoint Branding Lynne Figg and Steven Ray Donald Donais

Meeting #116 Welcome to the Minnesota SharePoint User Group August 13 th, 2014 SharePoint Branding Lynne Figg and Steven Ray Donald

Embed Size (px)

Citation preview

Meeting #116http://sharepointmn.com

Welcome to the Minnesota SharePoint

User Group

August 13th, 2014

SharePoint Branding

Lynne Figg and Steven Ray

Donald Donais

Meeting #116http://sharepointmn.com

Agenda

• MNSPUG Information• Use C.R.A.P. to Improve your Website Design – Lynn Figg• Break• Branding SharePoint – Steven Ray• Giveaways

• Vendor Sponsored Lunch - AvePoint

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

Meeting #116http://sharepointmn.com

MNSPUG Sponsors

Wrox Press (www.wrox.com)

O’Reilly (www.oreilly.com)

Dedicated Sponsors

Avtex (www.avtex.com)

Microsoft (www.microsoft.com)

Annual Sponsor

Currently Looking for Sponsorships!

SharePoint User Group Support Media Sponsor

Meeting #116http://sharepointmn.com

MN SharePoint Users Group Website

• SharePoint Resource Documents• SharePoint Resource links• RSS Feeds • Meeting Schedule• Past User Group Presentations• Past User Group Recordings• Sponsorship Information

• http://sharepointmn.com• Email: [email protected]

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

• Yammer – Minnesota SharePoint Users Group https://www.yammer.com/mnspug/

Meeting #116http://sharepointmn.com

Upcoming Schedule

• Next Meeting September 10th – SharePoint Member Case Study 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

Call for SharePoint Member Case Studies!

• Still Looking for 1-2 More Case Studies

• 4-6 Member Case Studies (10-15 in length min.)

• Submit by: August 29th

• Examples:

• Implemented Form/Workflow

• Integrated with different systems

• Implemented for client – joint presentation

• Contact: [email protected] or [email protected]

Meeting #116http://sharepointmn.com

Local and Online EventsTwin Cities PowerShell User Group – Sept 9th, 4:30 – 7:00 pmhttp://www.tcposhug.com/

SharePointalooza– Sept 12th & 13th in Branson, Missourihttp://www.sharepointalooza.org/

MN SharePoint Legal Users Group – Sept 18th 12 – 1:30 p.m. TBDhttp://sharepointmnlegal.com/SitePages/Home.aspx

Mindsurf Conference – October 9th, Minneapolis Convention Center (Pay to attend event)http://www.benchmarklearning.com/Event/MindSurf/Overview.aspx

SharePoint Saturday Twin Cities – November 22nd, Normandale Community Collegehttp://spstc.com

MN SharePoint SharePint– August 26th 4:30-?, Joe Senser’s Bloomingtonhttp://www.meetup.com/Minnesota-SharePoint-SharePint/

MN Women in SharePoint – September 16th, Avtex office Bloomington

SPChat through SharePoint Community – August 14th – Onlinehttp://sharepoint-community.net/events/spchat-with-mai-omar-desouki

Meeting #116http://sharepointmn.com

Evaluations & Giveaways!

Meeting #116http://sharepointmn.com

Presenters

Meeting #116http://sharepointmn.com

Lynne Figg• Now: SharePoint Solutions Analyst @ Scott County

• B4: Web Architect @ Normandale College, Web Instructor @ Alexandria Tech College

• Member: MNSPUG, MIMA, Nat’l Gov’t Web Professionals

• Work hobby: web content strategy• Personal hobby: riding motorcycle• Yammer some, tweet little, blog less, link in, and pray for warm sunshine to ride more…

Meeting #116http://sharepointmn.com

Steven Ray• User Experience developer, Avtex• Sarah Connor look alike• [email protected] • http://blog.avtex.com/author/sray/

Meeting #116http://sharepointmn.com

Using C.R.A.P.

Meeting #116http://sharepointmn.com

I am . . . • Web developer: XHTML, XLST, XHTML, JavaScript, various languages

• Web content strategist• SharePoint OOB analyst

I am not . . • Back-end specialist• Deep-dive developer• Graphic designer by trade

part web, part marketing, and pretty good with C.R.A.P.

Meeting #116http://sharepointmn.com

Presentation based primarily on publication . . .The Non-Designer’s Design Bookby Robin Williams (no, not THAT Robin Williams)Design and typographic principles for visual novice

Meeting #116http://sharepointmn.com

So what is C.R.A.P? • Contrast• Repetition• Alignment• Proximity

Using these four principles effectively can greatly increase the effectives of your web pages as well as print and published materials; personally and professionally.

Meeting #116http://sharepointmn.com

C.R.A.P

• Contrast

• Repetition

• Alignment

• Proximity

Meeting #116http://sharepointmn.com

Alignment

Our brains like organization – it aids in readability and comprehension.

When applying the principle of alignment, you will no longer just place items on the page where there is room.

“The principle of alignment states that nothing should be placed on the page arbitrarily. Every

item should have a visual connection with something else on the page.”

Notice the different alignments? Yuck!

Meeting #116http://sharepointmn.com

Alignment Example

http://www.sewingandembroiderywarehouse.com/embtrb.htm

Meeting #116http://sharepointmn.com

Alignment Example - before

Meeting #116http://sharepointmn.com

Alignment Example - after

Meeting #116http://sharepointmn.com

Alignment Example – after 2x

Meeting #116http://sharepointmn.com

C.R.A.P

• Contrast

• Repetition

• Alignment

• Proximity

Meeting #116http://sharepointmn.com

Proximity

As in life, the closeness, the proximity of items, implies a relationship.

“The principle of proximity states that you group related items together, move them physically close to each other so the related items are seen as one cohesive group rather than a bunch or unrelated bits .”

White space is your friend

Proper organization of website navigation and content organization are examples of using proximity

Meeting #116http://sharepointmn.com

http://www.dispensamatic.com/

Proximity Example

Meeting #116http://sharepointmn.com

Proximity Example - before

Meeting #116http://sharepointmn.com

Proximity Example - after

Meeting #116http://sharepointmn.com

Proximity Example – after 2x

Meeting #116http://sharepointmn.com

Alignment & Proximity Example

Meeting #116http://sharepointmn.com

Meeting #116http://sharepointmn.com

C.R.A.P

• Contrast

• Repetition

• Alignment

• Proximity

Meeting #116http://sharepointmn.com

Repetition

Think of repetition as unity – a deliberate way to consciously unify all the elements on a page.

Use it to communicate more clearly and to organize items both intellectually and visually.

“The principle of repetition states that you repeat some aspect of the design throughout the entire piece.”

Meeting #116http://sharepointmn.com

Repetition

http://www.harvard.edu/

Meeting #116http://sharepointmn.com

Alignment, Proximity, & Repetition Example

Meeting #116http://sharepointmn.com

C.R.A.P

• Contrast

• Repetition

• Alignment

• Proximity

Meeting #116http://sharepointmn.com

Contrast

Contrast can be created in several ways:• Colored background: white or transparent –v- colored • Font styles: Sans-serif –v- Serif –v- Decorative

• Type: Large –v- small type• Weight: Strong –v- regular• Etc…

“Contrast is created when two or more elements are different.”

Meeting #116http://sharepointmn.com

Contrast, not conflict

Don’t be a wimp!

Conflict – when contrast misses the mark. “If two items are not exactly the same, then make them very different. Really different.”

Meeting #116http://sharepointmn.com

Alignment, Proximity, Repetition & Contrast Example

Meeting #116http://sharepointmn.com

C.R.A.P. - All together now

http://www1.macys.com

Meeting #116http://sharepointmn.com

Meeting #116http://sharepointmn.com

• Web Content Guidelines ‘writing for the web’ practices contributors should follow

• Web Contributor Guidespecific ‘how-to’ enter content for organization website

• Web Style Guidelist preferred spellings and abbreviations

Share C.R.A.P. with web contributors

Meeting #116http://sharepointmn.com

Share C.R.A.P. with web contributors

Meeting #116http://sharepointmn.com

Share C.R.A.P. with web contributors

Meeting #116http://sharepointmn.com

Share C.R.A.P. with web contributors

Meeting #116http://sharepointmn.com

Meeting #116http://sharepointmn.com

C.R.A.P.

Summary cheat sheets

Meeting #116http://sharepointmn.com

AlignmentPurpose

• Unify and organize.

How • Be conscious of where you place elements.• Align every object with an edge.

Avoid• Avoid inconsistent alignments.• Avoid centered alignment unless consciously trying to be formal.

Meeting #116http://sharepointmn.com

ProximityPurpose

• Organize content by grouping related items.

How • Count the number of visual elements on the page. Can they be streamlined?

Avoid• Avoid equal amounts of white space between all page items.• Don’t stick things in the corners and the middle.• If items are unrelated, don’t put them together.• Avoid too many separate elements on a page.

Meeting #116http://sharepointmn.com

RepetitionPurpose

• Unify and add visual interest.

How • Be consistent and bold with presentation of page headings, secondary

headings, lists, etc.• Add a strong and unique element you can use to repeat.

Avoid• Avoid over repeating.• Avoid ‘sort-of’ repeating.

Meeting #116http://sharepointmn.com

ContrastPurpose

• Create visual interest.• Aid in organization.

How • Colors: background, text. Font: style, size. Weight: strong, regular.• Graphics: size, placement.• Ask expert graphic designer

Avoid• Make items very different.• Don’t be a wimp.

Meeting #116http://sharepointmn.com

More thoughts about C.R.A.P• Don’t be a wimp!• Once you know the rules, you can consciously

break them.• And your just getting started. . .

Design concepts: focal-point, typography, etc. User behavior: F-shaped pattern, Z-layout, etc. Multi-channel: re-usable content, social, mobile, etc. Content strategy: writing, voice, tone, content audit,

etc.

Meeting #116http://sharepointmn.com

Audience Participation – Apply C.R.A.P.

http://www.washoecounty.us/socsrv/socsrv_contact

Meeting #116http://sharepointmn.com

Meeting #116http://sharepointmn.com

Meeting #116http://sharepointmn.com

So what is C.R.A.P? • Contrast• Repetition• Alignment• Proximity

Using these four principles effectively can greatly increase the effectives of your web pages as well as print and published materials; personally and professionally.

~ Lynne Figg

Meeting #116http://sharepointmn.com

Break Time

Meeting #116http://sharepointmn.com

Branding SharePoint 2010

• August 2012 MNSPUG featured a detailed talk on SP2010 branding.• PowerPoint deck

http://www.sharepointmn.com/User%20Group%20Presentations/August%202012%20MNSPUG.pptx

• Video http://

mnspug-web.sharepoint.com/Documents/August2012.wmv

Meeting #116http://sharepointmn.com

Why branding is important

• to enhance user and customer experience

• to create user buy-in for intranets• to promote corporate identity• to unify employees

Meeting #116http://sharepointmn.com

Anything is possible, with enough time

Meeting #116http://sharepointmn.com

20 hours

• Extranet

• Single layout

• Minor changes to default SharePoint structures

Meeting #116http://sharepointmn.com

80 hours

• Intranet

• Responsive (Bootstrap)

• IE7 compatibility

• Custom megamenu

• Some custom web parts, including promo boxes on left side

Meeting #116http://sharepointmn.com

100 hours

• Intranet

• Major effort to make it appear “non-SharePoint” while retaining most core functionality

• Client very interested in look/feel

• Involved lots of custom styling of various OOTB web parts

Meeting #116http://sharepointmn.com

120 hours

• Responsive (Bootstrap)

• Moderate amount of custom web parts

• Two main layouts

Meeting #116http://sharepointmn.com

160 hours

• Responsive

• Custom megamenu

• Lots of custom webparts

• Multiple complex page layouts

Meeting #116http://sharepointmn.com

200+ hours

• Everything you see is custom-built

• Huge number of individual pieces, all of which needed to be branded and styled

Meeting #116http://sharepointmn.com

Who should brand

• Ideally, a collaborative group consisting of: Marketing (brand experts) User Experience (interface and web design experts) IT (Hardware and network experts) Front-end developer (HTML/CSS/JS expert)

Meeting #116http://sharepointmn.com

SharePoint themes

• A bit like painting with a mop -- can’t get granular control of look/feel

• Difficult to customize

• Additional custom CSS usually required for an acceptable result

Meeting #116http://sharepointmn.com

SharePoint structure

Meeting #116http://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.

Meeting #116http://sharepointmn.com

Master Page: <asp:ContentPlaceHolder>

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

Meeting #116http://sharepointmn.com

Page Layouts

• <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

Meeting #116http://sharepointmn.com

Web-part Zones

• Designates areas where users can add/edit/delete web parts

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

Meeting #116http://sharepointmn.com

Branding considerations

Meeting #116http://sharepointmn.com

Branding tools for 2013

• Layered PSD of OOB 2013 https

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

• SharePoint Designer 2013• Firebug or IE/Chrome dev toolbar• jQuery/CSS/HTML• Randy Driscoll’s SP2013 master

http://startermasterpages.codeplex.com/• BindTuning Bootstrap theme for SharePoint 20130

http://bindtuning.com/cms/sharepoint/sharepoint-2013/theme/TheBootstrapTheme

Meeting #116http://sharepointmn.com

How SP2013 differs from SP2010

• Different HTML and CSS structures• Much less anonymous and semi-anonymous HTML• Two options for building master pages and page layouts

Old school Design Manager and code snippets

• Two options for storing custom CSS/JS/Images Style Library Masterpages folder

• Device Channels replace mobile view• Content by Search and Display Templates, vs Content Query and XSLT

Meeting #116http://sharepointmn.com

HTML and CSS

Meeting #116http://sharepointmn.com

Where to put your CSS, JS and images

Style Library (old school) PROS: Simple, you’re used to it CONS: Those files are actually stored in the database, so

referencing them requires a SQL roundtrip – in other words, slow

Custom folder in “Master Pages” directory PROS: All your stuff in one place. Files are stored on server, so

faster CONS: Have to get to the directory a different way in order to

see the files in Designer

Meeting #116http://sharepointmn.com

Different HTML/CSS structures

• #s4-ribbonrow now second row in #ms-designer-ribbon• #s4-workspace and .s4-bodyContainer still the same• Inside that, it’s HTML5 -- <header>, <main>, <footer>• Web zones now indicated with “.ms-webpartzone”• Web parts now wrapped with:

“s4-webcell-plain”• “ms-webpart-chrome”

– “ms-webpart-chrome-title”» H2. ms-webpart-titleText

– “ms-WPBody”• Structure is much less table-heavy, though individual web parts are still

very tableish

Meeting #116http://sharepointmn.com

2010: Anonymous HTML<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>

Meeting #116http://sharepointmn.com

2013: much less anonymous HTML<ul class="s4-breadcrumb">

<li class="s4-breadcrumbRootNode"><span class="s4-breadcrumb-arrowcont">

<img style="display:inline-block;padding-top:4px;" alt="" src="/_layouts/15/images/nodearrow.png">

</span><a href="/iw/sray/Pages/default.aspx" class="s4-breadcrumbRootNode" title="Home">Steven Ray's

2013 Playground</a><ul class="s4-breadcrumbRootNode">

<li class="s4-breadcrumbCurrentNode"><span class="s4-breadcrumb-arrowcont">

<img style="display:inline-block;padding-top:4px;" alt="" src="/_layouts/15/images/nodearrow.png">

</span><a href="/iw/sray/Pages/Test-page.aspx" class="s4-breadcrumbCurrentNode">Test

page</a></li>

</ul></li>

</ul>

Meeting #116http://sharepointmn.com

Still a lot of semi-anonymous HTML

2010:<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.</p>

</div>

2013:<div allowdelete="false" class="ms-WPBody ms-WPBorder noindex ms-wpContentDivSpace" width="100%"

id="WebPartWPQ2" haspers="false" webpartid="c71e5428-5855-41f0-856d-c4a9666d51e6"><p>Here's a sample web part.</p>

</div>

• Classes are generic• Web-part ID is based on number that changes if web parts are added, removed or

moved on the page• Even “webpartid” property is brittle

Meeting #116http://sharepointmn.com

Still a lot of very specific CSS to override

2010: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

2013:<a href" class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode">

<span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Announcement test</span>

</span></a>

Uses this style selector to differentiate it from the rest of the items in the list:.ms-core-listMenu-verticalBox li.static > ul.static > li.static > .ms-core-listMenu-item

Meeting #116http://sharepointmn.com

Master Pages and Design Manager

Meeting #116http://sharepointmn.com

Two new starting master pages

• Seattle and Oslo Seattle optimized for intranet, with left nav Oslo optimized for public-facing: no left nav, wider content area,

security-trimmed controls Can really use either one

• There’s a v4 there too, but ignore it; for backward compatibility only

Meeting #116http://sharepointmn.com

Design Manager

• Intended so that designers can create any HTML structure they want, without having to understand or mess with .NET code

• Lets you configure functionality and then copy/paste code snippets into your master page

• Allows you to preview your layouts

Meeting #116http://sharepointmn.com

Master page option #1: the old-fashioned way

• Create a .NET master page/page layout and edit it directly, just like in SP2010 Copy either Seattle or Oslo Go into Design Manager

• “Edit Master Pages” from left menu• Click the “…” next to your master page• In the resulting popup, click “…” again• Choose “Edit properties” from the menu• Uncheck “Associated File”• Click “Save”

• You can now edit the master page directly. But preview and code snippets won’t work.

Meeting #116http://sharepointmn.com

Master page option #2: HTML master pages

• Create your own HTML layout. Can be anything you want• Copy or save it to the “Masterpages” folder, and publish it• SharePoint will automatically generate a linked master page

This linked page cannot be deleted and should not be edited; it is regenerated every time the HTML file is saved.

• In Design Manager, go to “Edit Master Pages” and publish/approve your page

• Use Design Manager to create code snippets that you copy and paste into your HTML master.

Meeting #116http://sharepointmn.com

Code Snippets

Meeting #116http://sharepointmn.com

Code snippets in HTML master pages

• Design Manager -> Edit Master Pages -> Click on master page• Choose “Snippets” from top bar in ribbon• In the “Web Parts” section of ribbon, choose the web part you want

to configure• When done configuring, copy the HTML snippet and paste it into

your HTML master page• All snippet code is kept together; don’t put the registration tags at

the top of the page, like you do in .NET pages. SharePoint will put everything in the right place in the autogenerated master.

Meeting #116http://sharepointmn.com

A sample code snippet<!--CS: Start Content Editor Snippet-->

<!--SPM:<%@Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>--><!--MS:<WebPartPages:ContentEditorWebPart xmlns:WebPartPages="namespace" runat="server" webpart="true">-->

<!--PS: Start of READ-ONLY PREVIEW (do not modify)--><div class="ms-webpart-chrome ms-webpart-chrome-fullWidth "><div class="ms-webpart-chrome-title" id="WebPart_ChromeTitle"><span title="$Resources:core,ContentEditorWebPartTitle; - $Resources:core,ContentEditorWebPartDescription;" id="WebPartTitle" class="js-webpart-titleCell"><h2 style="text-align:justify;" class="ms-webpart-titleText"><nobr><span>$Resources:core,ContentEditorWebPartTitle;</span><span id="WebPartCaption"></span></nobr></h2></span></div><div WebPartID="00000000-0000-0000-0000-000000000000" HasPers="true" id="WebPart" width="100%" class="ms-WPBody ms-WPBorder noindex ms-wpContentDivSpace " OnlyForMePart="true" allowDelete="false" style=""><div class="ms-rtestate-field"></div><div class="ms-clear"></div></div></div>

<!--PE: End of READ-ONLY PREVIEW--><!--MS:<WebPart xmlns="http://schemas.microsoft.com/WebPart/v2">-->

<!--MS:<Title>--><!--SPM:$Resources:core,ContentEditorWebPartTitle;-->

<!--ME:</Title>--><!--MS:<Description>-->

<!--SPM:$Resources:core,ContentEditorWebPartDescription;--><!--ME:</Description>--><!--MS:<PartImageLarge>-->

<!--SPM:/_layouts/15/images/mscontl.gif--><!--ME:</PartImageLarge>--><!--MS:<ID>-->

<!--SPM:g_e3adb6ff_e66d_476a_98c8_e31d5120f0c2--><!--ME:</ID>-->

<!--ME:</WebPart>--><!--ME:</WebPartPages:ContentEditorWebPart>-->

<!--CE: End Content Editor Snippet-->

Meeting #116http://sharepointmn.com

A custom control, as a snippet<!--CS: Start Megamenu Snippet--> <!--SPM:<%@ Register TagPrefix="Avtex" Namespace="Avtex.MegaMenu.Controls" Assembly="Avtex.MegaMenu, Version=1.0.0.0, Culture=neutral, PublicKeyToken=36e04f49f99f6afe" %>--> <!--MS:<Avtex:MegaMenu runat="server" RelatedLinksText="Quick Links">--> <!—ME: </Avtex:MegaMenu>--><!--CE: End Megamenu Snippet-->

Fuller explanation of SharePoint markup:• http://blog.avtex.com/2013/12/05/adding-a-custom-control-to-a-sha

repoint-2013-master-page/

• http://msdn.microsoft.com/en-us/library/jj822370.aspx

Meeting #116http://sharepointmn.com

Code snippets in HTML master pages

PROS: Your designer can create a straight HTML layout, and you can

drop it into SharePoint Can configure functionality in Design Manager; don’t have to edit

code Can preview snippets and layouts in Design Manager

Meeting #116http://sharepointmn.com

Code snippets in HTML master pages

• CONS: Any .NET code you put in your HTML master (like, say, a custom

control) must be wrapped in SharePoint Markup tags Snippet code is lengthy and messy; doesn’t make it any easier to

read the file If you want to tweak a snippet, you either have to edit code or

regenerate it in Design Manager.

Meeting #116http://sharepointmn.com

Design for different screen sizes and contexts

Meeting #116http://sharepointmn.com

Responsive design Much cleaner markup and responsive ready Will still need to figure out how to make individual web parts

responsive We use Bootstrap

• Recommend BindTuning SharePoint 2013 template:– http://

bindtuning.com/cms/sharepoint/sharepoint-2013/theme/TheBootstrapTheme

– Free– Can customize colors, fonts, etc. so you don’t have to

override them later

Meeting #116http://sharepointmn.com

Device Channels

Replaces terrible 2010 Mobile View Allows you to use different master pages, layouts or device

panels based on device being used to view the site

Meeting #116http://sharepointmn.com

Device Channels

PROS Serve only what that devices needs; no need for responsive

codingCONS

Relies on device detection (user-agent strings) Doesn’t handle orientation differences Only 10 channels allowed (though can have multiple devices per

channel) More files to maintain

OVERALL Fine if you only care about a handful of devices In most cases, responsive design will provide a better result

Meeting #116http://sharepointmn.com

Content by Search

Meeting #116http://sharepointmn.com

Content by Search: A new way to access information

PROS• Can surface information from anywhere in the installation• Can pull in multiple types of information (pages, documents,

images, etc.)• Ability to use complex refiners and multi-level sorting• Uses Display Templates instead of XSLT

CONS• Can only find items that have been indexed by the search crawler• New content can take a while to show up• Uses Display Templates instead of XSLT

Meeting #116http://sharepointmn.com

Display Templates

• Only usable with Content Search; Only way to display Content Search results

• Configured for the Site and Site Collection, rather than for a web part

• Kept in Master Pages Display Templates• Can be nested: Group template, for instance, calls various Item

templates• Similar to HTML master pages

HTML file with specially-marked-up JS code and references Autogenerated linked JS file Uses SharePoint’s CSOM (client-side object model)

• More powerful and flexible than XSLT, but not necessarily easier to work with

Meeting #116http://sharepointmn.com

Office 365 and WebDAV

Meeting #116http://sharepointmn.com

A word about Office 365

• PRO: Constantly being updated, so always have the latest functionality

• CON: Constantly being updated, so sometimes SharePoint Designer doesn’t work

• If Designer doesn’t work, can manage files through WebDAV

Meeting #116http://sharepointmn.com

WebDAV

• Map your site’s “Master Pages” folder as a network drive on your computer Get URL from Design Manager -> Upload Design Files Open a Windows Explorer window Right click on “Computer” Choose “Map network drive” Choose a drive letter, paste in the URL, click “Finish” Enter your login credentials

• PRO: Can edit files in any editor; site is just another folder on your computer

• CON: Bypasses file check-out/check-in, doesn’t publish the changes

Meeting #116http://sharepointmn.com

Branding tips and tricks

Meeting #116http://sharepointmn.com

Turn off master-page approval

1. In the “Settings” menu, choose “Site Settings”2. Under “Site Administration”, click “Content and Structure”3. Right-click on “Master Page Gallery” in the left menu4. Select “Edit Properties”5. Select “Versioning Settings”6. In the first section, you can choose whether content approval

applies to that library.7. In the second section, you can choose whether SharePoint should

bother with minor versions or simply save major versions every time you save. Choosing “major versions only” will cut out a step whenever you save the master page.

Meeting #116http://sharepointmn.com

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>

Meeting #116http://sharepointmn.com

Set up your favicon

1. Create your “favicon.ico” file and put it wherever you want (Style Library, in this example). There are lots of online favicon generators, such as:

1. http://favicon-generator.org/2. http://www.favicon.cc/

2. Edit your master page (HTML version, in this example)3. Find the SPShortcutIcon control:

<!--SPM:<SharePoint:SPShortcutIcon runat="server" IconUrl="/_layouts/15/images/favicon.ico?rev=23"/>-->

4. And replace the “IconUrl” value with the path to your icon:<!--SPM:<SharePoint:SPShortcutIcon runat="server"

IconUrl="/PATH_TO_STYLE_LIBRARY_/Style%20Library/favicon.ico”/>-->

Meeting #116http://sharepointmn.com

Kill the chrome

• When creating page layouts, add the following property to any <WebPartZone> tag:

PartChromeType = “none”

• Any web part in that zone will start life with chrome set to “none”.• Only affects web parts that have not had their chrome state set

manually; it is overridden by individual web-part settings.

Meeting #116http://sharepointmn.com

Dealing with semi-anonymous HTML

• Edit the HTML in the master page or layout

• To target a specific web part, place it in its own Web Part Zone, wrapped in a div with a specific class or ID

Meeting #116http://sharepointmn.com

Overriding very specific default CSS

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

Very specific custom styles

!important tag Not ideal, but effective

Meeting #116http://sharepointmn.com

Custom styles for the Rich Text Editor

Configure the Rich Text Editor to properly display content while editing, and provide users with pre-built styles to help preserve the look/feel of the site.

http://blog.avtex.com/2012/06/08/custom-text-styles-for-sharepoint-rich-text-editors/

Remove default text styles from the dropdowns http://blog.avtex.com/2013/03/04/remove-default-text-styles-fro

m-sharepoint-2010-dropdowns/

Meeting #116http://sharepointmn.com

Front-end development tips and tricks

Meeting #116http://sharepointmn.com

Content Query Bug

If Content Query returns no results, it forgets a closing </div> tag, which will likely break your layout

Two possible fixes Ensure that your CQWP will always return at least one result Edit ContentQueryMain.xsl (Style Library -> XSL Stylesheets)

and add the following code at Line 78:            <xsl:if test="$EditMode != 'True' and string-length($cbq_errortext) = 0">

                <div class="wp-content description"><p>No items</p></div>            </xsl:if>

Meeting #116http://sharepointmn.com

jQuery issue in Edit Mode

A script in Edit Mode is hogging the “$” namespace, meaning jQuery can’t use it when you’re editing a page.

• http://blog.avtex.com/2014/01/15/jquery-in-edit-mode-in-sharepoint-2013/

The Fix Use “jQuery” instead of “$” for the namespace in any code that

needs to work when in edit mode (i.e., “jQuery(‘.footer’);” instead of “$(‘.footer’);”).

Meeting #116http://sharepointmn.com

Custom Announcement display

Display the full text of an announcement using a CQWP, giving you full control over the presentation.

• http://blog.avtex.com/2013/11/27/custom-announcement-display-in-sharepoint/

Meeting #116http://sharepointmn.com

Custom promo boxes

Create user-customizable promo boxes with all sorts of options, without any back-end development.

• http://blog.avtex.com/2013/10/07/custom-promo-boxes-in-sharepoint-2013/

Meeting #116http://sharepointmn.com

Custom browser warning

Warn users who are viewing your site in an outdated browser, and provide links to upgrade or switch.

• http://blog.avtex.com/2012/07/17/custom-sharepoint-browser-warning/

Meeting #116http://sharepointmn.com

Last But Not Least

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

• Lynne Figg• Steven Ray

Thanks for coming!