designing for the office 365 experience
DESCRIPTION
As the focus shifts towards working in the “cloud” more and more businesses are utilizing Office 365 for their corporate intranets. This creates new challenges from a User Experience design. In this session we will dive into the methods for customizing an intranet built on Office 365. We will look at the options for customizing and how you can take these options further.TRANSCRIPT
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