wired2win webinar - design & deploy great looking portals with sharepoint 2013

WinWire Technologies, Inc. Confidential

Design and Deploy great looking Portals with SharePoint 2013

@WinWire

Wired2Win Webinar


• 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


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,


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


Design by leveraging 2013 features

• Social Computing• Drag and Drop file

upload• Document Previews• Streamlined

common Tasks• New Search Interface• Embedded Content


•Forum like experience in Discussion board

•Micro-blogging using Newsfeed

•People & Tag Following

Social Computing

http://www.google.co.in/url?sa=i&source=images&cd=&cad=rja&docid=QRS4IN7ZgTKn3M&tbnid=5Yb3RD0t4NjONM:&ved=0CAgQjRwwADgQ&url=http://blogs.perficient.com/microsoft/2012/09/simply-social-sharepoint-2013/&ei=KRF4UZ_lLIW_rgep2oHADA&psig=AFQjCNGfsGDw1GDQ8BqWFEKCdGfg48cY2A&ust=1366909609810169


• 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


• 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


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


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


Documents Search Results with preview

Document preview

Visual date range filtering based on ‘Modified date’


People Search Results with preview


• 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


You could do this…


• 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…


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


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?


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


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


• 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


• 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.


• 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


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


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

mailto:[email protected]

http://www.winwire.com/

http://www.twitter.com/winwire