Branding & Design in SharePoint Server 2013

Marius ConstantinescuLead Consultant, blue-infinitymarius.constantinescu@b-i.comhttp://nettitude.wordpress.com

in brief• 350+ employees• headquartered in Geneva• founded in 1995• international culture• multi-national clients• integrated solutions• microsoft managed partner

Agenda

Agenda

New Branding opportunities Composed looks Design manager Custom branding packages Branding SharePoint Apps

Other considerations Client-side rendering (list views, custom fields) Display templates Content roll-up web parts

Branding in HistoryWhat brought us here today?

What is Branding?

The "name, term, design, symbol, or any other feature that identifies one seller's good or service as distinct from those of other sellers” (Wikipedia)

Initial a labeling process by applying distinctive marks

Became a symbol of quality, marketing term, advertising

Branding is all about Identity , it is the Mark & it is most valuable fixed asset of an organization

Modern Web, Responsive sites

Responsive design is a Philosophy, not a Technology It responds within the constraints of a particular device by delivering an experience contextual to the

size, orientation of the screen Enabled by technology via the CSS3 "media queries“ Responsive design does not require HTML5

Business enablers for Response Design A consistent and optimized experience across all web-enabled touch-points A single code base and single site for all web experiences – (single code-base = fewer release

cycles) A single "device-agnostic" URL structure & non-competing SEO format

Responsive design is not without obstacles Steep learning curve, Developing responsive pages is time-consuming & require extra-effort Older desktop browsers and mobile devices will not understand Your existing CMS, ERP, e-Commerce platforms may not play nice Redesign big sites require cross-functional collaboration    

Branding the Web

Web sites• CSS Styles (Colors, Fonts,

Overlays)• Logos, Icons, Shims, Backgrounds• Widgets (content sliders,

navigation menus)• FX and Animations

SharePoint• Master pages (way too many),

Pages (Page Layouts, Application Pages, Cloud-App Pages *)

• 3rd-party Controls, Ribbon, ECB Menus

• Navigation (Quick Launch, Top-Bar, Suite-links*)

• Web parts (and XSLT), App-Parts*• List Views, Custom Fields

Should Information Architecture be included as part of “Branding” efforts?

Composite LooksThe new and improved theming engine

Themes in SharePoint 2010

Binary files (.thmx) Only Editable via

PowerPoint 2010 Allowed changes of 2 Fonts selections (Header & Body) Color combinations (4 text colors, 6 accent

colors, hyperlinks) Stored in Themes gallery

(<site>/_catalogs/theme)Could have been applied across sub-sites

Online Site

Publishing Site

Composed Looks in SharePoint 2013

What are Composed looks 1/4

No longer a single binary file Stored in <site>/_catalogs/design

Made up of Title Name Master Page URL (.master file) - stored in

<site>/_catalogs/masterpage Theme URL(.spcolor XML File) – stored in

<site>/_catalogs/theme/15 Font scheme URL (.spfont XML) – stored in

<site>/_catalogs/theme/15 Background Image (.jpg,.png,.gif, etc.) – stored

in /_layouts/images

Edit existing or Create new

What are Composed Looks 2/4

.SPCOLOR File Type s:ColorPalette node with attributes for

3 Preview slots (e.g. previewSlot1="BackgroundOverlay" previewSlot2="BodyText" previewSlot3="AccentText")

Boolean to specify Inverted s:color nodes with attributes for

name (e.g. DisabledText, PageBackground) value

HEX (6) as in DBDBDB RGB (2+6) as in C6EFEFEF –

added support for Opacity on overlays

Online Site

Publishing Site

What are Composed Looks 3/4

.SPFONT File Type s:fontScheme node with multiple

s:fontSlotsEach s:fontSlots targets a site section as in “title”, “navigation”, “body”, “header”, “large-header”, “large-body”, “small-header”, etc.

s:latin node with attributes for various files used to describe the actual font (e.g. TTF or SVG file) & enable preview images (large and thumbnail)

s:cs typeface – text visible for selection s:font nodes with attributes for

script (e.g. Arab, Greek, Hans) Typeface name

What are Composed Looks 4/4

Creating new Composed Looks Greater flexibility for Power User leading to countless combinations while still maintaining control

(promotes governance) To support “theming” still need to use CSS attributes on top of selectors

/* [ReplaceFont(themeFont:"title")] */ font-family:"Segoe UI", Tahoma, Arial,Sans-serif;/* [ReplaceColor(themeColor:"SiteTitle")] */ color:#262626;

