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 MethodologyDesigning your website in SharePoint 2013

Dreamweaver, etc.

Comps

HTML

Java, HTML, etc.

Auto Convert

Snippet Gallery

Upload Add Control

• Ribbon• Placeholder Main•Minimal Master

•Navigation •Web parts• Controls

SharePoint

SharePoint Page ModelSharePoint 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 PAG

E

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 LayoutsPage 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 ZoneA 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:

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

Browser Supported Not supported

Internet Explorer 11 X

Internet Explorer 10 X

Internet Explorer 9 X

Internet Explorer 8 X

Internet Explorer 7 X

Internet Explorer 6 X

Google Chrome (latest released version)

X

Mozilla Firefox (latest released version)

X

Apple Safari (latest released version)

X

Forget IE6!

Branding ExamplesWhat successful intranet sites look like

Thank YouGovind Patil