Four Kitchens

screensizes: visualize viewports in real-time

1 Min. ReadDesign and UX

We talk often about how responsive web design should be fluid and not designed around a limited set of screen sizes. But how do you really drive that point home? Is it possible to physically see how many different shapes and sizes are viewing the web?


One visual nod to this diversity that I’ve long appreciated was the animation on the front page of Brad Frost’s This is Responsive. Not only does it show many screen shapes and sizes, but they are constantly morphing into a new shape, almost as a reminder to us that we can never predict who will load our site.

I have been playing around with lately. After my first app I realized I had the pieces to make a real-time version of Brad’s visualization! Check it out:


Seeing your own traffic

My initial idea was a standalone site. Then I got an awesome suggestion to separate the beacon from the actual visualizer, so that this can be installed on any site. It will allow everyone to monitor their traffic in this unique way!

See all viewports hitting the Fourword

Naturally, the code is on GitHub. So go check it out and make it your own!