SharePoint 2013, customization and branding

Christian Ståhl

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

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

Themes / Composed looks

Themes / Composed Looks• Nostalgica – Theme in SPS2003

− Really tricky to customize

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

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.

Design manager

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

Design manager

Create design > Upload it > Add

controls > Disconnect HTML > Export to VS

or SPD

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

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

SharePoint designer

SharePoint Designer 2013

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

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.

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

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

More stuff..

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 backgrounds

HTML 5−Cleaner code−Improved semantic−Easier to understand how the page are structured−Can be used as an alternative to Silverlight or Flash

Responsive & Adaptive Design• It’s easier in 2013, now support for mobile devices.

Support for CSS 3 and a better markup generally.

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 resolutions and 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)

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

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

History of branding in SharePointv2001 – Almost impossible to brand

v2003 – Hard to brandv2007 – A bit tricky to brandv2010 – Quite ok brandv2013 – Now we talking!

DEMO

THANK YOU