Branding & Design inSharePoint Server2013  Marius Constantinescu  Lead Consultant, blue-infinity  marius.constantinescu@b-...
in brief•   350+ employees•   headquartered in Geneva•   founded in 1995•   international culture•   multi-national client...
Agenda New Branding opportunities                               Agenda Other considerations
Branding inHistoryWhat brought us here today?
What is Branding?The "name, term, design, symbol, or any otherfeature that identifies one sellers good orservice as distin...
Modern Web, Responsive sites   Responsive design is a Philosophy, not a Technology   Business enablers for Response Desi...
Branding the Web                              Web sites SharePoint       •CSS Styles (Colors, Fonts, Overlays)    •Master ...
CompositeLooksThe new and improved theming engine
Themes in SharePoint 2010 Binary files (.thmx) Only Editable via  PowerPoint 2010 Allowed changes of                   ...
Composed Looks in SharePoint2013
What are Composed looks 1/4 No longer a single binary file Made up of Edit existing or Create new
What are Composed Looks 2/4.SPCOLOR File Type                                        Online Site                      Publ...
What are Composed Looks 3/4.SPFONT File Type
What are Composed Looks 4/4 Creating new Composed Looks    [ReplaceFont(themeFont:"title")] font-family:"Segoe UI", Tahom...
1.       Create or reuse a .master                                         page                                         F...
Design ManagerNext step in SharePoint branding
SharePoint Page Model(Publishing)      Master pages define the shared framing elements, the chrome      Page layouts def...
Working with Design Manager 1/2 Import design artifacts                                                   Online Site Cr...
Working with Design Manager 2/2 Create/Edit Master Pages and Page Layouts Limitations
CustombrandingSharePoint branding and more…
Packaging branding artifacts   The need for a branding-package   Wider support for complex business needs   Reusability...
Anatomy of a Branding package   Event receivers   Other requirements
UX for SharePointApps
Introducing SharePoint App Model Everything in a SharePoint site is an  app https://spclub-bf473b5225nn0f.sharepoint.com/...
Branding SharePoint Apps                         Provider-Hosted App                                                      ...
Branding SharePoint AppsDesign options for the Apps displayedin a Full PageAll artifacts are referenced from the host Shar...
Branding SharePoint AppsDesign options for Apps running inIFrameApp parts and SharePoint dialog boxes do not display full-...
Branding & Styling SharePoint AppsDemo
Other considerationsClient-Side Rendering   For all new controls, data is written to the controls in a client-    side JS...
Display TemplatesWhat are display templates?   Re-usable Styles Files for your Content-Query based &    Content-Search Re...
Instant benefits with Client-Side Rendering (CSR)Demo
Branding & Design Opportunities/Challenges with SharePoint 2013
Upcoming SlideShare
Loading in...5
×

Branding & Design Opportunities/Challenges with SharePoint 2013

1,552

Published on

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.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,552
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
33
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • 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.)
  • Branding & Design Opportunities/Challenges with SharePoint 2013

    1. 1. Branding & Design inSharePoint Server2013 Marius Constantinescu Lead Consultant, blue-infinity marius.constantinescu@b-i.com http://nettitude.wordpress.com
    2. 2. in brief• 350+ employees• headquartered in Geneva• founded in 1995• international culture• multi-national clients• integrated solutions• microsoft managed partner
    3. 3. Agenda New Branding opportunities Agenda Other considerations
    4. 4. Branding inHistoryWhat brought us here today?
    5. 5. What is Branding?The "name, term, design, symbol, or any otherfeature that identifies one sellers good orservice 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. 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. 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 FieldsShould Information Architecture be included as part of “Branding” efforts?
    8. 8. CompositeLooksThe new and improved theming engine
    9. 9. Themes in SharePoint 2010 Binary files (.thmx) Only Editable via PowerPoint 2010 Allowed changes of Online Site Publishing Site
    10. 10. Composed Looks in SharePoint2013
    11. 11. What are Composed looks 1/4 No longer a single binary file Made up of Edit existing or Create new
    12. 12. What are Composed Looks 2/4.SPCOLOR File Type Online Site Publishing Site
    13. 13. What are Composed Looks 3/4.SPFONT File Type
    14. 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. 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 listCreate your own Composed Look pointing to these filesDemo
    16. 16. Design ManagerNext step in SharePoint branding
    17. 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. 18. Working with Design Manager 1/2 Import design artifacts Online Site Create/Edit Master Pages and Page Layouts Publishing Site
    19. 19. Working with Design Manager 2/2 Create/Edit Master Pages and Page Layouts Limitations
    20. 20. CustombrandingSharePoint branding and more…
    21. 21. Packaging branding artifacts The need for a branding-package Wider support for complex business needs Reusability & Maintainability Other considerations
    22. 22. Anatomy of a Branding package Event receivers Other requirements
    23. 23. UX for SharePointApps
    24. 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. 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 AppsGet remote events fromSharePoint Auto-hosted App Windows Azure SharePointUse CSOM/REST + Windows Azure + SQL Azure provisioned invisibly Websites WebOAuth to work with SP as apps are installed Provisioned in an isolated sub-web on a parent web SharePoint Web Able to reuse web contentSharePoint-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. 26. Branding SharePoint AppsDesign options for the Apps displayedin a Full PageAll artifacts are referenced from the host SharePoint site for stylingother html elements.
    27. 27. Branding SharePoint AppsDesign options for Apps running inIFrameApp 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 parts 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. 28. Branding & Styling SharePoint AppsDemo
    29. 29. Other considerationsClient-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. 30. Display TemplatesWhat 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" folderWhy new concepts?• No more XSLT editing every time a particular look & feel is needed• Client-side "templating" techniques represent todays trend (see libraries such as Knockout, Kendo UI, Razor also heavily used in MVC applications) – rely on JSON back- end data
    31. 31. Instant benefits with Client-Side Rendering (CSR)Demo
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×