WCM Bootcamp Designer Track

Josh SticklerProgram ManagerMicrosoft

• Any web designer & developer can easily style & brand an SP2013 Publishing site

• “Under-the-hood” platform investments that make SharePoint a much better WCM rendering platform

What we’ll cover today

Adaptive designs? Adaptive schedule!Time Topic

12:00-12:45 Lunch

12:45-13:15 Archi considerations

13:15-14:15 Rendering dynamic content and mobile optimization

14:15-14:30 Coffee break

14:30-15:15 Packaging

15:15-16:00 Office 365 Public Sites

16:00-16:30 Summary and Q&A

Nice to meet you

Introducing Notaris

Designing for SharePoint 2013 with the tools and technologies you know

• Overview of designing in SharePoint 2013

• Setting up the initial design: the Design Manager and Snippet Gallery

• Tips and tricks• Trade-offs between author control and

design flexibility

Agenda

A look back: Designing your web site in SharePoint 2010

Mockups

CSS, JS, etc.

HTML

Integrate

Ribbon

Master

Pages

Roll-up

control

s

Dreamweaver / Photoshop / etc.

SharePoint Designer

NavigationCusto

m Catalo

gCatalog Integration

Designing your web site in SharePoint 2013

SharePoint

Dreamweaver / etc.

• Ribbon

• Placeholder Main

• Minimal Master

• Navigation

• Web parts

• Controls

Auto Convert

SnippetGallery

Add controls

UploadMockupsCSS, JS, etc.

HTML

SharePoint Publishing Page Model

Demo: HTML/CSS -> SharePointLet’s create the master page

• Remember to publish design assets!• Or make things easy for yourself by turning off minor versions if

you’re not working in production

• You can style SharePoint chrome, but you might not want to• Avoid styling generic elements like “img,” as these will style

chrome like the Ribbon• You can style everything inside #s4-workspace

Tips and Tricks

• Nav styles can impact WYSIWYG editing• Style anchor tags instead of parent list items• The “edit nav” control is only for authenticated users, but may

impact your layout. You can hide it with: .ms-navedit-editSpan {display:none;}

Tips and Tricks (continued)

SharePoint Publishing Page Model

Where to add web parts

…in Web Part Zones

• Authors can add, remove, or configure any web part in a zone

…in Master Pages/Page Layouts

• Only designers can add, remove, or configure web parts

• Authors can change content that might appear in a web part

• A Web Part Zone is a web form control that acts as a container for Web Parts

• Web Part settings are not stored in page list items

• Users who can’t modify a dynamic page may still be able to modify the content that shows up

• No more TABLEs for Web Parts & Zones

Web Part Zones

• All Web Parts get the Web Part Toolpane config UI for free

• Working with the web part toolpane• SharePoint wraps ContentPlaceholderMain main in a TABLE and

adds the web part zone in a new column on the right• Keep this in mind for fixed-width designs!

Web Part Settings

• Cross site published content retains rich formatting

• You can restrict what customizations are available to authors for each page fields in the page layout• You can set parameters of RichHtmlField so authors

don’t style text this way on the homepage of your site

Author control

• The web part tool pane in the Snippet Gallery is “write only”• You can configure a web part here, but you can’t read settings from an

existing web part• For iteration over time, consider editing in a web part zone as an

author first then adding as a snippet to your master page or page layout

Tips and Tricks

Demo: HTML/CSS -> SharePointLet’s create the home page

• Author in place• Content Deployment• Cross-site collection publishing• Separate design site collection

Topology

Search driven content

Cross Site Publishing

Site URL’s

Managed Navigation

Content Recommendations

TranslationsFURLs Product Catalog

Cross-site publishing

Taxonomy Driven Refiners

Authoring

en-us Pages

nl-nl Pages

Public Sites

notaris.nl

notaris.com

Terms

Demo: Auto-generated page layoutsCategory and item detail pages

Making it real: Design packaging and special considerations

Design Packaging:Scenarios and suits

SourceSPSite

TargetSPSite

SourceSPSite

TargetSPSite

Web App

Web App

Web App

1 2

How designs have been transferred before

Approach Limitations

