sharepoint branding "just not look like sharepoint!" branding is the act of creating a...
TRANSCRIPT
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