SharePoint 2013, customization and branding

1. Christian Ståhl SharePoint 2013, customization and branding

3. Christian Ståhl • Lead Designer CGI Sweden • MVP SharePoint 2011-2013 • Webdesigner/dev since 1996 • Blog: chrisstahl.wordpress.com • Twitter: @Cstahl • Author of ’Beginning SharePoint 2010 Administration’ at Wrox US

4. AGENDA – Options for branding • Themes / Composed Looks • Themes has exist in SharePoint since 2003 • Design manager • Possible to use other web designer tools than SPD or VS for your SP branding • SPD 2013 & VS 2012 • News and changes • New standards • CSS3 & HTML5 • More stuff • Responsive & Adaptive design

5. Themes / Composed looks

6. Themes / Composed Looks • Nostalgica – Theme in SPS2003 • Really tricky to customize

7. Themes / Composed Looks • Now it’s really easy – just use the browser • Set a color scheme • Choose fonts • Upload a custom background image • Select a master page

8. Themes / Composed Looks • You can create a custom theme, but you cannot use PowerPoint for this anymore. • You can use Embed fonts with @font-face, that means that the font don’t have to be installed at the client. • Sub sites do not inherit a theme automatically, if it’s not by the type of a ‘publishing site’. • Themes is normally a good choice for a single site in the collection that needs another look & feel.

9. Design manager

10. Design manager • New feature in SharePoint 2013 (standard & enterprise)

11. Design manager • Create design > Upload it > Add controls > Disconnect HTML > Export to VS or SPD

12. Design manager • Create your branding in Dreamweaver or other tools • The Web Designer do not have to know anything at all about SharePoint • Upload a standard HTML file in SharePoint and it will be converted to a master page • Snippets – add a SP control like search box, site name, navigation and title & logo • When the design files are published in SharePoint, you can afterwards edit those files in Dreamweaver ..

13. Design manager • Create your branding in Dreamweaver or other tools • Hint: When you are done, remove the connection to the HTML file, and your ready to work with the master page in SPD or VS • You can pack the design with the Design manager, save the files as an .WSP file that will be created in the solution gallery (sandbox). In this way you can move the branding files between environments, for example SP on-prem to SP online

14. SharePoint designer

15. SharePoint Designer 2013

16. SharePoint Designer 2013 • Not that much changes actually compared to SPD 2010 • Workflows • Create WF based at the .NET 4.x WF infrastructure • You can create/edit 2010 WF • Complete new user interface & new possibilities like loops, Web Service calls, deployment and more • WYSIWYG - R.I.P • The Design View / Split View is gone • You will only have a Code View

17. SharePoint Designer 2013 • New standards and tools for customizing, partly replaces the need of the design view e.g. the Design manager • MS reason on MSDN: The design view do not full support new scheme for CSS3 and new HTML5 tags:http://msdn.microsoft.com/en-us/library/jj728659.aspx and http://sharepoint.microsoft.com/blog/Pages/BlogPost.aspx?pID=1034 • The Cloud: MS will look for opportunities to leverage SharePoint itself as the primary tool for customization.

18. SharePoint Designer 2013 • We will see new products on the market coming up

19. SharePoint Designer 2013 • You can use SPD in the same way as before and work with HTML, CSS, XSLT, jQuery, DataViews, SPServices and more – but only in the code view • New possibilities for Workflows

20. More stuff..

21. CSS 3 & HTML 5 • Great new possibilities for designers, for example: CSS 3 • Helps load the page faster • Rounded corner with CSS • Multiple background images • Gradient backgroundsHTML 5 • Cleaner code • Improved semantic • Easier to understand how the page are structured • Can be used as an alternative to Silverlight or Flash

22. Responsive & Adaptive Design • It’s easier in 2013, now support for mobile devices. Support for CSS 3 and a better markup generally.

23. But hey! • Why brand an Intranet anyway? Nice design • Out of the box = Not our look & feel Usability • Few elements (otherwise hard to read & remember) • Few clicks – user go a way if they had to click more than three times • Consistent experience, findability– Navigation, Search, Shortcuts • Working – Should work in different browsers, screen resolutionsand devices Engagement • Increases trust and loyalty, helps to engage • Reflect the corporate culture for better adoption Technical [mmd] • Maintaineable (stick to the standards and separate the branding solution) • Migratable (don’t forget to test this) • Documentated (Include the concepts & ideas behind your code)

24. Levels of branding • Could be an 100% remake or just smaller adjustments of the colors with a logo Small • Theme [Browser] Medium • Custom CSS and small modifications to the master page Large • Custom Master, Custom page layouts, Custom CSS, Custom JS, JS libraries, User controls, branding feature, custom web part branding

25. Affects the branding • Who take the decisions • Infrastructure, multiple WAs or SCs • Foundation or Server • Migration or a new environment • Structure / Taxonomy • The target group

26. History of branding in SharePoint v2001 – Almost impossible to brand v2003 – Hard to brand v2007 – A bit tricky to brand v2010 – Quite ok brand v2013 – Now we talking!