University of Michigan Medical School gets the Responsive Treatment
The University of Michigan Medical School was looking for a fresh, modern website befitting their top-ten national status. Our solution was to provide a set of five page templates consisting of a homepage, a landing page, an alternate landing page, a general page (with expanded navigation), and a curated list page. Each built responsively, tailoring its layout to the size of the browser window ensuring that it looks great on anything from your smartphone, tablet, or large desktop display. Since we just completed the design phase a couple of weeks ago, now seems to be the perfect time to cover some of my favorite design-specific topics.
Process
We started off the project with fast wireframing iterations in InDesign. Then we went to Photoshop, to iterate on a single page to nail down the design direction; we chose the homepage as it seemed to hold the most interest with our client committee. After that I built out the rest of the pages as HTML & CSS prototypes in order to show the client exactly how the responsive design was working. Overall, this seemed to be a pretty solid approach, but ultimately I feel that our process is still in progress.
Main Navigation
In widescreen mode, the main navigation starts out as four horizontal buttons. As real estate shrinks, the secondary nav items join the main nav items and are displayed in two rows. And when horizontal space shrinks further, all nav items get wrapped up into a single button.
Navigation Drop-down
We opted for a multi-columned 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 I decided to make the images in these sliders background images so I could style them with CSS. By adding:
background-position: 50% 50%;
I’m 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, I took a slightly different approach because there was no extra navigation element to contend with and I wanted the image to be visible at the smallest sizes.
In this situation I used:
background-size: cover;
background-position: 50% top;
Cover basically scales my background image to the smallest size where it’s still able to fill the container, while 50% top anchors my 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 go into creating a solid responsive design system, so please let me know if I’ve glossed over a particular topic or missed anything else of interest. Also, a tip of the ol’ cap to my fellow Palantiri John Albin Wilkins for his work on Zen Grids — a great tool for creating responsive layouts with SASS and Compass — with which I built my prototypes. And finally, I’d like to thank the Palantir team and my partner in crime, Michael Mesker for riding shotgun on this one. Good work everyone, I’m looking forward to seeing this one get built!
