A few months ago, I began working on a new website for a new research group attached to the University of Michigan Medical School. This project, as with many of my other projects for UMich, was performed as a subcontractor for MOEDesign. The new research group is known as the Biosocial Methods Collaborative.
Unfortunately, the client was not interested in taking the extra bit of time it would take to build out the site responsively, so we built a fixed-width template for them. Altogether, though, I think it turned out to be a nice, clean, bright and colorful theme for them to work with. There were only a small handful of custom functionality pieces I needed to build out for this theme. I did need to put together a handful of category archives, and ensure that those category archives would show up in the dynamic navigation menus in the left sidebar.
For the news stories, I had to put together a little bit of custom functionality, and had to work out some interesting styles. There are actually two slightly different layouts used for individual stories. The first, which includes a featured image along with a caption, is shown in the gallery below. Then, the second includes two featured images, without captions. Additionally, I had to work out a way to implement “call-out” quotes within the text, which were styled very similarly to the caption shown in the screen shot below. For the images themselves, I also used a jQuery plugin known as “loupe”, in order to allow visitors to zoom in on those images (since many of them will be high-detail medical images).
Finally, I had to work out a reliable way to allow the client to import the membership list from a GoogleDocs spreadsheet into the site. That took a bit of code wrangling in order to get custom fields matched up with all of the right areas of the membership list.