Responsive Images in Practice

<img srcset="quilt_3/large.jpg 1240w, quilt_3/medium.jpg 620w, quilt_3/small.jpg 310w" sizes="(min-width: 41.25em) 38.75em, calc(100vw – 2.5em)" src="quilt_3/medium.jpg" alt="A crazy quilt whose irregular fabric scraps are fit into a lattice of diamonds." /> Let’s take an existing web page and make its images responsive. We’ll do so in three passes, applying each piece of the new markup in turn: […]

9 basic principles of responsive web design

Let’s clarify some basic principles of responsive web design here to embrace the fluid web, instead of fighting it. To keep it simple we’ll focus on layouts Great and easy to understand gifs explaining a few concepts – I prefer this word over principles – of responsive web design. 9 basic principles of responsive web […]

Chartist – Simple responsive charts

/* Add a basic data series with six labels and values */ var data = { labels: [‘1’, ‘2’, ‘3’, ‘4’, ‘5’, ‘6’], series: [{ data: [1, 2, 3, 5, 8, 13] }] }; /* Set some base options (settings will override the default settings in Chartist.js *see default settings*). We are adding a basic […]

Google Chrome DevTools Device Mode

Click the icon marked with the pink-ish circle to open Device Mode. Click the icon marked with the red circle to activate the Media Query Inspector. One can quickly choose a device and also throttle the network using the blue and orange dropdowns at the top. You might have to enable Devtools Experiments in Canary […]

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 […]