!! If you create a new master page make sure you include a .preview file (image) or it won’t be visible in the Site Layout !!

.spColor Scheme are sorted alphabetically on files name Don’t forget the Theme Slots tool to come out shortly for SharePoint from Microsoft

Limitations They do rely branding artifacts being create & deployed prior Improper use of CSS attributes could disable theming capability Still requires Web Designer to get familiar with SharePoint specificities (XML structures, CSS

attributes) Exporting as Design package (.wsp file) can only be achieved via Design Manager which also export

other artifacts (such as Device Channels)

DemoCreate your own Composed Look

1. Create or reuse a .master page

For NEW .master page ensure existence of .preview file

2. Create/Update a .spfont file

3. Create/Update a .spcolor file

4. Create a new item n the Composed Looks list pointing to these files

Design ManagerNext step in SharePoint branding

SharePoint Page Model (Publishing)

Source: http://msdn.microsoft.com/en-us/library/jj191506(v=office.15)

Master pages define the shared framing elements, the chrome

Page layouts define the layout for a specific class of pages (associated to a Content Type)

Pages are created from a page layout by authors Add content to page fields Add web parts (Data-View, Content Query, Content

Search)

Working with Design Manager 1/2 Import design artifacts

Everything is stored in the Master Page library (e.g. <site>/_catalogs/masterpage) – now WebDav enabled

Map the network drive & use your favorite design tool(Visual Studio 2012 Web Editor, DreamWeaver, SharePoint 2013 Designer, Notepad++, etc.)

Copy all HTML, CSS, Images, Scripts TABLE elements replaced with DIV (at least in NEW components)

Create/Edit Master Pages and Page Layouts

Start from scratch or create a new minimal master page Updating HTML source synchronizes the .master page Snippets editor helps integrate SharePoint specific controls, web-

parts, navigation (menus, breadcrumbs) Minimal page layout provided with all fields from associated content

type Use same .master page for Search sites too

Online Site

Publishing Site

Working with Design Manager 2/2 Create/Edit Master Pages and Page Layouts Get started quickly with rapid visualization of results, promoting incremental cycles Use your favorite tool to update the design Snippets Editor helps integrate SharePoint specific components Export Design Package for reuse even across site collections (Sandbox)

includes ONLY customized files from libraries (Master Pages, Themes, Style library, Site Assets), Content Types & fields, Lists (Design Gallery, Composed Looks, Device Channels)

Limitations Only available on Publishing sites (cannot be used on SharePoint Foundation) Using snippet editor does generate overly complicated, uncommented code When applying design to Team-Sites it disables the Minimal Download Strategy (MDS speeds

up loading of pages using visual-deltas through start.aspx) My-Sites not supported, nor the new SharePoint Apps Not all Web-Parts are ready (or available - CSWP requires on-premises) Experienced SharePoint designers will most likely start from scratch with SharePoint 2013

Designer Not an end-to-end solution for full-blown branding of large sites Does not support import of master pages from previous versions

Custom brandingSharePoint branding and more…

Packaging branding artifacts

The need for a branding-package Wider support for complex business needs

At installation/activation update across all sub-sites, restore previous upon deactivation/uninstallation

Have the master page selectively according to site template (My-Sites, Community sites, Project sites, Team Sites, etc.)

Automatically activate on sub-sites Restrict its usage to certain Web applications Flexibility on location for artifacts (scripts, styles, images) deployment …and many, many more

Reusability & Maintainability Across scopes - Site collections/Web applications/Farms Across multiple environments (Development > Staging > Production) and support nightly-builds Complete Application Management Lifecycle (AML) & versioning support (nightly-builds,

releases) Other considerations

Information Architecture – new / existing (content types, sites topologies) Taxonomy (sites, metadata) & Wireframes Content Rollup web parts (Content-Search, Content-Query, 3rd party or custom) Modern web, complex, more creative designs (sliders, widgets, tabs) Migration of existing branding solutions

Anatomy of a Branding package

Click icon to add picture

Event receivers “upon installation in SharePoint replace existing .master” – use Feature

receivers with hooks on appropriate methods “run custom business logic upon activation” -same as above “automatically enable on sub-site” – use Web provisioned events “selectively active a different .master page with regards to site template” –

Other requirements “hide/show menu actions, ribbon buttons, other links” – use custom actions “restrict per web application” – use a web application feature and set

dependencies in the site “deploy customized lists, content types, fields” – try the new editor in VS 2012

