Branding Modern SharePoint
•Descargar como PPTX, PDF•
8 recomendaciones•5,039 vistas
Branding Modern SharePoint - 2013, 2016 and SharePoint online - Pre SharePoint Framework
Recomendados
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Destacado (18)
Similar a Branding Modern SharePoint
Similar a Branding Modern SharePoint (20)
Más de Eric Overfield
Más de Eric Overfield (13)
Último
Último (20)
Branding Modern SharePoint
- 1. SharePoint Advocate and Enthusiast PixelMill ERIC OVERFIELD | @ericoverfield BRANDING MODERN SHAREPOINT
- 2. Founder and SharePoint Branding/UI Lead, PixelMill Speaker, Teacher, Advocate, Author SharePoint Community Organizer Located in Davis, CA Co-author: “Black Magic Solutions for White Hat SharePoint” (August, 2013) Co-author: “Pro SharePoint 2013 Branding and Responsive Web Development” (Apress – June 12th, 2013) Order Your Copy http://pxml.ly/zsqykd ericoverfield.com @ericoverfield INTRODUCTION ERIC OVERFIELD
- 3. WHAT YOU WILL LEARN TODAY SHAREPOINT BRANDING 101 1 THAT WHAT AND WHY OF BRANDING SHAREPOINT 2 BRANDING TOOLS IN SHAREPOINT ONLINE/2013/2016 3 BRANDING “THE FUTURE OF SHAREPOINT” ericoverfield.com @ericoverfield 4 CHOOSING THE RIGHT STRATEGY
- 5. BRANDING IN GENERAL AND BRANDING BENEFITS Historically the practice of burning your mark (or brand) onto your products Improve SharePoint User eXperience (UX) Enhance user adoption Further your organization’s brand Provide a cohesive strategy In order words, make SharePoint not look like SharePoint ericoverfield.com @ericoverfield
- 7. NO CODE | MINIMAL CODE SOLUTIONS Logo replacement Composed Looks Replaces SharePoint 2010 themes Use OOTB Composed Looks or create your own SharePoint Color Palette Tool Office 365 Themes Tenant wide very basic theming Custom CSS – Alternative CSS Available in publishing CSS and JavaScript embed with PnP PowerShell Use PnP - SharePoint 2013/2016 Responsive UI (*SP 2013 May 2015 CU+) ericoverfield.com @ericoverfield
- 8. SharePoint Service Remote Deployment 1 Deploy JavaScript and associate with JavaScript embedding (user custom action) to the site <<Reference>> UI/UX components / elements manipulated with JavaScript stored either in SharePoint or CDN 2 3 CSOM / REST REMOTE DEPLOYING JAVASCRIPT EMBEDDING
- 10. WHAT TO DO WHEN YOU NEED MORE Customize Master Pages and Page Layouts Display Templates Device Channels The Future – The SharePoint Framework… ericoverfield.com @ericoverfield
- 11. MASTER PAGES Provides main HTML wrapper used by all pages Defines HTML <html />, <head /> and <body /> tags Loads resources such as JS and CSS files Defines page flow and shared page components Header, footer, logo, navigation, suite bar / ribbon, etc. Uses ContentPlaceHolders for replaceable areas OOTB, no longer uses tables for layout! ericoverfield.com @ericoverfield
- 12. MASTER PAGE COMPONENTS ericoverfield.com @ericoverfield Suite Bar Ribbon Header Current Nav Page Wrapper
- 13. PAGE LAYOUTS Defines content layout for a given page Contains “Content” blocks that link to Master Page Associated with a Content Type May surface Content Type columns Specific to Publishing sites Very powerful ericoverfield.com @ericoverfield
- 14. PAGE LAYOUT COMPONENTS ericoverfield.com @ericoverfield Site Columns Snippets Content Place Holder
- 15. A SHAREPOINT BRANDING TOOL DESIGN MANAGER
- 16. DESIGN MANAGER OVERVIEW New to SharePoint 2013 Available in SharePoint Online/2013/2016 Requires Publishing Infrastructure Import a HTML prototype directly into SharePoint SharePoint handles conversion Interface for custom Master Pages and Page Layouts Also includes Display Templates and Device Channels No longer limited by SharePoint Designer ericoverfield.com @ericoverfield
- 17. HTML MASTER PAGES Convert a HTML prototype directly into SharePoint Some assembly required ericoverfield.com @ericoverfield
- 18. HTML PAGE LAYOUTS Must derive from a Master Page Many out of the box layouts Also uses Snippets and Snippet Manager Only edit what is in “Content” blocks ericoverfield.com @ericoverfield
- 21. Office 365 Theming Composed Looks Alternative CSS JavaScript Embed Custom master page BRANDING OPTIONS
- 24. DISLPAY TEMPLATES The center of displaying SharePoint Online/2013/2016 Search Replaces XSLT with HTML and JavaScript! Control Templates Item Templates ericoverfield.com @ericoverfield
- 27. DEMO DISPLAY TEMPLATES Thanks to TouchTouch http://tutorialzine.com/2012/04/mobile-touch-gallery/
- 29. THE FUTURE OF SHAREPOINT Microsoft Announced the SharePoint Framework in May 2016 The Framework is now in Developer Preview Released for Webparts first Scheduled to make it to SharePoint 2016 in 2017 New client side rendering (CSR) method for site / data presentation “Classic” Master Pages, Page Layouts not going away Review resources for links to videos and blog posts ericoverfield.com @ericoverfield
- 30. MODERN DEVELOPMENT ENVIRONMENT Sass / SassScript Syntactically Awesome Stylesheets Scripting language that provides a programming like language for CSS “Replacement” for CSS though final product is CSS NodeJS / Bower / Grunt / Gulp Compiling, Package Manager and Task Processing CSS/HTML Grids – Bootstrap, Susy and others Yeoman or other webapp scaffolding for quick development ericoverfield.com @ericoverfield
- 31. DEMO A PEEK INTO THE FUTURE OF SHAREPOINT BRANDING
- 33. WHAT IS BEST FOR YOU Build a solid foundation first Line up project sponsors Get the content, structure and purpose right before branding Secure resources, talent and budget This will help set level of effort Sitemaps, IA, wireframes, mockups Branding SharePoint Online requires additional consideration ericoverfield.com @ericoverfield
- 34. A QUICK REVIEW 1 2 3 ericoverfield.com @ericoverfield 4 THAT WHAT AND WHY OF BRANDING SHAREPOINT BRANDING TOOLS IN SHAREPOINT ONLINE/2013/2016 BRANDING “THE FUTURE OF SHAREPOINT” CHOOSING THE RIGHT STRATEGY
- 35. RESOURCES ericoverfield.com @ericoverfield Responsive Frameworks for SharePoint 2010 and 2013 http://responsivesharepoint.codeplex.com SharePoint 2013 Design Manager branding and design capabilities http://pxml.ly/1vBC3PD Starter on learning SharePoint Branding http://pxml.ly/1CHNXKc Master pages, the Master Page Gallery, and page layouts in SharePoint 2013 http://pxml.ly/1rBdcLJ SP Blueprint for SharePoint 2013 http://pxml.ly/1ql6Dqa SharePoint 2013 Starter Master Pages http://pxml.ly/1uFeG8Z Theming and Composed Looks Demo from SPC 2014 http://pxml.ly/2BTVW42
- 36. RESOURCES PnP AND THE SHAREPOINT FRAMEWORK ericoverfield.com @ericoverfield Don’t wait to get started with the SharePoint Framework http://pxml.ly/28YywqB Preparing for the SharePoint Framework http://pxml.ly/28ULCVm The SharePoint Framework: The Open and Connected Platform http://pxml.ly/28T6BHF2 The Future of SharePoint – May 4th, 2016 Event http://pxml.ly/28ZGhdy Getting started with SharePoint Framework http://pxml.ly/28ZFvSq SharePoint 2013/2016 Responsive UI http://pxml.ly/38UNRqq Branding the new SPO UI with JS/CSS http://pxml.ly/28VyYVk
- 37. BRANDING MODERN SHAREPOINT THANK YOU QUESTIONS? @ericoverfield Order Your Copy http://pxml.ly/zsqykd “Pro SharePoint 2013 Branding and Responsive Web Development” (Apress – June 12th, 2013)
Notas del editor
- Slides will be available from blog and twitter Look at branding tools available to us in SharePoint 2013 and SharePoint Online How many people here are new to SharePoint? Anyone taking stabs at branding SP? Anyone doing this for first time? 101 level overview. Good demos of options but going to limit how deep we go right now. Lots of valuable resources at the end to help you with your journey Many sub-classes of branding SP and different camps. This is a look at the tools and how they work, leave it up to other sessions to help you find the best solution for your particular project
- Will make available on blog and twitter (slideshare.net), so if you remember one of those then you can always review everything we discuss
- EO slide EO: Starting with our SP service, using remote provisioning, again say a console application, PnP Powershell, provision a custom action and assets to SharePoint. Upon page processing, JS is injected as that custom action and delivered to the client. The browser then uses this JS and processed it normally. TM: yes, and you may have heard last week our announcement of the Office 365 Public CDN Developer Preview that you can start to play with as well
- Logo replacement Alternative CSS with look at finding classes Composed looks with BG image and linking to Oslo PnP Review
- Web Distributed Authoring and Versioning
- Convert prototype
- EO slide If you do want to brand your current team sites, there are options. Tejas, let’s provide an overview of options first and then we can go into details. EO transition to TM Notes; Low – logo replacement, composed looks Medium – alternative CSS, PnP High – Full master page, js, provisioning
- TM We’ve got a spectrum of options for you to choose from when branding your team sites. They range in difficulty and flexibility – let’s enumerate them and then talk about them in more detail: Office 365 Theming & Composed Looks are the simplest forms of branding you can apply that require little effort, but are also limited in their flexibility Moving up the scale a bit more, you can use alternative CSS that you can leverage to impose a different style on your site Moving even further up the complexity scale we have JavaScript embedding, which allows you to inject custom JS without a custom master page, and allows you to take advantage of client side rendering and SP CSOM & REST APIs And finally we have the most flexible but also the one that requires most effort (have your cake and eat it too) is custom master pages --after custom master page presented, EO jump in. EO: Tejas, now custom master pages? That’s interesting. (Click) -------------------------------------------------------------------------------- https://support.office.com/en-us/article/Office-365-release-options-3b3adfa4-1777-4ff0-b606-fb8732101f47?ui=en-US&rs=en-US&ad=US Apply branding, customizations here, redeployable, use a canary to know what is coming Ensure you have a playground (READ: extra tenant for dev/test) and a biz process for moving customizations to production (e.g. Metalogix) Avoid custom master pages Start with theming / Office 365 themes Use Alternative CSS for more complex requirements Even responsive Consider JavaScript Embed for UX/DOM manipulation Utilize PnP or add-in model for redeployment Avoid “feature” framework and sandbox wsp’s. Even as declarative only sandbox solutions, remote provisioning is the way to go. Use development tenant that is set for first release
- EO: Many of you are liking asking yourself, as I would be if I were in the audience, can I still create custom master pages? I’ve been hearing that with the new extensibility framework that they might not be compatible. TM: Custom master pages are absolutely supported, and will be for the foreseeable future. Yes, we are investing in modern branding experiences and methods that we’ll bring to market next year, but know that for classic team sites, the approaches we discuss in this session are supported and will be at least until we have parity in customization capability for modern sites EO: Will Microsoft deprecate classic sites & with them customization approaches? TM: That’s our aspiration, yes. BUT (BIG BUT) we know that it will take a *long time* and won’t happen any time soon To reassure you further, before we remove classic we need to: Ensure that we have capability parity between classic and modern from a branding customization perspective This means that the new SP Framework allows for full customization of the experience And that we’ve shipped the framework & necessary guidance to partners and customers to build modern replacements And that Usage data shows that very few customers are still using classic model So – lots of criteria, and we have a long time on this journey together That context help? TM: Awesome, with that, Eric, why don’t you run through some more detail on the branding options we just identified
- Screenshot from http://sharepoint.microsoft.com/blog/Pages/BlogPost.aspx?pID=1041
- Screenshot from http://msdn.microsoft.com/en-us/library/jj945138.aspx
- Before we can get into branding SP with custom “Something” (css, js, html, etc), let’s raise all of us up to modern coding techniques http://sass-lang.com/ http://rubyinstaller.org/ https://nodejs.org/ http://getbootstrap.com/ http://susy.oddbird.net/ http://yeoman.io/
- Look at a webpart demo
- Thank You! Don’t forget to check out my blog where you can download this presentation or the recording. Easiest way to get to the material I referenced