Introduction to Branding SharePoint


Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • I have taken some samples from Ian Morrish’s WSS Demo Top 100 Best Looking Public SharePoint sites. My intention of putting these slides in is to give you a feeling that anything is possible. However, it’s not to say that every sharepoint site should have a wiz and bang effect.It really depends on the user base and how the site is going to be used.You would not want to put a 600px high header in a corporate internal website for 120 thousand users who really just care about getting access to their project documents.
  • It is quite impressive seeing the diversity and complexity on some of these designs.I have heard many times from my clients saying that they don’t want SharePoint to look like SharePoint…Does this mean that Microsoft dropped the ball when it comes to design?
  • The design process can be broken out into 7 different steps. There will be some cases where there will be some overlap but in most cases each step is dependent on the previous steps completion and sign off.Within each one of these steps I have identified some of the roles that help contribute towards them.Within the first step is gathering the system requirements, visual design guidelines, tone, and the creation of the creative brief.In step 2 the requirements are prioritize and identified into development iterations.In step 3 the IA will build out the site mapIn step 4 the IA will create wireframes starting with the high level templates and functional areas.In step 5 the visual designer will produce visual design comps per the requirements of the creative brief.In step 6 the visual designer will take those approved wireframes and combine the visual design into those templates.In step 7 the front end developer will take the final approved visual designs and start building out the CSS, Images, and Master pages to support the design.
  • The first thing you need to think about when trying to identify a new brand is know your audience and who will be doing the approvals. Get them on your schedule for reviews early and often.I have used a few check list approaches to identifying what someone wants their site to look like. I usually approach it from a few different angles.Ask them about design treatments, what kind of mood would be appropriate, and if there are any existing sites out there that they like and don’t like. This will help guide you down a path in the right direction.
  • The next thing that you need to understand is the scope of the design. Is it a brand adaption of their current public site into their internal site?Is it a quick skin of SharePoint but no major overhaul to the master page?Or are they wanting to make SharePoint not look like SharePoint and create a visual design like some of the examples that I showed earlier?
  • The next thing that you need to understand is the depth of the customizationsWill the changes be made for all sites and pages, just within 1 site collection or just within 1 page.Based on scale, it will effect which design implementation will be used.
  • What you will also want to make sure you review is any current styleguides, logos, websites, images, etc.
  • The last type of requirement that you will need to understand is browser support.Will the site be a fixed with or will it expand with different monitor sizes?What is the smallest supported size before scroll bars will be visible?What browsers will be supportedWill there be a need for any extra styling for print requirements?And will the site support mobile devices beyond the in box features of SharePoint
  • I myself like using the top down approach. Start with the main sections of the page and work your way down.If it’s a global implementation make sure you test out all site templates including meeting workspaces and My Site’s.
  • The main tool that you will use to customize your CSS and your master pages is SharePoint Designer. Since it’s free now, you have no excuse.The more complex the change the more you will need to lean towards Visual StudioSome changes can even be made within the UI of SharePoint.
  • Themes are good in certain places, they get applied to individual sites but cannot be distributed globally.
  • IE Developer toolbar is your best friend when building out CSS. It has an option to hover over elements on the page and as you click it shows you the classes and id’s for that element. Firefox also has this option so use the tool you most feel comfortable with.I remember back in the day when I had to view the source of the page to find classes, well no more. Download it and use it, I guarantee you will love it. I did hear that IE8 has this built in but for some reason they stripped out some of its functions…
  • I am going to go through these pretty quickly, but I wanted to highlight some of the pro’s and Con’s for different types of implementation methods.By Modifying the core CSS file on the server it’s the quickest and easiest way to brand all sites and pages for a SharePoint farm.A few primary issues is that its farm wide and there is risk’s of it being overridden during migration or service pack updates.
  • By adding a reference to a alternate CSS file within a server side master page such as default.master you will get the global changes but also have the same risks as the previous implementation.
  • If you are creating custom site definitions you could attached a alternate CSS file to those templates.If you do go this route not all system pages will be affected.
  • This is probably the most supported method by Microsoft but it does have its drawbacksWithin each site collection the master page will have to be uploaded and applied. Some system pages with the /_layouts will not have branding applied.
  • The Alternate style sheet method is helpful if you need to make small changes to a sites design But as new sites are created this does not get applied automatically to new sites.
  • The last method has the least footprint on the system. If you add style tags within a content editor you can simply modify the style of the elements on that particular page.
  • Here is a simple diagram that I created explaining the process of feature stapling CSS for visibility on all sites and system pages.
  • This page just shows the list of CSS files, Locations for the CSS and Images on the server, and image folder sizes.
  • ×