Session 1 branding and site development in SharePoint

Editor's Notes

• #2: Process. Should be open communication comment feedback
• #3: Will upload presentations
• #4: Get to know the audience:Who develop branding solution on 2007/2010?Who develop branding solution on 2013?Direct development or sandbox solution?Overall feeling of development process and tools availableParticular subject for me:Branding solution for SharePoint was one of my first SharePoint project. The process, methodology and development practices that I develop working on web solutions needed to be re-adjusted. Moreover, few other tools needed and specific SharePoint knowledge needed to be acquire before being able to process best business industry type solution.Describe the sessionsGoals of the presentation introduce tools, methodology and SharePoint conceptsProvide feedback from my experience from Microsoft guidelines and my personal experienceTalk about azure:The demo for this session is hosted on a Azure development machine.
• #5: Most of enterprise looking to develop branding solution will start with the Out of the Box (OOB) branding solution provided by MS SP. This is not necessarily due to a lack of branding solution development knowledge but a lack of priority. In fact, most new implementation will focus on the architecture, topology, business intelligence development, search configuration or any other pillars that makes SharePoint a great products… but will always leave branding as secondary priority. And no, just changing the logo to your company logo does not create a branding solution 
• #6: Enterprise generation has large access to World Web content and applications. They are expecting some common features and functionalities.Therefore SharePoint intranet users are going to expect web available features and visual compositions:Social features such as Facebook or TwittterSearch filtering and components provided by search engines such as Bing, GoogleNot only to mention that mobile access and BYOD are current key topics for IT departments.If you want to drive USER ADOPTION, you have to provide an ease of use and access to the SharePoint intranet site.
• #8: Notes:- If you are working on 2013, key element is that you can use the current web development tool that you have to develop branding solution for SharePoint 2013.-SharePoint Designer 2013 have word to be bound to deprecate in a near future. I still believe it is a valuable tool because it allows you to quickly interact with the all assets- SPD 2010 for 2010 development and SPD 2013 for 2013 development. They are not cross version compatible.- VS for sandbox solutions on 2010 or 2013
• #9: The following items will be discuss in the second session:Spservices is more powerful in the context of SharePoint 2010 but can still be heavily leverage on 2013. Specifically for branding solutions where developers have no central administration access (and search service application), non publishing server sites or sandbox solution.Bootstrap.js is a very commonly used library in the WWW but not in SharePoint. Challenges comes from the fact that most of the default components (navigation, web parts ….) are not mobile friendlyAs we are leaning forward client side coding (This is available via the CSOM and JSOM on the development for SharePoint 2013…) it is important to elaborate proper strategies developing JS solutions. One of the solution is to use the Angular.js platform. It allows to structure very efficiently JS code as a MVC model and can be a very powerful assets for the display templates.
• #11: The structure of a SharePoint page includes three main elements. This is important to know when starting branding solution for SharePoint
• #12: First steps is to review the composition file that will be provided by your design/creative team. You will have to identify the parts of the composition that fits each SharePoint page model elements.
• #13: Frommsdn article (http://msdn.microsoft.com/en-us/library/office/jj191506.aspx):A master page defines the chrome (the shared framing elements) of your site. These elements may include the header and footer, top navigation, breadcrumbs, search box, site logo, and other branding elements. The master page remains consistent as visitors navigate through your site.A master page also defines regions called content placeholders that are filled in by content from matching regions on page layouts. Most commonly, the body of a master page contains just a single content placeholder (named PlaceHolderMain, which is created automatically), and all of the content from a page layout appears inside this one content placeholder.
• #14: Frommsdn article (http://msdn.microsoft.com/en-us/library/office/jj191506.aspx):Page layouts define regions or content areas that map to content placeholders on the master page. Again, the most common scenario is that a page layout defines a single content region that maps to the single content placeholder that is created automatically on a master page.The primary purpose of a page layout is to arrange page fields. When you design a page layout, you insert, position, and style elements called page field controls. These controls will eventually contain content when an author creates a page based on that page layout. In addition to page fields, page layouts can also contain Web Part zones, to which content authors can add Web Parts. (Master pages can't contain Web Part zones.)With a page field control, you can define the styles used by the content. Authors can add content to a page, but the designer has ultimate control over how that content is rendered through CSS applied to those controls.
• #15: FromEthan Gur-esh and Alyssa Levitz’s SP Tech Conf 2012 slide.Developing SharePoint branding solution for 2010 was tedious. You had the distinction between the front end developer that will take the comps and prepare the HTML, CSS, JS elements and the SharePoint developer that will analyze and review the elements developed and translate it to a SharePoint page model “language”.
• #16: FromEthan Gur-esh and Alyssa Levitz’s SP Tech Conf 2012 slide.Now, you can have the front end developer develop the most of the branding solution with very little knowledge of SharePoint. They are trying to:Get Branding SharePoint sites gets easier and more familiar for Web Designers Branding SharePoint intranet to look more like internet sitesFor Web Designers:Convert HTML into SharePoint master page but not page layoutIn previous versions of SharePoint, branding a site required specific technical expertise about things like what content placeholders are required on a master page, or how a master page implements certain classes of styles. SharePoint 2013 introduces Design Manager—a new interface and central hub for managing all aspects of branding your SharePoint site. You can find the Design Manager in the top-level site for your site collection. It is a part of the Publishing Portal site collection template in SharePoint 2013.
• #19: Resources:http://msdn.microsoft.com/en-us/library/jj163942.aspxNo more tables:- Huge markups improvementsDesign Package:A design package does not include pages, navigation settings, or the term store.Design Manager:- Helps you create branding with HTML, CSS and JSavailable in publishing sites in both SharePoint Server 2013 and Office 365Client Site:rendering controls such as image renditionsMinimal Download strategiesIn terms of authoring, SP 2013 introduces some great feaures:Cross site publishing utilizes the search service application and index. I will provide demo on authoring capabilities at a later date.Managed navigation. This is a very cool features tool. Not only it allows you to have “pretty” URLs but you will be able to work with one page design concept that dynamically loads content. In other words, one page to manage and develop from a front end prospective.Content Search Web Part. Although not available throughout the platform and versions of SP2013, this is a key components of the new SP version that will be demo in session 2.
• #20: Access/Upload assets:Direct accessRecommend using SP Designer instead. Because no sense of versioning or source controlHere are the steps for all platform:http://msdn.microsoft.com/en-us/library/office/jj733519.aspxResolve issue:http://tommdaly.wordpress.com/2012/11/07/sharepoint-2013-design-manager-unable-to-map-network-drive-while-working-on-the-server/About Converting:- After you convert your HTML files, you can use your HTML editor to continue to refine your design, preview your files, and save them. Every time you save the HTML versions of the master page or page layout files, SharePoint 2013 automatically updates the associated SharePoint master page and page layouts to reflect your changes. - With Design Manager, you only have to edit the HTML files—while you can continue to write custom master pages and page layouts using your ASP.NET and SharePoint development skills, Design Manager enables you to design great sites without SharePoint developer expertise.If you prefer, SharePoint 2013 also includes HTML versions of several master pages and page layouts that you can use as starter templates. If you want to start from these files, create a copy of the HTML file (the associated ASP.NET file will be taken care of for you), and then edit the HTML file as you normally would. You can also start from just a basic template by using the master page from minimal template option, which automatically creates the associated .master file.Design Manager enables a step-by-step approach for creating design assets that you can use to brand sites. Upload design assets—images, HTML, CSS, and so on—and then create your master pages and page layouts. You can preview how your design looks either in a client-side code editor or on the server as you are designing it. Snippets:add custom SharePoint components and ribbon elements by using the Design Manager UI. HTML snippets that can be used by any web design tool—it renders HTML and ignores ASP.NET and SharePoint markup (while SharePoint renders only ASP.NET and SharePoint markup and ignores HTML).
• #21: Here are the steps for all platform:http://msdn.microsoft.com/en-us/library/office/jj733519.aspxResolve issue:http://tommdaly.wordpress.com/2012/11/07/sharepoint-2013-design-manager-unable-to-map-network-drive-while-working-on-the-server/SP Designer/VS over direct access because:Version controlPublishing approval controlClean distinction between master page + page layouts
• #22: Important notes:You have 2 ways of developing master pages/pages layouts:Solution A “Classic .master and .aspx” developmentThis method worked on 2010 and 2013. The front end developer needs to have knowledge of SharePoint controllers to develop. From the 2013 environment prospective, going this direction will not allow you to use the snippets gallery (without tweaking it at least) and work from html files. You will indeed just work from .master and .aspx page. No conversion necessarySolution B “HTML Auto-convert” developmentThis method work on 2013 only. The front end developer can push the branding solution very far with limited SharePoint development knowledge. The development will be done (ALWAYS!) via HTML files. A .master type and .aspx will be automatically generated respectively for master page pages and page layouts. You can not touch the .master and .aspx
• #23: Please review the attached documents:Session 1 - Step by step site branding Demo materials
• #25: This is a new feature available to create powerful branding solution. In 2010, you had to create CQWP and then modify XLST files to enhance the branding solution. However, 2013 changes this. We will review in session 2.
• #26: Why Considering Mobile?TouchMost mobile devices nowadays are based on touch screens. Considering their size it’s the logical way of interacting with the device. The consequence of using touch is lesser precision that when using a pointer device such as mouse. While a menu might be perfectly navigable on a desktop using a mouse, the same menu items might turn out just to be too close to each other to use them flawlessly on a touch-enabled mobile device. Limited screen estate Mobile devices are called mobile because they are small and handy and it’s convenient to have them around. The price of that portability is limited screen estate: while it could be perfectly possible to design a readable website for 1900px+ width resolution, the odds are low that a visitor using a mobile device will be able to use that website easily.Limited bandwidth Data connectivity on mobile devices is still far from commodity and is not cheap, especially if you are abroad. Putting a high resolution photograph of a Tuscany on your welcome page might help you inspire your desktop visitors, but the odds are high that at the same time it will scare off all other visitors using their mobile devices.Capabilities While vendors have been improving mobile devices and their capabilities they are still not in parity with what desktop computers are offering. What is supported is very much device-dependent and when designing for mobile you should always take into account the bare minimum to ensure that everyone will be able to access your website.
• #27: Good tool: www.useragentstring.comYou can have up to 10 Device Channels defined in your Site Collection and per Device Channel you can specify up to 150 Device Inclusion Rules. Those are hard limits enforced by the code.The Publishing Output Cache which is a part of the Publishing infrastructure in SharePoint 2013 has built-in support for Device Channel so you don’t have to worry of much performance impact when working with Device Channelshttp://www.mavention.nl/blog/device-channels-sharepoint-2013
• #28: Image rendition is very cool. It allows you to set predefined scale for images and use them to define what type and part of the images you will display at different resolution.I ran into an issue “he blob cache is not enabled in this web application. Image renditions will not be generated until the blob cache is enabled. For information on turning on the blob cache, please review the product documentation.” that was easily solve with this article:http://sureshpydi.blogspot.com/2013/05/sharepoint-2013-blob-cache-is-not.html
• #29: Resource here: msdn.microsoft.com/en-us/library/dn456544.aspxThe basic mechanics of MDS are pretty simple. The main components of MDS are two engines, one in the server and another in the client, that work together to calculate the changes and render the pages in the browser when the user navigates from page to page in the site. In other words, we only use one page and content is loaded according to the context.