Tag Archives: responsive web design

Responsive Components: a Solution to the Container Queries Problem

Extensive writeup by Philip Walton on how he tackles the Container Queries problem. Instead of narrowly focusing on the specific CSS feature proposal we call “container queries”, I want to focus on the broader concept of building components that respond … Continue reading

Elsewhere , , , Leave a comment

Responsive Typography

Mike Riethmuller: It is possible to have precise control over responsive typography. Using calc() and viewport units you can create fluid type that scales perfectly between specific pixel values, within a specific viewport range. The formula used is this one: … Continue reading

Elsewhere , , , Leave a comment

Coding mobile-first emails

Typically, emails are coded starting with an old school, table based desktop version, with mobile styles applied through a max-width media query to reflow the tables. In email clients that don’t support this, this approach can result in inconsistent rendering … Continue reading

Elsewhere , , Leave a comment

Mediaqueryless Responsiveness

Slides of the – highly entertaining – talk @Vasilis gave at CSS Day 2016 in which he elaborated on a few techniques he experimented with in order to get responsive-like sites without using any media queries. Some neat tricks include: … Continue reading

Elsewhere , , Leave a comment

Viewport Unit Based Typography

I really dig the vw and vh units as – in some of the projects I work on – I really do need to place some things relative to the viewport itself. Never thought of using it to define font-sizes … Continue reading

Elsewhere , , , 1 Comment

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 … Continue reading

Elsewhere , , , 4 Comments

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 … Continue reading

Elsewhere , , , Leave a comment

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 … Continue reading

Elsewhere , , Leave a comment

Intro to @viewport & other new Responsive Web Design CSS features

Intro to @viewport & other new Responsive Web Design CSS features from Andreas Bovens Good introduction if you haven’t read about them yet. Video also available.

Elsewhere , , Leave a comment

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. … Continue reading

Elsewhere , , Leave a comment