–make use of Client-Side Rendering for advanced Views options (content sliders, charted columns and more)

Tips Test, test & then test again – before creating the package Branding in SharePoint is an incremental, iterative process

UX for SharePoint Apps

Introducing SharePoint App Model

Click icon to add picture Everything in a SharePoint site is an app

Selecting an app redirects to the app’s start pagehttps://spclub-bf473b5225nn0f.sharepoint.com/sharepointapptitle

View All Content > Site Contents link shows all apps in a site & links to the SharePoint Store (public) and App Catalog (internal if configured)

SharePoint applications no longer live in SharePoint

Code executes on the client (browser), on-premises or Azure Cloud Context is passed via URL Parameters and/or POST messages Apps communicate with SharePoint via REST / CSOM

Branding SharePoint Apps

Get remote events from SharePoint Use CSOM/REST + OAuth to work with SP

Cloud-based Apps

App Web (from WSP)

Provisioned in an isolated sub-web on a parent web

Able to reuse web content(lists, files, out-of-box web parts)Cannot execute server code, only client-side, e.g. JavaScript calls for business logic & UX

Provider-Hosted App“Bring your own server hosting infrastructure”(could be PHP, ASP.NET MVC, Ruby, etc.)

SharePoint Web

Your Hosted Site

Auto-hosted AppWindows Azure + SQL Azure provisioned invisibly as apps are installed

Windows Azure

Websites

SharePoint Web

SharePoint Web

SharePoint-Hosted App

App-pages are displayed either in Full-screen In IFrame as App-Parts (equivalent of Page Viewer web-part for SharePoint-Apps) or SharePoint Dialog-box

Branding SharePoint Apps

Design options for the Apps displayed in a Full Page SharePoint-hosted App pages reference host site styles Chrome Control - adds header html (title, breadcrumb,

icon, etc.) & injects styles.High-level steps to enable the use of Chrome Control:

Step 1 - Configure the Query string options in the AppManifest.xml To load the correct default app page and tells SharePoint to pass appropriate contextual information through the URL

Step 2 - Add a DIV placeholder element to the top of all App pagesThis will host the SharePoint Client Chrome Control loaded in step #3

Step 3 - On App pages reference the SP.UI.Controls.js script, loaded from the host siteThis will load the Chrome Control into the placeholder created at step #2

All artifacts are referenced from the host SharePoint site for styling other html elements.

Branding SharePoint Apps

Design options for Apps running in IFrameApp parts and SharePoint dialog boxes do not display full-screen and cannot leverage the Chrome control. Referencing styling resources is the way to go!

Page display via an App part Step 1: Add a Client Web Part to your SharePoint 2013 app project Step 2: Configure the client web part's Content Source in the Element.xml to

correct page and pass the appropriate contextual information through the URL Step 3: Include script on app part pages to inject a new style sheet link element

into the head of the page referencing the /_layouts/15/defaultcss.ashx resource from the host SharePoint site

Page displayed in the SharePoint dialog Step 1: Add a UI Custom Action (Host Web) to the SharePoint 2013 app project Step 2: Configure the UrlAction in the Element.xml to correct page and pass the

appropriate contextual information through the URL and set HostWebDialog="true" on the Custom Action (HostWebDialogHeight and HostWebDialogWidth should also be set)

Step 3: Include script on the dialog pages to inject a new style sheet link element into the head of the page referencing the /_layouts/15/defaultcss.ashx resource from the host SharePoint site

DemoBranding & Styling SharePoint Apps

Other considerations

Client-Side Rendering For all new controls, data is written to the controls in a

client-side JSON array Designers can choose to display content using JavaScript,

CSS, and display templates Full control over how content is rendered on the page Replace entirely the rendering logic of List-Views, enrich Field Controls Use the NEW JsLink property in the DataView Web part to tweak display

Display Templates

What are display templates? Re-usable Styles Files for your Content-Query based &

Content-Search Results Web-Parts Each display template consists of two files: An HTML file (.html) - the actual template (even Managed

Properties, ) JavaScript File (.js) - the script that makes the magic happen• Stored in the "Master Page" gallery under "Display

Templates" folder

Why new concepts?• No more XSLT editing every time a particular look & feel

is needed• Client-side "templating" techniques represent today's

trend (see libraries such as Knockout, Kendo UI, Razor also heavily used in MVC applications) – rely on JSON back-end data

DemoInstant benefits with Client-Side Rendering (CSR)