Tuesday, April 22, 2014

#SP24 : SP2013 New methodology on Branding by Khoa Quach

@niftykhoa in #SP24S007 "Branding in SharePoint 2013" demoed New way to brand the SP Sites.
Tools and libraries:

  • Visual Studio 2012/2013
  • SPD 2013
  • Web Development Editor/Tool and mapped drive to asset library in SP2013.

Optional libraries:
  • jQuery
  • Boostrap.js
  • Angular.js, Backbone.js, Ember.js
  • Knockout.js
  • CoffeScript.js

Rendering page in SP = Master page + Page Layout + page (content)

New branding methodology in SP2013:
Device channel + master page => the design for mobile
Device channel has User agent string to identity the mobile (to get agent string - http://useragentstring.com/)
After identifying the device channel, create a custom master page  and link that page to a channel

Design manager
Allows web designer do the web design in html and upload that into the design manager, which converts the html into master page
In case you need to modify markup stick either with master page or html. Preferably, modify only html to keep automotive conversion going smoothly.

Add additional elements into the markup via snippet gallery.

Utilize JSlink