Case Study: Using Foundation 3 for redesigning West Virginia University’s Shared Research Facilities website

West Virginia University's Shared Research Facilities wanted their old website redesigned, to one that worked well on multiple devices and mobile due to specific nature of their users’ interaction with their website and its resources. They also wanted to move the site to WVU's in-house Content Management System for easy content maintenance and updates.
This case study is based on a previous version of Foundation, but my basic process still remains the same as described here (except for using the Sass version now). If you'd rather learn about my project using Foundation 4, the latest and greatest version of Foundation or learn about Sass, visit these links.

To Sass or Not to Sass
WVU Research Redesign
I had tried adaptive CSS frameworks earlier, incorporating media queries with set breakpoints; Jquery plugins etc. on previous websites and wanted to move on to a completely responsive, device-agnostic solution. Thanks to Luke Wroblewski's (of Mobile First, Bagcheck, Polar app and more) suggestion at An Event Apart conference; I took a look at Foundation… made detailed comparisons with other CSS frameworks eg. http://designshack.net/articles/css/framework-fight-zurb-foundation-vs-twitter-bootstrap/
http://responsive.vermilion.com/compare.php and decided it was indeed right for this project!
Foundation had every functionality I needed, and more, all integrated and so easily customizable!
Here is an insight to my process. This was my first of this kind, has yielded quick results and has a great potential to be used again!

Links: http://sharedresearchfacilities.wvu.edu/
More about SRF Project and Web Performance details on my Portfolio

1. Went through our old website to be redesigned, looked at how the user experience and interface could be enhanced by modifying site architecture, presenting content in a better way, reorganizing, adding interactivity and considered what/how things needed to change on devices. 
2. Had a quick read through of the Foundation 3 docs, components etc. and compared to other frameworks.
3. Created first set of lo-fi wireframes after initial meeting with the client (internal) and improvised as I went along.
4. Based on the plans, wireframes, I selected several CSS and JQuery components I needed. There were a couple of features that I ended up not using later, or added some later as it would happen in most projects and they were so easy to add/remove in CSS and Js, thanks to the nicely commented and organized code. Icon fonts were great; loved the hide-show classes; customizable panels, buttons, orbit, magellan, joyride were very useful for user-friendly, interactive presentation. Navigation was an icing on the cake!
5. I started out with one of the basic templates from Foundation that was close to my wireframe. I changed quite a bit as I went along, but it provided a quick starting point and good for learning by example. In fact, it was so simple to use, I could learn as I go. Barely any learning curve.
6. Modified the initial starter template to our needs and it served as a more hi-fi wireframe.
7. Now for the pleasant surprise!! As many, I generally do a photoshop mock up for approval and feedback from our University web central, and to get design feedback from other designers at the university and then start coding after feedback. Here’s how this changed.

After the basic functional wireframe, I started playing around with it, customizing the colors, styles, CSS to match with WVU branding and presto, I already had a functional mock up for home and basic back page templates!!  I took screenshots of these (several screen sizes), posted for design feedback. Also gave live test area w/URLs so others could see how the design changes in different screen sizes so having to change each mock up based on suggestions was eliminated!

1. I was able to incorporate several suggestions from other designers on the fly, and there I was, set with the basic design already coded. I started adding several interactive components as I went along according to my plans. Magellan, Joyride. It also provided a good style set for coding buttons, panels completely with CSS3 as I have been doing.
2. There were a few short road-blocks which I passed through quickly, thanks to foundation github forum and the google foundation forum. I also learnt, researched a few things on my own which didn't take too long.
   
   Here are some quirks which may be resolved as
   

1. There is a work-around to make panels line up in two per row by making them equal size (see home page panels).
2. Some issue with Joyride went away when I grabbed the most updated code directly from github.
3. Strange, but Magellan for some reason wasn't working with the minified version of JS!! and a few other minor issues.
4. I used a non-js responsive table solution, vs the one from foundation.
   
    Overall, I completed the project in much less time than my previous web-projects, (between other projects in parallel) by combining the mock-up feedback and coding process and designing in the browser.

Single in-house designer-developer.

What about Internet Explorer?

This works well up to IE8 and somewhat clumsily on IE7. It was ok for our requirements of this particular website. I have conditional comments for older browsers to download newer versions.
I was thrilled by how much more improved the Foundation 4 is, especially the Sass version, mobile-first grid better semantic markup and streamlining of its features. Don’t miss it!!

Performance

I have basic performance optimizations in place (minifying CSS, JS, reducing http requests, compressing images etc.) based on web performance tests. There is scope for more as browsers and standards evolve. I have designed and coded the site to be both responsive and responsible as the stats below show.

As of this writing:
Webpage test stats to be about: 489K (1.7-2.6 secs) for Home page!!
Mobitest stats show download time for home to be about 3.3 secs, and a sample back page is about 2.8 secs (233K).
Obviously, it is on the lower end of the responsive site size spectrum, as I have tried to keep the overall size of the site small, whether desktop or mobile. reducing the size and number of images and the overall size of the website by using CSS3 to replace any images that I would've otherwise used for page elements, icons etc.

Optimizing site for mobile is good, but why should we assume that desktop users have all the time and bandwidth in the world and serve them a huge site with something that we think isn't truly essential? Optimizing for desktop, IMHO should be more about the specific functionality aspects than just bigger images/layout. Vice versa holds good too in assuming mobile users don't need something that desktop users have. Trying to use a true mobile first approach by making the site keeping the the most essential content and functionality required for any user. I am looking into the carousel stats and feedback too.