This document discusses branding in SharePoint, including:
- Defining branding as customizing the colors, fonts, logos and graphics to create a unique look and feel.
- Explaining that branding in SharePoint is done to make sites look less like SharePoint and more tailored to each company.
- Describing how branding works in SharePoint through themes, master pages, starter master pages and design considerations.
In this session, we are going to brand a SharePoint site from start to finish. We will use SharePoint Designer, HTML and custom CSS to design a site how not to look like SharePoint. We'll touch upon themes, page layouts as well as master page design. As well as learn how to upgrade a SharePoint 2007 design to SharePoint 2010.
This session is focused on designers well versed with HTML and CSS but might not have the SharePoint development experience. Within the session, we'll also look at usability, accessibility and best practices on branding SharePoint public facing sites.
Visit http://www.kanwalkhipple.com
Step into the SharePoint branding world, tools and techniquesBenjamin Niaulin
This presentation presents the basics for SharePoint branding tools and techniques. All of it was done during Demonstrations feel free to contact me on twitter @bniaulin for more information or CSS files
Create Engaging Branded SharePoint Portals and Plan for ContentCathy Dew
Making sure your content and branding align is always a challenge, but you can create portals that use content as a means to further push your "brand." In this session we will examine how to make use of SharePoint 2013 web part and content features that can be customized from a branding perspective. We will create a sample training portal that will display customized training information to users as well as visually give clues for direction.
In this session, we are going to brand a SharePoint site from start to finish. We will use SharePoint Designer, HTML and custom CSS to design a site how not to look like SharePoint. We'll touch upon themes, page layouts as well as master page design. As well as learn how to upgrade a SharePoint 2007 design to SharePoint 2010.
This session is focused on designers well versed with HTML and CSS but might not have the SharePoint development experience. Within the session, we'll also look at usability, accessibility and best practices on branding SharePoint public facing sites.
Visit http://www.kanwalkhipple.com
Step into the SharePoint branding world, tools and techniquesBenjamin Niaulin
This presentation presents the basics for SharePoint branding tools and techniques. All of it was done during Demonstrations feel free to contact me on twitter @bniaulin for more information or CSS files
Create Engaging Branded SharePoint Portals and Plan for ContentCathy Dew
Making sure your content and branding align is always a challenge, but you can create portals that use content as a means to further push your "brand." In this session we will examine how to make use of SharePoint 2013 web part and content features that can be customized from a branding perspective. We will create a sample training portal that will display customized training information to users as well as visually give clues for direction.
As the focus shifts towards working in the “cloud” more and more businesses are utilizing Office 365 for their corporate intranets. This creates new challenges from a User Experience design. In this session we will dive into the methods for customizing an intranet built on Office 365. We will look at the options for customizing and how you can take these options further.
Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy DewCathy Dew
This presentation begins down the path of how to customize SharePoint 2013 On Premises environments going through the Design, Development and Deployment stages.
A business owner nowadays needs to be able to attract and engage people to their website. In this session, learn to implement your company's brand on SharePoint 2010. During this session, we'll use the right tools to take a design from concept to a fully functioning SharePoint 2010 site. Based on real world experiences, this session is sure to give you some practical tips, tricks, and advice you can use immediately. Learn to leverage SharePoint 2010 tools to customize your experiences, and make them unique. You will be able to take this knowledge and deliver the best end to end experiences to your customers.
Abstract - Designing SharePoint 2010 for Business
A business owner nowadays needs to be able to attract and engage people to their website. In this session, learn to implement your company's brand on SharePoint 2010. During this session, we'll use the right tools to take a design from concept to a fully functioning SharePoint 2010 site. Based on real world experiences, this session is sure to give you some practical tips, tricks, and advice you can use immediately. Learn to leverage SharePoint 2010 tools to customize your experiences, and make them unique. You will be able to take this knowledge and deliver the best end to end experiences to your customers.
Bio - Kanwal Khipple, is a SharePoint Most Valued Professional (MVP) and Principal SharePoint Architect for BrightStarr. Kanwal focuses on designing adoptable solutions using SharePoint. In the past 7 years, he has developed, implemented and architected hundreds of SharePoint solutions from small single server deployments to globally dispersed SharePoint server farms that can handle 120,000+ users. Kanwal lives in Toronto, Canada and you can find him tweeting, buzzing and blogging on his personal blog. Connect with him on LinkedIn to learn how you can quickly start getting ROI for your SharePoint Intranet.
You are about to embark on a journey of becoming a SharePoint Designer Ninja. SharePoint has infiltrated within your company and you want to master the art of css, master pages and page layouts. Within this one hour session, I will teach you the countermeasures required to masterfully brand SharePoint to your will. During this session, we will brand a site from scratch with our bare hands and this will be the initiation into the SharePoint Design. At the end of this session, I’ll teach you legendary abilities of SharePoint Designers including invisibility, walking on water, and control over master page content placeholders. You’ll also be given some secrets from within the walls of the Oniwaban such as practical tips, tricks, and advice so that you too can one day become a SharePoint Design Ninja.
http://www.kanwalkhipple.
In this session you will learn about how to change SharePoint site style and design?. We will review the topic related to branding as it relates to SharePoint as well as dive into the use of themes, master pages, page layouts and CSS to create a more good look and feel for SharePoint. We will also discuss the entire branding process from the creation of the design to the deployment.
Creating designs that will respond and work with multiple browser and device types has become more and more important. In this session we will examine the concepts behind Responsive Design and how you can and should apply them to SharePoint.
Optimizing SharePoint 2010 for Internet sitesKanwal Khipple
Optimizing SharePoint 2010 for Internet Sites
This presentation is focused on public facing sites. Many of the tips can be used for intranets, extranets and are certainly applicable.
This is a level 200 session that includes beginner / intermediate tips
There are tips for administrators as well as developers
There will no demo’s
My goal for this presentation is to give ideas on things you might not have considered
I’d love to have a discussion around these tips and
share your war stories
User Centered Design and SharePoint Publishing PortalsTom Pham
Usability and User Experience.
The User Centered Design Process (UCDP), taking designs from Abstract to Concrete.
Identifying Measures of Success.
Putting together a UX Team.
Microsoft’s Web Content Management System - SharePoint Publishing Portals.
Publishing Site Components - Master Page, Page Layouts, CSS, JS, XSLTs, Web Parts.
Leveraging CSS Frameworks for responsive web like Bootstrap.
In these slides we provides information about new technology (CSR) to learn you how to customize the way users interact with list data, and how to develop solutions that change the way data is rendered.
SharePoint Branding Guidance @ SharePoint Saturday San DiegoKanwal Khipple
In this session, we are going to brand a SharePoint site from start to finish. We will use SharePoint Designer, HTML and custom CSS to design a site how not to look like SharePoint. We'll touch upon themes, page layouts as well as master page design. As well as learn how to upgrade a SharePoint 2007 design to SharePoint 2010.
This session is focused on designers well versed with HTML and CSS but might not have the SharePoint development experience. Within the session, we'll also look at usability, accessibility and best practices on branding SharePoint public facing sites.
As the focus shifts towards working in the “cloud” more and more businesses are utilizing Office 365 for their corporate intranets. This creates new challenges from a User Experience design. In this session we will dive into the methods for customizing an intranet built on Office 365. We will look at the options for customizing and how you can take these options further.
Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy DewCathy Dew
This presentation begins down the path of how to customize SharePoint 2013 On Premises environments going through the Design, Development and Deployment stages.
A business owner nowadays needs to be able to attract and engage people to their website. In this session, learn to implement your company's brand on SharePoint 2010. During this session, we'll use the right tools to take a design from concept to a fully functioning SharePoint 2010 site. Based on real world experiences, this session is sure to give you some practical tips, tricks, and advice you can use immediately. Learn to leverage SharePoint 2010 tools to customize your experiences, and make them unique. You will be able to take this knowledge and deliver the best end to end experiences to your customers.
Abstract - Designing SharePoint 2010 for Business
A business owner nowadays needs to be able to attract and engage people to their website. In this session, learn to implement your company's brand on SharePoint 2010. During this session, we'll use the right tools to take a design from concept to a fully functioning SharePoint 2010 site. Based on real world experiences, this session is sure to give you some practical tips, tricks, and advice you can use immediately. Learn to leverage SharePoint 2010 tools to customize your experiences, and make them unique. You will be able to take this knowledge and deliver the best end to end experiences to your customers.
Bio - Kanwal Khipple, is a SharePoint Most Valued Professional (MVP) and Principal SharePoint Architect for BrightStarr. Kanwal focuses on designing adoptable solutions using SharePoint. In the past 7 years, he has developed, implemented and architected hundreds of SharePoint solutions from small single server deployments to globally dispersed SharePoint server farms that can handle 120,000+ users. Kanwal lives in Toronto, Canada and you can find him tweeting, buzzing and blogging on his personal blog. Connect with him on LinkedIn to learn how you can quickly start getting ROI for your SharePoint Intranet.
You are about to embark on a journey of becoming a SharePoint Designer Ninja. SharePoint has infiltrated within your company and you want to master the art of css, master pages and page layouts. Within this one hour session, I will teach you the countermeasures required to masterfully brand SharePoint to your will. During this session, we will brand a site from scratch with our bare hands and this will be the initiation into the SharePoint Design. At the end of this session, I’ll teach you legendary abilities of SharePoint Designers including invisibility, walking on water, and control over master page content placeholders. You’ll also be given some secrets from within the walls of the Oniwaban such as practical tips, tricks, and advice so that you too can one day become a SharePoint Design Ninja.
http://www.kanwalkhipple.
In this session you will learn about how to change SharePoint site style and design?. We will review the topic related to branding as it relates to SharePoint as well as dive into the use of themes, master pages, page layouts and CSS to create a more good look and feel for SharePoint. We will also discuss the entire branding process from the creation of the design to the deployment.
Creating designs that will respond and work with multiple browser and device types has become more and more important. In this session we will examine the concepts behind Responsive Design and how you can and should apply them to SharePoint.
Optimizing SharePoint 2010 for Internet sitesKanwal Khipple
Optimizing SharePoint 2010 for Internet Sites
This presentation is focused on public facing sites. Many of the tips can be used for intranets, extranets and are certainly applicable.
This is a level 200 session that includes beginner / intermediate tips
There are tips for administrators as well as developers
There will no demo’s
My goal for this presentation is to give ideas on things you might not have considered
I’d love to have a discussion around these tips and
share your war stories
User Centered Design and SharePoint Publishing PortalsTom Pham
Usability and User Experience.
The User Centered Design Process (UCDP), taking designs from Abstract to Concrete.
Identifying Measures of Success.
Putting together a UX Team.
Microsoft’s Web Content Management System - SharePoint Publishing Portals.
Publishing Site Components - Master Page, Page Layouts, CSS, JS, XSLTs, Web Parts.
Leveraging CSS Frameworks for responsive web like Bootstrap.
In these slides we provides information about new technology (CSR) to learn you how to customize the way users interact with list data, and how to develop solutions that change the way data is rendered.
SharePoint Branding Guidance @ SharePoint Saturday San DiegoKanwal Khipple
In this session, we are going to brand a SharePoint site from start to finish. We will use SharePoint Designer, HTML and custom CSS to design a site how not to look like SharePoint. We'll touch upon themes, page layouts as well as master page design. As well as learn how to upgrade a SharePoint 2007 design to SharePoint 2010.
This session is focused on designers well versed with HTML and CSS but might not have the SharePoint development experience. Within the session, we'll also look at usability, accessibility and best practices on branding SharePoint public facing sites.
SharePoint 2013 Web Content Management for Developers TSPUGEd Musters
As presented to the Toronto SharePoint User Group on March 20, 2013. With powerful new content search capabilities, metadata driven navigation, and new features such as design manager and cross site publishing, this presents a paradigm shift for developers with a focus on WCM publishing sites (intranet, internet). These new features and capabilities will be presented at an introductory level during this talk. The session will then focus on your typical Visual Studio “Publishing Solution” in SharePoint 2010. How do you get this running on a SharePoint 2013 Farm “as is” (migration)? What is involved if I want to convert my existing visual studio solution to SP 2013 developer tools and then fully over to the SP 2013 publishing paradigm? We’re already in development of a SharePoint 2010 site - can we deploy SharePoint 2013 now or should we wait? This session will provide insight into how you should develop today, and be ready for the new world that awaits in SharePoint 2013!
SharePoint 2013 Web Content Management for Developers HSPUGEd Musters
As presented to the Hamilton SharePoint User Group on March 21, 2013. With powerful new content search capabilities, metadata driven navigation, and new features such as design manager and cross site publishing, this presents a paradigm shift for developers with a focus on WCM publishing sites (intranet, internet). These new features and capabilities will be presented at an introductory level during this talk. The session will then focus on your typical Visual Studio “Publishing Solution” in SharePoint 2010. How do you get this running on a SharePoint 2013 Farm “as is” (migration)? What is involved if I want to convert my existing visual studio solution to SP 2013 developer tools and then fully over to the SP 2013 publishing paradigm? We’re already in development of a SharePoint 2010 site - can we deploy SharePoint 2013 now or should we wait? This session will provide insight into how you should develop today, and be ready for the new world that awaits in SharePoint 2013!
In this session, we are going to brand a SharePoint site from start to finish. We will use SharePoint Designer, HTML and custom CSS to design a site how not to look like SharePoint. We'll touch upon themes, page layouts as well as master page design. As well as learn how to upgrade a SharePoint 2007 design to SharePoint 2010.
This session is focused on designers well versed with HTML and CSS but might not have the SharePoint development experience. Within the session, we'll also look at usability, accessibility and best practices on branding SharePoint public facing sites.
Branding and designing capabilities with the Design ManagerMalin De Silva
Creating a compelling look and feel is important for improving the user experience as well as holding the organizational identity. SharePoint 2013 Design Manager make this process much easier and well defined with many capabilities included with it. Design packages, display templates, device channels, themes , image renditions and snippets are the core elements included with Design Manager.
Where did design view go in SharePoint DesignerPatrick O'Toole
This presentation goes into the role of the SharePoint 2013 Power User and how things have changed for them since SharePoint 2010. This was presented at the Chicago Developers SharePoint User Group in July 2013
What's new in SharePoint 2013 and is it worth migrating to. This webinar was recorded and available on http://en.share-gate.com/blog for you to view.
Whether you want to learn more about SharePoint's new interface, search, WCV, this presentation helps you discover them quickly.
Getting started with SharePoint MasterPage Customization (Volume 2)Velocity Software
Are you facing issues while customizing your SharePoint 2013 site? It is time to make the entire process simplified by the step by step guidance through this blog.
2. Out line Definition of Branding Why Brand SharePoint? How Branding Works in SharePoint Design Considerations Creating Wireframes Tools of the Trade DOCTYPE! & SharePoint CSS in SharePoint Case Study
3. Definition of Branding Branding is the act of creating a specific image or identity that people recognize in relation to a company or product.
4. Definition of Branding When referring to websites, branding usually involves the COLORS, FONTS, LOGOS, and SUPPORTING GRAPHICS that make up the general look and feel of the site.
5. Why Brand SharePoint? The most common reason is to make it unique. Making it “NOT look like SharePoint” is a basic request. For intranet site: A company might want to brand its intranet site to help convey to employees a sense of collaboration, teamwork, and even family. For internet site: A company want to communicate to this external audience information about your company, such as its services or products.
6. Branding Is Just the Tip of the Iceberg Sharepoint Branding (LOOK & FEEL) Page Layout Navigation Site Templates Search Scope Site Definitions Custom Web Parts
9. How Branding Works in SharePoint Themes In SharePoint 2007, themes were stored on the server in the SharePoint 12 folder, and consisted of XML, CSS, and images that were applied over the top of the default master page and CSS. In SharePoint 2010, themes are created with the Microsoft Office client software (2007 and above), using either Word or PowerPoint to create .THMXfiles that describe the 12 theme colors and two fonts available in the new SharePoint themes.
10. Master page In SharePoint 2007: DEFAULT.MASTER and APPLICATION.MASTER. In SharePoint 2010: V4.MASTER: default master page that is used for many of the site templates NIGHTANDDAY.MASTER: This master page is accessible only in a SharePoint Server 2010 MINIMAL.MASTER: This master page is used only on pages that have their own navigation or need extra space (such as dedicated application pages or the search center). How Branding Works in SharePoint
11. How Branding Works in SharePoint Using a starter Master Page: Microsoft’s Starter master page: http://code.msdn.microsoft.com/odcSP14StarterMaster. This Starter master page was built for SharePoint Foundation 2010, SharePoint Server 2010. My own Starter master pages: (http://startermasterpages.codeplex.com) Heather's Base Master Page: http://www.heathersolomon.com/downloads/heathersbasemasterpage.zip
14. Creating Wireframes Wireframes are skeletal page designs; they capture the layout and flow of a website without focusing on colors and graphics. SharePoint wireframing and prototyping: http://intranetfactory.com/site/sampleReport.doc Demo: http://intranetfactory.com/Viewer/site1459/default.aspx?NodeId=33129 Resources for Visio : http://www.guuui.com/issues/01_06.php
18. DOCTYPE! & SharePoint “Quirks mode” ?? The following is a list of the most popular DOCTYPES in use today: HTML 4.01 Strict : Allows all HTML elements but does not allow deprecated elements such as the <font> tag. HTML 4.01 Transitional: Allows all HTML elements including deprecated elements. XHTML 1.0 Strict: Similar to HTML 4.01 Strict, but all tags must be well-formed XML. Deprecated elements are allowed but must also be well-formed XML XHTML 1.0 Transitional: Similar to HTML 4.01 Transitional, but all tags must be well-formed XML. Deprecated elements are allowed but must also be well-formed XML Does/Will SharePoint 2010 support HTML5?
19. DOCTYPE! & SharePoint W3C HTML validator: http://validator.w3.org. With SharePoint 2007 & 2010, the resulting page will not properly validate as XHTML 1.0 compliant. This is because several legacy ASP.NET controls used in SharePoint 2010 do not produce valid XHTML code. Compatibility Mode in IE8 this feature to help with the display of web pages that were coded to older versions of Internet Explorer. <meta http-equiv=”X-UA-Compatible” content=”IE=8” />
20. CSS in SharePoint SharePoint 2007: you are probably familiar with core.css and its nearly 5,000 lines of CSS rules. SharePoint 2010: The default corev4.css: under 8,000 lines of code. And search.css: under 3,000 lines of code and wiki.css barely 50 lines of code Split into multiple files, only download what’s necessary for the page CUSTOM STYLE SHEETS <SharePoint:CssRegistration name=”/Style Library/customstyle.css” runat=”server”/> <SharePoint:CssRegistration name=”/Style Library/customstyle.css” After=”corev4.css” runat=”server”/> : SP2010 <link media="all“ type="text/css" href="/_layouts/styles/customstyle.css" rel="stylesheet"> CHEATSHEET CSS Reference Chart for SharePoint 2007 : http://www.heathersolomon.com/content/sp07cssreference.htm CSS SPRITES
22. THANK YOU Contact me: tuan.nguyenminh@officience.com Or minhtuan2086@gmail.com
Editor's Notes
Themes are very useful and provide a more lightweight way to brand your SharePoint site. A theme can change the existing colors and images of a site, but not the layout of the elements in the site design. A theme does not include any HTML or ASP.NET code, it is only a collection of image files and CSS files. The theme is applied on top of the site, replacing images and CSS styles in the site, essentially re-skinning the site. Themes can be used alone, or in conjunction with a custom master page.
Themes are very useful and provide a more lightweight way. A theme can change the existing colors and images of a site, but not the layout of the elements in the site design. A theme does not include any HTML or ASP.NET code, it is only a collection of image files and CSS files. The theme is applied on top of the site, replacing images and CSS styles in the site, essentially re-skinning the site. Themes can be used alone, or in conjunction with a custom master page.Often a theme can handle your design changes for SharePoint. The web page layout for SharePoint uses the standard formula of header, main navigation across the top and a left navigation area. If your design includes the same layout, you may be able to create your design only with a theme. Themes can be used to alter a design to create different variations of a design for departments, divisions or regional sub sites.Themes affect all aspects of a site, including the application screens.
If your design really deviates from the standard SharePoint look and feel, master pages are for you. They allow for the most finite control over your page design.Multiple master pages can be created for various site needs, such as home splash screens, sub page designs, regional or divisional designs, etc.You can assign a master page to an entire site, or to a single page, and several options in between. You have excellent control of where the master page is applied within your site.
When creating a brand for SharePoint, a key consideration is what pieces of SharePoint functionality will be supported by the design. A typical SharePoint page is made up of several controls and other pieces of functionality. Some of these functional controls are required in order for SharePoint to be used, but others are purely optional, based on your own project requirements.
Before starting any HTML web page, you first must decide which DOCTYPE will be used. A DOCTYPE is a piece of code that is declared at the top of a document that instructs browsers or other software to use a specific language to interpret the rest of the included code. If you haven’t heard of DOCTYPEs, you may be thinking that all browsers already understand HTML, so why the need to declare a DOCTYPE at the top? In fact, without any other intervention, an HTML page without a DOCTYPE is rendered by Internet Explorer in what’s known as Quirks mode. Quirks mode is similar to how IE 5.5 rendered pages, which can’t be a good thing; it was released ten years ago after all!