• Like

Thanks for flagging this SlideShare!

Oops! An error has occurred.

SharePoint 2013 User Interface and Design Improvements - Webinar from Atidan



Published in Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    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 ASP.net 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: tom.daly@Atidan.com SharePoint@Atidan.com 1-215-825-5045