iOS9 MobileSafari Viewport Problem

The viewport is set incorrectly when the viewport meta tag is specified with initial-scale=1 or width=device-width, and the page contains an element (e.g. div tag) that is wider than the desired viewport’s boundary. In the screenshot above (courtesy @RWD) you can see that the off-screen menu actually appears on-screen in iOS9. Apple changed how iOS9 …

Responsive Principles

Responsive web design has engendered a wider conversation about how we build products that accommodate an increasing breadth of connected devices. This talk will suggest a framework within which we can model this continuing discussion, and outline the principles needed for our work to better respond to a rapidly changing world. A PDF with presenter …

The Web’s Grain

Great piece by Frank Chimero. Starts with that nostalgic nineties feel and finds it way to photography, responsive design, and the fact that some websites try to blow you away with their design/technological advancements. “Listen bub,” I say, “it is very impressive that you can teach a bear to ride a bicycle, and it is …

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 …

Building a Device Lab

Collection of slidedecks to building your own device lab (only the first one in the series embedded, click through below to see all others): We cover how to build a device lab as a product for your coworkers to test their work on a spectrum of operating systems and versions. We also cover how to …

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 …