+ All Categories
Home > Documents > SharePoint 2013, customization and branding

SharePoint 2013, customization and branding

Date post: 15-Feb-2016
Category:
Upload: kareem
View: 46 times
Download: 0 times
Share this document with a friend
Description:
Christian Ståhl. SharePoint 2013, customization and branding . 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. - PowerPoint PPT Presentation
Popular Tags:
29
SharePoint 2013, customization and branding Christian Ståhl
Transcript
Page 1: SharePoint  2013, customization and branding

SharePoint 2013, customization and branding

Christian Ståhl

Page 2: SharePoint  2013, customization and branding
Page 3: SharePoint  2013, customization and branding

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

Page 4: SharePoint  2013, customization and branding

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

Page 5: SharePoint  2013, customization and branding

Themes / Composed looks

Page 6: SharePoint  2013, customization and branding

Themes / Composed Looks• Nostalgica – Theme in SPS2003

− Really tricky to customize

Page 7: SharePoint  2013, customization and branding

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

Page 8: SharePoint  2013, customization and branding

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.

Page 9: SharePoint  2013, customization and branding

Design manager

Page 10: SharePoint  2013, customization and branding

Design manager• New feature in SharePoint 2013

(standard & enterprise)

Page 11: SharePoint  2013, customization and branding

Design manager

Create design > Upload it > Add

controls > Disconnect HTML > Export to VS

or SPD

Page 12: SharePoint  2013, customization and branding

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

Page 13: SharePoint  2013, customization and branding

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

Page 14: SharePoint  2013, customization and branding

SharePoint designer

Page 15: SharePoint  2013, customization and branding

SharePoint Designer 2013

Page 16: SharePoint  2013, customization and branding

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

Page 17: SharePoint  2013, customization and branding

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.

Page 18: SharePoint  2013, customization and branding

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

coming up

Page 19: SharePoint  2013, customization and branding

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

Page 20: SharePoint  2013, customization and branding

More stuff..

Page 21: SharePoint  2013, customization and branding

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

Page 22: SharePoint  2013, customization and branding

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

Support for CSS 3 and a better markup generally.

Page 23: SharePoint  2013, customization and branding

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)

Page 24: SharePoint  2013, customization and branding

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

Page 25: SharePoint  2013, customization and 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

Page 26: SharePoint  2013, customization and branding

History of branding in SharePointv2001 – Almost impossible to brand

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

Page 27: SharePoint  2013, customization and branding

DEMO

Page 28: SharePoint  2013, customization and branding

THANK YOU

Page 29: SharePoint  2013, customization and branding

Recommended