The presentation (delivered for the Swiss SharePoint Club 31st meeting on 30th of January 2013, in Geneva, Switzerland ) exposes various important details about new concepts to be considered when branding in the new SharePoint 2013.

1. Branding & Design in
SharePoint Server
2013
Marius Constantinescu
Lead Consultant, blue-infinity
marius.constantinescu@b-i.com
http://nettitude.wordpress.com

2. in brief
• 350+ employees
• headquartered in Geneva
• founded in 1995
• international culture
• multi-national clients
• integrated solutions
• microsoft managed partner

3. Agenda
 New Branding opportunities
Agenda
 Other considerations

4. Branding in
History
What brought us here today?

5. What is Branding?
The "name, term, design, symbol, or any other
feature that identifies one seller's good or
service as distinct from those of other sellers”
(Wikipedia)
 Initial a labeling process by
applying distinctive marks
 Became a symbol of
quality, marketing
term, advertising
 Branding is all about Identity , it
is the Mark & it is most valuable
fixed asset of an organization

6. Modern Web, Responsive sites
 Responsive design is a Philosophy, not a Technology
 Business enablers for Response Design
 Responsive design is not without obstacles

7. Branding the Web
Web sites SharePoint
•CSS Styles (Colors, Fonts, Overlays) •Master pages (way too many),
•Logos, Icons, Shims, Backgrounds Pages (Page Layouts, Application
•Widgets (content sliders, navigation Pages, Cloud-App Pages *)
menus) •3rd-party Controls, Ribbon, ECB
•FX and Animations Menus
•Navigation (Quick Launch, Top-Bar,
Suite-links*)
•Web parts (and XSLT), App-Parts*
•List Views, Custom Fields
Should Information Architecture be included as part of “Branding” efforts?

8. Composite
Looks
The new and improved theming engine

9. Themes in SharePoint 2010
 Binary files (.thmx)
 Only Editable via
PowerPoint 2010
 Allowed changes of Online Site
Publishing Site

10. Composed Looks in SharePoint
2013

11. What are Composed looks 1/4
 No longer a single binary file
 Made up of
 Edit existing or Create new

12. What are Composed Looks 2/4
.SPCOLOR File Type
Online Site
Publishing Site

13. What are Composed Looks 3/4
.SPFONT File Type

14. What are Composed Looks 4/4
 Creating new Composed Looks
[ReplaceFont(themeFont:"title")]
font-family:"Segoe UI", Tahoma, Arial,Sans-serif
[ReplaceColor(themeColor:"SiteTitle")]
color:#262626
 Limitations

15. 1. Create or reuse a .master
page
 For NEW .master page ensure
existence of .preview file
2. Create/Update a .spfont file
3. Create/Update a .spcolor file
4. Create a new item n the
Composed Looks list
Create your own Composed Look pointing to these files
Demo

16. Design Manager
Next step in SharePoint branding

17. SharePoint Page Model
(Publishing)
 Master pages define the shared framing elements, the chrome
 Page layouts define the layout for a specific class of pages
(associated to a Content Type)
 Pages are created from a page layout by authors
 Add content to page fields
 Add web parts (Data-View, Content Query, Content Search)
Source: http://msdn.microsoft.com/en-us/library/jj191506(v=office.15)

18. Working with Design Manager 1/2
 Import design artifacts
Online Site
 Create/Edit Master Pages and
Page Layouts
Publishing Site

19. Working with Design Manager 2/2
 Create/Edit Master Pages and Page Layouts
 Limitations

20. Custom
branding
SharePoint branding and more…

21. Packaging branding artifacts
 The need for a branding-package
 Wider support for complex business needs
 Reusability & Maintainability
 Other considerations

22. Anatomy of a Branding package
 Event receivers
 Other requirements

23. UX for SharePoint
Apps

24. Introducing SharePoint App Model
 Everything in a SharePoint site is an
app
https://spclub-bf473b5225nn0f.sharepoint.com/sharepointapptitle
 SharePoint applications no longer
live in SharePoint

25. Branding SharePoint Apps
Provider-Hosted App
SharePoint
“Bring your own server hosting infrastructure” Your Hosted Site
Web
(could be PHP, ASP.NET MVC, Ruby, etc.)
Cloud-based Apps
Get remote events from
SharePoint Auto-hosted App Windows Azure
SharePoint
Use CSOM/REST + Windows Azure + SQL Azure provisioned invisibly Websites
Web
OAuth to work with SP as apps are installed
Provisioned in an isolated sub-web on a parent
web SharePoint
Web
Able to reuse web content
SharePoint-Hosted App (lists, files, out-of-box web parts) App Web
Cannot execute server code, only client- (from WSP)
side, e.g. JavaScript calls for business logic
& UX
 App-pages are displayed either in Full-screen
 In IFrame as App-Parts (equivalent of Page Viewer web-part for SharePoint-Apps) or SharePoint Dialog-box

26. Branding SharePoint Apps
Design options for the Apps displayed
in a Full Page
All artifacts are referenced from the host SharePoint site for styling
other html elements.

27. Branding SharePoint Apps
Design options for Apps running in
IFrame
App parts and SharePoint dialog boxes do not display full-
screen and cannot leverage the Chrome control.
Referencing styling resources is the way to go!
 Page display via an App part
 Step 1: Add a Client Web Part to your SharePoint 2013 app project
 Step 2: Configure the client web part's Content Source in the Element.xml to
correct page and pass the appropriate contextual information through the URL
 Step 3: Include script on app part pages to inject a new style sheet link element
into the head of the page referencing the /_layouts/15/defaultcss.ashx
resource from the host SharePoint site
 Page displayed in the SharePoint dialog
 Step 1: Add a UI Custom Action (Host Web) to the SharePoint 2013 app project
 Step 2: Configure the UrlAction in the Element.xml to correct page and pass the
appropriate contextual information through the URL and set
HostWebDialog="true" on the Custom Action (HostWebDialogHeight and
HostWebDialogWidth should also be set)
 Step 3: Include script on the dialog pages to inject a new style sheet link
element into the head of the page referencing the /_layouts/15/defaultcss.ashx
resource from the host SharePoint site

28. Branding & Styling SharePoint Apps
Demo

29. Other considerations
Client-Side Rendering
 For all new controls, data is written to the controls in a client-
side JSON array
 Designers can choose to display content using
JavaScript, CSS, and display templates
 Full control over how content is rendered on the page

30. Display Templates
What are display templates?
 Re-usable Styles Files for your Content-Query based &
Content-Search Results Web-Parts
 Each display template consists of two files:
• Stored in the "Master Page" gallery under "Display
Templates" folder
Why new concepts?
• No more XSLT editing every time a particular look & feel
is needed
• Client-side "templating" techniques represent today's
trend
(see libraries such as Knockout, Kendo UI, Razor also
heavily used in MVC applications) – rely on JSON back-
end data

31. Instant benefits with Client-Side Rendering (CSR)
Demo