Download and ZIP files Lots of upload locations, not everything can be downloaded (list items)

Solution (WSP) Must be custom-built in Visual Studio

Content Management Pack (PRIME)

Deploys more than just designs

STSADM Backup Requires version/CU parity between source and target, takes everything

Save Site as Template Not supported for Publishing; can’t be applied to an existing site with content

The visual assets of a site, independent from business logic and customer content

A customer should be able toapply it to multiple properties

The “trusted relationship”

What IS a Design?

• Backup/Restore• Not full fidelity

• Content Deployment• Pages, documents, etc. (content) aren’t included

• Team Sites• The upstream Design Manager isn’t recommended for team

sites

Design packages aren’t suitable for…

Anatomy of a design package

DesignPackage

Document libraries

ContentTypes, Fields

Lists

Master Pages Gallery

Style, Site Asset Libraries

Themes Gallery, _themes

CTs that derive from PageFields used by these CTs

Mobile Channels

Design Gallery/Composed Looks

Exporting the Master Pages Gallery includes:• Channel Mappings (e.g. current master page)

• Image Renditions

Additional notes

Notable exceptionsLocation not exported

Pages, Images, Documents Libraries

Custom Lists/Libraries

Taxonomy, Managed Navigation, URLs

Site Title, Description, Icon

Reusable Content/Rich Text Snippets

Behaviors: Document Libraries

Enterprise Publishing• Export user-generated items from

source• Import all items to the targetModeration StatusSource Target

Checked Out [Not imported]

Checked In Checked In

Pending Checked In

Published Published

Behaviors: Conflict Management

Enterprise Publishing

Overwrite “foo.master” on the target with “foo.master” from the package

Suppose the following:• Export “foo.master”• On the target SPSite, “foo.master” already exists• Import “foo.master”

• Level-set: A “ghosted” file exists on the file system, vs. the content DB. Most OOB design files are ghosted.

• We don’t export ghosted files• Prevents clutter from distributing OOB assets we assume

everyone has• Instead of making changes to OOB assets (e.g. page layouts),

we recommend creating a (non-ghosted) copy, and customizing the copy

• If the current master page is set to a ghosted file, we’ll fail to export the package

Behaviors: Ghosted Files

Behaviors: Content Types, Fields• Export all Content Types that derive from

Pages• Export all fields referenced in exported

Content Types except:• List lookups• Workflow fields

• Import all CTs, Fields• Overwrite target CTs/Fields

• Export all source list items• Delete all target list items• Import all list items from the package

Behaviors: Lists

• You can find exported and imported design packages in the Solutions Gallery

• SharePoint increments the version number of a design package on each export

• Although design packages are technically solutions, do not deactive them (content types will be removed and users may have issues creating subsites)• Instead, remove individual files or import a new design package

Managing Design Packages

• Custom designs will need to be refactored for SharePoint 2013

• Use of the Design Manager isn’t necessary, but is recommended and will make things easier

• For team sites, SharePoint Designer is still the tool of choice

Additional points for consideration

Search Engine Optimization

SharePoint 2013 makes sure search engines give your site the best possible treatment:

Great sites are ones that get found

Clean URLs http://www.c.com/cars

Home Page Redirects None

Country code top-level domains (ccTLDs)

http://www.c.com/cars http://www.c.mx/coches

XML Sitemaps Automatically generated and referenced in robots.txt

SEO Properties Browser title, Meta description, Meta keywordsCanonical URLs

Webmaster Tools integration

Assists with ownership verification

Design considerations in the cloud• Some features are only available in

Enterprise Publishing (Azure/OnPrem)Content search web part and display templatesCross-site publishing (and its page layouts)Custom device channel management

• Other features are emphasized differently in O365Designs for Office 365 Public Websites may be multi-purpose; hence, we emphasize use of the theming engine

For Enterprise Publishing sites, we expect most customers will want “one-off” designs

Display Templates and jQuery

Web partSpecifies the query and templates to useTriggers templates when search results are available

Logical Model of Display Templates

Control Template (Begins)Determines how to lay the items out on the pageRendered once per web part on the pageItem TemplateDetermines how each item should lookRendered sequentially, once per search result item

