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.