Leveraging Web Content Management in SharePoint 2013 Christina Wheeler

About Me Christina Wheeler, MCTS SharePoint Trainer & Consultant Critical Path Training – Blog: – – – Published Books SharePoint 2010 Field Guide SharePoint 2013 Inside Out

Agenda WCM Overview – Publishing site & publishing features Branding and Design – Themes and Composed Looks – Design Manager: Master page & page layouts – Working with image renditions Cross-site Publishing Mobile Device Support

Overview of Publishing Features SharePoint Server 2013 & SharePoint Online – Web Content Management (WCM) features WCM consist of features functionality – Configure, customize, optimize, and publish site collections, sites, and pages What is publishing? – Authoring and deployment of branded artifacts, content, and configuration files

Benefits of Publishing Sites Brand consistency – Control the over all look and feel Globalization – Greater control over global site navigation Dynamic Content – Utilize new cross-site publishing features and search features for displaying dynamic content

Publishing Features SharePoint Server Publishing Infrastructure feature (site collection) SharePoint Server Publishing feature (site)

What’s Changed? The question is more like what hasn’t changed? Microsoft did a complete overhaul of Web Content Management (WCM) in SharePoint 2013 Forget what you knew in previous versions Completely different approach to creating the design

THEMES & COMPOSED LOOKS

Themes and Composed Looks New theming engine introduced in SP2013 Themes no longer created using the Office client Elements are configured and added to Composed Looks list Composed Looks – An association between a design (master page), theme (fonts & colors), and background image – Located at Site Actions > Site Settings > Composted looks

Composed Looks Properties Name Master Page Theme URL Image URL Font Scheme URL Display Order

Changing the Look

DESIGN MANAGER

Design Manager New Central Hub Interface Helps separate design aspects from technical requirements Designer no longer needs to have SharePoint Designer knowledge – Use existing tools designers are familiar with such as Dreamweaver

Design Manager Enables step-by-step approach to create design assets – Create design assets—images, HTML, CSS, and JavaScript files—using Dreamweaver, or other tool of choice – Upload design files – Convert HTML pages into page layouts and master pages

Mapping a Network Drive

Convert HTML to Master Page Following occurs when converting HTML file to SharePoint master page: – Master file (.master) created with same name as HTML file in Master Page gallery – All required SharePoint markup added to.master – Markup added to original HTML file tags, comments, snippets, and content placeholders – HTML file & master page are associated Edits made in HTML file synced to.master file

Convert HTML to Master Page Every HTML page has Associated File property – True by default Creates association and syncing between the two files One direction only syncing (HTML >.master) – Changes to HTML page synced to associated.master file – Modifications made directly to.master file will not sync with HTML file

Convert HTML to Master Page Preparing HTML file for conversion – HTML file must be XML-compliant – All tags must be removed from HTML file Before Converting HTML file to master page – All design files must be uploaded first

Convert HTML to Master Page Considerations – Do not put in because styles will be removed – Link external CSS file instead in HTML page – Add ms-design-css-conversion=“no” to tag if using web font – If using JavaScript, make sure start tag is on own line – References to jQuery libraries should go before tag

CROSS-SITE PUBLISHING

Overview of Cross-Site Publishing What is Cross-Site Publishing? – New publishing feature in SharePoint 2013 – Allows content reuse across site collections – Uses built-in SharePoint search capabilities

Overview of Cross-Site Publishing Content created in libraries/lists as catalogs in authoring site collection – Search crawls content & builds search index User views page on publishing site – Triggers queries from Search Web Parts Results returned from search index & shown in Search Web Parts on page

Cross-Site Publishing Diagram

Cross-Site Publishing Why use cross-site publishing? – Store/maintain content in one or more authoring site collections – Display content in one or more publishing site collections Using cross-site publishing provides following benefits: – Separates content authoring from branding & rendering – Use across site collections, web applications, and across farms – Allows for mix of authored pages & list content

Content by Search Web Part Similar to Content by Query Web Part (CQWP) – Returns results as JSON on page Customize search results rending – Easier to customize than CQWP XSL styles – Client-side solution using returned results as JSON – Server side via custom Display Templates Content only editable at source

Working with Catalogs What is a Catalog? – List or Library used to reuse content across sites Catalogs enable content to be published across site collections – Lists/libraries enabled as catalogs Picked up in search for using across publishing sites – Authoring Site to Publishing Site

MOBILE DEVICE SUPPORT

Supporting Mobile Devices New Mobile Views introduced in 2013 Classic View - Lightweight mobile view using hyperlink navigation model – HTML format provides & backwards compatibility Contemporary View - Modern UI optimized for touch that renders HTML 5 Full screen UI view - Full desktop view for smartphones and tablet devices – Has same navigation experience as the desktop experience

Contemporary View Example

Device Channels

Only used with publishing sites for smartphone and tablet devices Allows targeting areas of content on pages using designs created for specific mobile devices Render a single publishing site in multiple ways – Map different designs to different types of devices Channels created in Design Manager – Each channel can use its own master page that references different style sheet optimized for the device

Resources Recommended Book: SharePoint 2013 Branding and User Interface Design /WileyTitle/productCd html /WileyTitle/productCd html

Questions? Christina Wheeler, MCTS SharePoint Trainer & Consultant Critical Path Training – Blog: – – – Published Books SharePoint 2010 Field Guide SharePoint 2013 Inside Out