+ All Categories
Home > Software > Branding SharePoint 2013

Branding SharePoint 2013

Date post: 22-Nov-2014
Category:
Upload: niftit
View: 584 times
Download: 1 times
Share this document with a friend
Description:
Khoa Quach's presentation on Branding SharePoint 2013 at SharePoint Saturday NYC 2014
24
by Khoa Quach SPS NYC 2014
Transcript
Page 1: Branding SharePoint 2013

by Khoa Quach

SPS NYC 2014

Page 2: Branding SharePoint 2013

About Me

Khoa QuachSharePoint Technologies MCTS, MCPD, MCSECo-founder of NIFTITSpecializes in SharePoint

IntegrationApplication DevelopmentBranding SolutionMobile Solution

@niftykhoa@NIFTIT

Page 3: Branding SharePoint 2013

THIS SESSION IS FOR

Front-End Developers SharePoint 2013 Developers SharePoint 2010 Developers

Page 4: Branding SharePoint 2013

Differences between SP 2010 & SP 2013Tools and LibrariesBasic SharePoint Branding KnowledgeReview of Design ManagerDemo & Best Practices

Agenda

Page 5: Branding SharePoint 2013

No More Table MarkupSay Bye to XSLTUse your favorite Web EditorIntroduce Design ManagerClient Side Improvements

Image RenditionMinimal Download StrategiesREST

Methodology

SP 2010 v.s SP 2013

From Branding Development Perspective

Page 6: Branding SharePoint 2013

Introduction

What most SharePoint Intranet portals look like

Page 7: Branding SharePoint 2013

Branding Examples

What successful intranet sites look like

Page 8: Branding SharePoint 2013

A Look BackDesigning your website in SharePoint 2010

Dreamweaver / Photoshop / etc.

SharePoint Designer

Integrate

Ribbon

Master Pages

Navigation

Custom Catalog

Catalog Integration

Roll-up controls

Comps

HTML

Java, HTML,

etc.

Page 9: Branding SharePoint 2013

New Methodology

Designing your website in SharePoint 2013

Dreamweaver, etc.

Comps

HTML

Java, HTML,

etc.

Auto Convert

Snippet GalleryUpload Add

Control

• Ribbon• Placeholder

Main•Minimal Master

• Navigation •Web parts• Controls

SharePoint

Page 10: Branding SharePoint 2013

SupportBrowser Supported Not supported

Internet Explorer 11 X

Internet Explorer 10 X

Internet Explorer 9 X

Internet Explorer 8 X

Internet Explorer 7 X

Internet Explorer 6 X

Google Chrome (latest released version)

X

Mozilla Firefox (latest released version)

X

Apple Safari (latest released version)

X

Page 11: Branding SharePoint 2013

Tools & LibrariesTools you can use to brand your site

Visual Studio 2012/2013SharePoint Designer 2013Web Development Editor/Tool

JQuery +1.7.1Bootstrap.jsAngular.js, Backbone.JS, Ember.JS, Knockout.JS

Optional Libraries

Page 12: Branding SharePoint 2013

SharePoint Page Model

SharePoint uses templates to define and render the pages that a site displays.

Master pages define the shared framing elements (AKA the chrome) for all pages in your site.Page layouts define the layout for a specific class of pages.Pages are created from a page layout by authors who add content to page fields.

Master

Page

Page Layo

ut

Page (Content)

RENDERE

D PAGE

Page 13: Branding SharePoint 2013

Analyzing the Design

Page 14: Branding SharePoint 2013

Elements of

Master Page

Site Icon

Search Bar

Global Navigation

Footer

Page 15: Branding SharePoint 2013

Elements of

Page Layout & Page

Image Slider

Content Search Web Part

Content from

Content Type

Page 16: Branding SharePoint 2013

Design Manager

Access/Upload to assets and pagesConvert HTML to ASP.NET master pageSnippet GalleryDesign PackagesDevice ChannelsDisplay templates (No more XSLT)

Page 17: Branding SharePoint 2013

Access Network Map

Some online possible solutions: Internet Explorer Configuration Answer(click here)The “WebDav” Fix(http://sharepoint.stackexchange.com/questions/71991/office-365-sharepoint-access-denied-error-when-mapping-webdav)HotFix for IE10/Win7(http://support.microsoft.com/kb/2846960)The “Keep me signed in” option (http://support.microsoft.com/kb/2616712)

Page 18: Branding SharePoint 2013

Snippet Gallery

Site IconGlobal NavigationSearch BoxSite TitleEdit ModeTrim SecurityDevice Channel Panel

Media and ContentOOB Web PartsCustom ASP.Net Markup

Page 19: Branding SharePoint 2013
Page 20: Branding SharePoint 2013

Recap: Master Page

Analyze your design and define SP page model elements to be used

For 2013Simply copy and paste your HTML markup into the master page but analyzeSegregate the master page elements from the page layout(s)Stick to one methodology: HTML or SP

Page 21: Branding SharePoint 2013

Branding Search

Components

Display templates control which managed properties appear in the search results of a search-driven Web Part and the styling and behavior of those search results.

Control display templates: control the layout of search results and any elements that is common to all results such as paging, sorting, and other linksItem display templates: which control how each search result is displayed and repeated for each result

Search-driven web parts and display templates

Page 22: Branding SharePoint 2013

Device Channels

Search-driven web parts and display templates

For content negotiationsUse to differentiate master pageTarget different content with device channel panelsGood to inform older browsers users to update or be aware

Page 23: Branding SharePoint 2013

Minimal Download Strategy

Search-driven web parts and display templates

New feature in SP 2013Reduce Page Load timeOnly send the difference when users navigate to new page

Page 24: Branding SharePoint 2013

Let’s connect!@niftykhoa@NIFTIT


Recommended