Intrinsic design vs. device view points

[bph]

How Gutenberg developer implement responsiveness for the block editor.

Resources:

• Responsive blocks & intrinsic web design
• Everything You Know About Web Design Just Changed.

From conversations... An answer to Why are there no breakpoints and responsiveness in blocks?

"The projects is implementing intrinsic design, that reacts to any screen size, and not just arbitrary break points. From there it aims to adjust typography and layouts in patterns. The first implementation is available with the Row and Stack variation of the Group block."

Fluid Typography comes to WordPress 6.1: "Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases."

Could emphasize how breakpoints immediately bring a lot of cognitive overhead for users, which is present in all the block libraries that do it. Furthermore, artificial breakpoints are not flexible enough (fixed sizes for mobile, tablet, web), don’t account for patterns inserted in different contexts, etc.

Page Builders, like Elementor or Beaver Builder, started five to seven years ago. Breakpoints were all that was available back then. Jen Simmons discussed Intrinsic design at the A List Apart Event in April 2019

[annezazu]

Great video here that touches on aspects of intrinsic web design vs breakpoints, along with the limitations of breakpoints: https://heypresents.com/talks/be-the-browser-s-mentor-not-its-micromanager

[bph]

Nice find, @annezazu Thank you!

[bph]

The proliferation of screen sizes - too many to control by break points. ...

[colorful-tones]

This is a great idea and I would be happy to run with this as my first piece.

[colorful-tones]

I have some time set aside on Friday to try and drop an outline.

[colorful-tones]

I'm feeling a bit perplexed about a sound title for this piece. I'm not too keen on "something vs something", because of the binary and winner vs loser contention.

Here is my rough, high-level outline.

• Brief history of breakpoints: challenges they seek to overcome, shortcomings
• Fluid typography & spacing: rather recent introductions to WordPress, but not a recent concept. Again, cover the challenges they seek to address and possible shortcomings
• Where the future may lie? - exciting potential for upcoming features

[bph]

@colorful-tones Almost every post that started as an issue ended up with a different title. It was more the idea that some people aired grievance that the editor is not responsive because it doesn't over break viewpoint as seen by 5 top seven-year-old 3rd party page builders, while overlooking the primary approach to responsiveness is the newer fluidness and intrinsic designs, rather than burden users with view points. You are the writer, and you determine the title. :-)

Starting with the second bullet point and then come back to the first - would get the reader off to a better start learning how it works. Apart from that, the outline appears to be solid.

[colorful-tones]

I got started on a draft for this yesterday, but it still has a way to go. I'm hoping to have a complete draft ready for review by the end of next week.

[colorful-tones]

Here is a rough draft that I've been working on: https://docs.google.com/document/d/1fS8McxhIVHA8n15FnktL8WCEqZYIzWvrww6LOYnhI5A/edit?usp=sharing

[annezazu]

I'll review this early next week!

[annezazu]

Reviewed! It's a great start. I would opt for clarity over cleverness in the title and intro. Overall, the pieces are factual and descriptive but I think could be made more compelling, perhaps with visuals like the one shared here.

[bph]

Thanks @colorful-tones for taking on this post. I like the straight forwardness in examples from the various themes. It's a bit short why view points are not helpful anymore. There was also a great discussion about this topic posted by Joen Asmussen in the issue: https://github.com/WordPress/gutenberg/issues/34641

It might help giving it a bit more meat on the theory and rationale behind it opting for the fluid and intrinsic design.

the section "Shortcomings of responsive design by media query" - Is a bit thin in explanation...

If you want to add more theory: https://css-tricks.com/intrinsic-typography-is-the-future-of-styling-text-on-the-web/ from 2021 is a very good article.

[colorful-tones]

perhaps with visuals like the one shared here.

That is certainly a compelling visual. However, what are the guidelines around using images and crediting sources? I'm not sure where that image came from and who to credit.

