SlideShare a Scribd company logo

sptc_presentation

•Download as PPTX, PDF•
•
D'arce Hess
D'arce Hess

This document provides an overview and agenda for branding in SharePoint, including: - Themes and composed looks, which allow customizing color schemes and fonts without fully customized master pages, and are located in _catalogs/theme. - Responsive design using CSS media queries to adapt designs to different screen widths in a mobile-first approach. - Potential issues to watch out for including only modifying master pages in the .html file, content overload on mobile, and compatibility issues with Design Manager and Bootstrap. The document concludes with asking if there are any other questions on achieving an optimal SharePoint experience.

Related slideshows

Branding 101
Branding 101Branding 101
Branding 101
 
The Evolution of Branding in Office 365 - SPSATL 2015 - CDew
The Evolution of Branding in Office 365 - SPSATL 2015 - CDewThe Evolution of Branding in Office 365 - SPSATL 2015 - CDew
The Evolution of Branding in Office 365 - SPSATL 2015 - CDew
 
Things you can do
Things you can doThings you can do
Things you can do
 
1 of 24
SharePoint Branding 101 Tips to enhancing your experience D’arce Hess UI/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?
sptc_presentation
sptc_presentation
sptc_presentation
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?
sptc_presentation
• The configuration of each Composed Look • The Masterpage used • The Color Palette file • The Background img Location • Font Scheme used What did I just see?
/_catalogs/theme/15/ Where is the SP color file located?
sptc_presentation
sptc_presentation
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.
sptc_presentation
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

More Related Content

sptc_presentation

  • 1. SharePoint Branding 101 Tips to enhancing your experience D’arce Hess UI/UX Developer
  • 2. • Themes & Composed Looks • Responsive Design • Gotchas Agenda
  • 4. 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
  • 5. • Master Pages • CSS • Color Palettes • Font Palettes • Background image What are Composed Looks made of?
  • 9. 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.
  • 10. Where do you find the composed looks?
  • 12. • The configuration of each Composed Look • The Masterpage used • The Color Palette file • The Background img Location • Font Scheme used What did I just see?
  • 17. • 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.
  • 19. 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.
  • 21. 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.
  • 22. How can we help you achieve your optimal SharePoint experience?