August 2014 MNSPUGx - Minnesota SharePoint User Group

Transcript August 2014 MNSPUGx - Minnesota SharePoint User Group

Welcome to the
Minnesota SharePoint
User Group
Donald Donais
August 13th, 2014
SharePoint Branding
Lynne Figg and Steven Ray
http://sharepointmn.com
Meeting #116
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
http://sharepointmn.com
Meeting #116
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
•
http://sharepointmn.com
Meeting #116
MNSPUG Sponsors
Dedicated Sponsors
Avtex (www.avtex.com)
Annual Sponsor
Currently Looking for Sponsorships!
Microsoft (www.microsoft.com)
SharePoint User Group Support
Media Sponsor
Wrox Press (www.wrox.com)
O’Reilly (www.oreilly.com)
http://sharepointmn.com
Meeting #116
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]
http://sharepointmn.com
Meeting #116
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/
http://sharepointmn.com
Meeting #116
Upcoming Schedule
•
Next Meeting
September 10th – SharePoint Member Case Study
 Microsoft Technology Center


Check www.SharePointMN.com for updates!
• Ongoing Schedule

2nd

9:00 to 11:30 am

Microsoft Technical Center – Edina
http://sharepointmn.com
Wednesday of every month
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 #116
Local and Online Events
Twin Cities PowerShell User Group – Sept 9th, 4:30 – 7:00 pm
http://www.tcposhug.com/
SharePointalooza– Sept 12th & 13th in Branson, Missouri
http://www.sharepointalooza.org/
MN SharePoint Legal Users Group – Sept 18th 12 – 1:30 p.m. TBD
http://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 College
http://spstc.com
MN SharePoint SharePint– August 26th 4:30-?, Joe Senser’s Bloomington
http://www.meetup.com/Minnesota-SharePoint-SharePint/
MN Women in SharePoint – September 16th, Avtex office Bloomington
SPChat through SharePoint Community – August 14th – Online
http://sharepoint-community.net/events/spchat-with-mai-omar-desouki
http://sharepointmn.com
Meeting #116
Evaluations & Giveaways!
http://sharepointmn.com
Meeting #116
Presenters
http://sharepointmn.com
Meeting #116
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…
http://sharepointmn.com
Meeting #116
Steven Ray
•
•
•
•
http://sharepointmn.com
User Experience developer, Avtex
Sarah Connor look alike
[email protected]
http://blog.avtex.com/author/sray/
Meeting #116
Using C.R.A.P.
http://sharepointmn.com
Meeting #116
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.
http://sharepointmn.com
Meeting #116
Presentation based primarily on publication . . .
The Non-Designer’s Design Book
by Robin Williams (no, not THAT Robin Williams)
Design and typographic principles for visual novice
http://sharepointmn.com
Meeting #116
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.
http://sharepointmn.com
Meeting #116
C.R.A.P
• Contrast
• Repetition
• Alignment
• Proximity
http://sharepointmn.com
Meeting #116
Alignment
“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.”
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.
Notice the different alignments?
http://sharepointmn.com
Yuck!
Meeting #116
Alignment Example
http://www.sewingandembroiderywarehouse.com/embtrb.htm
http://sharepointmn.com
Meeting #116
Alignment Example - before
http://sharepointmn.com
Meeting #116
Alignment Example - after
http://sharepointmn.com
Meeting #116
Alignment Example – after 2x
http://sharepointmn.com
Meeting #116
C.R.A.P
• Contrast
• Repetition
• Alignment
• Proximity
http://sharepointmn.com
Meeting #116
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
http://sharepointmn.com
Meeting #116
Proximity Example
http://www.dispensamatic.com/
http://sharepointmn.com
Meeting #116
Proximity Example - before
http://sharepointmn.com
Meeting #116
Proximity Example - after
http://sharepointmn.com
Meeting #116
Proximity Example – after 2x
http://sharepointmn.com
Meeting #116
Alignment & Proximity Example
http://sharepointmn.com
Meeting #116
http://sharepointmn.com
Meeting #116
C.R.A.P
• Contrast
• Repetition
• Alignment
• Proximity
http://sharepointmn.com
Meeting #116
Repetition
“The principle of repetition states that you repeat some
aspect of the design throughout the entire piece.”
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.
http://sharepointmn.com
Meeting #116
Repetition
http://www.harvard.edu/
http://sharepointmn.com
Meeting #116
Alignment, Proximity, & Repetition Example
http://sharepointmn.com
Meeting #116
C.R.A.P
• Contrast
• Repetition
• Alignment
• Proximity
http://sharepointmn.com
Meeting #116
Contrast
“Contrast is created when two or more elements are
different.”
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…
http://sharepointmn.com
Meeting #116
Contrast, not conflict
Conflict – when contrast misses the mark. “If two items are
not exactly the same, then make them very different.
Really different.”
Don’t be a wimp!
http://sharepointmn.com
Meeting #116
Alignment, Proximity, Repetition & Contrast Example
http://sharepointmn.com
Meeting #116
C.R.A.P. - All together now
http://www1.macys.com
http://sharepointmn.com
Meeting #116
http://sharepointmn.com
Meeting #116
Share C.R.A.P. with web contributors
• Web Content Guidelines
‘writing for the web’ practices contributors should follow
• Web Contributor Guide
specific ‘how-to’ enter content for organization website
• Web Style Guide
list preferred spellings and abbreviations
http://sharepointmn.com
Meeting #116
Share C.R.A.P. with web contributors
http://sharepointmn.com
Meeting #116
Share C.R.A.P. with web contributors
http://sharepointmn.com
Meeting #116
Share C.R.A.P. with web contributors
http://sharepointmn.com
Meeting #116
http://sharepointmn.com
Meeting #116
C.R.A.P.
Summary cheat sheets
http://sharepointmn.com
Meeting #116
Alignment
Purpose
• 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.
http://sharepointmn.com
Meeting #116
Proximity
Purpose
• 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.
http://sharepointmn.com
Meeting #116
Repetition
Purpose
• 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.
http://sharepointmn.com
Meeting #116
Contrast
Purpose
• 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.
http://sharepointmn.com
Meeting #116
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.
http://sharepointmn.com
Meeting #116
Audience Participation – Apply C.R.A.P.
http://www.washoecounty.us/socsrv/socsrv_contact
http://sharepointmn.com
Meeting #116
http://sharepointmn.com
Meeting #116
Helpful Links
• Writing for the web – usability
http://www.usability.gov/how-to-and-tools/methods/writing-for-the-web.html
• How users read online
https://www.gov.uk/service-manual/user-centred-design/how-users-read.html
• Website design – develop a project plan
http://www.usability.gov/how-to-and-tools/methods/develop-plan.html
• Purpose of a wireframe
http://webdesign.about.com/od/webdesign/qt/website-wireframes.htm
http://sharepointmn.com
Meeting #116
Additional Resources
• The Non-Designer's Web Book, 3rd Edition Paperback
by Robin Williams (Author), John Tollett (Author)
• Content Strategy for the Web, 2nd Edition Paperback
by Kristina Halvorson (Author), Melissa Rach (Author)
• Son of Web Pages That Suck:
Learn Good Design by Looking at Bad Design Paperback
by Vincent Flanders (Author), Dean Peters (Author)
http://sharepointmn.com
Meeting #116
http://sharepointmn.com
Meeting #116
~ Lynne Figg
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.
http://sharepointmn.com
Meeting #116
Break Time
http://sharepointmn.com
Meeting #116
Branding SharePoint 2010
• August 2012 MNSPUG featured a detailed talk on SP2010 branding.
• PowerPoint deck
 http://www.sharepointmn.com/User%20Group%20Presentations/August%2020
