What’s Changed and Where’s it Going?

A presentation at An Event Apart Washington DC in in Washington, DC, USA by Dave Rupert

What's changed and where's it going

What's changed and where's it going

Responsive Web Design 102: A refresher course

Responsive Web Design 102: A refresher course

2010

2010

Responsive Web Design

Responsive Web Design

RWD is a Technique

RWD is a Technique

But it didn't stop there...

But it didn't stop there...

RWD is a Philosophy

RWD is a Philosophy

But it didn't stop there...

But it didn't stop there...

Looking at the Data

Looking at the Data

2014

2014

Total Kilobytes

Total Kilobytes

JavaScript Bytes

JavaScript Bytes

CSS Bytes

CSS Bytes

Image Bytes

Image Bytes

Quick Note on Kilobytes

Quick Note on Kilobytes

But...

But...

DOMContentLoaded

DOMContentLoaded

onLoad

onLoad

The DoubleClick Study

The DoubleClick Study

Charting that out

Charting that out

Looking at some Examples

Looking at some Examples

1 MB 1 MB + CSS JS

1 MB 1 MB + CSS JS

37,000+ Lines of CSS

37,000+ Lines of CSS

Managing CSS

Managing CSS

Step 1: Interface Inventory

Step 1: Interface Inventory

Buttons

Buttons

Product Cards

Product Cards

Step 2: Measure

Step 2: Measure

CSS Stats

CSS Stats

Lighthouse

Lighthouse

Step 3: Patternize

Step 3: Patternize

Color

Color

Buttons

Buttons

Product Cards

Product Cards

Step 4: Measure Change

Step 4: Measure Change

source-map-explorer

source-map-explorer

CSS Stats: Before and After

CSS Stats: Before and After

Lighthouse: Before and After

Lighthouse: Before and After

Back to the Money Zone

Back to the Money Zone

Opportunities

Opportunities

Managing JS

Managing JS

npm

npm

package.json

package.json

ES Modules

ES Modules

But we didn’t have that…

But we didn’t have that…

We had a 1MB jQuery “App”

We had a 1MB jQuery “App”

Auditing in Notion

Auditing in Notion

You might not need...

You might not need...

391 Occurences

391 Occurences

Perhaps a framework makes more sense?

Perhaps a framework makes more sense?

That which is not managed, grows

That which is not managed, grows

Rolling Out A Design System

Rolling Out A Design System

Conway's Law

Conway's Law

Rupert's Law

Rupert's Law

2019

2019

Frameworks

Frameworks

HTML5 Components

HTML5 Components

Angular Components

Angular Components

React Components

React Components

Vue Components

Vue Components

Buzzwords...

Buzzwords...

The Power of Serverless

The Power of Serverless

Mobile has hit the tipping point

Mobile has hit the tipping point

Mobile use still increasing

Mobile use still increasing

The Expectation Gap

The Expectation Gap

2024

2024

Web Components

Web Components

Create and HTML Import

Create and HTML Import

Import that HTML Import into HTML

Import that HTML Import into HTML

Firefox kills HTML Imports

Firefox kills HTML Imports

Web Components: Part II

Web Components: Part II

All-in-JS Web Components

All-in-JS Web Components

Import Module Script in HTML

Import Module Script in HTML

Web Components are kinda “meh” right now, but…

Web Components are kinda “meh” right now, but…

Systems Using Web Components

Systems Using Web Components

HTML Template Instantiation Spec

HTML Template Instantiation Spec

Unity Component Spec

Unity Component Spec

Web Components have the potential to be great.

Web Components have the potential to be great.

Web Assembly

Web Assembly

Squoosh

Squoosh

LiquidFun

LiquidFun

Web Assembly will make websites more powerful.

Web Assembly will make websites more powerful.

CSS Houdini

CSS Houdini

So before I go…

So before I go…

Mobile First: Once More with Feeling

Mobile First: Once More with Feeling

Thank you very much

Thank you very much

Responsive Web Design is coming up on its 10 year anniversary. I thought it’d be helpful to take a look back at what’s changed and where it’s maybe going using a few case studies along the way.

Buzz and feedback

Here’s what was said about this presentation on Twitter.