In 2020, the gifted makers of websites at Clearleft shared methods to achieve fluid responsive design. “Utopian” web design was (and still is) their half-kidding name for this approach, which Apple’s Jen Simmons, working indendently, called “intrinsic design.” Instead of chasing an ever-changing number of fixed breakpoints, utopian or intrinsic design follows the web’s intrinsic ebbs and flows via fluid type scales that are always in tune with the screen on which they’re viewed. In a nutshell:
The big idea that triggered this train of thought now seems very simple:
- Define a type scale for a small screen
- Define a type scale for a large screen
- Tell the browser to interpolate between the two scales, based on the current viewport width
This results in a set of type sizes which is always “in tune” with itself and feels at home on any device, without needing to manually specify sizes for x number of arbitrary breakpoints. For example we can just say H2s are always “size 4” and trust the calculation to generate a suitable size heading for everybody. — James Gilyead, Designing With Fluid Type Scales
When author (and co-founder of the Web Directions conference series) John Allsopp wrote his canonical A List Apart article, A Dao of Web Design, 26 years and four months ago, his thinking was right on. But the limited tools we web designers had available to us in those days prevented from us from designing elegant, readable interfaces adhering to John’s principles.
Alas! Designers in those days, if we wanted to eat, were expected to create print-like pixel-perfect web layouts. John’s brilliant notion of designing to the web’s natural ebb and flow was not yet possible to achieve in web pages designed to promote brands and sell products. As the years passed, many in our industry forgot about John’s concept entirely.
But one web designer did not.
It took ten years of hard-won web standards support in mainstream browsers, the inclusion of actual makers of websites into the W3C’s standards committees, the backstage schmoozing of the community of front-end wizards who were An Event Apart’s earliest public speakers, and the inimitable genius of Ethan Marcotte to bring John’s notion to life while delivering web pages that, beyond following the web’s ebb and flow, were actually attractive and easy to read.
Most of you who read these pages were around for that revelation. Ethan’s Responsive Web Design enabled aesthetically minded designers to finally create accessible, readable, web-native experiences, and it has long since become mainstream web design practice. Intrinsic/utopian design is simply Responsive Design getting even smarter and suffering from even fewer edge cases.
You may wonder why I’m recounting this history and linking to Clearleft’s six-year-old articles like they were news. The answer is simple: to most people now working in the field, Jen Simmons’s and Clearleft’s innovative layout approaches still are news. So go read all of utopia.fyi and catch up with Jen Simmons’s Experimental Layouts Lab to be ready for your next web creation.
