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:
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.