Date post: | 12-Apr-2017 |
Category: |
Documents |
Upload: | winwire-technologies-inc |
View: | 3,258 times |
Download: | 0 times |
WinWire Technologies, Inc. Confidential
Design and Deploy great looking Portals with SharePoint 2013
@WinWire
Wired2Win Webinar
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
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,
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
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
WinWire Technologies, Inc. Confidential
•Forum like experience in Discussion board
•Micro-blogging using Newsfeed
•People & Tag Following
Social Computing
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
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
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
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
WinWire Technologies, Inc. Confidential
Documents Search Results with preview
Document preview
Visual date range filtering based on ‘Modified date’
WinWire Technologies, Inc. Confidential
People Search Results with preview
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
WinWire Technologies, Inc. Confidential
You 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, and
background image.• Can use either Preinstalled themes OR Custom themes
Or this… Customizing SharePoint UI - Themes
“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…
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
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?
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
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
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
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.
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
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
WinWire Technologies, Inc. Confidential
Some Examples using SP13 Designs
WinWire Technologies, Inc. Confidential
Some Examples using SP13 Designs
© 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