View
2.060
Download
2
Tags:
Embed Size (px)
DESCRIPTION
Presentations from the SharePoint 2013 WCM Bootcamp design track
Citation preview
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.