University of Michigan Medical School gets the Responsive Treatment

by Patrick Grady

Back in April, the fine folks at University of Michigan Medical School asked us for a complete overhaul of their website that could leverage the department templates we had previously created for them. In addition, they were looking for a fresh, modern design that was visually aligned with their top-ten ranking by U.S. News & World Report. While the refreshed site is still in development and hasn’t launched yet, we wanted to take share the process and approach we took when creating their new responsive design system.

We started out by taking stock of their content needs and deciding on a core set of templates that would give them the flexibility to build out their entire site. In the end we settled on a homepage, a landing page, an alternate landing page, a general page (with expanded navigation), and a curated list page.

Picture of new University of Michigan Medical School site design on multiple devices

Each template was built responsively, tailoring its layout to the size of the browser window, making sure that it looked great on anything from your smartphone, tablet, or large desktop display.

Process

Next we did some fast wireframing in InDesign. Then we iterated on a single page in Photoshop to nail down our design direction. We chose the homepage because that’s the one our client was interested in the most. After that we built out the rest of the pages as HTML and CSS prototypes in order to show exactly how the responsive design was working. While our process is certainly still in progress, this seemed to be a pretty solid overall approach.

Main Navigation

In widescreen mode, the main navigation starts out as four horizontal buttons. As real estate shrinks, the secondary navigation items join the main nav items and are displayed in two rows. And when horizontal space shrinks further, all navigation items get wrapped up into a single button.

Navigation Drop-down

We opted for a multi-column drop down approach. It starts with four columns in widescreen mode and changes to two columns around tablet size and finally to one column for smartphones. We tried to accommodate browsing behavior in widescreen and tablet sizes by showing two levels of navigation, then reduced the navigation to one level at phone sizes to increase usability.

Sidebar Navigation

For the sidebar navigation we were very focused on finding a solution that is modular, scalable, but as non-intrusive as possible. We chose a pattern that shows the page you are currently on, any children of that page, and all parents of that page back to the root. This method hides the adjacent siblings from view but allows the user to drill up and down at will. Adjacent sibling pages can be accessed by drilling up one level and choosing a different child from there, or by accessing the main navigation drop-down, or by navigating back to the root landing pages.

Content Sliders

We designed two styles of content sliders, one for the homepage and one for a landing page. The homepage slider consists of an image and a set of navigation to direct people to marketing content aimed at acquisition. The navigation element is positioned on top of the image in widescreen view and is kicked underneath the image in tablet view. Finally, at phone sizes the image drops off and the navigation elements span full-width.

This time around we decided to make the images in these sliders background images so we could style them with CSS. By adding:
background-position: 50% 50%;

We able to attach the center of the background image to the center of its container and scale it independently of the image.
For the landing page content slider, we took a slightly different approach because there was no extra navigation element to contend with and we wanted the image to be visible at the smallest sizes.

In this situation we used:
background-size: cover;
background-position: 50% top;

Cover basically scales the background image to the smallest size where it’s still able to fill the container, while 50% top anchors the background image to the center and top of the container respectively. Both of these techniques allow for much greater control over how the content of a slider resizes within a responsive layout.

These are just a few of the many design decisions that went into creating the Medical School’s new design system, so please let me know in the comments below if I’ve glossed over a particular topic or missed anything else of interest. Also, a tip of the ol’ cap is due to my fellow Palantiri John Albin Wilkins for his work on Zen Grids — a great tool for creating responsive layouts with Sass and Compass — which was used to build the prototypes. And finally, I’d like to thank Michael Mesker and the rest of the Palantir team for all their hard work!

Comments

This is an awesome write-up. Beautiful work on the responsive site. You guys make a complicated task look simple. No fair!