Presentations from the SharePoint 2013 WCM Bootcamp design track

4. 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

9. Mockups
CSS,
JS, etc.
HTML
Dreamweaver /
Photoshop / etc.
SharePoint Designer

10. SharePoint
Dreamweaver / etc.
Auto
Convert
Snippet
Gallery
Add controlsUpload
Mockups
CSS,
JS, etc.
HTML

12. Let’s create the master page

17. • No more TABLEs for Web Parts & Zones

19. style text this way

21. Let’s create the home page

24. Category and item detail pages

25. Making it real:
Design packaging and
special considerations

27. Source
SPSite
Target
SPSite
Source
SPSite
Target
SPSite
Web
App
Web
App
Web App
1 2

28. 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

32. Design
Package
Document
libraries
Content
Types, Fields
Lists
Master Pages Gallery
Style, Site Asset Libraries
Themes Gallery, _themes
CTs that derive from Page
Fields used by these CTs
Mobile Channels
Design Gallery/
Composed Looks

33. (e.g. current master page)

34. Location not exported
Pages, Images, Documents Libraries
Custom Lists/Libraries
Taxonomy, Managed Navigation, URLs
Site Title, Description, Icon
Reusable Content/Rich Text Snippets

35. Source Target
Checked Out [Not imported]
Checked In Checked In
Pending Checked In
Published Published

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

42. Search Engine
Optimization

43. 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 keywords
Canonical URLs
Webmaster Tools integration Assists with ownership verification

46. Web part
Specifies the query and templates to use
Triggers templates when search results are available
Control Template (Begins)
Determines how to lay the items out on the page
Rendered once per web part on the page
Item Template
Determines how each item should look
Rendered sequentially, once per search result item
Control Template (Ends)
After all items rendered, control template finishes
rendering

47. To 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 part
Control Template
(Begins)
Item Template
Control Template (Ends)

48. Display templates specify
inputs for data
Inputs are filled in with search managed properties
specified by:
<mso:ManagedPropertyMapping msdt:dt="string">
'Link URL'{Link URL}:'Path'
</mso:ManagedPropertyMapping>

50. GetPictureMarkup returns an image rendition
based on dimensions
var 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/Di
splay Templates/Finished/Item_SlidingDetails_Styles.css");
Web part
Control Template
(Begins)
Item Template
Control Template (Ends)

51. You can use any (Control, Item) Template
combination
However, you may want to think about your
designs as tightly-coupled

52. This 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

53. • You can manipulate search query context via
JavaScript, creating dynamic experiences.
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

57. 0
400
800
1200
1600
2000
2006 2008 2010 2012 2014 2016
INTERNETUSERS(MM)
Global Mobile vs. Desktop Internet User
Projection,
2007-2015E, by Morgan Stanley
Mobile Desktop
Customized Design,
Fewer bytes over the wire
… all while maintaining Search
Engine Optimization?

59. Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0;
Trident/6.0; IEMobile/10.0; ARM; Touch; NOKIA; Lumia 920)

60. Office 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.