Making SharePoint Responsive, Part 1

The hottest web trend right now seems to be “Responsive everything!!!!!!”. Well-done responsive websites are a good thing but are not necessarily easy to create. I recently had to retrofit a web application to make it mobile optimized and it was fairly painless, though trying to make complex forms responsive caused some rework. My programmer’s eyes glazed a bit when I told him what he had to do to each field to make it flow ever so nicely. Retrofitting more complex websites seems like an impossibility-it really does pay to be mobile first and design your sites with responsiveness in mind from the beginning.

My latest SharePoint project, a state agency website, was not designed to be responsive. The agency wanted it to resemble ms.gov and the mock ups they approved were of a fixed-width design with a few tricky design elements I had no idea how to build. Because I love pain, I decided “Let’s go responsive-with SharePoint!”. I used Twitter Bootstrap as my flexible grid and I created the base site design in Dreamweaver, as I do with all my sites. I tested it in IE and Chrome and my little media queries were working great. Then I pulled the code into SharePoint. And then the real pain began.

I use Randy Drisgill’s base masterpage as my starter for all my SharePoint sites, so I used it here as well. Unfortunately, for some reason when the viewport hit around 777 pixels it simply refused to respond any further. I removed all of my code line by line to see what was making SharePoint so angry. It was not the css, it was SharePoint, specifically, something being called from my masterpage. So I decided to try Kyle Shaeffer’s v5 Responsive masterpage. I added it to the site as is to verify that it worked before I made any changes. Happiness-it responded, no dreaded 777 pixel dead end. The masterpage has a bunch of controls  I never use so I stripped those out. The css was missing the magical code that makes images responsive so I added that. I pulled over the parts of Boostrap that mattered to me, the fluid grid classes, and left out all the non-grid styles. I integrated my code and voila! After, oh, maybe we are at 30 hours at this point since I rebuilt the masterpage like 4 times, I finally thought I had this sucker figured out.

I found the next issue when I started building out my page layouts. Certain admin screens, like checking in masterpages, site columns, contents types, pulled up an error. SharePoint has such lovely and useless error messages, they might as well say “you broke it You so dumb!” Eh. So today I opened my masterpage on one monitor, my standard masterpage on another, and I went down line by line and made sure every control that was in my regular masterpage was in my new one. The dreaded errors finally went away when I added all of the hidden controls. My regular maserpage had 20 hidden controls and my new one only had 16. Once I added the missing four the error just went away-I jumped up and squealed and decided I had earned a lemon ice for all my troubles.

I am happy to report that so far I have encountered no further issues with my new responsive masterpage. I am currently building out the page layouts and trying to get the site ready to start dumping content into it. I hope to launch this baby sometime next month. I still have several other technical challenges to overcome for this website, but I think I finally feel satisfied that I have created a fully responsive SharePoint 2010 site. I sooo need a nap..

More to come!

Faking Reusable Content Lists in SharePoint 2010

In my last post I was complaining about how I can’t get the reusable content lists to work right in SharePoint 2010. No matter what I do, or on what page in my site, if I add a reusable html item, the code is displayed rather than being rendered by the browser. After having to manually add side navigation to dozens of pages I said “truck this, there’s gotta be an easier way-mothertrucking Sharepoint!&*” (yea, i’m a dork). We have a folder that we created in Designer at the root of our site collection called “snippets”. We (by “we” I mean myself and my programmer partner in web crime, Jesse Kyzar) use this folder to store small bits of code that we use on the site. I created a blank html page, stripped out everything in it and just added the side nav code. I then added a content editor web part to the side column on one of my site pages and I connected the webpart to pull the html snippet file. Works perfectly. It takes a few extra steps to add and configure the CEWP on each page but it is a lot faster to add the CEWP’s and then update one file rather than worry about having to update dozens of pages if my nav content changes.

If anyone figures out why the reusable content list doesn’t work the way it used to please share. Until then I’m gonna do my method and just pretend the reusable content list doesn’t exist.

 

UPDATE 6/04/2012: Thanks to reader Aneville for cluing me in on why it was not working. Apparently I had a brain fart and was putting my html in the visual editor instead of the raw html dialog. When I add the content directly in to the html dialog it all works perfectly. I was seriously over thinking this and made something simple way to complicated. Thanks Aneville and everyone else who responded!!!

Starting a SharePoint 2010 Branding Project: Using v4.master as base

There are several ways that you can pursue a branding project with SharePoint 2010. You can use one of the new themes, override existing styles with a new css file, alter an existing masterpage, or go completely custom. For this series of posts I will share how I go about altering an existing masterpage and styles.

Make a copy of the v4.master
Open the v4.master in Designer and do a save as. Save the new file as something different, such as custom.master, and then open it in Designer. Make sure the file is checked out before you start editing it.

Create a custom css file
Create a new css file and save it to a location that makes sense to you. You can save it to the Styles library, or on the server in the 14 hive, or anywhere that is accessible.

Create a changes.txt file
Use this file to record changes made to the masterpage as well as to paste in any controls that have been removed from the masterpage.

Link to the new css file in your copy of the masterpage:
Paste the following code into the HEAD of the masterpage and change the link to refer to your custom css file:

<!-- custom css -->
<SharePoint:CssRegistration name="http://spimages.stei.com/sp2010/styles_senet03.css" After="corev4.css" runat="server"/>

This code assures that your custom styles will always be able to override the corev4 styles.

Apply your custom masterpage to a site

Right-click on the new masterpage and select Set as Default Masterpage. You will only be able to preview fully your masterpage changes if the custom masterpage is applied to a site. Make sure that after each change you save the masterpage, check it in and then approve it. Make sure to check the file out before editing it again.

Now you can start altering the masterpage and overriding the css.

Discovering Styles in Designer 2010

The standard method for finding out what classes are being used on a page in SharePoint is to use Firebug or IE Developer Tollbar. SharePoint Designer 2010 has a few new features that can also help in finding this information.

Skewer Click

In SharePoint Designer, open a page or masterpage and make sure that you are in Design or Split view. Click the Skewer Click button from the Home tab on the ribbon and then click on an object on the page:

Skewer Click

A list will then display with all of the classes that affect the object.

Skewer Click

When you select a class, its properties will display in the CSS Properties panel.

CSS Properties Panel

Copy Styles

An easy way to make a copy of a style that is applied to an object is to select the object, view the list of styles in the CSS Properties panel, and then right-click on a style and select New Style Copy:

New Style Copy

A dialog box will display. To copy the style into your custom css stylesheet, under Define in, select Existing Stylesheet. Then Browse for your custom stylesheet. You can then make changes to the css through the dialog box or you can keep it as is. Click OK.

New Style Dialog

Your custom stylesheet will then open in Designer with the selected style copied into it.

Copied Style

You can also choose to add the copy directly into your page by selecting Current Page from Define In and then clicking the box next to Apply new style to document selection.

Current Page

Designer will add the word Copy to the style, insert it into the page, and update the reference to the style within the HTML. Obviously, adding a bunch of styles directly to a page is not a best practice, but it is a possibility.