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?
Introducing screensizes.org
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 socket.io 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!
Making the web a better place to teach, learn, and advocate starts here...
When you subscribe to our newsletter!