Branding & Design Opportunities/Challenges with SharePoint 2013
Upcoming SlideShare
Loading in...5
×
 

Branding & Design Opportunities/Challenges with SharePoint 2013

on

  • 1,622 views

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

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.

Statistics

Views

Total Views
1,622
Views on SlideShare
1,622
Embed Views
0

Actions

Likes
1
Downloads
20
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 Branding & Design Opportunities/Challenges with SharePoint 2013 Presentation Transcript

  • Branding & Design inSharePoint Server2013 Marius Constantinescu Lead Consultant, blue-infinity marius.constantinescu@b-i.com http://nettitude.wordpress.com
  • in brief• 350+ employees• headquartered in Geneva• founded in 1995• international culture• multi-national clients• integrated solutions• microsoft managed partner
  • 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 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
  • Modern Web, Responsive sites Responsive design is a Philosophy, not a Technology Business enablers for Response Design Responsive design is not without obstacles
  • 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?
  • CompositeLooksThe new and improved theming engine
  • Themes in SharePoint 2010 Binary files (.thmx) Only Editable via PowerPoint 2010 Allowed changes of Online Site Publishing Site
  • 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 Publishing Site
  • 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", Tahoma, Arial,Sans-serif [ReplaceColor(themeColor:"SiteTitle")] color:#262626 Limitations
  • 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
  • Design ManagerNext step in SharePoint branding
  • 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)
  • Working with Design Manager 1/2 Import design artifacts Online Site Create/Edit Master Pages and Page Layouts Publishing Site
  • 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 & Maintainability Other considerations
  • 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/sharepointapptitle SharePoint applications no longer live in SharePoint
  • 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
  • Branding SharePoint AppsDesign options for the Apps displayedin a Full PageAll artifacts are referenced from the host SharePoint site for stylingother html elements.
  • 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
  • Branding & Styling SharePoint AppsDemo
  • 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
  • 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
  • Instant benefits with Client-Side Rendering (CSR)Demo