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

No notes for slide

SharePoint 2013 User Interface and Design Improvements - Webinar from Atidan

  1. 1. SharePoint 2013New UI &Branding FeaturesTom M. DalyMay 16, 2013
  2. 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. 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. 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. 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. 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. 7. © Atidan, LLC 2013 Confidential
  8. 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. 9. © Atidan, LLC 2013 Confidential
  10. 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. 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. 12. © Atidan, LLC 2013 Confidential
  13. 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. 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. 15. © Atidan, LLC 2013 Confidential
  16. 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. 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. 18. © Atidan, LLC 2013 Confidential
  19. 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. 20. © Atidan, LLC 2013 Confidential Thank You! Additional questions: 1-215-825-5045