Respond.js

A polyfill for browsers that don't support CSS3 Media Queries.

The Mobile Safari Scaling Bug

Developers should not disable user-scaling.

Raising the Bar on Mobile

How to hide the address bar in mobile browsers.

A Fix for the iOS Orientationchange Zoom Bug

A fix which works by listening to the device's accelerometer.

iOS-Orientationchange-Fix

Another JavaScript fix for the orientation scale bug in iOS.

An Ajax-Include Pattern for Modular Content

Building websites in a modular, container-independent manner.

Device Bugs

A collection of quirks and issues that occur on browser platforms.

Stylesheet Download Tests

Testing stylesheet downloads per inapplicable media queries.

Southstreet

Tools for the progressive enhancement workflow.

How we learned to leave default font-size alone and embrace the em

Making a small change to the CSS workflow.

On ems and rems

Rems and ems serve different purposes.

Responsive Carousel Project: Now Open Source

A multi-functional carousel component.

picturefill

A responsive images approach that you can use today.

Compressive Images

Images that look sharp on all devices.

“Jakob's Law: As a meeting grows longer, the probability of someone citing a Nielsen study that contradicts your recommendation approaches 1.”

“It seems whatever a carefully-crafted responsive website weighs, double or triple it to accommodate ads, social widgets, and user tracking.”

“I used to think web developers had opinions. That was before I started researching which baby gear we'll need when our daughter arrives.”

Working around a lack of element queries

Approaches using Sass.

“If the people who make websites ever meet the people who understand SVG's feature set, we're all gonna be out of a job.”

“I’m thankful the UA string exists just like I’m thankful cardboard exists when my window breaks. But I wouldn’t build a cardboard house.”

Grade components, not browsers

“We no longer grade browsers – instead, we grade components.”

“It seems every year one of us accidentally discovers another game-changing thing that SVG has been able to do since 1987.”

Moving the web forward

“Progressive Enhancement moves almost all of our development time and costs to newer browsers.”

Comparing two ways to load non-critical CSS

How non-critical CSS is best loaded.

loadCSS

A function for loading CSS asynchronously.

Tappy: A custom tap event handler

Works with touch, mouse, keyboard, and more.

How we make RWD sites load fast as heck

Delivering sites for speed and broader access.

Planning for Performance

“Responsible responsive designs are achievable even for the most complex and content-heavy sites.”

Research: Performance Impact of Popular JavaScript MVC Frameworks

First render times of Angular, Backbone, and Ember.

Font Loading Revisited with Font Events

How to load web fonts fast and progressively.

“‘Works with whatever device is in your pocket’ is stronger marketing than ‘Works just like a native iOS app in supported devices.’”

Designing for Performance: Can We Have it All?

Strategies, case studies, ideas, and tips.

“It’s easy to gripe about all the tools involved in modern web dev these days, but I’m not sure I could work half as efficiently without them.”

CSS inlining

A picture is worth a thousand words.

“‘iPhone screen goes to sleep before finishing loading site’ is a surprisingly common performance metric, I’m finding this week roaming on 3G.”

More Weight Doesn't Mean More Wait

How to improve perceived performance.

“So frustrating when infinite scroll results don’t restore when returning via back button. Preserving browsing expectations is part of our job.”

“My distaste for building sites in ways that assume ideal browsing conditions is driven by daily use of sites that were built in those ways.”

More Weight Doesn't Mean More Wait

How to quickly deliver usable content of a web page.

“I am genuinely offended by any website enhancement technique that assumes its value to some users is worth denying accessibility to others.”

“Building websites that only work for the luckiest, most fortunate users on the web is so uninteresting, not to mention bad for business.”

Delivering Responsibly

Making web sites usable on any device as soon as possible.

Async CSS w/ link[rel=preload]

Markup and polyfill to fetch a CSS file in a non-render-blocking manner.

“It’s puzzling that the value of Progressive Enhancement is still questioned, despite all evidence of the inherent inequality of web access.”

“An app is a website that requires you to download a browser along with its content.”

Modernizing our Progressive Enhancement Delivery

Ways to speed up websites even more.

Maintaining Accessibility in a Responsive World

Lessons learned at Filament Group.

Modern Asynchronous CSS Loading

How to prioritize and streamline assets for fast, resilient delivery.

Swapping Images with the Sizes Attribute

Responsive, JavaScript-enhanced image magnifier component.

“It’s easier to make a fast website than it is to keep a website fast.”

Inlining or Caching? Both Please!

How to to avoid a longstanding drawback of inlining files.

Styling a Select Like It's 2019

Nowadays, you can style a ‘select’ pretty nicely with CSS.

The Simplest Way to Load CSS Asynchronously

A simple HTML approach may be all you need.

5G Will Definitely Make the Web Slower, Maybe

What an average person can expect from 5G.

“If you’re having z-index problems I feel bad for you son, I’ve got 999999999999999999999999999999999999999999999999999999999999999999999999999999 and it seems to work alright on my machine.”

ASPIRE: Ideals to Aspire to When Building Websites

The meaning of the acronym ASPIRE.

We need more inclusive web performance metrics

It‘s wrong to optimize for visual clues at the expense of others.