@bph @annezazu I'm not sure I'll have the bandwidth to get this over the finish line. All of your observations and feedback are spot on and I'm missing some gaps in knowledge for the WordPress roadmap or critical theories apparently.

For now, I'm going to unassign this so I don't hold editorial expectations. 👍

I'll leave my Google Doc draft publicly available in case anybody wants to try and run with it. Thanks for all the great feedback!

[bph]

Additional discussion from project contributors/leadership:

• https://github.com/WordPress/gutenberg/issues/33447
• https://github.com/WordPress/gutenberg/issues/34641

[bph]

@colorful-tones So sorry to hear that our comments let you shy away from finishing this post. The post is well structure and the examples are great. Thanks for keeping the Google Doc available, so we can give you co-author props. :-)

I see you posted a different topic idea on the discussion board. Thank you for that! :-) I also want to know how this gradient thingy works.

Cheers!

[justintadlock]

@colorful-tones Thank you for your work toward this so far. I'm happy to take it and run with it. :)

[justintadlock]

I've finished the bulk of the draft, which is in a Google Doc. Most of what's left will be the code example pieces at the end. I wouldn't normally post for feedback at this stage, but I think it would be helpful to iron out the early sections of the piece around what intrinsic design is and why it's useful. Are there things I'm missing? Are the definitions fleshed out enough? etc.

[annezazu]

I'll review this next week as best as I can!

[annezazu]

I don't seem to have edit access so offering feedback here for now!

There is nothing wrong with this question and those similar to it.

I'd rephrase this more positively: "These are important questions to ask-- Designers have been having these discussions for decades at this point". I love the rest of that paragraph. It's excellent and specific.

Web design needed to evolve to handle a rapidly-changing world where site visitors were suddenly carrying around computers in the palm or their hands or reading from the comfort of their big-screen TV in the living room.

Minor typo: "palm of their hands". You use "evolve" three times in the first section. I'd try to cut back.

From the health of the WordPress project, this meant making some tough decisions about not jumping head first into adding every possible CSS property as an option in the interface.

I might say "For the health" (I think that's what you mean).

Instead, it is an iterative process where developers have seen the release of new tools and techniques over the last few major releases and can expect more to come.

I'd perhaps link to https://make.wordpress.org/core/2022/09/26/core-editor-improvement-catalyst-for-creativity/

Finally, I might note the upcoming 6.2 release including min font size: https://github.com/WordPress/gutenberg/pull/42489#issuecomment-1425032620 It might be too in the weeds but it might be a good example of the iteration and evolution you wonderfully emphasize.

Great job :)

[justintadlock]

Thanks, @annezazu. This is great feedback. I'll be doing a copyediting review of it today and will fix up all the typos and smooth out some of the rougher bits.

The biggest thing was making sure I was getting the descriptions and definitions right in the early sections.

I'd rephrase this more positively:

You know, I literally thought to myself when I read through again yesterday, "Anne will tell me to make this more positive." Should've trusted my what my brain was telling me. :)

[annezazu]

Hah! Glad I've become predictable. I think the framing is excellent and it feels all very relatable/understandable.

[justintadlock]

Thanks to @mburridge for also providing a copyediting review. 🙌

I'm officially moving this over to "Needs second review" now. I believe the draft is in a good enough state for this stage, but I'm also going to reach out to a couple of others who are more knowledgeable on intrinsic design to make sure the concepts are well explained.

Here is the doc for review: https://docs.google.com/document/d/1AkMehEMKDd-aoZhonw2UV7yNTm1mePDA84H16pp4yXk/edit#

[bph]

@justintadlock I feel this is ready to go. It's a great write-up. I just added the publishing checklist here, for posting it to the blog. :-)

• [ ] Post Title in Sentence case
• [ ] Are Category or Categories selected?
• [ ] Are Tags identifies?
• [ ] Is there an Excerpt?
• [ ] Props added?

[justintadlock]

Published: https://developer.wordpress.org/news/2023/02/intrinsic-design-theming-and-rethinking-how-to-design-with-wordpress/