The container model and blended content

One of the key differences between our new beta site and the current Guardian site is the way we approach content curation and presentation. From the outset we knew we wanted to create a modular system. However we were wrestling with how we could maintain a consistent hierarchy of stories across desktop, tablet and mobile …

Responsive tables with Tablesaw

Set of jQuery plugins by the clever folks of Filament Group for responsive tables. Comes with a few solutions such as stack (picture above), Toggle (where one can choose which columns to show), and Swipe (where you can scroll horizontally through the columns). Columns can also be sorted. Just set some data-* attributes on your …

Device-Agnostic

Trent Walton on the term Device-Agnostic: Like cars designed to perform in extreme heat or on icy roads, websites should be built to face the reality of the web’s inherent variability. In my mind this approach addresses the following from the beginning: Hostile browsers, Tiny screens, Slow connection speeds, and Touch inputs Long story short, …

Responsive Deliverables: The Style Guide

Jeremy wrote a nice article on Pattern Sharing, sparked by the Code for America Style Guide. A first look at the style guide might tell you it’s just a pattern primer, yet the menu reveals that the style guide also holds a few templates to use. In order to see the code used for the …

Responsive Deliverables

During the era of Print Design, companies would approach agencies for a brand identity system. The identity work started with a simple logo and color scheme and then scaled to business cards, product packaging, vehicles and more. The sum of these components made up the physical brand. Building webpages is not so different. Be sure …

Ink: A Responsive Email Framework

Reach out your tentacles to a broad range of people who subscribe to your emails. Our CSS framework helps you craft HTML emails that can be read anywhere on any device. Gone are the days where you had to choose between Outlook and email optimized for smartphones and tablets. Ink’s responsive, 12-column grid blends flexibility …