Your SlideShare is downloading. ×

SharePoint 2013 User Interface and Design Improvements - Webinar from Atidan


Published on

Published in: Technology, Design
1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. SharePoint 2013New UI &Branding FeaturesTom M. DalyMay 16, 2013
  • 2. © Atidan, LLC 2013 Confidential Thomas M Daly SharePoint Consultant• Developer• Branding Focused on the UI side of things Community Involvement• Speaker• NJ SP Princeton User Group• SharePoint Saturday NYC organizer• SharePoint Saturday NJ organizer• My SharePoint Blog• MSDN forums contributor
  • 3. © Atidan, LLC 2013 Confidential User Interface Enhancements Site & Page Enhancements Design Manager Snippet Gallery Composed Looks Managed Meta Data Navigation Image Renditions Mobile Enhancements
  • 4. © Atidan, LLC 2013 Confidential Browser Support• IE 8, 9, 10, Chrome, FireFox, Safari Enhanced Mobile Support Increased Standards Compliance• Better XHTML Compliance• HTML5 Compatible Increased use of Ajax• Partial Page Loads Better user experience Minimal full page refreshes Perceived faster load times• Minimal Download Strategy (MDS) Not on publishing or sandbox
  • 5. © Atidan, LLC 2013 Confidential Community Site Template Search Based Web Parts Page Enhancements• Flash / HTML5 Video Player• Embed Code Snippets• Share / Follow Documents, People, Sites• Drag & Drop file into Document Libraries
  • 6. © Atidan, LLC 2013 Confidential Interface and central hub for managing all aspectsof branding Allows standard HTML/CSS coders & designers theability to produce Master Pages without knowingall the SharePoint Controls Import HTML Templates > Convert to Master Page Snippet Gallery Export / Import Design Packages Publishing based Feature
  • 7. © Atidan, LLC 2013 Confidential
  • 8. © Atidan, LLC 2013 Confidential Contains ready-to-use snippets that you can addto pages (such as web parts and controls) Snippet - HTML representation of a SharePointcomponent or control such as a navigation bar ora Web Part Quickly add specific SharePoint functionality, suchas search or navigation or device channel panels,to the HTML file associated with your master pageor page layout Provides generated HTML for copy / paste intoHTML design files
  • 9. © Atidan, LLC 2013 Confidential
  • 10. © Atidan, LLC 2013 Confidential Templates used in Web Parts that use searchtechnology Display templates control which managedproperties are shown in the search results, andhow they appear in the Web Part Each display template is made of two files:• a HTML version of the display template that you canedit in your HTML editor• a JS file that SharePoint uses.
  • 11. © Atidan, LLC 2013 Confidential Theming provides a quick and easy way to applylightweight branding to a SharePoint 2013 site A composed look, or design, is the color palette,font scheme, background image, and master pagethat determine the look and feel of a site. Theming experience components• Color palette• Font scheme• Background Image• Master Page• Master Page Preview
  • 12. © Atidan, LLC 2013 Confidential
  • 13. © Atidan, LLC 2013 Confidential Enables you to design site navigation that isdriven by managed metadata & create SEO-friendly URLs that are derived from the managednavigation structure Manage Terms for the site collection in sitesettings, NOT Central Admin Friendly URLs• web address that is easy to read and includes wordsthat describe the content of the web page
  • 14. © Atidan, LLC 2013 Confidential Enables you to display differently sized versionsof an image on different pages in a publishingsite, based on the same source image. Prerequisites• Publishing Site• BLOB cache Designers can define an image rendition todisplay an image as a thumbnail image andanother image rendition as a display banner
  • 15. © Atidan, LLC 2013 Confidential
  • 16. © Atidan, LLC 2013 Confidential Optimized mobile browser experience• 3 viewing mode Classic view Contemporary view Full screen UI Push notifications• A site can be enabled to send device updates suchas a tile or toast notification to a Windows Phonedevice Location• Geolocation field type that can be used for mobileapplication development
  • 17. © Atidan, LLC 2013 Confidential Renders a single publishing site in multiple waysby delivering different master pages to targetdevices. Uses the device’s user agent string to determinethe channel to serve Optional can use cookie based Max 10 on-premise, 2 SP Online Device Panels• target specific devices on page layouts
  • 18. © Atidan, LLC 2013 Confidential
  • 19. © Atidan, LLC 2013 Confidential Making Web Pages XHTML Compliant SharePoint 2013 – Introduction to the MinimalDownload Strategy (MDS) SharePoint 2013 Design Manager device channels SharePoint 2013 Design Manager displaytemplates SharePoint 2013 Design Manager imagerenditions How to: Create a master page preview file inSharePoint 2013 Themes overview for SharePoint 2013 Whats new for mobile devices in SharePoint 2013 Enhanced Video Experience in SharePoint 2013
  • 20. © Atidan, LLC 2013 Confidential Thank You! Additional questions: 1-215-825-5045