12%20MNSPUG.pptx
• Video
 http://mnspug-web.sharepoint.com/Documents/August2012.wmv
http://sharepointmn.com
Meeting #116
Why branding is important
•
•
•
•
to enhance user and customer experience
to create user buy-in for intranets
to promote corporate identity
to unify employees
http://sharepointmn.com
Meeting #116
Anything is possible, with enough time
http://sharepointmn.com
Meeting #116
• Extranet
• Single layout
• Minor changes to default
SharePoint structures
http://sharepointmn.com
Meeting #116
• Intranet
• Responsive (Bootstrap)
• IE7 compatibility
• Custom megamenu
• Some custom web parts,
including promo boxes on
left side
http://sharepointmn.com
Meeting #116
• 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
http://sharepointmn.com
Meeting #116
• Responsive (Bootstrap)
• Moderate amount of custom
web parts
• Two main layouts
http://sharepointmn.com
Meeting #116
• Responsive
• Custom megamenu
• Lots of custom webparts
• Multiple complex page
layouts
http://sharepointmn.com
Meeting #116
• Everything you see is
custom-built
• Huge number of individual
pieces, all of which needed
to be branded and styled
http://sharepointmn.com
Meeting #116
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)
http://sharepointmn.com
Meeting #116
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
http://sharepointmn.com
Meeting #116
SharePoint structure
http://sharepointmn.com
Meeting #116
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.
http://sharepointmn.com
Meeting #116
Master Page: <asp:ContentPlaceHolder>
•
•
•
•
•
•
PlaceHolderAdditionalPageHead
PlaceHolderSiteName
PlaceHolderPageTitleInTitleArea
PlaceHolderSearchArea
PlaceHolderTopNavBar
PlaceHolderMain
http://sharepointmn.com
Meeting #116
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
http://sharepointmn.com
Meeting #116
Web-part Zones
• Designates areas where users can add/edit/delete web parts
<WebPartPages:WebPartZone id="g_EC922EB9346B4F99A1A96BCB47226BD7" runat="server" title=“sidebar">
</WebPartPages:WebPartZone>
http://sharepointmn.com
Meeting #116
Branding considerations
http://sharepointmn.com
Meeting #116
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
http://sharepointmn.com
Meeting #116
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
http://sharepointmn.com
Meeting #116
HTML and CSS
http://sharepointmn.com
Meeting #116
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
http://sharepointmn.com
Meeting #116
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
•
•
•
•
•
http://sharepointmn.com
Meeting #116
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>
http://sharepointmn.com
Meeting #116
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="s4breadcrumbCurrentNode">Test page</a>
</li>
</ul>
</li>
</ul>
http://sharepointmn.com
Meeting #116
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
http://sharepointmn.com
Meeting #116
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
http://sharepointmn.com
Meeting #116
Master Pages and Design Manager
http://sharepointmn.com
Meeting #116
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, securitytrimmed controls
 Can really use either one
