Friday, November 30, 2012

Legible Master Pages in Sharepoint 2010

Sharepoint 2010 Default Look. 
People pay money to work with this.
Bright thought: they may pay you some money to
make it stop looking like this.

Default Sharepoint 2010 styling can best be described as Suits Laughing Alone With Salad, which is to say: it has been designed to appeal to a market that still thinks of  Pierce Brosnan in a power suit as the ideal of Western masculine power. This should not devalue what Sharepoint is actually good at, which is working in a sealed, all-Microsoft environment all the time.

The front-end Sharepoint server technologies are a non-satirical pastiche intended to support and extend existing corporate office software, in which many people have heavily invested. Specifically, they are designed to extend Microsoft Exchange Server.

Here is an interlude about Bill Gates killing the Courier tablet because he had an allergic reaction to an MS product that did not support Exchange.

You are probably only vaguely familiar with the Exchange software, or its design language, because I am assuming you spent the late 1990s and early 2000s down an internet K-hole seeking Highlander/Final Fantasy 7 fanfic* and reading the sort of webcomics Scott McCloud would later write many books about.**
*Pornography.
** Illegibly formatted.

The outdated design language is there on purpose. It is not for early or even middle-term adopters. It is for Late Or Not At All adopters, and they like it that way. One of them is mourning their Blackberry right now. That one is not a teenage protester in London. You probably use ScrivenerOpenOffice or Google Docs to get all your actual work done. You almost certainly do not print reports. You may not print anything ever.

Sharepoint 2010 was not designed for you.

It is now your job to make sp2010 appear beautiful, functional, unthreatening and contemporary but not too contemporary. Let's get started.

First things first: Randy Drisgill is a good place to start for a simple master page that rewards actual customization. He implies 2013 will be better, but you probably aren't going to get to work with 2013, because it is probably expensive, and 2010 works fine. Ideally, purchase a copy of his book, Sharepoint 2010 Branding. It has deep secrets and lends your desk credibility.
Left nav of Sharepoint Designer

  1. Open Sharepoint Designer, heir of MS. Frontpage, get all your permissions in place, and log into your site.
  2. From your main site, look at the left nav.
  3. Go to the Master Pages entry.
  4. This is your directory where the control page that loads all your other pages lives. It is the Frame Page that loads your Page Layouts.
    • We still use frames as a metaphor here in 1999.
    • Rawwrrr, red power tie.
  5. You will notice that even the v4 master pages are full of weird callbacks.
  6. Go to Codeplex and download the 2010 starter pages from Randy Drisgill. 
    • Sixty three thousand downloads can't be wrong.
  7. Unzip those into Notepad ++, set the language to ASP, and and have a look through. They are dead simple and clean.
  8. Have you got a document reference for how your website should look, like a pre-existing intranet?
  9. Open Chrome's browser tools and seek out where the current intranet's stylesheets have been hidden.
    • Press F12 to open Developer Tools.
    • In the tab marked "head" there will be a dropdown.
    • Somewhere in there will be a linked file marked *.css
    • Click it and open it up in a browser window.
    • Copy and paste it into Notepad ++.
    • You now have a guideline for how your intranet should look.
      • You have not had to have a Consultation about this with any other department. Productivity win.
  10. Take a copy of Default.Master.
  11. Gut it and replace the contents with the Simple Masterpages code from Drisgill.
  12. Save this master page as [yourOrgName].master.
  13. You now have a fresh master page to work with which is in your hive, without you having had to touch the hive in any way.
This page will be what we work with going forward as we do things like customize page layouts and implement existing organizational CSS to make everything look familiar while running smoothly into a new corporate future.

No comments:

Post a Comment