Sharepoint Branding & Customization Behind the Scenes: Responsive, SharePoint, the new ms.gov, 2013 Version

Maybe I can get some sleep now… I swear, I have never worked so hard on a project in my life, and I know I will have more tweaking to do before it’s all said and done… We all worked really hard on this and we are very excited to create this site for the state of Mississippi and its citizens!!! SharePoint isn’t perfect yet, there are many things I would add to make SharePoint better suited for internet-facing sites, but I hope this site, along with the others I have posted from our sibling portals, can show you what is possible right now with SharePoint 2010. Maybe for the next refresh we will be in 2013, we’ll see 🙂

The goal for this redesign was to be user-oriented and to provide the citizens of Mississippi the content that they routinely search and ask for. We based these decisions off of Google Analytics, customer service feedback, and webmaster feedback. We tried to provide the most used links in a compact design while still providing an attractive interface. We weren’t trying to create a brochure site or a travel-theme site, this is a state website meant for users to come in, get what they need, and get on with their day. We added new content throughout the site, such as the Governor’s Initiatives  and the Mississippi Maps pages. We also rebuilt our Agency Directory, which is the most used feature of the entire site, in .net so that it was easier to update, faster, and with more agency content.

ms.gov

devices_multi

Highlights:

  • SharePoint 2010 site (Home page is NOT in SharePoint, nor is the Feedback page or the Agency Directory-they are .net)
  • Responsive, html 5 site
  • Sliders are swipable on iPad, iPhone, Kindle Fire
  • Uses Google Fonts, Google and Bing mapping technologies, JQuery and SP Services, a hybrid V5 and Randy Drisgil masterpage, and Twitter Bootstrap

Dev Team:

  • Creative Director, SharePoint Branding & Customizations, Data View Web parts, CSS: Michelle Pakron
  • .Net and Javascript Programming: Jesse Kyzar
  • Databases, mobile ms.gov iPhone app development: Spencer Jones

 

Internet-Facing Sites with SharePoint 2010: Tips, Tricks, & Gotchas

This post will be a collection of the lessons I have learned over the past 14 months building internet-facing SharePoint sites. I will add to it as I remember things I have learned 😉

 

  • Start with a solid base. I have used two different starter masterpages, one from Randy Drisgill  (used on ms.gov) and one from Kyle Shaeffer   (an altered version was used as the base for Its.ms.gov)
    • I edited both and added customizations to suite my needs. I used Kyle’s for a responsive site, though I took the ribbon code from Randy’s and made some other alterations.
  • If you are going responsive, use a solid framework. I used a modified version of Twitter Bootstrap along with my modified masterpage from Kyle Shaeffer. Kyle includes some SharePoint resets and a script that helps to counter some SharePoint wackiness when going responsive.
  • I design internet-facing SharePoint sites the same way I do any other type of site. I create a mockup and then build it out in Dreamweaver using HTML 5 and CSS3. Of course, having a strong knowledge of SharePoint helps in deciding what element s of my design should be lists, which should be data views, and which should be some groovy JQuery thingy that I need to pull my developer in to build. Once I build out the unique pages (usually home, sub, full width layouts) I then test these in IE 7-9, Chrome, FireFox, and Safari. I make any corrections for IE and then I pull the designs into SharePoint Designer.
  • I have found that no site that works perfectly outside of SharePoint will work perfectly once inside. I usually have at least a few minor CSS issues to correct, generally having to fix any CSS declarations for global tags, like ul’s and img’s. I try to make all of my styles contextual so as to not override the ribbon or editing interfaces.
  • When things don’t work correctly, I find that I usually have misspelled something. I have a habit of spelling Bootstrap as Bootsrap-I wasted an hour trying to figure out why my grid was collapsed until I realized my spelling error.
  • Fun With Anonymous Access
    • Internet-facing means anonymous access. This means that many features of SharePoint are no longer supported without being logged in. For example, I had hacked a list entry form to serve as a contact form. User adds their info, hit the button, data gets sent to list, which kicks off workflow that emails user’s contact info. A simple solution that removes the need for a developer to create a table in a database and having to code out an entry form.  While this works perfectly in a authenticated environment, the minute we turned on anonymous access in our UAT environment, the login popped up when users went to this page. Anonymous access won’t allow adds to lists by non-authenticated users by default. So scratch that solution.
    •  Also, if you don’t turn off mobile rendering in Central Admin, your internet-facing site will force a login to display on mobile phones. You want to turn this off for another reason-mobile rendering is horrible; it’s literally a list of links, and not the ones you want your users to see.
    • JavaScript also has issues with anonymous access. Our developer had used JavaScript to query lists and pull back data for several directories on ms.gov. We noticed issues in IE 7 first. We got those fixed and then when we tested with anonymous access we realized we had a problem-login prompts. I blogged previously about these issues. Thankfully Marc Anderson tipped us to his wonderful SPServices JQuery library and our developer was able to get his directories working with anonymous access. If you plan on using JavaScript to query lists or services, save yourself some misery and check out SPServices first.
  • Why So Slow?
    • We know the trend in web design now is large photos EVERYWHERE! That’s great and all, but SharePoint tends to be slower than regular websites already, adding huge images just makes it worse. We optimized all of our images as much as possible, made sure we used progressives jpegs, minified our css and js files, and still ms.gov was just too slow. I stumbled upon a setting in Site Settings that I had never noticed before: Site Collection Output Cache. Turn this on and set your profile to Public Internet and you should find that your site starts to perform better.
  • Large Lists Not Displaying for non-admins
    • If you have a list with more than 5000 items and you are querying it and the results are not showing up for non-admins, have your farm admin adjust the list view threshold. The default limit is 5000; raising it above the number of items in your list will allow the queries to function properly. If you have several lists that have over 5000 items you might want to look into other methods for handling so much data, but in a pinch this works well. Note that this setting is on a per site collection level.
  • Publish!
    • Ever run something all the way up the flagpole to production and then notice either missing image icons or logins popping up randomly? I bet one or more of your files isn’t really published. Depending on how your site was set up, you may have lists that require approvals before the assets are published, or you may have checked an item in and not published it. Go to site actions > Manage content and structure, and view all of the items in draft mode. This goes for reusable content list items as well.

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!