• There’s a v4 there too, but ignore it; for backward compatibility only
http://sharepointmn.com
Meeting #116
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
http://sharepointmn.com
Meeting #116
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.
http://sharepointmn.com
Meeting #116
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.
http://sharepointmn.com
Meeting #116
Code Snippets
http://sharepointmn.com
Meeting #116
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.
•
•
•
•
http://sharepointmn.com
Meeting #116
A sample code snippet




<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-webparttitleText"><nobr><span>$Resources:core,ContentEditorWebPartTitle;</span><span id="WebPartCaption"></span></nobr></h2></span></div><div WebPartID="00000000-0000-0000-0000000000000000" HasPers="true" id="WebPart" width="100%" class="ms-WPBody ms-WPBorder noindex ms-wpContentDivSpace " OnlyForMePart="true" allowDelete="false" style=""><div class="msrtestate-field"></div><div class="ms-clear"></div></div></div>

















http://sharepointmn.com
Meeting #116
A custom control, as a snippet



<!—ME: </Avtex:MegaMenu>-->

Fuller explanation of SharePoint markup:
• http://blog.avtex.com/2013/12/05/adding-a-custom-control-to-a-sharepoint2013-master-page/
• http://msdn.microsoft.com/en-us/library/jj822370.aspx
http://sharepointmn.com
Meeting #116
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
http://sharepointmn.com
Meeting #116
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.
http://sharepointmn.com
Meeting #116
Design for different screen sizes and contexts
http://sharepointmn.com
Meeting #116
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/sharepoint2013/theme/TheBootstrapTheme
– Free
– Can customize colors, fonts, etc. so you don’t have to override them
later

http://sharepointmn.com
Meeting #116
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
http://sharepointmn.com
Meeting #116
Device Channels
PROS
Serve only what that devices needs; no need for responsive coding
CONS
 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

http://sharepointmn.com
Meeting #116
Content by Search
http://sharepointmn.com
Meeting #116
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
http://sharepointmn.com
Meeting #116
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
•
•
•
•
•
http://sharepointmn.com
Meeting #116
Office 365 and WebDAV
http://sharepointmn.com
Meeting #116
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
http://sharepointmn.com
Meeting #116
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
http://sharepointmn.com
Meeting #116
Branding tips and tricks
http://sharepointmn.com
Meeting #116
Turn off master-page approval
1.
2.
3.
4.
5.
6.
In the “Settings” menu, choose “Site Settings”
Under “Site Administration”, click “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.
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.
http://sharepointmn.com
Meeting #116
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>
http://sharepointmn.com
Meeting #116
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:

4. And replace the “IconUrl” value with the path to your icon:

http://sharepointmn.com
Meeting #116
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.
http://sharepointmn.com
Meeting #116
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
http://sharepointmn.com
Meeting #116
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
http://sharepointmn.com
Meeting #116
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-texteditors/
Remove default text styles from the dropdowns
 http://blog.avtex.com/2013/03/04/remove-default-text-styles-from-sharepoint2010-dropdowns/
http://sharepointmn.com
Meeting #116
Front-end development tips and tricks
http://sharepointmn.com
Meeting #116
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>
http://sharepointmn.com
Meeting #116
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’);”).
http://sharepointmn.com
Meeting #116
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/c
ustom-announcement-display-insharepoint/
http://sharepointmn.com
Meeting #116
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-promoboxes-in-sharepoint-2013/
http://sharepointmn.com
Meeting #116
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/customsharepoint-browserwarning/
http://sharepointmn.com
Meeting #116
Last But Not Least
• Please Fill Out Evaluations
• Drawings for Giveaways
• Today’s Presenters:
• Lynne Figg
• Steven Ray
http://sharepointmn.com
Meeting #116

August 2014 MNSPUGx - Minnesota SharePoint User Group

Transcript August 2014 MNSPUGx - Minnesota SharePoint User Group

Directory