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 🙂

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!

My First SharePoint 2010 Public Site Launched!

ms.gov | The Official State Website of Mississippi

ms.gov | The Official State Website of Mississippi

The new state website for Mississippi is finally live! ms.gov is the first SharePoint site I have worked on since 2006 that is not hidden behind a firewall and it was a ton of work but it is now up and available for all to see! Through Mississippi Interactive (subsidiary of NIC), my day job is to design and build web sites and applications for the state of Mississippi. The new portal is the first redesign of Mississippi’s portal in over ten years and was a major effort by myself and everyone at Mississippi Interactive.

The site is built with SharePoint 2010 and has quite a bit of JQuery going on to enhance the UI (thanks to our developer and my web slinging counterpart, Jesse Kyzar, for creating all the JQuery and web service grooviness!). This release is our “beta” and we will be adding more features and functionality over the coming months. I will start posting some insights into how we developed certain pieces as time allows (we are very busy with a full project queue!).

Ok, enough bragging, go see the site!