Level Up!
Published in

Level Up!

A Sneak Peek At Intrinsic Web Design

by Bradley Nice, Content Manager at ClickHelp.com — professional technical writing tool

On the 8th anniversary of Responsive Web Design, Jen Simmons, Designer Advocate at Mozilla, introduced a new era in web design. Here’s her presentation from the event:

Jen Simmons calls it Intrinsic Web Design. But what is it and how’s that different from Responsive Web Design? Here’s a transcript of Jen’s answer at The Big Web Show:

Jen Simmons: […] Intrinsic Web Design is a name that I gave to this new era, because I think we’re really in a new era of layout design, and for anybody who’s been doing this for a while, you’ll remember these other eras that we had, where we’ve used HTML tables for a long time. We used Flash for a long time to do the whole website. We had this debate between fluid web design and fixed-width web design, and each of those eras had names where we would say things like, “Fluid versus fixed,” and everybody immediately knew what that was. You didn’t have to start over and define everything, and responsive was that kind of word. I feel like we need a new word for a new era where we can say, “Oh, it’s not that float-based thing where everything’s set in widths with using percents. It’s this new set of technologies.”

“Digital Walls” by Cosmin Capitanu

It’s not just because the tech is new, it’s also because the possibilities of what you can actually do are new, and the ways in which you can get content to morph and shift and change based on how much space is available is actually really different than Responsive Web Design. Over the last couple years, as I’ve been exploring and making demos and teaching people and showing people what’s possible, I kept using the word responsive, and kept thinking, “Well, this is just an evolution of Responsive Web Design. This is like Responsive Web Design bonus edition, with extra super powers,” but I finally got to the place towards the end of last year where it just felt like, “No, we need a new word.” It’s not Responsive Web Design. The way that I think about layouts and everything I’m doing, and the approach that I’m using … Specifically layout.

Nothing in the rest, or about what mobile is, or how content should be structure in a content management system. All of that is definitely the same. I’m just talking about layout, that layout itself, and the graphic design itself, had changed significantly enough that I wanted a new word so we could say, “Oh, yeah, that new thing,” and it includes CSS Grid, but it’s not just about CSS Grid. It’s also about using Flexbox, and kind of rediscovering what Flexbox is actually intended to be for. Plus, it’s about using some floats sometimes, using things like CSS shapes or object-fit, using a flow content, using multi-column. Some of these things are old, and they’ve been around for a long time, but it’s about thinking about the whole system of layout, and how all these pieces fit together in a brand new way.

Over the past few years, Jen has needed a term for “responsive web design +”.

* Responsive web design has flexible images. Intrinsic web design has flexible images …or fixed images. Whichever you want.

* Responsive web design has a fluid columns. Intrinsic web design has fluid columns and rows.

* Responsive web design uses media queries. Intrinsic web design doesn’t necessarily need them.


So intrinsic web design is:

* Fluid and fixed

* Stages of squishiness

* Truly two-dimensional layouts

* Nested contexts

* Expand and contract content

* Media queries, as needed


What do you think of Intrinsic Web Design? Please, share in the comments.

Have a nice day!

Bradley Nice,
Content Manager at ClickHelp.com — best online documentation tool for SaaS vendors



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Bradley Nice

Bradley Nice

Content Manager at https://medium.com/level-up-web 👈. I write about web design, web development and technical writing. Follow me on Twitter and Facebook