1 / 34

Matthew W. Tallman David Ginn

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

cadee
Télécharger la présentation

Matthew W. Tallman David Ginn

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Matthew W. TallmanDavid Ginn Branding in SharePoint 2013

  2. Open wireless access is available. • Feel free to Tweet (#SPcincy2013) and blog during the session. #SPcincy2013 on Twitter www.sharepointcincy.com

  3. Thanks to our Platinum Sponsors #SPcincy2013 on Twitter www.sharepointcincy.com

  4. Introductions Matthew W. Tallman Principal Consultant at Cardinal Solutions Twitter - @mwtallman Blog – http://thesharedcontext.wordpress.com Email – mtallman@cardinalsolutions.com David Ginn Principal Consultant at Cardinal Solutions Twitter - @DavidMGinn Email – dginn@cardinalsolutions.com #SPcincy2013 on Twitter www.sharepointcincy.com

  5. Agenda Design Overview in SharePoint 2013 Design Manager Introduction and Techniques Design Package Best Practices Device Channel Overview Responsive Design in SharePoint 2013 Overview of Composed Looks Branding in SharePoint 2013 Apps #SPcincy2013 on Twitter www.sharepointcincy.com

  6. Design Overview Designing 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 #SPcincy2013 on Twitter www.sharepointcincy.com

  7. Demo #SPcincy2013 on Twitter www.sharepointcincy.com

  8. Design Manager #SPcincy2013 on Twitter www.sharepointcincy.com

  9. Design Manager – Import HTML Design 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 #SPcincy2013 on Twitter www.sharepointcincy.com

  10. Design Manager – The Process Design 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 #SPcincy2013 on Twitter www.sharepointcincy.com

  11. Design Manager – Advanced Options Design Manager is the central location for applying a custom design to SharePoint. • Disassociate a Design File • Setting a Preview Page • Display Templates #SPcincy2013 on Twitter www.sharepointcincy.com

  12. Demo #SPcincy2013 on Twitter www.sharepointcincy.com

  13. Design Package #SPcincy2013 on Twitter www.sharepointcincy.com

  14. Design Package Design 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 #SPcincy2013 on Twitter www.sharepointcincy.com

  15. Demo #SPcincy2013 on Twitter www.sharepointcincy.com

  16. Device Channels #SPcincy2013 on Twitter www.sharepointcincy.com

  17. Device Channels - Creating Through the use of device channels, SharePoint can accommodate a more responsive design. • When To Use • Device Channel Alias • Device Inclusion Rules #SPcincy2013 on Twitter www.sharepointcincy.com

  18. Device Channels - Publishing Through 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 #SPcincy2013 on Twitter www.sharepointcincy.com

  19. Demo #SPcincy2013 on Twitter www.sharepointcincy.com

  20. What is Responsive Design? • Adapts to Screen Resolution • Media Queries • CSS Grid Layout and Frameworks #SPcincy2013 on Twitter www.sharepointcincy.com

  21. Responsive Design Demo • http://twitter.github.io/bootstrap/ #SPcincy2013 on Twitter www.sharepointcincy.com

  22. Considerations for Responsive Design in SharePoint • Browser Support • Device Support • Type of content www.sharepointcincy.com

  23. Responsive SharePoint • http://responsivesharepoint.codeplex.com/ • Bootstrap • Starter Master Page • Page Layouts www.sharepointcincy.com

  24. Responsive SharePoint Demo www.sharepointcincy.com

  25. SharePoint App UX • Master Page • Composed Looks • Provider/Autohosted App • SharePoint Hosted App www.sharepointcincy.com

  26. Master Page • Master Page • Default CSS File • http://msdn.microsoft.com/en-us/library/jj220046.aspx • Defaultcss.ashx www.sharepointcincy.com

  27. Composed Looks • Evolution of Themes www.sharepointcincy.com

  28. Composed Look Contents • Palette File • Font File • CSS Substitutions www.sharepointcincy.com

  29. Provider/Autohosted App • UX Guidelines • Client Chrome Control • Full Screen pages vs. Client Web Part page www.sharepointcincy.com

  30. App Challenges • Token Persistence • Cookie • Single Page Applications (SPAs) www.sharepointcincy.com

  31. SharePoint Hosted App • App.master • Full Page View • Client Web Part www.sharepointcincy.com

  32. Resources • Responsive Frameworks • Bootstrap • Foundation • Responsive SharePoint on Codeplex • MSDN Client Chrome Control • MSDN App UX Guidelines www.sharepointcincy.com

  33. 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 Twitter www.sharepointcincy.com

  34. Please Support our Sponsors! #SPcincy2013 on Twitter www.sharepointcincy.com

More Related