450 likes | 658 Views
Matt Olson Solution Consultant mattolson@deliveron.com @ Lynzaddy. Branding with SharePoint 2013. Thank You!. For Sponsoring the Information Worker Track. Who is Deliveron?. Technology Consulting Company Local to Omaha, Founded in 2006 Microsoft Gold Competency Partner Nintex Partner
E N D
Matt Olson Solution Consultant mattolson@deliveron.com @Lynzaddy Branding with SharePoint 2013
Thank You! For Sponsoring the Information Worker Track
Who is Deliveron? • Technology Consulting Company • Local to Omaha, Founded in 2006 • Microsoft Gold Competency Partner • Nintex Partner • Focus on Microsoft technologies • Experts at project based solution delivery • Consulting = more than just technology… • Deliveron Core values: • Design, Leadership, Vision, Collaboration
About matt olson • Swanson Russell • In-House Marketing • .com Retailer • Deliveron • In-House IT • SoluTech/Quilogy/Aspect • Teach at Southeast CC in Lincoln
Agenda • Common SharePoint Perceptions • Branding Fundamentals • SharePoint 2013 Branding • Won’t Cover Everything That’s New With 2013 • Start with Simple Customization • Work our way up to Working with Existing Tools
SharePoint perceptions IT vs. The Organization
Common Marketing Perceptions • It stifles our creativity • It looks too “IT-ish” • Cross-Browser Requirements • …
Common IT Perceptions • Lock it down, “They” are going to mess it up • No you can’t install that on my production server • We already “paid” for SharePoint • …
What about your designer? • XSLT? • Master Pages? • Page Layouts? • jQuery goes where? • We need to be doing Responsive Design • .EveryTag { … !Important}
There are SP BRANDED sites • http://www.topsharepoint.com/
FUNDAMENTALS • HTML5 • Responsive Design • Basics of SharePoint Branding
HTML5 • What is HTML5? • HTML + CSS + JavaScript • Less Dependent on Plugins for Functionality • Audio/Video • Drag and Drop • “Built-In” APIs to Use in Applications • Geolocation • Application Cache to work Offline
Responsive Design • What is Responsive Design?
Basics of SHAREPOINT BRANDING • Master Pages • Page Layouts
What’s NEW For SHAREPOINT 2013 • Composed Looks • HTML-based Master Pages and Page Layouts • Device Channels • Cross-site Publishing / Catalogs • Content Search Web Parts / Display Templates
Cross-site publishing • Create and maintain content in one or more authoring site collections • Publish this content across one or more publishing site collections, by usingSearch Web Parts.
Content search web part • Displays search results in a way that you can easily format • Each CSWP is associated with a search query and shows the results for that search query
CSWP vs. CQWP • The CSWP returns content that is as fresh as the latest crawl • If you need to display instant content use the Content Query Web Part (CQWP) instead.
Display templates • You can use display templates to change how search results appear on the page. • Display templates are snippets of HTML and JavaScript that render the information returned by SharePoint. (NO MORE XSLT!!!)
Composed Looks • Were called “Themes” in SharePoint 2010 • Several Out of the Box (more on Office 365) • Ability to Customize These • Create Your Own
Composed looks • Allows you to control • Color Palette • Fonts • Background Image • Associated Master Page
Composed looks • Demo
Composed Looks • Pros • Simple way to brand a site, especially collaboration sites • Cons • OOTB Limited to Oslo or Seattle Master Page • Too limited for sophisticated branding efforts • Can’t change font sizes
Composed looks • Questions?
DESIGN MANAGER • “Central hub for helping designers create and apply SharePoint Branding” • Allows users to maintain the HTML for page layouts and master pages in any HTML editor • Dreamweaver • Notepad++ • Etc.
Design manager • Demo
DESIGN MANAGER • Pros • Not everyone is comfortable creating SharePoint brands from a starter master page • Easily convert a simple HTML file into a master page • Facilitates the use of any HTML editor • Cons • You will still need to do some “tweaking” • Complex designs should start from scratch • Only for Publishing Sites *
Design Manager • Questions?
Device Channels • Display a different Master Page per Device/Browser • Detects keywords from the requesting browser’s User Agent String
DEVICE CHANNELS • Demo
Device channels • Pros • Simple way to change looks based on device • Users can always default, you are just improving the experience when possible • Cons • Maintaining multiple Master Pages • Accommodating orientation • Responsive Design is favored if available
Device Channels • Questions?
Resources SharePoint 2013 – Branding and User Interface Design
Resources Pro SharePoint 2013 Branding and Responsive Web Development
REFERENCES • Cross-Site Publishing • http://technet.microsoft.com/en-us/library/jj635883(v=office.15) • http://blogs.technet.com/b/tothesharepoint/archive/2013/02/19/an-introduction-to-cross-site-publishing.aspx • Content Search Web Part • http://msdn.microsoft.com/en-us/library/jj163789.aspx
REFERENCES • http://bniaulin.wordpress.com/2012/07/18/sharepoint-2013-design-manager-convert-html-to-master-page/ • http://bniaulin.wordpress.com/2012/07/17/sharepoint-2013-design-manager-device-channels/ • http://www.sptechweb.com/content/article.aspx?articleid=51676&print=true
Image Credits • Responsive Design • https://www.corephp.com/images/wordpress/uploads/2013/06/Responsive_Design_Kinetic_Knowledge.jpg • Master Page vs. Page Layouts • http://msdn.microsoft.com/en-us/library/jj191506.aspx • Web Designer • http://www.m3forum.net/m3forum/showthread.php?p=1066084800
QUESTIONS? Matt Olson Solution Consultant mattolson@deliveron.com @Lynzaddy