A deep dive on new features and capabilities that now allows designers greater flexibility for creating great looking web sites with SharePoint 2013. We will cover the new design manager, support for HTML editing tools, mobile channels, imaged and video renditions, SEO friendly site maps/URL’s and more.
This session is given by Alyssa Levitz, Ethan Gur-esh.
Sorry there internet connection wasn’t working during this session. Here is my summary:
Summary
Why developers / devs will love SP2013?
- Any web designer and developer can easily style & brand an SP2013 Publishing site
- “Under-the-hood” platform investments that make SharePoint WCM much better
Markup improvements
Better markup, means better SEO.
Which improvements?
- No more tables for web parts & zones!
- Client-side rendering (AJAX) for Content Search WP
- CSS completely re-written & simplified
How much better is “better”?
- W3C HTML markup validator errors
- SharePoint.Microsoft.com: 138 errors
- SP Online Public Website: 19 errors
- Contoso Electronics: 13 errors
- Mavention.nl: 0 errors (Nicely done)
SEO
- Clean URLs
- “/Pages” is removed from the URL
- Country code top-level domains
- XML Sitemaps
- These are automatically generated and referenced in robots.txt
- SEO properties
- You can set SEO properties per page
- Webmaster tool integration
Designing your web site in SharePoint 2010
There was a brick wall between the design compositions and the SharePoint Design itself.
Designing your web stie in SharePoint 2013
Build your design compositions and upload them to SharePoint. The design composition get automatically converted and you can add controls via the snippet gallery.
Design manager steps:
- Upload your design files
- Convert the HTML file you have uploaded
- Check the preview of the converted HTML file
- Preview Page allows you to test your design against an existing page (fill in a URL of a page).
- Go to the snippet gallery to find the controls that you can use in your design
- Configure your controls and copy and paste them to your design file
- When you are done, publish and apply the design to your site
The same steps can be done for creating page layouts. Designer don’t need to learn SharePoint controls anymore, the needed controls are automatically added to the generated page layout.
The snippets for page layouts are different than the one for master pages.
Web parts can automatically be configured in the snippet manager and copied to your design files.
Web designer and developer experiences
- Get your content: Cross-site collection publishing
- Convert your HTML design
- Create page layouts and use content search web parts
Mobile Device Targeting
Devices matter: it’s a mobile & touch-enabled web now.
Device channels:
Control experience based on user agent strings.
- Differentiate design with separated master pages: ex. account for different screen resolution
- Target content with device channel paths: test your channels
Image Renditions:
Multiple sizes, aspect ratios, and crops… But you still have one image. Image Renditions works with URL query string variables.
You can manually crop images also for existing renditions. This allows you to overwrite the default rendition if you are not completely satisfied with the result.
Device Channel panel snippet:
This allows you to have content targeted to a specific channel. For example: you can set the correct URL query variable for the mobile image, and the default one for the desktop version.
Debugging your device channel can be done by adding a URL Query Variable to your URL “?DeviceChannel=Name-of-your-channel”.
Moving your design to another site
Go create a package via the design manager and upload it to the production site again via the design manager.
Channels, Page Layouts, Master Pages, CSS, … everything gets packaged and re-created where the package is uploaded.