A site made for reading

2012 was an incredible year. It kicked off with an intense, ground-up revamp of the University of Notre Dame homepage. This site caused an avalanche of humbling accolades1. Following the launch of the Notre Dame homepage, focus shifted to numerous other projects, including the College of Science, the Provost’s Office, and the School of Architecture. All great projects to further many of the standards set with the main university site. The year’s end brought a wonderful and challenging project—the redesign of the Notre Dame Magazine website, which launched this past Friday.

The Notre Dame Magazine website is a bit of a dream project for me. Content is priority. Mobile traffic is high. What really helped—the folks at the magazine recognized these things. They wanted a website that could supersede the print edition.

Design Choices

I had a clear personal goal with this project. The magazine’s content had to provide a distraction-free and pleasant reading experience. In particular, the content of this website had to look incredible on a Retina iPad. This meant finding some great fonts to use, and The League of Moveable Type did not disappoint. The primary fonts of the site were Chunk, for the headlines, and Sorts Mill Goudy, for the body copy. Additionally PTSans, by Paratype, was used as a sans-serif alternate font for buttons, navigation, and other places as needed.

Once I had my typefaces gathered, layout work started. Good responsive layout work starts at mobile. Mobile is raw content presentation. No frills, just text. Any floats attributed to an image are cut away. The image takes up the width of the screen, on its own line. As the layout expands on to larger screens the image positions take on more requirements.

I find left-aligned images to be distracting to the content on a webpage. To limit how a left-aligned image cuts into the content, the image width maxes out at around one-sixth to one-fifth the width of the content. Right-aligned images are awesome—these images breakout of the implied constraints of the content, quite beautifully. Finally our inline images maintain that full-width of the content that started off on the smaller, mobile screens.

One aspect of this site became apparent early on, the content makes pages long. From the start of the mobile layout, I wanted an accessible button to aid in navigating the page. In the top right, a touchable red button stays with you from the top of the page to the bottom. Upon interaction the button produces a few some essential pieces. A button to return to the page top2, the first few menu items with a link to the rest of the menu, and finally a search box.

Once the layout had the required space needed, the menu was brought to left of the content and the search bar nested in the site’s header. Like the mobile layout’s navigation button, the menu stays with you the length of the page. However, a problem came about on the articles. The menu broke my main rule for this site, no distractions. So a hybrid of the mobile navigation and the main menu was created specifically for news pages3.

Final bits

I am very pleased with the results of this project. This is the first SASS site launched by the web team, an experience I hope to talk about soon4. The reactions so far have been quite positive, though we’re still in the midst of post-launch clean-up.

  1. The list includes, but is not limited to: Implementing Responsive Design by Tim Kadlec, The Mobile Book by Smashing Magazine, Net Magazine’s Top 25 Responsive Sites of 2012, and Content Everywhere by Sara Wachter-Boettcher 🢕

  2. Many of my colleagues were unfamiliar with back to top feature of iOS’s status bar, so I found this button very necessary. Not to mention other mobiles that might not have a similar native feature. 🢕

  3. This approach was suggested by my director, Nick Johnson, and inspired by the navigation found on YouTube’s homepage and video pages. 🢕

  4. Along with other technical aspects of this site. 🢕