![Page 1: Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew](https://reader034.vdocuments.us/reader034/viewer/2022052701/55d30f87bb61ebc6308b458b/html5/thumbnails/1.jpg)
Make it Look Not Like SharePoint
Cathy DewSPS NashvilleJune 2015
![Page 2: Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew](https://reader034.vdocuments.us/reader034/viewer/2022052701/55d30f87bb61ebc6308b458b/html5/thumbnails/2.jpg)
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
![Page 3: Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew](https://reader034.vdocuments.us/reader034/viewer/2022052701/55d30f87bb61ebc6308b458b/html5/thumbnails/3.jpg)
Agenda Design Develop Deploy
![Page 4: Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew](https://reader034.vdocuments.us/reader034/viewer/2022052701/55d30f87bb61ebc6308b458b/html5/thumbnails/4.jpg)
Create the DesignQuestion, Map, Illustrate
![Page 5: Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew](https://reader034.vdocuments.us/reader034/viewer/2022052701/55d30f87bb61ebc6308b458b/html5/thumbnails/5.jpg)
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
![Page 6: Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew](https://reader034.vdocuments.us/reader034/viewer/2022052701/55d30f87bb61ebc6308b458b/html5/thumbnails/6.jpg)
Begin to Plan Start to sketch the requirements into a design Focus on Functionality and Content Understand what you need
![Page 7: Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew](https://reader034.vdocuments.us/reader034/viewer/2022052701/55d30f87bb61ebc6308b458b/html5/thumbnails/7.jpg)
Build Your Team Stakeholder Project Manager End User/Power User Designer Developer IT Pro QA
![Page 8: Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew](https://reader034.vdocuments.us/reader034/viewer/2022052701/55d30f87bb61ebc6308b458b/html5/thumbnails/8.jpg)
Define Your Options Design Manager Device Channels Responsive/Adaptive Hybrid
![Page 9: Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew](https://reader034.vdocuments.us/reader034/viewer/2022052701/55d30f87bb61ebc6308b458b/html5/thumbnails/9.jpg)
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
![Page 10: Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew](https://reader034.vdocuments.us/reader034/viewer/2022052701/55d30f87bb61ebc6308b458b/html5/thumbnails/10.jpg)
Early SketchesFiguring out flow of user movement and Navigation
![Page 11: Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew](https://reader034.vdocuments.us/reader034/viewer/2022052701/55d30f87bb61ebc6308b458b/html5/thumbnails/11.jpg)
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
![Page 12: Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew](https://reader034.vdocuments.us/reader034/viewer/2022052701/55d30f87bb61ebc6308b458b/html5/thumbnails/12.jpg)
Wireframe ToolsBalsamiq
SharePoint 2013 Team Site Template from Flucidityhttp://flucidity.azurewebsites.net/2013/02/sharepoint-2013-balsamiq-mock-up-template/
VisioAdobe Creative SuiteAxure
![Page 13: Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew](https://reader034.vdocuments.us/reader034/viewer/2022052701/55d30f87bb61ebc6308b458b/html5/thumbnails/13.jpg)
Home Page WireframeTop Navigation with Drop Downs
![Page 14: Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew](https://reader034.vdocuments.us/reader034/viewer/2022052701/55d30f87bb61ebc6308b458b/html5/thumbnails/14.jpg)
Define Custom SolutionsMap out Functional and Layout Requirements for Custom Solutions
![Page 15: Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew](https://reader034.vdocuments.us/reader034/viewer/2022052701/55d30f87bb61ebc6308b458b/html5/thumbnails/15.jpg)
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
![Page 16: Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew](https://reader034.vdocuments.us/reader034/viewer/2022052701/55d30f87bb61ebc6308b458b/html5/thumbnails/16.jpg)
Defining Design
![Page 17: Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew](https://reader034.vdocuments.us/reader034/viewer/2022052701/55d30f87bb61ebc6308b458b/html5/thumbnails/17.jpg)
DevelopDon’t be afraid, just jump in – Said the spider to the fly
![Page 18: Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew](https://reader034.vdocuments.us/reader034/viewer/2022052701/55d30f87bb61ebc6308b458b/html5/thumbnails/18.jpg)
Creating Assets Custom Master Pages
Responsive and Team Custom CSS Files Custom JavaScript Files Custom Apps
![Page 19: Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew](https://reader034.vdocuments.us/reader034/viewer/2022052701/55d30f87bb61ebc6308b458b/html5/thumbnails/19.jpg)
Master Pages Customizations that apply across all sites
![Page 20: Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew](https://reader034.vdocuments.us/reader034/viewer/2022052701/55d30f87bb61ebc6308b458b/html5/thumbnails/20.jpg)
Page Layouts
![Page 21: Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew](https://reader034.vdocuments.us/reader034/viewer/2022052701/55d30f87bb61ebc6308b458b/html5/thumbnails/21.jpg)
Edit your Custom Master Page HTML file editing
Through your desired program
Tips: Map drive to your machine Or open Windows
Explorer View
![Page 22: Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew](https://reader034.vdocuments.us/reader034/viewer/2022052701/55d30f87bb61ebc6308b458b/html5/thumbnails/22.jpg)
Master Page Gallery
![Page 23: Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew](https://reader034.vdocuments.us/reader034/viewer/2022052701/55d30f87bb61ebc6308b458b/html5/thumbnails/23.jpg)
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"/>
![Page 24: Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew](https://reader034.vdocuments.us/reader034/viewer/2022052701/55d30f87bb61ebc6308b458b/html5/thumbnails/24.jpg)
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;}
![Page 25: Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew](https://reader034.vdocuments.us/reader034/viewer/2022052701/55d30f87bb61ebc6308b458b/html5/thumbnails/25.jpg)
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
![Page 26: Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew](https://reader034.vdocuments.us/reader034/viewer/2022052701/55d30f87bb61ebc6308b458b/html5/thumbnails/26.jpg)
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
![Page 27: Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew](https://reader034.vdocuments.us/reader034/viewer/2022052701/55d30f87bb61ebc6308b458b/html5/thumbnails/27.jpg)
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)
![Page 28: Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew](https://reader034.vdocuments.us/reader034/viewer/2022052701/55d30f87bb61ebc6308b458b/html5/thumbnails/28.jpg)
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
![Page 29: Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew](https://reader034.vdocuments.us/reader034/viewer/2022052701/55d30f87bb61ebc6308b458b/html5/thumbnails/29.jpg)
Reference JavaScript Custom App Script Editor Web Part Content Editor Web Part Custom Page Layout Custom Master Page
![Page 30: Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew](https://reader034.vdocuments.us/reader034/viewer/2022052701/55d30f87bb61ebc6308b458b/html5/thumbnails/30.jpg)
DeployGet in there darn cat…
![Page 31: Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew](https://reader034.vdocuments.us/reader034/viewer/2022052701/55d30f87bb61ebc6308b458b/html5/thumbnails/31.jpg)
Applying Branding Publishing Infrastructure
Site Settings SharePoint Designer
Good for Development Environments
![Page 32: Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew](https://reader034.vdocuments.us/reader034/viewer/2022052701/55d30f87bb61ebc6308b458b/html5/thumbnails/32.jpg)
Simple Dev Application Publishing – Alternate CSS URL Sandboxed Solutions
Design Manager Created SharePoint Designer Created Visual Studio Created
![Page 33: Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew](https://reader034.vdocuments.us/reader034/viewer/2022052701/55d30f87bb61ebc6308b458b/html5/thumbnails/33.jpg)
Solution Gallery Upload and Activate
![Page 34: Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew](https://reader034.vdocuments.us/reader034/viewer/2022052701/55d30f87bb61ebc6308b458b/html5/thumbnails/34.jpg)
Full Trust Solutions SharePoint 2013 On Premises
Full Control of Files and Application Best Method still for On Premises Gives Greatest Control
![Page 35: Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew](https://reader034.vdocuments.us/reader034/viewer/2022052701/55d30f87bb61ebc6308b458b/html5/thumbnails/35.jpg)
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
![Page 36: Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew](https://reader034.vdocuments.us/reader034/viewer/2022052701/55d30f87bb61ebc6308b458b/html5/thumbnails/36.jpg)
How Apps Work
![Page 37: Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew](https://reader034.vdocuments.us/reader034/viewer/2022052701/55d30f87bb61ebc6308b458b/html5/thumbnails/37.jpg)
Basic App Structure
![Page 38: Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew](https://reader034.vdocuments.us/reader034/viewer/2022052701/55d30f87bb61ebc6308b458b/html5/thumbnails/38.jpg)
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]
![Page 39: Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew](https://reader034.vdocuments.us/reader034/viewer/2022052701/55d30f87bb61ebc6308b458b/html5/thumbnails/39.jpg)
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()
![Page 40: Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew](https://reader034.vdocuments.us/reader034/viewer/2022052701/55d30f87bb61ebc6308b458b/html5/thumbnails/40.jpg)
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
![Page 41: Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew](https://reader034.vdocuments.us/reader034/viewer/2022052701/55d30f87bb61ebc6308b458b/html5/thumbnails/41.jpg)
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
![Page 42: Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew](https://reader034.vdocuments.us/reader034/viewer/2022052701/55d30f87bb61ebc6308b458b/html5/thumbnails/42.jpg)
Questions
![Page 43: Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew](https://reader034.vdocuments.us/reader034/viewer/2022052701/55d30f87bb61ebc6308b458b/html5/thumbnails/43.jpg)
43 SharePoint Saturday Atlanta43 |SharePoint Saturday Atlanta
![Page 44: Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew](https://reader034.vdocuments.us/reader034/viewer/2022052701/55d30f87bb61ebc6308b458b/html5/thumbnails/44.jpg)
44 SharePoint Saturday Atlanta44 |SharePoint Saturday Atlanta
![Page 45: Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew](https://reader034.vdocuments.us/reader034/viewer/2022052701/55d30f87bb61ebc6308b458b/html5/thumbnails/45.jpg)
45 SharePoint Saturday Atlanta45 |SharePoint Saturday Atlanta
![Page 46: Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew](https://reader034.vdocuments.us/reader034/viewer/2022052701/55d30f87bb61ebc6308b458b/html5/thumbnails/46.jpg)
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
![Page 47: Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew](https://reader034.vdocuments.us/reader034/viewer/2022052701/55d30f87bb61ebc6308b458b/html5/thumbnails/47.jpg)
Thank you for attending!
Cathy Dew, MVP@catpaint1
www.sharepointcat.com