Designing a Responsive News Website - Miranda Mulligan & Mat ‘Wilto’ Marquis

A session at SND St. Louis

Saturday 1st October, 2011

10:00am to 10:50am (CST)

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.

About the speakers

This person is speaking at this event.
miranda mulligan

Journalist. Designer. Strategist. Speaker. Now @KnightLab, was @BostonGlobe. New side project: EiC @EveningEdition. mirandamulligan at northwestern edu bio from Twitter

This person is speaking at this event.
Mat “Wilto” Marquis

The unholy fusion of designer and developer, with a strangely retentive memory for trifles. bio from Twitter

Sign in to add slides, notes or videos to this session

SND St. Louis

United States United States, St. Louis

29th September to 1st October 2011

Tell your friends!


Time 10:00am10:50am CST

Date Sat 1st October 2011

Short URL


View the schedule


See something wrong?

Report an issue with this session