SharePoint Branding & Customization Behind the Scenes: MS Secretary of State Website

sos

Launched August 2014, the Mississippi Secretary of State website was designed and developed by Mississippi Interactive. Team members include: Michelle Pakron – Strategy, Design, Web production, SharePoint integration and Customizations, Mobile optimization, and testing; Jesse Kyzar – Advanced Javascript programming and .NET application development.

The SOS website was built in SharePoint 2010 and uses the Bootstrap 2.0 responsive framework. The masterpage was a modified version of the responsive V5 SharePoint Masterpage created by Kyle Shaeffer. I added in code from Randy Drisgill’s starter masterpage and also altered the ribbon code and the accompanying css and javascript files.

The site uses one custom masterpage and multiple custom page layouts. The home page in particular is a custom page layout without any editable areas. Each piece of the home page is either a data view web part pulling content from a list, or is pulling from an external source via the SPServices Javascript library. This was done to make it as easy as possible for the SOS staff to maintain the site as it is much simpler to edit a list item then to code directly into a page.

Home Page Breakdown

sos-2

1: The Featured Services area is an images library pulled into the page via a custom Data View web part.

2: The Slider is dynamically pulling content from another images library and is displayed via SPServices

3: The How Do I area is a Data View web part fed by a custom list

 

sos-3

4: The Featured area is fed from an images library via a Data View web part

sos-4

5: The Press Releases feed box is fed from an external .NET admin application via SPServices; each individual Press Release is fed into a SharePoint page via SPServices as well.

6: The What’s New feed box is a listing of Pages pulled via SPServices from the root Pages library that uses a specific Page Layout called “News”.

7: The Twitter feed box pulls content directly from the MS SOS’s Twitter Feed via Javascript.

Use of Third Party Web Part

sos-5

We purchased the SharePoint Form Web Part in order to create forms based off of lists that work with anonymous access. The Share Your Solutions form was created by first creating a custom list to store the form data. A copy of that list was then created called Archive. I then created a custom workflow that kicks off once the web part adds data to the list that automatically emails the Business Services director the form contents as well as moves the list item from the main list into the archive, which is then secured to authenticated users only. The SharePoint Form web part automatically creates the form fields once attached to a SharePoint list.

If you need simple forms on your public-facing SharePoint site and don’t want to bother a developer, I highly recommend this web part. Just make sure that it is installed and activated on each server before doing a content deploy or backup/restore to a server or it will break your form, even if you activate it after the fact.

View the Site

www.sos.ms.gov

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

 

Inspiration: New State Websites Made With SharePoint

It’s been a long while since my last post… I have been working non-stop, particularly on the new ms.gov, which is going live tomorrow. I wanted to show everyone some great new state websites, all made by subsidiaries of my parent company, NIC, that all use SharePoint. Hopefully these will provide some inspiration to show what is possible with SharePoint for internet-facing sites.

Texas.gov

tx

The new Texas.gov is responsive, with a  clean, stripped down aesthetic that loads quickly. It uses SharePoint 2010, along with Google fonts, JQuery, Modernizr, and other goodies, proof that modern web development techniques can work beautifully with SharePoint.

SC.gov

sc

The new South Carolina state website is bold and bright. It also uses several modern web technologies such as Google fonts and JQuery UI, and responsive design.

Maryland.gov

ml

The new Maryland.gov is packed with features. It is an HTML 5, responsive site loaded with custom SharePoint developed features-this site is a good example of what you can do if you have dedicated SharePoint engineers.

MS.gov

I can’t show it today or my GM will kill me, but I can tell you it is a SharePoint 2010 HTML 5 site, it is responsive,  uses Twitter Bootstrap, JQuery, SPServices, Google Search and Google fonts, and it is has touch groovies for tablet users. I will post more on it tomorrow 🙂

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.

SharePoint 2010: Styling the Site Actions Menu Items

I spent a whole frustrating day trying to find what styles change the hover state of the Site Actions Menu items in SharePoint 2010. I finally found a blog post that had a trick for how to get the Site Actions Menu to display on screen so that you can explore the html output in Firebug. Because the menu is generated by JavaScript, and is called by an onClick event, the menu never gets displayed in a way that you can explore in Firebug. The trick is to find the onClick event code, copy it, change the event to null, and then paste into the console-this causes the menu to display on screen and allows you to explore the menu code. The trick is fully explained here: http://blogbaris.blogspot.com/2011/03/how-to-style-sharepoint-site-actions.html

What I wanted to do is to simply remove the default hover styling from the menu items and apply my own. I was finally able to change the hover states with this code:

/* Site Actions Menu Items: changes the hover background of menu items */
div.ms-MenuUIPopupScreen div.ms-MenuUIPopupInner ul.ms-MenuUIUL div.ms-MenuUIULItemHover
{
border-color:#274E61;
background-image:none;
background-color:#F7E6D7;
}

It is easier to change the Site Actions menu button since it displays on screen without JavaScript. I used the following code:

/* Site Actions Menu button: change hover background of Site Actions button */
.ms-siteactionsmenuhover{
border-color:#274E61 !important;
background-image:none !important;
background-color:#478eaf !important;

}

/* Site Actions Menu Button: removes the border from the button in the off state */
.ms-siteactionsmenu {
border-color:none !important; 
}

All of these code changes produced this:
Site Actions Menu

NOTE: The code above will change the hover state for not only the Site Actions menu items, but also the Welcome menu items and the list item drop menu items.

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.