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.
UiPath Community: AI for UiPath Automation Developers
Branding & Design Opportunities/Challenges with 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
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?
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
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
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
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
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
Composed Looks - Give designers the ability to combine a number of SharePoint pieces together into one look.You can create a composed look using the existing or custom pieces. You can even create variations by using different Themes (.spcolor), Font Schemes (.spfont), and images (intended for backgrounds, but you can be creative!) with the same master page. This is a nice change from the .thmx theming engine used previously, which was clumsy to implement for the most part.Parts of a Composed Look - Title*, Name*, Master Page (.master), Theme (.spcolor),Font Scheme (.spfont), PreviewImage (.jpg, .png, .gif, etc.)
Composed Looks - Give designers the ability to combine a number of SharePoint pieces together into one look.You can create a composed look using the existing or custom pieces. You can even create variations by using different Themes (.spcolor), Font Schemes (.spfont), and images (intended for backgrounds, but you can be creative!) with the same master page. This is a nice change from the .thmx theming engine used previously, which was clumsy to implement for the most part.Parts of a Composed Look - Title*, Name*, Master Page (.master), Theme (.spcolor),Font Scheme (.spfont), PreviewImage (.jpg, .png, .gif, etc.)
Composed Looks - Give designers the ability to combine a number of SharePoint pieces together into one look.You can create a composed look using the existing or custom pieces. You can even create variations by using different Themes (.spcolor), Font Schemes (.spfont), and images (intended for backgrounds, but you can be creative!) with the same master page. This is a nice change from the .thmx theming engine used previously, which was clumsy to implement for the most part.Parts of a Composed Look - Title*, Name*, Master Page (.master), Theme (.spcolor),Font Scheme (.spfont), PreviewImage (.jpg, .png, .gif, etc.)
Composed Looks - Give designers the ability to combine a number of SharePoint pieces together into one look.You can create a composed look using the existing or custom pieces. You can even create variations by using different Themes (.spcolor), Font Schemes (.spfont), and images (intended for backgrounds, but you can be creative!) with the same master page. This is a nice change from the .thmx theming engine used previously, which was clumsy to implement for the most part.Parts of a Composed Look - Title*, Name*, Master Page (.master), Theme (.spcolor),Font Scheme (.spfont), PreviewImage (.jpg, .png, .gif, etc.)