Link tags: viewport

The ideal viewport doesn’t exist

Some lovely scroll-driven animations illustrate this great little microsite.

There’s something very pleasy about the chunky design that harkens back to the Zeldmanesque early web.

Modern CSS in Real Life - Chris Coyier

This is a terrrific presentation by Chris, going through some practical implementations of modern CSS: logical properties, viewport units, grid, subgrid, container queries, cascade layers, new colour spaces, and view transitions.

Responsive Images on the Apple Watch — ericportis.com

Some tips for getting responsive images to work well on the Apple Watch:

• test your layouts down to 136-px wide
• include 300w-ish resources in your full-width img’s srcsets
• art direct to keep image subjects legible
• say the magic meta words

Understanding the WebView Viewport in iOS 11 - Ayogo Health Inc.

One more reason not to use sticky headers on mobile.

Emmet Re:view — fast and easy way to test responsive design in multiple viewports

It’s no substitute for testing with real devices, but the “device wall” view in this Chrome plug-in is a nifty way of getting an overview of a site’s responsiveness at a glance.

The Unexpected Power of Viewport Units in CSS | Lullabot

A nice rundown of some of the fun you can have with viewport units.

I’m very glad the problems with vh units I wrote about a little while back is getting fixed in Chrome for mobile.

Experiment: Using Picture Element and VW+VH units as a Lightbox

This is a clever technique by Dave—use viewport units to make a lightweight lightbox.

Get the Balance Right: Responsive Display Text ◆ 24 ways

Some really great CSS tips from Rich on sizing display text for multiple viewports.

Viewport vs Percentage Units - bitsofco.de

A comparison of when to use percentages and when to use vw/vh in your CSS.

There is no fold.

There.

Is.

No.

Fold.

Responsive design testing tool – Viewport Resizer

A handy little bookmarklet for quickly checking how a site might look at different screen sizes, and you can customise it to use whichever screen sizes you like.

IE10 Snap Mode and Responsive Design - TimKadlec.com

Useful advice from Tim on preparing your responsive site for IE10’s new “snap mode”. Don’t worry: it doesn’t involve adding any proprietary crap …quite the opposite, in fact.

resizeMyBrowser

A handy little tool for testing responsive designs by automatically changing your browser viewport size.