This presentation begins down the path of how to customize SharePoint 2013 On Premises environments going through the Design, Development and Deployment stages.
VoIP Service and Marketing using Odoo and Asterisk PBX
Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew
1. Make it Look Not
Like SharePoint
Cathy Dew
SPS Nashville
June 2015
2. 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
5. 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
6. Begin to Plan
Start to sketch the requirements into a design
Focus on Functionality and Content
Understand what you need
7. Build Your Team
Stakeholder
Project Manager
End User/Power User
Designer
Developer
IT Pro
QA
9. 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
11. Design Methods
Wireframes are a great tool for separating Design
and Function – start with a basic SP site and
customize from there
Evaluate Your
Designs for
Functionality &
Content –
NOT Design
12. Wireframe Tools
Balsamiq
SharePoint 2013 Team Site Template from Flucidity
http://flucidity.azurewebsites.net/2013/02/sharepoint-2013-
balsamiq-mock-up-template/
Visio
Adobe Creative Suite
Axure
15. 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
23. 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"/>
24. 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;
}
25. 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
26. 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
27. 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)
28. 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
29. Reference JavaScript
Custom App
Script Editor Web Part
Content Editor Web Part
Custom Page Layout
Custom Master Page
32. Simple Dev Application
Publishing – Alternate CSS URL
Sandboxed Solutions
Design Manager Created
SharePoint Designer Created
Visual Studio Created
34. Full Trust Solutions
SharePoint 2013 On Premises
Full Control of Files and Application
Best Method still for On Premises
Gives Greatest Control
35. 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
38. 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]
39. Other Useful Powershell
Use 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()
40. 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
41. 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
46. 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