SharePoint Branding 101Tips to enhancing your experience

D’arce HessUI/UX Developer

• Themes & Composed Looks

• Responsive Design

• Gotchas

Agenda

Themes&

Composed Looks

This is the Out-of-the-Box method for branding SharePoint 2013 and

O365..

• Great for end-users

• Easy to add custom color schemes without fully customized master pages and page layouts

• Master Pages• CSS• Color Palettes• Font Palettes• Background image

What are Composed Looks made of?

Do not modify the .master file. Only work out of the .html file

Only need to create a .preview file if you want to select your master page from the drop-down in the preview.

Where do you find the composed looks?

• The configuration of each Composed Look

• The Masterpage used

• The Color Palette file

• The Background imgLocation

• Font Scheme used

What did I just see?

/_catalogs/theme/15/

Where is the SP color file

located?

Responsive Design

• Uses CSS3 Media Queries to allow for design to adapt to screen width.

• Requires a different thought process for tables and content.

• Mobile First vs. Desktop.

• When to ask for help.

With great power comes great responsibility

• Responsive Design should not be used in all projects.

• Takes more time for development, but less time to maintain.

• One Master Page to rule them all.

• Design to screen width not to specific device.

• Need to watch for optimization of content prevent bandwidth and data overload.

Gotcha

Design Manager in SharePoint 2013• Do NOT use the create Design Package

• <form> </form> will not validate in XML validator

Bootstrap• Watch out for box-model. SharePoint requires use

of content-box to work properly.

• Several resets needed to allow for bootstrap to work with SharePoint.

How can we help you achieve your optimal SharePoint

experience?

QUESTIONS

THANK YOU