Miranda Mulligan & Mat ‘Wilto’ Marquis discuss responsive web design at SND St. Louis

Our next session features some ground-breaking digital ‘design-velopment’ work that is changing how organizations publish content on the web, tablets and mobile devices. The Boston Globe’s Miranda Mulligan and Mat ‘Wilto’ Marquis from Filament Group Inc., will present what they’ve learned in their recent project working on building a “responsive” website.

Designing a responsive news website

Three ingredients make up responsive web design: flexible grid-based layout, flexible images and media, and media queries. But these three elements are just focused on layout and layout is not design. “Design is the method of putting form and content together.” (Paul Rand) In the context of designing and prototyping BostonGlobe.com, we’ll talk about how we applied this technique to present news content, how we created the reader-experience and how a responsive framework affects:

  • story packaging and presentation on the web
  • art direction and ad delivery
  • the creative process

We’ll show some of the code (what makes the grid flexible, the images responsive, media queries, etc) as well as the static prototypes. We will offer insight to the ‘design-velopment’ process of rapid prototyping in code and illustration. We’ll show the logic behind how the content reflows at different browser-width breakpoints. We’ll we’ll talk about using custom fonts and fallback plans to better tailor content to users’ varying contexts, and methods for testing a ‘device-agnostic’ layout across a relatively exhaustive list of devices.

Miranda Mulligan & Mat 'Wilto' Marquis

Miranda Mulligan

Miranda Mulligan is the digital design director for The Boston Globe. She is a designer and educator with over ten years of professional experience in print and web design, photography and information graphics reporting. She has also worked for The Virginian-Pilot, interned with The Sun-Sentinel and The Philadelphia Inquirer and volunteered for Online News Association, Virginia Press Association, the National Press Photographers Association and the Society for News Design.

Mat ‘Wilto’ Marquis

Mat ‘Wilto’ Marquis is a freelance designer and developer based out of Somerville, currently contracted full-time by Filament Group Inc., a Boston-based design studio. Mat specializes in building accessible, responsive websites that adapt to the many contexts in which people use the web. Mat is a contributor to jQuery Mobile project, active member of the open source community, and enjoys a complicated relationship with the now-defunct HTML5 “dialog” tag.’