SharePoint 2013, customization and branding
description
Transcript of SharePoint 2013, customization and branding
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 & feelUsability−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 devicesEngagement− Increases trust and loyalty, helps to engage−Reflect the corporate culture for better adoptionTechnical [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 logoSmall−Theme [Browser]Medium−Custom CSS and small modifications to the master pageLarge−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