Sea creatures in an infinite responsive dive-in.

You may want to read the original Flexbox Holy Albatross post but basically, I missed a step (I was hungover): You can switch between horizontal (multi-column) to vertical (single column) Flexbox layouts just using flex-basis. No min-width or max-width needed — in fact, they just restrict Flexbox from doing its beautiful Flexbox thing.

The WordPress plugin that cares about responsive images.

Thankfully, with the launch of WordPress 4.4, theme developers and maintainers will find it much easier to introduce responsive image functionality into their themes. In this recent launch, the RICG Responsive Images plugin has been merged into WordPress core, which means that responsive image support now comes as a default part of WordPress. Let’s take a look at how the feature works, and how you can use it to get the best support for your WordPress site.

Over the last few years, we’ve written a quite a few articles about responsive images. Now that responsive images have landed in browsers, it seemed like a good time to step back and cover the basics for those who are just starting to tackle responsive images.
Ergo, a new series of articles called Responsive Images 101 that will cover everything from why we need responsive images to how to pick the right responsive images solution.
Let’s dig in!

There are a few things theme developers will want to modify to get the most out of this new feature.

A responsive screenshot comparison tool

WordPress 4.4 will add native responsive image support by including srcset and sizes attributes to the image markup it generates.

Working with SVG in a RWD workflow usually involves a design phase and a development phase. The design phase is usually handled by designers who may or may not know how to code. via Pocket

There are a number of different use cases addressed by some combination of features from the responsive images specification—here are some of the most common ones.

squeezr is most effective on sites with big images and heavy use of CSS3 media queries, which is typical for responsive or mobile web designs. However, in most cases at least some small savings can be achieved through image recompression and CSS minification. If the savings calculated by the test pilot aren't that huge, it's either because there's not much to save about your site (e.g. images are too small for downscaling and you don't use media queries), or because you just did a pretty good job already! ;)

certainlyakey starred at-import/breakpoint

A proof-of-concept event-based CSS element dimension query with valid CSS selector syntax.

Next to coming up with project names, managing tables in a responsive layout is one of the trickiest problems in web development. Semantically structured tables are notoriously difficult to style as anything other than… well… a table. On the other hand, cobbling together a pile of divs and spans into a table-like shape means giving up the semantic meaning, accessibility, and navigability of real table elements to represent tabular data, or it means jumping through hoops to recreate those features. When it comes down to it, the semantic benefits of real table elements make them our first and best choice.

Pattern Lab is a collection of tools to help you create atomic design systems.

A collection of patterns and modules for responsive designs.

mobile tips webdesign study