Between the Lines

Media queries are great for changing values in sudden snaps at different screen sizes. But, combining the power of calc() and viewport units like vw and vh , we can get an awful lot of fluidity across our layouts. For this we'll use a technique called linear interpolation.


Do responsive sites have to be so tall on mobile?

Kevin Vigneault:

I don't believe that the overall page length itself is inherently problematic. I have noticed though that in many responsive designs, purposeful groupings of content are easy to spot on larger screens, but get muddled when things start to stack on mobile screens.

This is probably mostly a problem on "content" sites in which you smash things down into the ol' tube of content. I don't mind the tube, but I think Kevin is doing some smart thinking here. There are plenty of different patterns that can happen while tubizing, and it's probably not thought about enough.

This site is particularly guilty. A quick document.documentElement.offsetHeight test showed 14749px, more than double the height of an example Kevin pointed out that was a bit excessive.

Scaling Responsive Animations

Scaling our websites and applications so that they look great on every screen can be difficult. A big portion of that difficulty can be trying to get specific components, particularly ones that have pieces that have to stay a certain size (like animations), to look good regardless of the screen size. In this post, we'll cover how to help keep our responsive animations sized the way we want them.


Responsive Image Breakpoints Generator

I'm guilty of using responsive images by taking a high res image and downsizing it a few times kinda randomly and using those as the srcset images. Basically the same "desktop", "tablet", "mobile" thinking I can also be guilty of with breakpoints.

Soooo what is the perfect way to do responsive images? Ideally we'd be sending the exact image that any device needs. If a device/browser/design combination requires an image to be 457px wide, in a perfect world, we'd send it a 457px wide image. But it's impractical (from a lot of perspectives: creation, storage, caching) to make "one image per possible pixel width".

There is a happy medium here. The Responsive Image Breakpoints Generator says:

Responsive websites, even the most modern ones, often struggle with selecting image resolutions that best matchthe various user devices. They compromise on either the image dimensions or the number of images. It's time to solve these issues and start calculating image breakpoints more mathematically, rather than haphazardly.

It takes information like your breakpoints, your resolution needs, a reasonable change in file size between versions, and the image itself to create a all the images (and responsive images markup) you need to get to this happy medium.

Design Better Data Tables

Matthew Ström on how data tables can be better through things like alignment, rules, labels, backgrounds, and the type of numerals used:

Oldstyle figures look nice in sentences, where they better match the size and spacing of lower-case letters; lining figures are more uniform, and reinforce the grid-like structure of the table.

Optimizing for Large-Scale Displays

The following is a guest post by Jon Yablonski. Jon told me he recently worked on a project where there was a lot of emphasis placed on giant screens. Jon is going to show us that just like RWD work of any kind, it requires planning. Extra media queries are useful for targeting the huge displays, and typography can take you far.