Wired2Win Webinar - Design & Deploy great looking portals with SharePoint 2013


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Wired2Win Webinar - Design & Deploy great looking portals with SharePoint 2013

  1. 1. WinWire Technologies, Inc. ConfidentialDesign and Deploy great looking Portalswith SharePoint 2013@WinWireWired2Win Webinar
  2. 2. WinWire Technologies, Inc. Confidential•Limitations with SharePoint 2010•Introduction to modernized User Interface inSharePoint 2013•Design by leveraging SP 2013 feature•Customizing SharePoint UI•Best Practices & RecommendationsAgenda
  3. 3. WinWire Technologies, Inc. ConfidentialLimitations with SharePoint 2010 User InterfaceLimited toSharePoint designerfor creation andeditingLimited Supportfor Mobileinterface‘Boxy’ look, too muchof ‘header area’wastage,
  4. 4. WinWire Technologies, Inc. ConfidentialIntroduction to modernized User Interface in SharePoint 2013Cleaner design and more efficientstandards driven technology likeHTML5Support for tablet and smartphoneusers using “Contemporary View” and“Device Channels” featuresSupport for media files and externalvideos embedded on pagesEnhanced preview features in librariesand search results
  5. 5. WinWire Technologies, Inc. ConfidentialDesign by leveraging 2013 features• Social Computing• Drag and Drop fileupload• Document Previews• Streamlinedcommon Tasks• New Search Interface• Embedded Content
  6. 6. WinWire Technologies, Inc. Confidential•Forum likeexperience inDiscussion board•Micro-bloggingusing Newsfeed•People & TagFollowingSocial Computing
  7. 7. WinWire Technologies, Inc. Confidential• With IE9, and IE10, and current versions of Chrome and Firefox - dragfiles into Library List View web parts.• This is also possible with IE8, if you are using Office 2013.Drag & Drop file upload
  8. 8. WinWire Technologies, Inc. Confidential• Hover over a document in a library or search result allows a preview.• Document preview works only when Office Web App server is installed.Document PreviewsDocument previewTrack you are sharing withpreviewEdit, share or follow withone click
  9. 9. WinWire Technologies, Inc. ConfidentialStreamline common tasks• “To-do list “ is tightly integrated with personal tasks .• Aggregate tasks from Outlook, Project and SharePoint and publish themto on the timeline.• Connected experience - Aggregated tasks will also appear in OutlookAdd task to timelineTask in timeline
  10. 10. WinWire Technologies, Inc. ConfidentialNew Search Interface• Hovering on a search term that links to a document provides a detaileddocument preview.• For some file types, like images, a thumbnail appears in line with the searchresults text.• Filtering by ‘Modified date’ is a visual range on the bottom left of the screen
  11. 11. WinWire Technologies, Inc. ConfidentialDocuments Search Results with previewDocument previewVisual date range filteringbased on ‘Modified date’
  12. 12. WinWire Technologies, Inc. ConfidentialPeople Search Results with preview
  13. 13. WinWire Technologies, Inc. Confidential• Site Assets library now includes• Support for MP4 videofiles• Support for capturingpreview image from aselected frame• Generates Embed links forcontent in the site assetslibrary to simplify re-use• Can Embed• Local SP2013 Content• Outside 3rd party Content(YouTube, GoogleMaps, Feeds, etc…)Embedded ContentEmbedded ContentWMV video fileEmbedded ContentYou Tube video
  14. 14. WinWire Technologies, Inc. ConfidentialYou could do this…
  15. 15. WinWire Technologies, Inc. Confidential• Provide a quick and easy way to apply lightweight branding.• Allows to change the site layout, color palette, font scheme, andbackground image.• Can use either Preinstalled themes OR Custom themesOr this… Customizing SharePoint UI - Themes
  16. 16. “Can the design have morePOP?”“It needs to look like that otherwebsite I saw – that was ‘Nicelooking’”-Actual Customer QuoteBut what do you still hear…
  17. 17. WinWire Technologies, Inc. ConfidentialThe ABC of SharePoint Design…AudienceContentBrandingWhen developing aSharePoint solution,it is important for theSharePoint user experience(UX) to be intuitive,attractive, andrepresentative of theorganizations brand andprofessionalismin order to drive action andadoption
  18. 18. WinWire Technologies, Inc. ConfidentialPlanning & Requirements Gathering• Don’t just jump right into creatingSharePoint branding• Gather design specific requirements• Audience? Goals?• Type of site?• Major types of content• Corporate Style Guidelines?• Navigation needs? Searching?Web Parts?• Who will test it and compare towhat?
  19. 19. WinWire Technologies, Inc. ConfidentialPlanning Site Structure & Navigation• Structure and Layout defined by• Navigation requirement• 3 Clicks principle• Visual appeal vs. content• Site navigation defined by corporate structure orofferings but consider usability & attractiveness• Tip: ASP.net navigation control or custom webpartsPlanning SiteStructure andNavigation
  20. 20. WinWire Technologies, Inc. ConfidentialCreative Design steps for SharePoint• Need for Wireframes does not go away• Creative Mockup requires consideration of SharePointcapabilities• HTML Click-thru to provide clarity of user experienceCreativeDesign / UserExperience(UX)WireframesCreativemockupsHTML click-thruX
  21. 21. WinWire Technologies, Inc. Confidential• Create a page in any standardHTML editing tool, likeDreamweaver• Upload it to SharePoint and use itas a master page• SharePoint automatically createsan .aspx page that it keeps in syncwith initial .html file.• Continue to edit the .html file inyour preferred editing tool• Every time you save, SharePointsyncs up the .aspx fileCustomizing SharePoint UI – Any HTML Editor
  22. 22. WinWire Technologies, Inc. Confidential• Create and edit designs using only HTML and CSS, within the Web-design tool or HTMLeditor• Upload design into SharePoint.• Design Manager becomes the central hub and interface for managing aspects of thecustom design, including packagingCustomizing SharePoint UI - Design ManagerBranding for regularcollaboration or team siteswould require thedevelopment of masterpages within Visual Studio.
  23. 23. WinWire Technologies, Inc. Confidential• To change the “look and feel” of the site.• Contains a link to a master page URL, theme URL, background image URL, anda font scheme URL• Can be customized to cover – themes, font & master pageCustomizing SharePoint UI – Composed looks
  24. 24. WinWire Technologies, Inc. ConfidentialUse of Out-of-the-BoxSnippets to avoidcustomizationConsider “MinimalDownload Strategy” so tobe inconsistent with otherOOTB featuresUse Device Channels totarget multiple devicesUse jQuery to avoid entirepage refreshAs far as possible use CSSbased layout which willensure that it will supportall browsers and enhancesperformanceConsider ResponsiveDesign methodologyBest Practices & Recommendations
  25. 25. WinWire Technologies, Inc. ConfidentialSome Examples using SP13 Designs
  26. 26. WinWire Technologies, Inc. ConfidentialSome Examples using SP13 Designs
  27. 27. © 2010 WinWire TechnologiesWinWire Technologies, Inc. ConfidentialWinWire Technologies, Inc. ConfidentialThank youMail your questions to: marketing@winwire.comVisit: www.winwire.comFollow: www.twitter.com/winwire