Control Template (Ends)After all items rendered, control template finishes rendering

Hello WorldTo load custom JavaScript…$includeScript(this.url, "~sitecollection/_catalogs/masterpage/Display Templates/Finished/Control_jShowOff_Script.js");

Write code inside the first <div>

OnPostRender will fire after both Control and Item templates are done rendering

Load jQuery in your master page

Web partControl Template (Begins)Item TemplateControl Template (Ends)

Getting data into CS display templatesDisplay templates specify

inputs for data 1 2

34

Inputs are filled in with search managed properties specified by:Defaults in the display template<mso:ManagedPropertyMapping msdt:dt="string">'Link URL'{Link URL}:'Path'</mso:ManagedPropertyMapping>

Overrides by users per web-part

Image RenditionsMultiple sizes, aspect ratios, and crops…

…but still just one image!

Hero Control

GetPictureMarkup returns an image rendition based on dimensionsvar pictureMarkup = Srch.ContentBySearch.getPictureMarkup(pictureURL, 135, 135, ctx.CurrentItem, "cbs-sliding-details-thumbnail", line1, pictureId);

Connect event handlers using OnPostRender to ensure all HTML elements are created

To load custom CSS…$includeCSS(this.url, "~sitecollection/_catalogs/masterpage/Display Templates/Finished/Item_SlidingDetails_Styles.css");

Web partControl Template (Begins)Item TemplateControl Template (Ends)

Tying item and control templates togetherYou can use any (Control, Item) Template combination

However, you may want to think about your designs as tightly-coupled

Search Data ProviderThis provider can be shared between multiple web parts, or local to a single web part

… so you can easily create inter-connected search experiences

Search Data Provider

• You can manipulate search query context via JavaScript, creating dynamic experiences.

Interacting with Search Query Context

JavaScript Object

Description Example use case

Ctx.ListData Query result data Passing JSON into custom jQuery plug-in

ctx.CurrentItem

Current item being rendered

Passing JSON into custom jQuery plug-in

ctx.ClientControl

Methods for interacting with presentation of results

Paging, sorting, infinite scrolling

• You can define custom strings that appear in display templates on a per language pack basis$includeLanguageScript(this.url, "~sitecollection/_catalogs/masterpage/Display Templates/Language Files/{Locale}/CustomStrings.js");

• For Variations sites, use locale instead of language

• If these files are missing, search web parts will fail to load

Multilingual considerations

• We recommend having as few language-specific design assets as possible

• You can query for search content based on the current site’s locale

• This also works for elements in chrome (e.g. navigation)

Multilingual considerations

Optimizing for mobile

Devices Matter.It’s a mobile & touch-enabled web now.

2006 2008 2010 2012 2014 20160

400

800

1200

1600

2000

Global Mobile vs. Desktop Internet User Projection,

2007-2015E, by Morgan Stanley

Mobile DesktopIn

tern

et

Use

rs (

MM

)But how do you have a Customized Design,

Fewer bytes over the wire

… all while maintaining Search Engine Optimization?

• Mobile website• Mobile app• Responsive design• Device channels

Options for addressing mobile devices

Device ChannelsControl experience based on user agent string, e.g.:Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; NOKIA; Lumia 920)

1. Differentiated design with separate Master Pages

E.g., account for different screen resolutions2. Targeted content with Device Channel

PanelsE.g., show a special deal to mobile

customersE.g., include “get the app” metadata

Differences in Office 365Office 365 Public Sites Office 365 Intranet Publishing

Sites and On-Prem/Azure Publishing Sites

Users get two channels and cannot modify them. These channels are “Default” and “Mobile.”

Users can create a maximum of 10 device channels and can define whatever user agents they’d like for these channels to apply to.

Master pages with a “-mobile” suffix in the filename will be applied as the mobile channel master page.

Users can map any master page to a channel and suffixes do not matter.

Bringing your website to life(Search REST API & building apps)

• Designers can use the tools and technologies they know

• We’ve made a variety of platform investments to improve SharePoint 2013 as a WCM rendering platform

Summary

Questions?

© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.