Intro to Branding SharePoint 2013
31
Intro to SharePoint 2013 Branding Presented by Thomas Daly
-
Upload
thomas-daly -
Category
Technology
-
view
136 -
download
1
Transcript of Intro to Branding SharePoint 2013
Intro to SharePoint 2013 BrandingPresented by Thomas Daly
Thanks to our Sponsors!!!
• The details can be found through the EventBoard Mobile app – http://app.spsdc.org -> SPSDC
Session Info
Only have a web browser?http://lanyrd.com/2015/spsdc/
Lanyrd
Join us at #SharePint sponsored by K2 at Clyde’s of Chevy Chase in the RaceCar Bar Downstairs
Why? To network with fellow SharePoint professionalsWhat? SharePint!!!When? 6:00 PMWhere? RaceCar Bar Downstairs5441 Wisconsin AveChevy Chase, MD 20815
Thanks to?K2!
About Me
SharePoint Consultant Developer Branding
Focused on the UI side of things
Community Involvement Speaker NJ SharePoint User Group SharePoint Saturday NYC Organizer SharePoint Saturday NJ Organizer My SharePoint Blog MSDN forums
Topics for Discussion
Composed Looks
Design Manager
Snippet Gallery
Display Templates
Device Channels
Image Renditions
Composed Looks (Theming)
Theming provides a quick and easy way to apply lightweight branding to a SharePoint 2013 site
A composed look, or design, is the color palette, font scheme, background image, and master page that determine the look and feel of a site.
Out of the Box Looks
Look Selection & Edit
Composed Look Anatomy
Master Page
Theme Palette
Font Scheme
Background Image
Master Page
Additional Master Pages
Clean Master Pages
Starter Master Pages
Colors & Fonts
Theme Palette
XML document
.spcolor File
32 Color Palettes OOTB, 89 Colors slots
Opacity White 70% :
AARRGGBB : 7FFFFFFF
Required
Font Scheme
XML document
.spfont File
8 Font Schemes OOTB
7 Font Slots – Title, Navigation, Small-Header, Heading, Large-Heading, Body, Large-Body
Can use web fonts
Not Required
Background Image Full screen background
Supports jpg, bmp, png, & gif
Automatic compression & scaling
Thomas Daly
Add picture of this
Theme Building Tool
Theme Building Tool
SharePoint Color Palette Tool by Microsoft
Demo Composed Looks
Design Manager Interface and central hub for managing all aspects
of branding
Allows standard HTML/CSS coders & designers the ability to produce Master Pages without knowing all the ASP.net SharePoint Controls
Import HTML Templates > Convert to Master Page
Snippet Gallery
Display Templates
Export / Import Design Packages
Publishing based Feature
Snippet Gallery
For use with .HTML files only
Contains ready-to-use snippets that you can add to pages (such as web parts and controls)
No understanding needed of underlying ASP.NET controls
Snippet Gallery
Snippet - HTML representation of a SharePoint component or control such as a navigation bar or a Web Part
Quickly add specific SharePoint functionality, such as search or navigation or device channel panels, to the HTML file associated with your master page or page layout
Provides generated HTML for copy / paste into HTML design files
Demo Design Gallery
Display Templates
Templates used in Web Parts that use search technology
Display templates control which managed properties are shown in the search results, and how they appear in the Web Part
Each display template is made of two files:
HTML (edit by User & auto converted)
JavaScript (used by SharePoint)
Device Channels
Provides method to specify master page based on device
Uses the device’s user agent string to determine the channel to serve
Optional can use cookie based
Maximum Channels - 10 on premise, 2 SP Online
Not the same as responsive design
Device Inclusion Rules
Generic Specific
Device User agent substring(s)
iPhone iPhone
iPad iPad
Android Android
Windows Phone
Windows Phone OS
FireFox Firefox
Device User agent substring(s)
iPhone 5.0 iPhone OS 5_0
Windows Surface RT
Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; ARM; Trident/6.0)
Android Jelly Bean
Android 4.1.x Jelly Bean
Windows Phone OS 7.5
Windows Phone OS 7.5
FireFox 11.0 Firefox/11.0
Consists of user agent strings
Device Channel Panel
Similar to device channel concept
Specify content on master page or page layout targeted to a device channel
Image Renditions
Image renditions enable you to display differently sized versions of an image on different
pages in a publishing site, based on the
same source image.
Prerequisites
Publishing Site
BLOB cacheAsset
Library
An image can be
displayed in various
sizes or with different cropping.
Image renditions reduce the size of
the file that is downloaded to the
client, which improves site performance.
Image Renditions
Define as many image renditions as needed
Can be used in publishing pages & display templates
Cropping Image Renditions Crop and preview images
**New rendition created on next image request**
Questions?
Contact Info Thomas M Daly Website – http://thomasdaly.net Twitter - _tomdaly_ Email
[email protected] [work] [email protected] [personal]
Additional Information
What’s new with SharePoint 2013 site development - MSDN
See All the new 2013 Looks
Design Manager – mapping network folder
User Agent Strings Complete List
What’s My User Agent detector
Practical Example of 2013 Branding Exercise
Intro to the Minimal Download Strategy
Deploying Composed Looks
References
Overview of the SharePoint 2013 page model
Changes from SharePoint 2010 to SharePoint 2013
Plan device channels in SharePoint Server 2013
Overview of design packages in SharePoint Server 2013
