matthew w. tallman david ginn
DESCRIPTION
Matthew W. Tallman David Ginn. Branding in SharePoint 2013. Open wireless access is available. Feel free to Tweet (#SPcincy2013) and blog during the session. . Thanks to our Platinum Sponsors. #SPcincy2013 on Twitter www.sharepointcincy.com. Introductions. Matthew W. Tallman - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Matthew W. Tallman David Ginn](https://reader035.vdocuments.mx/reader035/viewer/2022062815/56816967550346895de12b66/html5/thumbnails/1.jpg)
Matthew W. TallmanDavid Ginn
Branding in SharePoint 2013
![Page 2: Matthew W. Tallman David Ginn](https://reader035.vdocuments.mx/reader035/viewer/2022062815/56816967550346895de12b66/html5/thumbnails/2.jpg)
#SPcincy2013 on Twitterwww.sharepointcincy.com
• Open wireless access is available.
• Feel free to Tweet (#SPcincy2013) and blog during the session.
![Page 3: Matthew W. Tallman David Ginn](https://reader035.vdocuments.mx/reader035/viewer/2022062815/56816967550346895de12b66/html5/thumbnails/3.jpg)
Thanks to our Platinum Sponsors
#SPcincy2013 on Twitterwww.sharepointcincy.com
![Page 4: Matthew W. Tallman David Ginn](https://reader035.vdocuments.mx/reader035/viewer/2022062815/56816967550346895de12b66/html5/thumbnails/4.jpg)
#SPcincy2013 on Twitterwww.sharepointcincy.com
IntroductionsMatthew W. TallmanPrincipal Consultant at Cardinal SolutionsTwitter - @mwtallmanBlog – http://thesharedcontext.wordpress.comEmail – [email protected]
David GinnPrincipal Consultant at Cardinal SolutionsTwitter - @DavidMGinnEmail – [email protected]
![Page 5: Matthew W. Tallman David Ginn](https://reader035.vdocuments.mx/reader035/viewer/2022062815/56816967550346895de12b66/html5/thumbnails/5.jpg)
#SPcincy2013 on Twitterwww.sharepointcincy.com
Agenda1. Design Overview in SharePoint 20132. Design Manager Introduction and Techniques3. Design Package Best Practices4. Device Channel Overview5. Responsive Design in SharePoint 20136. Overview of Composed Looks7. Branding in SharePoint 2013 Apps
![Page 6: Matthew W. Tallman David Ginn](https://reader035.vdocuments.mx/reader035/viewer/2022062815/56816967550346895de12b66/html5/thumbnails/6.jpg)
#SPcincy2013 on Twitterwww.sharepointcincy.com
Design OverviewDesigning for SharePoint 2013 has brought about a fundamental change and approach.
• Team Centered Design• HTML 5 Support• CSS3 Support• Updated Page Model
• Search Driven Content• Device Channels
![Page 7: Matthew W. Tallman David Ginn](https://reader035.vdocuments.mx/reader035/viewer/2022062815/56816967550346895de12b66/html5/thumbnails/7.jpg)
#SPcincy2013 on Twitterwww.sharepointcincy.com
Demo
![Page 8: Matthew W. Tallman David Ginn](https://reader035.vdocuments.mx/reader035/viewer/2022062815/56816967550346895de12b66/html5/thumbnails/8.jpg)
#SPcincy2013 on Twitterwww.sharepointcincy.com
Design Manager
![Page 9: Matthew W. Tallman David Ginn](https://reader035.vdocuments.mx/reader035/viewer/2022062815/56816967550346895de12b66/html5/thumbnails/9.jpg)
#SPcincy2013 on Twitterwww.sharepointcincy.com
Design Manager – Import HTMLDesign Manager helps designers to import HTML easily. However, here are some good tips for importing clean HTML.
• XHTML Compliant• Good HTML Structure• Unsupported Tags• Validate HTML
![Page 10: Matthew W. Tallman David Ginn](https://reader035.vdocuments.mx/reader035/viewer/2022062815/56816967550346895de12b66/html5/thumbnails/10.jpg)
#SPcincy2013 on Twitterwww.sharepointcincy.com
Design Manager – The ProcessDesign Manager is the central location for applying a custom design to SharePoint.
• Enable Publishing• Create Minimal Master Page• Map Drive to Upload Files• Preview Design and Utilize Snippets• Create Page Layout• Publish Design
![Page 11: Matthew W. Tallman David Ginn](https://reader035.vdocuments.mx/reader035/viewer/2022062815/56816967550346895de12b66/html5/thumbnails/11.jpg)
#SPcincy2013 on Twitterwww.sharepointcincy.com
Design Manager – Advanced OptionsDesign Manager is the central location for applying a custom design to SharePoint.
• Disassociate a Design File• Setting a Preview Page• Display Templates
![Page 12: Matthew W. Tallman David Ginn](https://reader035.vdocuments.mx/reader035/viewer/2022062815/56816967550346895de12b66/html5/thumbnails/12.jpg)
#SPcincy2013 on Twitterwww.sharepointcincy.com
Demo
![Page 13: Matthew W. Tallman David Ginn](https://reader035.vdocuments.mx/reader035/viewer/2022062815/56816967550346895de12b66/html5/thumbnails/13.jpg)
#SPcincy2013 on Twitterwww.sharepointcincy.com
Design Package
![Page 14: Matthew W. Tallman David Ginn](https://reader035.vdocuments.mx/reader035/viewer/2022062815/56816967550346895de12b66/html5/thumbnails/14.jpg)
#SPcincy2013 on Twitterwww.sharepointcincy.com
Design PackageDesign Manager manages the deployment of a design through the use of a solution package.
• Importing a Package• Creating a Package• Design Package Do’s and Don’ts• Including Search Configuration
![Page 15: Matthew W. Tallman David Ginn](https://reader035.vdocuments.mx/reader035/viewer/2022062815/56816967550346895de12b66/html5/thumbnails/15.jpg)
#SPcincy2013 on Twitterwww.sharepointcincy.com
Demo
![Page 16: Matthew W. Tallman David Ginn](https://reader035.vdocuments.mx/reader035/viewer/2022062815/56816967550346895de12b66/html5/thumbnails/16.jpg)
#SPcincy2013 on Twitterwww.sharepointcincy.com
Device Channels
![Page 17: Matthew W. Tallman David Ginn](https://reader035.vdocuments.mx/reader035/viewer/2022062815/56816967550346895de12b66/html5/thumbnails/17.jpg)
#SPcincy2013 on Twitterwww.sharepointcincy.com
Device Channels - CreatingThrough the use of device channels, SharePoint can accommodate a more responsive design.
• When To Use• Device Channel Alias• Device Inclusion Rules
![Page 18: Matthew W. Tallman David Ginn](https://reader035.vdocuments.mx/reader035/viewer/2022062815/56816967550346895de12b66/html5/thumbnails/18.jpg)
#SPcincy2013 on Twitterwww.sharepointcincy.com
Device Channels - PublishingThrough the use of device channels, SharePoint can accommodate a more responsive design.
• Apply Device Channel by Master Page• Understanding the Order of Device Channels• Removing a Device Channel
![Page 19: Matthew W. Tallman David Ginn](https://reader035.vdocuments.mx/reader035/viewer/2022062815/56816967550346895de12b66/html5/thumbnails/19.jpg)
#SPcincy2013 on Twitterwww.sharepointcincy.com
Demo
![Page 20: Matthew W. Tallman David Ginn](https://reader035.vdocuments.mx/reader035/viewer/2022062815/56816967550346895de12b66/html5/thumbnails/20.jpg)
#SPcincy2013 on Twitterwww.sharepointcincy.com
Adapts to Screen Resolution Media Queries CSS Grid Layout and Frameworks
What is Responsive Design?
![Page 21: Matthew W. Tallman David Ginn](https://reader035.vdocuments.mx/reader035/viewer/2022062815/56816967550346895de12b66/html5/thumbnails/21.jpg)
http://twitter.github.io/bootstrap/
#SPcincy2013 on Twitterwww.sharepointcincy.com
Responsive Design Demo
![Page 22: Matthew W. Tallman David Ginn](https://reader035.vdocuments.mx/reader035/viewer/2022062815/56816967550346895de12b66/html5/thumbnails/22.jpg)
Browser Support Device Support Type of content
www.sharepointcincy.com
Considerations for Responsive Design in SharePoint
![Page 23: Matthew W. Tallman David Ginn](https://reader035.vdocuments.mx/reader035/viewer/2022062815/56816967550346895de12b66/html5/thumbnails/23.jpg)
http://responsivesharepoint.codeplex.com/ Bootstrap Starter Master Page Page Layouts
www.sharepointcincy.com
Responsive SharePoint
![Page 24: Matthew W. Tallman David Ginn](https://reader035.vdocuments.mx/reader035/viewer/2022062815/56816967550346895de12b66/html5/thumbnails/24.jpg)
www.sharepointcincy.com
Responsive SharePoint Demo
![Page 25: Matthew W. Tallman David Ginn](https://reader035.vdocuments.mx/reader035/viewer/2022062815/56816967550346895de12b66/html5/thumbnails/25.jpg)
Master Page Composed Looks Provider/Autohosted App SharePoint Hosted App
www.sharepointcincy.com
SharePoint App UX
![Page 26: Matthew W. Tallman David Ginn](https://reader035.vdocuments.mx/reader035/viewer/2022062815/56816967550346895de12b66/html5/thumbnails/26.jpg)
Master Page Default CSS File
◦ http://msdn.microsoft.com/en-us/library/jj220046.aspx
Defaultcss.ashx
www.sharepointcincy.com
Master Page
![Page 27: Matthew W. Tallman David Ginn](https://reader035.vdocuments.mx/reader035/viewer/2022062815/56816967550346895de12b66/html5/thumbnails/27.jpg)
Evolution of Themes
www.sharepointcincy.com
Composed Looks
![Page 28: Matthew W. Tallman David Ginn](https://reader035.vdocuments.mx/reader035/viewer/2022062815/56816967550346895de12b66/html5/thumbnails/28.jpg)
Palette File Font File CSS Substitutions
www.sharepointcincy.com
Composed Look Contents
![Page 29: Matthew W. Tallman David Ginn](https://reader035.vdocuments.mx/reader035/viewer/2022062815/56816967550346895de12b66/html5/thumbnails/29.jpg)
UX Guidelines Client Chrome Control Full Screen pages vs. Client Web Part page
www.sharepointcincy.com
Provider/Autohosted App
![Page 30: Matthew W. Tallman David Ginn](https://reader035.vdocuments.mx/reader035/viewer/2022062815/56816967550346895de12b66/html5/thumbnails/30.jpg)
Token Persistence◦ Cookie◦ Single Page Applications (SPAs)
www.sharepointcincy.com
App Challenges
![Page 31: Matthew W. Tallman David Ginn](https://reader035.vdocuments.mx/reader035/viewer/2022062815/56816967550346895de12b66/html5/thumbnails/31.jpg)
App.master Full Page View Client Web Part
www.sharepointcincy.com
SharePoint Hosted App
![Page 32: Matthew W. Tallman David Ginn](https://reader035.vdocuments.mx/reader035/viewer/2022062815/56816967550346895de12b66/html5/thumbnails/32.jpg)
Responsive Frameworks◦ Bootstrap◦ Foundation
Responsive SharePoint on Codeplex MSDN Client Chrome Control MSDN App UX Guidelines
www.sharepointcincy.com
Resources
![Page 33: Matthew W. Tallman David Ginn](https://reader035.vdocuments.mx/reader035/viewer/2022062815/56816967550346895de12b66/html5/thumbnails/33.jpg)
•Remember to visit the exhibit hall.
•Get to know your user groups to find out about local activities and events in your area.
•Make sure you stick around for the closing session and turn in your business cards to be eligible for the prize raffles.
#SPcincy2013 on Twitterwww.sharepointcincy.com
![Page 34: Matthew W. Tallman David Ginn](https://reader035.vdocuments.mx/reader035/viewer/2022062815/56816967550346895de12b66/html5/thumbnails/34.jpg)
#SPcincy2013 on Twitterwww.sharepointcincy.com
Please Support our Sponsors!