• Save
Wired2Win Webinar - Design & Deploy great looking portals with SharePoint 2013
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 1,704 views

 

Statistics

Views

Total Views
1,704
Views on SlideShare
605
Embed Views
1,099

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 1,099

http://www.winwire.com 1097
http://webcache.googleusercontent.com 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • WinWire Technologies, Inc. ConfidentialDesign and Deploy great looking Portalswith SharePoint 2013@WinWireWired2Win Webinar
    • 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
    • WinWire Technologies, Inc. ConfidentialLimitations with SharePoint 2010 User InterfaceLimited toSharePoint designerfor creation andeditingLimited Supportfor Mobileinterface‘Boxy’ look, too muchof ‘header area’wastage,
    • 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
    • WinWire Technologies, Inc. ConfidentialDesign by leveraging 2013 features• Social Computing• Drag and Drop fileupload• Document Previews• Streamlinedcommon Tasks• New Search Interface• Embedded Content
    • WinWire Technologies, Inc. Confidential•Forum likeexperience inDiscussion board•Micro-bloggingusing Newsfeed•People & TagFollowingSocial Computing
    • 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
    • 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
    • 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
    • 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
    • WinWire Technologies, Inc. ConfidentialDocuments Search Results with previewDocument previewVisual date range filteringbased on ‘Modified date’
    • WinWire Technologies, Inc. ConfidentialPeople Search Results with preview
    • 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
    • WinWire Technologies, Inc. ConfidentialYou could do this…
    • 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
    • “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…
    • 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
    • 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?
    • 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
    • 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
    • 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
    • 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.
    • 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
    • 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
    • WinWire Technologies, Inc. ConfidentialSome Examples using SP13 Designs
    • WinWire Technologies, Inc. ConfidentialSome Examples using SP13 Designs
    • © 2010 WinWire TechnologiesWinWire Technologies, Inc. ConfidentialWinWire Technologies, Inc. ConfidentialThank youMail your questions to: marketing@winwire.comVisit: www.winwire.comFollow: www.twitter.com/winwire