Often information workers are asked to make their SharePoint site look pretty. This session will look at what a power user should and should not do to enhance the User Interface of sites. It will include explanations of page types, master pages and Page Layouts as well as what is responsive web design. Then using no-code, Penny will amend the look and feel of page, including composed looks, adding buttons to the Ribbon and the List Item Menu. This is not a developer session and will cover both SharePoint in Office 365, and on-premises installations of SharePoint 2013.

1. User Interface Tips and Tricks for the Power User
Penelope Coventry

3. Speaker Bio
•Microsoft MVP SharePoint Server (8 years)
•MCSE: SharePoint 2013
•Author/Co-author of 10+ SharePoint Books
•Worked with SharePoint since 2001
•Based in UK, work in Europe & US
•Independent Consultant
•Trainer

4. Agenda

5. Agenda

6. What does it take to make a site look pretty?
•Hot Topic
•More than adding a pretty header to your site and making it another color.
•About site AND content design.
•Spend the time and plan a site taxonomy.
•Personas
•Wire Diagrams
•Mockups
•Devices.

7. Consider the Users Involved
•Who?
•Visit your site
•Content Editors
•Site Administrators
•Sponsor
•Will sign off design
•Where is the content coming from?
•Who’s going to Implement Design?
•Need to be Familiar with SharePoint BEFORE they Implement a Design
•Knowledge of modem design methods
•HTML5, JavaScript, CSS3

8. Approaches
•Full Effort
•Master Pages
•Page Layouts
•Device Channels
•Display Templates
•Medium
•Designer Manager (Publishing Sites)
•CSS, JavaScript, HTML
•Low
•Page Editing
•Composed Looks

9. Agenda

10. Two Types of Sites
•Publishing Sites
•Shop Fronts
•Many Consumers of Information –10,000s(Viewers/Readers)
•Small number of Contributors/Authors
•Contains Publishing pages and Web Part Pages
•Publishing Infrastructure Feature enabled at Site Collection level
•Publishing Feature enabled at site level

11. Type Types of Sites (Cont)
•Non-Publishing Sites
•Collaboration Sites
•Small number of users, all of which areContributors/Authors
•Contains only Web Part Pages
•Typically seen onIntranet/Extranet Web Sites

12. Agenda

13. Master Page and Page Rendering

14. Two Types of Content Pages
•Publishing Pages
•Web Content Management
•Versioning
•Approval
•Based on a Page Layout
•Field Controls
•Web Parts Zones
•Stored in the Pages Document Library
•Non Publishing Pages
•Wiki Pages
•Web Part Pages
•Web Part Zones
•Changes visible immediately
•No Approval
•Site Pages Document Library

15. Other Pages/Files
•Master Pages
•All SharePoint Content Pages are associated with one Master Page
•Can be changed post Site Creation
•Provides a constant Look-Feel across a number of pages
•Page Layouts
•Used on Publishing Sites
•Templates that Control Content Design
•Display Templates
•Composed Looks

16. User Experience Changesin SharePoint 2013 from 2010
•Redesign
•Clean and Simple
•Ribbon still there –Not automatically visible
•Components
•Moved
•Removed
•Drag & Drop
•Supports HTML
•Data View
•Quick Edit
•no ActiveX

17. Infrastructure Changes: Speed Up Rendering
•Web Server Caching –Distributed Cache
•New Search Engine
•Minimal Download Strategy -MDS
•New Theme Engine
•Improved Support for Mobile Devices
•Use of HTML5
•Increased Web Browser Support

18. Agenda

19. Master Page Inheritance
RootSite

20. Browser Branding Options
•Navigation
•Composed Looks, Themes
•Designer Manager
•Master Pages
•Web Parts
•Content By Search Web Part (CSWP)
•Content Query Web Part (CQWP)
•Adding client side code:
•Content Editor Web Part (CEWP)
•Form Web Part
•Script Web Part

21. Changing the look

22. Site Layouts
Seattle
•Top Navigation above the Site Title
•Left Navigation Present
Oslo
•Top Navigation below the Site Title
•No Left Navigation

23. Other UI Components
•Custom Actions
•Ribbon Buttons
•List Item Menu Options
•Search
•Promoted Links
•Display Templates
•Altering using Client Side Code
•Web Parts
•Edit HTML Source
•JSLink

24. BROWSER OPTIONSNAVIGATIONCOMPOSED LOOKS

25. Agenda

26. Office 365 Plans
•Small Business Plan (P Plan)
•<25 employees
•One site collection
•One Public web site
•Automatically created
•Enterprise Plans (E Plans)
•Multiple site collections
•Publishing feature can be activated
•One Public web site
•automatically created

27. Office 365 Public Sites
•Site Settings options focused on Public sites
•New “Site” Ribbon menu
•Simple way to add custom CSS
•Only one generic mobile Device Channel
•Editable Header & Footer Elements
•Persist across pages
•Ability to make the site Online or Offline
•No Content Query Web Part or Content Search Web Part

28. Agenda

29. What is Responsive Design (RWD)?
•Design and Development should respond to the user’s behavior and environment based on screen size, platform and orientation
•Consists of:
•Mix of Flexible Grids and Layouts
•Flexible Images and Media
•CSS and Media Queries

30. What is Adaptive Web Design?
•Similar to Responsive with One Major Difference
•Adaptive focuses on identifying breakpoints* and focusing content delivery differently for each predefined size
•* breakpoints are used to specify when a site layout will change when the browser window reaches certain dimensions.

31. EXAMPLE RWD & ADAPTIVE WEB SITESWWW.BOSTONGLOBE.COM/ ONLINESHOES.COM

32. Tip:
•Load small/mobile images first
•Replace with larger images designed for broadband/desktop experience.
•It's like coding for the lowest common denominator:
•A small screen and a slow internet connection.
•Then scale up

33. Agenda

34. Learn More
•Books
•People to follow
•Conference Sessions
•Channel 9
•SP24
•Podshows
•JSLinkResources
•https://code.msdn.microsoft.com/office/Client-side-rendering-JS-2ed3538a
•http://www.idubbs.com/blog/2012/js-link-for-sharepoint-2013-web-partsa- quick-functional-primer/
•http://www.bing.com/search?q=%22js+link%22+SharePoint+2013
•http://www.wonderlaura.com/Lists/Posts/Post.aspx?ID=228
•SharePoint 2013 and SharePoint Online solution packs:
•http://www.microsoft.com/en-us/download/details.aspx?id=42030

35. questions?
WWW.SHAREPOINTDESIGNERSTEPBYSTEP.COM/BLOG
@PJCOV

36. thank you.
SHAREPOINT AND PROJECT CONFERENCE ADRIATICS
ZAGREB, 10/15/2014 -10/16/2014