Make it Look Not Like SharePoint

Cathy DewSPS NashvilleJune 2015

Speaker Bio

Cathy Dew Consultant at Planet Technologies

Graphic Designer, Consultant and SharePoint MVP

Over 8 years of SharePoint

branding experience

Author: SharePoint 2010: Six in One

catpaint1 on Twitter

www.sharepointcat.com

Agenda Design Develop Deploy

Create the DesignQuestion, Map, Illustrate

Define Use Cases Understand what the purpose is for the site Build Use Cases and Flow Patterns for these

Work with Team Members Submit an Expense Report Get Up to Date Information and News Find People

Begin to Plan Start to sketch the requirements into a design Focus on Functionality and Content Understand what you need

Build Your Team Stakeholder Project Manager End User/Power User Designer Developer IT Pro QA

Define Your Options Design Manager Device Channels Responsive/Adaptive Hybrid

Understanding Navigation How many clicks is too many for your users? How will Users get around your sites?

Top Navigation Fly Outs Custom Breadcrumbs Quick Launch Custom Navigation Search

Early SketchesFiguring out flow of user movement and Navigation

Design MethodsWireframes are a great tool for separating Design and Function – start with a basic SP site and customize from thereEvaluate Your Designs for Functionality &Content –NOT Design

Wireframe ToolsBalsamiq

SharePoint 2013 Team Site Template from Flucidityhttp://flucidity.azurewebsites.net/2013/02/sharepoint-2013-balsamiq-mock-up-template/

VisioAdobe Creative SuiteAxure

Home Page WireframeTop Navigation with Drop Downs

Define Custom SolutionsMap out Functional and Layout Requirements for Custom Solutions

Requirement Creep Don’t forget that requirement creep is what we

are trying to get away from, but will always happen to some extent.

The more you gather, analyze and present the easier it is to avoid this

But don’t get stuck in constant requirement gathering only cycle

Defining Design

DevelopDon’t be afraid, just jump in – Said the spider to the fly

Creating Assets Custom Master Pages

Responsive and Team Custom CSS Files Custom JavaScript Files Custom Apps

Master Pages Customizations that apply across all sites

Page Layouts

Edit your Custom Master Page HTML file editing

Through your desired program

Tips: Map drive to your machine Or open Windows

Explorer View

Master Page Gallery

Create Custom CSS Make a Huge Visual Impact with CSS Reference your CSS file with your Custom Master

<SharePoint:CssRegistration Name="<% $SPUrl:~sitecollection/Style Library/verisk/css/CustomBrand.css %>" runat="server" after="SharepointCssFile"/>

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;}

Unchain Your Designs SharePoint 2013 Supports CSS 3.0 and HTML 5

You will see errors in SharePoint Designer Add Links in Master Page Add Link in CEWP, Alternate

CSS URLs Bootstrap and other Frameworks

can be applied

Responsive CSS Media Query Responsive Design can be achieved with CSS

Media Queries @media screen and (min-width: 1024px)

Asks 2 questions of the browser Media type (screen) Query – in parenthesis feature

and value

Working with JavaScript Adding JavaScript and Jquery references can

extend your sites further JavaScript injection can help to customize even

further (think Suite Bar in O365)

JavaScript Locations To be accessible by all sites in the Site

Collection: Create a JavaScript library in the Style Library Create a JavaScript library in the Master Page

Gallery For use in a specific site

Create a JavaScript library anywhere in the site

Reference JavaScript Custom App Script Editor Web Part Content Editor Web Part Custom Page Layout Custom Master Page

DeployGet in there darn cat…

Applying Branding Publishing Infrastructure

Site Settings SharePoint Designer

Good for Development Environments

Simple Dev Application Publishing – Alternate CSS URL Sandboxed Solutions

Design Manager Created SharePoint Designer Created Visual Studio Created

Solution Gallery Upload and Activate

Full Trust Solutions SharePoint 2013 On Premises

Full Control of Files and Application Best Method still for On Premises Gives Greatest Control

Apps Create an App to Deploy Branding

SharePoint 2013 On Premises or SharePoint Online Make use of Online Samples

https://github.com/OfficeDev/PnP/tree/dev/Samples/Branding.ApplyBranding

How Apps Work

Basic App Structure

Using Powershell Add and Install Solutions

add-spsolution (resolve-path .\solutionname.wsp)

install-spsolution -identity [name of file w/o suffix] -gac -webapplication [url of web application]

Other Useful PowershellUse Powershell to reset Master Page Customizations to Default Master Pages

$w = get-spweb [http://your_site_url]$w.MasterUrl = "/_catalogs/masterpage/seattle.master"$w.CustomMasterUrl = "/_catalogs/masterpage/seattle.master"$w.Update()

Customizing with Powershell Change the Word SharePoint in the Suite Bar to

your own Text

$webApp = Get-SPWebApplication http://urlhere$webApp.SuiteBarBrandingElementHtml = “Your Text Goes Here”$webApp.Update()

*SharePoint 2013 On Premises Only

Future of Branding Microsoft is moving away from heavy UX

customizations CSS and JavaScript are the areas to invest in Designers are becoming Developers – Apps are

the future Office 365 – Constant Changes

Plan for updates with new feature releases Plan for not getting new features if you do choose

to customize the master page

Questions

43 SharePoint Saturday Atlanta43 |SharePoint Saturday Atlanta

44 SharePoint Saturday Atlanta44 |SharePoint Saturday Atlanta

45 SharePoint Saturday Atlanta45 |SharePoint Saturday Atlanta

46 SharePoint Saturday Atlanta46 |SharePoint Saturday Atlanta

5 Seasons Brewery (North)

directly in front of brewery See the SPSATL Website

for more info and directions

Join us for SharePint sponsored by

Thank you for attending!

Cathy Dew, MVP@catpaint1

www.sharepointcat.com