SharePoint Branding "just not look like SharePoint!" Branding is the act of creating a specific image or identity that people recognize in relation to a company or product.

UI Process

Creating Wireframes Wireframes are skeletal page designs; they capture the layout and flow of a website without focusing on colors and graphics.

GUI Wireframes to Graphical User Interface.

New Methodology Designing your website in SharePoint 2013 Dreamweaver, etc. CompsHTML Java, HTML, etc. Auto Convert Snippet Gallery Upload Add Control Ribbon Placeholder Main Minimal Master Navigation Web parts Controls SharePoint

SharePoint Page Model SharePoint uses templates to define and render the pages that a site displays.  Master pages define the shared framing elements (AKA the chrome) for all pages in your site.  Page layouts define the layout for a specific class of pages.  Pages are created from a page layout by authors who add content to page fields. Master Page Page Layout Page (Content) RENDERED PAGE

SharePoint’s Default Look & Feel What most SharePoint Intranet portals look like

SharePoint customisation

Design Manager  Access/Upload to assets and pages  Convert HTML to ASP.NET master page  Snippet Gallery  Design Packages  Device Channels  Display templates (No more XSLT)

Breaking Down SharePoint Master Pages are a combination of HTML code, SharePoint user controls and content placeholders, containers used to load specific pieces of content from the referring content. A content placeholder is essentially a container that is used to render various pieces of con- tent. Master Pages apply to all pages. Generally master pages includes the header, main navi- gation, left navigation (or quick launch) and footer. Step 1 Master Page Step 2 Page Layouts Page layouts and master pages work together. Whereas a master page is used to organize shared el- ements throughout the site, page layouts provide structure for individual content pages. Page layouts contain content controls. Each content control in a page layout references a specific content place- holder in the master page. Take a look at these combinations: Note: While Page Layout doesn’t allow for extensive design, its primary role is architecture and placement of content there are certain elements that can be customized, such as breadcrumb navigation and page title. So the Page Layouts allow for more detail customization.

Breaking Down SharePoint Sharepoint includes many built-in Web Parts that you can quite easy drag and drop into designated zones in a Page Layout. Web Parts are therefore essential to branding your entire website. Without this level of customization, your site will retain a SharePoint look. Step 3 Web Parts Step 4 Web Parts Zone A Web Part zone is a type of container that allows content authors to configure and arrange Web Parts either horizontally or vertically directly from their web browser. They make it possible to add any number of configurable Web Parts directly to a SharePoint page. Web Parts that are placed in Web Part zones can contain unique content from page to page; thus, editing a Web Part in a Web Part zone on one page will not affect the same Web Part on a different page. Web Part zones cannot be added to master pages; they can only be added to content pages or page layouts. Take a look at the image below to understand it:

Device Channels  For content negotiations  Use to differentiate master page  Target different content with device channel panels  Good to inform older browsers users to update or be aware

Browser Support BrowserSupportedNot supported Internet Explorer 11X Internet Explorer 10X Internet Explorer 9X Internet Explorer 8X Internet Explorer 7X Internet Explorer 6X Google Chrome (latest released version) X Mozilla Firefox (latest released version) X Apple Safari (latest released version) X Forget IE6!

Branding Examples What successful intranet sites look like

Thank You Govind Patil