designing for the office 365 experience

Designing for the Office 365 Experience

Cathy Dew

Speaker Bio

Cathy Dew Consultant at Planet Technologies

Graphic Designer, Consultant and SharePoint MVP

Over 6 years of SharePoint

branding experience

Author: SharePoint 2010: Six in One

catpaint1 on Twitter

www.sharepointcat.com

Agenda Office 365 Options for Branding Choosing Options Customizing Master Pages

Design Manager Custom Composed Looks Create Packages Deploy and Apply

Public or Intranet? SPO – Public Facing

Composed Looks Custom Master/Custom CSS Custom Page Layouts

Intranet Composed Look Custom Master Page Custom CSS

Picking the Right Option Composed Looks Design Manager Custom Master/CSS/Page Layouts Device Channels

Composed Looks New “Themes” for SharePoint 2013

Master Page Color Palette CSS Font Palette Background Image

Predefined Options

Customize a Predefined Option

Create Your Own Custom Look

Create Composed Look

Must have: HTML file .Master file Preview File Spcolor file Spfont file

Can have: Background Image

Create Custom Composed Look

Where to put files

Custom Composed Look

Create Custom Everything Use the Design Manager to import an HTML

site into SharePoint and apply it

Import HTML Site

Process to import HTML

Edit your Custom Master Page HTML file editing

Through your desired program Dreamweaver in this demo

Map drive to your machine Or open Windows Explorer View

Master Page Gallery

Tips for Custom Master Page If working with HTML file… Don’t touch

the .master file Editing the .master will invalidate the HTML file

Make use of Preview Pages Create a couple custom Preview Pages of

different site types. Allows you to view your branding with content

from different sites and pages.

Sample Preview Page

• Customize the Look/Color/Behavior

• Copy the HTML Snippet

• Paste into HTML file in desired location

HTML Code Snippets

Look for Additions to HTML On import the Design Manager will insert

some <div>s to contain content and the head tags for SharePoint Ribbon MainContentPlaceholder

Inserted HTML

Customize Master PageIn this demo we will add a code snippet to the master page HTML file for our HTML converted file.We will show the file in the Preview page.

Publish & Apply Custom Master In order to apply the custom designs you have

created with publishing and the design manager Publish all files

CSS Page Layouts Master Pages (HTML only)

Apply the Master Page from the List Publishing only

Where to put files

Create Custom CSS Reference a Custom CSS file with your Custom

Master Page <link href="style.css" rel="stylesheet"

type="text/css" />

Take it Further with CSS With the Color Palette you can use the palette

colors in your Custom CSS files{/* [ReplaceFont(themeFont:”title”)] */ font-family: “Segoe UI Light”, “Segoe UI”, “Segoe”, Tahoma,Helvetica,Arial,sans-serif;/* [ReplaceColor(themeColor: “SiteTitle”)] */ color:#005050;}

How to apply in O365 Solutions are still the best

Apps can be created to house your branding Visual Studio Design Manager

Package your Design Add to the Solution Gallery

Apply to Multiple Site Collections

Package Designs

Solution Gallery Upload and Activate

Customize a Master & Page Layout with Design Manager & Tool of Your Choice

Master pages, custom CSS, code snippets and more…

Thank you for attending!

Cathy Dew, MVP@catpaint1

www.sharepointcat.com