What is Intrinsic Web Design? Intrinsic Web Design is here to reshape the Responsive Web Design conversation around how we do layout on the web

On the 8th birthday of Responsive Web Design, Jen Simmons, Designer Advocate at Mozilla, is heralding the dawn of a new era in web design.

She calls it “Intrinsic Web Design.” But what is it, and how is it different from Responsive Web Design—a concept that the design world has well nigh embraced as second nature at this point?

Jen has done a lot of writing and presenting (and vlogging and tweeting) about web design over the years, but attendees at the 2018 An Event Apart conference in Seattle could tell she had put a lot of thought into this presentation in particular. She had something big and bold she wanted to say. And she knew that this could be a new jumping-off point for discussions about web design and layout for the next several years to come.

Another sea change in the history of web design

Over the past 25 years, the web has gone through a small handful of shake-ups.

In the beginning, there was just content. No fancy CSS, no JavaScript—just content that flowed line by line, taking up as much space as it inherently required. Then came table-based structures, which allowed designers to lay things out side-by-side in columns and such (we still see this as a main design method in modern-day email, but that’s a separate topic). Oh, and Flash was a thing, too. All of that was eventually replaced by fluid, flexible layouts that sized content using a percentage of the width of the browser window (viewport). That method, in turn, led us to fixed-width designs where a website, usually centered in the viewport, presumed a minimum browser width for everything to fit properly (remember seeing “this site best viewed with a resolution of…”?).

Then came the smartphones. We weren’t ready for that.

But the web was. The web was mobile-ready from the beginning. The web never did presume a particular browser width or user context—we broke it with our tables and fixed widths.

Fixing our bad habits with Responsive Web Design

To solve these bad habits came the next major shake-up in the history of the web—Responsive Web Design (RWD).

Ethan Marcotte, who coined the term at An Event Apart in 2010, defined RWD as the combination of three things:

  1. Fluid grids—a concept already familiar to web designers
  2. Flexible images—graphics that resize themselves based on the size of their containing element
  3. Media queries—using CSS to specify different layouts at different breakpoints

It didn’t take long for this concept to catch on—and subsequently catch fire. Mashable dubbed 2013 the Year of Responsive Web Design. Mobile-specific versions of websites (“m-dots”) were replaced with flexible, responsive websites that adapted to the constraints of all manner of devices—mobile, desktop, and everything in between. Responsive became a movement and a buzzword on the lips of designers and developers everywhere.

Fast-forward eight years from RWD’s inception. We’ve come a long way. The web has matured even further. We have new tools at our disposal.

Is it helpful to call what we do simply “responsive” at this point? Jen Simmons doesn’t think the term is sufficient anymore. And she’s right.

Intrinsic Web Design

We can do so much more in 2018 besides fluid grids, flexible images, and media queries—the core concepts behind Ethan’s responsive idea.

Instead of just flexible images, for instance, we can resize images horizontally and vertically without distorting the aspect ratio. And what about fluid grids? The biggest change in CSS capabilities in recent years, called CSS Grid, brings some exciting new developments—such as the ability to develop truly 2-D layouts on the web; instead of just flexible columns, we can also have flexible rows, too.

Content can now flow in more ways with newer layout algorithms and proportional units of measure. Larger content areas can take up more space due to their intrinsic (see that?) size; smaller content areas take up less space; fixed content areas can always take up a specified amount of space; and still other content can be set to take up any remaining space available. And all of these intrinsically different elements can live together in design harmony using far less code than was previously required and in layouts that simply could not have been realized before. Media queries, the third leg of the RWD stool, isn’t always needed nowadays to achieve these layouts.

Simply put, instead of content being design-driven, design can—and should—be content-driven. That’s possible now.

Let’s have our cake and eat it, too

Historically, designers and developers have butted heads over web layout in a conversation that is best described as “we want art” vs. “but the web can’t do that.” Designers often feel they lose creative freedom when working on the web. And developers are constantly trying to temper designers’ expectations of what’s actually possible.

Due to the hard work of web standards creators behind the scenes, the web has evolved a rich new palette of layout options that give designers and developers more options than ever before to create web layouts that are defined by the intrinsic nature of the content itself, rather than forcing content to fit into the mold created for it.

We can have great design and clean code. We can have white space and semantic markup. We can have great content and an equally great design.

What comes next?

It remains to be seen, but in the coming months and years, we probably won’t be talking about Responsive Web Design anymore. Future discussions about how the web should be laid out may be centered around Intrinsic Web Design instead.

But perhaps someday, we’ll just call it “web design.”

Or just “design.”

Peter Anglea

Peter Anglea is an award-winning full stack web developer with more than a decade of higher education UX and UI experience.