In our own SharePoint seminar Hyvät, pahat ja rumat (the good, the bad and the ugly) I gave a presentation on SharePoint Branding - what you can do and how you should do it. Many aspects of this topic I have covered in several posts in this blog from a quite technical perspective, jumping straight to how. Let's have a look at the what and why, and a bit more general how.
Why?
SharePoint out of the box is fully functional and ready to use from the UI perspective, too. But to be honest, it's not exactly pretty. Whereas the v4.master for team sites is maybe adoptable for a team site based intranet, the nightandday masterpage can really not be seen as anything else but an example of a publishing master. Neither one of them has the look and feel of the company implementing SharePoint, naturally. The best you can do without some sort of web development is use themes and change the logo, and save the site as template.
In most cases this is not enough. Even the intranet should look nice and reflect the company brand. Once I had made this branding solution to a company, the page all branded and looking nice, but when the customer representative first saw it, his first comment was: "That ribbon is the wrong color!" I changed the color of the ribbon row and he sighed: "Now it's feeling more homey." Despite what the IT guys and the developers might like to believe, branding is important, beyond the usability issues.
What?
SharePoint pages are HTML and CSS, just like any other web pages. It's got a whole lot of server side C# code and client side JavaScript in it, but as for the UI, it is (to be exact) XHTML (1.x) and CSS (2.1), and thus almost as customizable and flexible as web development in general. Almost. So why isn't any web developer capable of SharePoint branding? Because of the server environment, special functionalities and UI with the ribbon and webparts, and that server side code.
It is essential to understand the structure of SharePoint in order to understand what can be done, what not, and how to do it in a SharePoint way. You need to know about the SharePoint controls in order to know what to use and what to maybe ditch. You need to know that you can never ever delete the PlaceHolders from the masterpage (the what from where? - exactly! you need to know!). You need to know that there are limitations to the branding. E.g. webparts have a table-based HTML structure with a limited amount of unique IDs and as for the branding of web parts you are tied to this. You can go to an extent, but you may not be able realize all of the wild visions of the designer who knows nothing about the SharePoint limitations.
How?
Microsoft and several other instances promote SharePoint Designer a lot. But seriously: it is a good tool for e.g. external data connections, customizing list views on a specific page, creating a custom workflow etc. stuff for a single existing site, but it is not a branding tool when you want to have a managable branding solution that can easily be deployed in several site collections and not breaking with migration. For that, you really need a proper SharePoint branding solution made in a managable way in VisualStudio, deployed as a .wsp package, full with features.
A typical branding solution can contain:
Currently I still use XHTML and the CSS v2. There are a whole lot of IE7s still in use in the customer organizations, and even these web technologies create some problems with IE7 and require some specific CSS rules (instead of separate stylesheets, I prefer the * prefix to target IE7) in order to look like it should. HTML5 used in the way intended requires a whole lot of polyfills to work in older browsers, and CSS3 features are still partly browser tech dependent (i.e. webkit vs. moz) as is, so using those already means double work in many places, let alone targeting IE7, unless we simply decide the IE7 users be left with a less rich UI.
But, the future is in HTML5 and CSS3 plus JavaScript, so it's only a matter of time really. Mobile world is already there, more than the regular PC.
Some resources for browser compatibilities:
http://html5readiness.com/
http://mobilehtml5.org/
http://www.findmebyip.com/litmus/
http://www.quirksmode.org/m/table.html
No comments:
Post a Comment