Wired2Win Azure Series- New Open World of Windows Azure-0830
Wired2Win Webinar - Design & Deploy great looking portals with SharePoint 2013
-
Upload
winwire-technologies-inc -
Category
Documents
-
view
3.261 -
download
0
Transcript of Wired2Win Webinar - Design & Deploy great looking portals with SharePoint 2013
![Page 1: Wired2Win Webinar - Design & Deploy great looking portals with SharePoint 2013](https://reader035.fdocuments.net/reader035/viewer/2022070522/58ede35e1a28abdb6d8b46f5/html5/thumbnails/1.jpg)
WinWire Technologies, Inc. Confidential
Design and Deploy great looking Portals with SharePoint 2013
@WinWire
Wired2Win Webinar
![Page 2: Wired2Win Webinar - Design & Deploy great looking portals with SharePoint 2013](https://reader035.fdocuments.net/reader035/viewer/2022070522/58ede35e1a28abdb6d8b46f5/html5/thumbnails/2.jpg)
WinWire Technologies, Inc. Confidential
• Limitations with SharePoint 2010
• Introduction to modernized User Interface in
SharePoint 2013
• Design by leveraging SP 2013 feature
• Customizing SharePoint UI
• Best Practices & Recommendations
Agenda
![Page 3: Wired2Win Webinar - Design & Deploy great looking portals with SharePoint 2013](https://reader035.fdocuments.net/reader035/viewer/2022070522/58ede35e1a28abdb6d8b46f5/html5/thumbnails/3.jpg)
WinWire Technologies, Inc. Confidential
Limitations with SharePoint 2010 User Interface
Limited to SharePoint designer
for creation and editing
Limited Support for Mobile interface
‘Boxy’ look, too much of ‘header area’
wastage,
![Page 4: Wired2Win Webinar - Design & Deploy great looking portals with SharePoint 2013](https://reader035.fdocuments.net/reader035/viewer/2022070522/58ede35e1a28abdb6d8b46f5/html5/thumbnails/4.jpg)
WinWire Technologies, Inc. Confidential
Introduction to modernized User Interface in SharePoint 2013
Cleaner design and more efficient standards driven technology like HTML5
Support for tablet and smartphone users using “Contemporary View” and “Device Channels” features
Support for media files and external videos embedded on pages
Enhanced preview features in libraries and search results
![Page 5: Wired2Win Webinar - Design & Deploy great looking portals with SharePoint 2013](https://reader035.fdocuments.net/reader035/viewer/2022070522/58ede35e1a28abdb6d8b46f5/html5/thumbnails/5.jpg)
WinWire Technologies, Inc. Confidential
Design by leveraging 2013 features
• Social Computing• Drag and Drop file
upload• Document Previews• Streamlined
common Tasks• New Search Interface• Embedded Content
![Page 6: Wired2Win Webinar - Design & Deploy great looking portals with SharePoint 2013](https://reader035.fdocuments.net/reader035/viewer/2022070522/58ede35e1a28abdb6d8b46f5/html5/thumbnails/6.jpg)
WinWire Technologies, Inc. Confidential
•Forum like experience in Discussion board
•Micro-blogging using Newsfeed
•People & Tag Following
Social Computing
![Page 7: Wired2Win Webinar - Design & Deploy great looking portals with SharePoint 2013](https://reader035.fdocuments.net/reader035/viewer/2022070522/58ede35e1a28abdb6d8b46f5/html5/thumbnails/7.jpg)
WinWire Technologies, Inc. Confidential
• With IE9, and IE10, and current versions of Chrome and Firefox - drag files into Library List View web parts.
• This is also possible with IE8, if you are using Office 2013.
Drag & Drop file upload
![Page 8: Wired2Win Webinar - Design & Deploy great looking portals with SharePoint 2013](https://reader035.fdocuments.net/reader035/viewer/2022070522/58ede35e1a28abdb6d8b46f5/html5/thumbnails/8.jpg)
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 Previews
Document preview
Track you are sharing with preview
Edit, share or follow with one click
![Page 9: Wired2Win Webinar - Design & Deploy great looking portals with SharePoint 2013](https://reader035.fdocuments.net/reader035/viewer/2022070522/58ede35e1a28abdb6d8b46f5/html5/thumbnails/9.jpg)
WinWire Technologies, Inc. Confidential
Streamline common tasks
• “To-do list “ is tightly integrated with personal tasks .• Aggregate tasks from Outlook, Project and SharePoint and publish them
to on the timeline.• Connected experience - Aggregated tasks will also appear in Outlook
Add task to timeline
Task in timeline
![Page 10: Wired2Win Webinar - Design & Deploy great looking portals with SharePoint 2013](https://reader035.fdocuments.net/reader035/viewer/2022070522/58ede35e1a28abdb6d8b46f5/html5/thumbnails/10.jpg)
WinWire Technologies, Inc. Confidential
New Search Interface
• Hovering on a search term that links to a document provides a detailed document preview.
• For some file types, like images, a thumbnail appears in line with the search results text.
• Filtering by ‘Modified date’ is a visual range on the bottom left of the screen
![Page 11: Wired2Win Webinar - Design & Deploy great looking portals with SharePoint 2013](https://reader035.fdocuments.net/reader035/viewer/2022070522/58ede35e1a28abdb6d8b46f5/html5/thumbnails/11.jpg)
WinWire Technologies, Inc. Confidential
Documents Search Results with preview
Document preview
Visual date range filtering based on ‘Modified date’
![Page 12: Wired2Win Webinar - Design & Deploy great looking portals with SharePoint 2013](https://reader035.fdocuments.net/reader035/viewer/2022070522/58ede35e1a28abdb6d8b46f5/html5/thumbnails/12.jpg)
WinWire Technologies, Inc. Confidential
People Search Results with preview
![Page 13: Wired2Win Webinar - Design & Deploy great looking portals with SharePoint 2013](https://reader035.fdocuments.net/reader035/viewer/2022070522/58ede35e1a28abdb6d8b46f5/html5/thumbnails/13.jpg)
WinWire Technologies, Inc. Confidential
• Site Assets library now includes• Support for MP4 video
files• Support for capturing
preview image from a selected frame
• Generates Embed links for content in the site assets library to simplify re-use
• Can Embed• Local SP2013 Content• Outside 3rd party Content
(YouTube, Google Maps, Feeds, etc…)
Embedded Content
Embedded Content WMV video file
Embedded Content You Tube video
![Page 14: Wired2Win Webinar - Design & Deploy great looking portals with SharePoint 2013](https://reader035.fdocuments.net/reader035/viewer/2022070522/58ede35e1a28abdb6d8b46f5/html5/thumbnails/14.jpg)
WinWire Technologies, Inc. Confidential
You could do this…
![Page 15: Wired2Win Webinar - Design & Deploy great looking portals with SharePoint 2013](https://reader035.fdocuments.net/reader035/viewer/2022070522/58ede35e1a28abdb6d8b46f5/html5/thumbnails/15.jpg)
WinWire Technologies, Inc. Confidential
• Provide a quick and easy way to apply lightweight branding. • Allows to change the site layout, color palette, font scheme, and
background image.• Can use either Preinstalled themes OR Custom themes
Or this… Customizing SharePoint UI - Themes
![Page 16: Wired2Win Webinar - Design & Deploy great looking portals with SharePoint 2013](https://reader035.fdocuments.net/reader035/viewer/2022070522/58ede35e1a28abdb6d8b46f5/html5/thumbnails/16.jpg)
“Can the design have more POP?”
“It needs to look like that other website I saw – that was ‘Nice
looking’”
-Actual Customer Quote
But what do you still hear…
![Page 17: Wired2Win Webinar - Design & Deploy great looking portals with SharePoint 2013](https://reader035.fdocuments.net/reader035/viewer/2022070522/58ede35e1a28abdb6d8b46f5/html5/thumbnails/17.jpg)
WinWire Technologies, Inc. Confidential
The ABC of SharePoint Design…
Audience
ContentBranding
When developing a SharePoint solution, it is important for the
SharePoint user experience (UX) to be intuitive,
attractive, and representative of the
organization's brand and professionalism
in order to drive action and adoption
![Page 18: Wired2Win Webinar - Design & Deploy great looking portals with SharePoint 2013](https://reader035.fdocuments.net/reader035/viewer/2022070522/58ede35e1a28abdb6d8b46f5/html5/thumbnails/18.jpg)
WinWire Technologies, Inc. Confidential
Planning & Requirements Gathering
• Don’t just jump right into creating SharePoint 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 to
what?
![Page 19: Wired2Win Webinar - Design & Deploy great looking portals with SharePoint 2013](https://reader035.fdocuments.net/reader035/viewer/2022070522/58ede35e1a28abdb6d8b46f5/html5/thumbnails/19.jpg)
WinWire Technologies, Inc. Confidential
Planning Site Structure & Navigation
• Structure and Layout defined by• Navigation requirement• 3 Clicks principle• Visual appeal vs. content
• Site navigation defined by corporate structure or offerings but consider usability & attractiveness
• Tip: ASP.net navigation control or custom webparts
Planning Site Structure and
Navigation
![Page 20: Wired2Win Webinar - Design & Deploy great looking portals with SharePoint 2013](https://reader035.fdocuments.net/reader035/viewer/2022070522/58ede35e1a28abdb6d8b46f5/html5/thumbnails/20.jpg)
WinWire Technologies, Inc. Confidential
Creative Design steps for SharePoint
• Need for Wireframes does not go away• Creative Mockup requires consideration of SharePoint
capabilities• HTML Click-thru to provide clarity of user experience
Creative Design / User
Experience (UX)
Wireframes Creative mockups
HTML click-thru
X
![Page 21: Wired2Win Webinar - Design & Deploy great looking portals with SharePoint 2013](https://reader035.fdocuments.net/reader035/viewer/2022070522/58ede35e1a28abdb6d8b46f5/html5/thumbnails/21.jpg)
WinWire Technologies, Inc. Confidential
• Create a page in any standard HTML editing tool, like Dreamweaver
• Upload it to SharePoint and use it as a master page
• SharePoint automatically creates an .aspx page that it keeps in sync with initial .html file.
• Continue to edit the .html file in your preferred editing tool
• Every time you save, SharePoint syncs up the .aspx file
Customizing SharePoint UI – Any HTML Editor
![Page 22: Wired2Win Webinar - Design & Deploy great looking portals with SharePoint 2013](https://reader035.fdocuments.net/reader035/viewer/2022070522/58ede35e1a28abdb6d8b46f5/html5/thumbnails/22.jpg)
WinWire Technologies, Inc. Confidential
• Create and edit designs using only HTML and CSS, within the Web-design tool or HTML editor
• Upload design into SharePoint. • Design Manager becomes the central hub and interface for managing aspects of the
custom design, including packaging
Customizing SharePoint UI - Design Manager
Branding for regular
collaboration or team sites
would require the
development of master
pages within Visual Studio.
![Page 23: Wired2Win Webinar - Design & Deploy great looking portals with SharePoint 2013](https://reader035.fdocuments.net/reader035/viewer/2022070522/58ede35e1a28abdb6d8b46f5/html5/thumbnails/23.jpg)
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, and
a font scheme URL• Can be customized to cover – themes, font & master page
Customizing SharePoint UI – Composed looks
![Page 24: Wired2Win Webinar - Design & Deploy great looking portals with SharePoint 2013](https://reader035.fdocuments.net/reader035/viewer/2022070522/58ede35e1a28abdb6d8b46f5/html5/thumbnails/24.jpg)
WinWire Technologies, Inc. Confidential
Use of Out-of-the-Box Snippets to avoid customization
Consider “Minimal Download Strategy” so to be inconsistent with other OOTB features
Use Device Channels to target multiple devices
Use jQuery to avoid entire page refresh
As far as possible use CSS based layout which will ensure that it will support all browsers and enhances performance
Consider Responsive Design methodology
Best Practices & Recommendations
![Page 25: Wired2Win Webinar - Design & Deploy great looking portals with SharePoint 2013](https://reader035.fdocuments.net/reader035/viewer/2022070522/58ede35e1a28abdb6d8b46f5/html5/thumbnails/25.jpg)
WinWire Technologies, Inc. Confidential
Some Examples using SP13 Designs
![Page 26: Wired2Win Webinar - Design & Deploy great looking portals with SharePoint 2013](https://reader035.fdocuments.net/reader035/viewer/2022070522/58ede35e1a28abdb6d8b46f5/html5/thumbnails/26.jpg)
WinWire Technologies, Inc. Confidential
Some Examples using SP13 Designs
![Page 27: Wired2Win Webinar - Design & Deploy great looking portals with SharePoint 2013](https://reader035.fdocuments.net/reader035/viewer/2022070522/58ede35e1a28abdb6d8b46f5/html5/thumbnails/27.jpg)
© 2010 WinWire TechnologiesWinWire Technologies, Inc. ConfidentialWinWire Technologies, Inc. Confidential
Thank you
Mail your questions to: [email protected]
Visit: www.winwire.com
Follow: www.twitter.com/winwire