JQuery Tip: Use JQuery to alter css

This is a quick tip if you want to easily override some css or hide some elements on a specific page, using JQuery is really easy and it works well. Of course, the example below is overkill as you can easily use css to do the same thing, I am simply showing that it is possible.

1: make sure you have a link to JQuery in your master page in the HEAD:

<script src="'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>  

2: add a content editor web part to the page you wish to alter

3: use the css() method to target any html tag, css class or id
EXAMPLE:
Say you want to hide the quicklaunch on a page. Use the IE Developer tools to inspect the page and find the outer wrapper for the quicklaunch (.ms-quicklaunchouter). Now add the following code to your content editor web part in code view:


<script>
$(document).ready(function() {
$('.ms-quicklaunchouter').css('display','none');
});

</script>

The area where the .ms-quicklaunchouter is displaying is where you would reference any html tag, ID, or class. ‘Display‘ is where you reference the property, and ‘none‘ is where you reference the value. With this one method you can override pretty much anything on your site.

If you want to override a style across your site collection, create a functions.css file, link it to your masterpage under the initial JQuery link, and put all of your functions there.

Fun with the UserProfileService web service in InfoPath, part two

Part Two: Using the UserProfileService to Auto-Fill Fields

Today we will be using the UserProfileService to automatically populate the following fields based off the current logged user:

  • My Name
  • My Email
  • My Title
  • My Department
  • My Manager
  • My Manager’s Email
  • My Manager’s Title

If you haven’t already connected to the webservice, follow the instructions in Part One: Connecting to the UserProfileService web service in InfoPath

Once you are connected to the service, create a new InfoPath form and add the fields listed above. Your Form should look something like this:

Double-click the My Name field. Select Control Properties from the Properties tab in the ribbon. Under Default Value, click the fx button:

Click Insert Field or Group:

The Select a Field or Group dialog will display. Select GetUserProfileByName from the Fields dropdown:

Expand out the dataFields node until you get to Value. Select Value and then click Filter Data:

Click Add on the Filter Data dialog:

Under the Value dropdown, select Select a Field or group. Select Name from the Select a Field or Group dialog. Click OK:

In the third dropdown in the Specify Filter Conditions dialog, select type text and then type in PreferredName:

Click OK and then click OK on all the open dialogs. You will then follow these same steps on each of the following fields; substitute the listed text for the PreferredName text:

  • My Email: enter text Email
  • My Title: enter text Title
  • My Department: enter text Department

You should now have all of the My Info fields created and have default values added for each. For the manager’s section, we will add a new data connection using the UserProfileService, except when you get to the Operations screen, instead of selecting GetUserProfileByName you will select GetCommonManager:

Once the new data connection for GetCommonManager is made, select the control properties for the My Manager field, click the fx button, click Insert Field or Group. In the Fields dropdown that displays on the Select a Field or Group dialog, instead of selecting GetUserProfileByName, select GetCommonManager. Expand out the GetCommonManagersResult node and then select Name. Click OK on all open dialogs:

Follow these steps on each of the remaining Manager fields with the following substitutions in the Select a Field or Group > GetCommonManagerResult node:

  • My Manager’s Email: select Email
  • My Manager’s Title: select Title

Save your file and preview. your result should look like this:

Stay tuned for Part Three: Using the GetCommonManager function to display a user’s supervisor hierarchy.

Fun with the UserProfileService web service in InfoPath!

This will be a multi-part post about using the UserProfileService web service with InfoPath. I am using InfoPath 2010 and SharePoint 2007.

Part One: Connecting to the UserProfileService web service in InfoPath

  • In InfoPath 2010, click on Manage Data Connections at the bottom of the Fields panel:

  • The Data Connections dialog will display. Click ADD:

  • Under Create a new connection to:, select Receive data and then click NEXT:

  • Under From where do you want to receive your data?, select SOAP Web service and then click NEXT:

  • Enter in the address for the UserProfileService, which will be: yourSite/_vti_bin/UserProfileService.asmx. Click Next:

  • Under Select an operation, choose GetUserProfileByName and then click NEXT:

  • On the next screen that displays, keep the defaults and click NEXT:

  • Click NEXT on the screen that displays.

  • On the final screen, keep the default name for the data connection, GetUserProfileByName, check the box next to Automatically retrieve data when the form is opened, and then click FINISH:

  • The new data connection will now display in the data connections list:

    Stay tuned for Part Two: Using the GetUserProfile web service to auto-fill fields

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.