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 Scrivener, OpenOffice 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.

Why Sharepizzlybears?

Pizzlybears are the horrifying offspring of the two largest land predators, the polar bear and the grizzly bear. They will eat you. Fact.

Fact #1: Bears will eat you.

Fact #2: As a Sharepoint front-end developer and administrator, you need to have a stupefying combination of skills and cussedness to succeed at your job.

Effective Sharepoint administrator-developers are presently rare, but getting less so as the environment for your original self - Freelance Front End HTML5 On The Ice Floes or Paid Software Development In The Forest - gets compressed into one field, Underpaid Contractor With No Health Benefits Asked To Do Everything At Once. Sharepoint, like you, tries to do everything at once. To middling results.

 Sharepoint is a browser-based document server. It is good at version control, and telling you who last touched a given file or document. It is acceptable at backing up things that should not be deleted. It is a-okay at forms, provided you are accomplished at Infopath form development already. It has mostly useful workflows out of the box, although actually using them is counterintuitive and involves a great deal of permissioning work.*
*Most of your work will be permissioning work.

To do well with this software, you will need to be able to learn. The learning resources for it are as wide as the internet; it's broadly supported through MSDN, yet Google will be your finest resource for working out what has gone wrong today. Freelance Sharepoint developers are a bit screwed, because Microsoft's learning environment is an Ivy League college, refusing to post actual course summaries or reviews anywhere easy to find. The majority of learning resources are left to bloggers like me, or to Stack Overflow.

Because Sharepoint has been sold as doing everything for everyone, and because it has been sold to a large number of Old Guard who have never collaborated on a document before, it also has a number of very wealthy people who are also keen on Microsoft technologies. It is unwise to make them cross by suggesting that Sharepoint is over-engineered and less useful than lightweight competitors.

There is, in short, even less negotiation to be had with Sharepoint than with the offspring of the largest land predators. Good luck. You're going to need it.

Set Yourself Up for Sharepoint 2010 Development with Very Little Money

First things first! Let's get you set up for Sharepoint 2010 front end development and administration, with very little money, and almost no support from IT. We are assuming here that there is one of you, that you have administrator permissions on your computer, and that you are from a F/LOSS and or freelance* web developer position. Therefore, much of this software is free. Practically everything for Microsoft development is Expensive, because of the expectation that everyone who pays for Sharepoint has Enterprise Software Dollars**
* unsupported, underpaid, busy fighting with or for clients and now Sharepoint, too.
**A lot of dollars - which you will never personally see - dedicated to having a phone number you can call when things go wrong.***
*** Not quite enough dollars to fix the wrong thing entirely.

1. Sharepoint Designer 2010 64-bit
• Make sure you are using Office technologies on all either 32 or 64 bit. There is no mix'n'match, and if you install the wrong variant, you will be reinstalling everything so it matches.
2. Notepad++
• You will need a good text editor to do your work.
• You will not be doing this work on a mac.
• Are you trying to do this on a mac.
• Oh god. You're trying to do this on a mac. You're an idiot, you know that?
3. Boot Camp.
• Happily for you, I am also an idiot.
4. Windows 7
• Sharepoint is specifically designed to die on anything but a sealed Microsoft-only environment
• Which is why it will be one of those technologies that is a litmus for workplace quality in future
• Because proper houses that actually develop things use BaseCamp.
• Sharepoint is stored in-house and is therefore nominally more secure than Cloud Things.
• Clown Computing. Keep an eye out for Azure, even this tiny thread of happiness will soon be denied.
• I bet they named it that because it kind of sounds like "Assure."
• Which sounds like Ensure.
• Which I am certain they would prefer we "ate."
5. Chrome
• Their Developer tools are better at some things than others.
6. Fiddler Web Debugger
• Quite a lot of what you will need to do is encoded, and tough to find without it.
7. Cisco used to make a pretty okay VPN tunneller.
8. Reactivate Internet Explorer on your computer.
9. Grab Inkscape for vector graphics edits and Gimp for raster work.
10. Sweet-talk someone into giving you unlocked Visual Studio 2010 Unlocked Mega Developer Remix Edition With Passwords.
• Express has weird timeouts that mean you'll have to pay for it eventually anyway.
• pre-2010 flavours lack "make a thing for Sharepoint" project options, which means you will only be able to make a thing for sharepoint after puking levels of effort and research.
11. Inform your client base that you will not support any browser but Internet Explorer for Sharepoint purposes.
• Sharepoint relies on Active-X for multiple document upload because MS does not favour Java.
• See above Re: Sealed, Microsoft-only, high-profit-centre environment.
• Without multiple document upload, everything is madness for your clients.
12. If you are responsible for Security as well, encourage your client base to treat IE as a portal to Sharepoint and nothing else.
• Give them Firefox or Chrome.
• Try for Firefox 3 and Flash 10, which allows you to mess about with downloading YouTube videos out of cache.
13. Get your remote desktop client working, with permission to get to the server where Sharepoint 2010 lives.
14. Get all your permissions, account names, server names and etc. in place.

Got all that? Good. You're good to get started as a Sharepizzlybear.

This is going to be a character-building experience.

Getting Started

So! You have acquired a job with everyone's favourite document server, Sharepoint 20xx. 2010 is the best one to date, and one lives in hope that the future brings bright things, but it is still a miserable, shiftless experience in high memory usage and bugs that will not quit.

Sharepoint is, put mildly, no bloody fun to work with. There are approximately four people in the world who are any good at it, and they work for Microsoft.

The documentation you can find (good luck) will be full of back end solutions, hive hacking, and no answers.

None of the posts here will touch on C# or back-end development, as most of what you can do back end can be done front-end faster, easier, and without having to know what a "sandbox solution" is. People will constantly tell you this is "not supported," but as it is very challenging to find out what is supported, this may be the best you, the administrator with web development experience, can manage.

Here, then, is a blog that collates the best of the best.

Projects That Require Posting:

1. Designing custom stylesheets and master pages to make Sharepoint appear to be "fun," without crashing everything.
2. How to use the Content Query Webpart to get useful information into your page, via Heather Solomon.
3. How to structure a sharepoint 2010 information architecture
• Permissioning the architecture
• Sorting out where to put the subsites
• Customizing a useful frontpage for teams
4. Document Libraries best practices
• Naming conventions
• When to use folders (when you need folder permissions)
• What is version control
• How to make a library semi-private
5. Calendars and their uses
• Make coloured calendars in jQuery.
• Debugging the resource calendar so that it works to reserve spaces and devices.
6. Semi-private form libraries
7. Form customizations
• Getting forms to open in browser, always, rather than in Infopath
• Workflow customization
• Clayton Cobb/Itay Shakury's GetProfileByName technique
8. Customizing announcements lists such that they look nice.
9. Using RSS readers and styling them in sharepoint.