Even AI Can’t Conceive Of Block Theme Analogies

July 2, 2024

Warning: Very geeky stuff ahead. If you’re not easily roused to emotion by debates about Web design and development, you’ll probably be bored to tears. Unless, of course, you’d like to see some truly terrible AI images, which is always fun — in which case, keep reading.

Now, about block theming:

My complaint — and the complaint of countless other Web designers and developers, young and old — is that block theming violates the principle of separation of content and presentation (which to me is nearly as sacred as the separation of church and state, even if you do find me using inline CSS here and there).

I tried repeatedly this morning to get a few different AI image generators to spit out what I was picturing in my mind: an object that was half dinner plate and half food item, to illustrate the result of combining content (the food) with presentation (the plate).

Regardless of my prompts — I can get a perfect hybrid of almost any two people (ask me sometime to show you what Gloria Bunker should have looked like in real life) or other pair of animals, but not a single fried egg actually melding with a plate — the result was never once the nightmarish hybrid I was aiming for, but just a plain, hot mess.

So I asked Copilot for help, thinking that it might come up with some element I’d either overlooked or never known.

Me:

Can you help me write an image prompt? I want a dish, like a dinner plate, melded into a weird hybrid of itself and some easily recognizable food (like spaghetti and meatballs). I’m having difficulty specifically with getting the two objects to blend. This prompt is for Stable Diffusion, by the way.

“Certainly!” replied Copilot, in what I always imagine to be the voice of Curly Howard. “I’ll create an image prompt for you.”

But instead of a prompt, it created three images — which would have been fine if it had grokked my prompt in the first place. Here’s the most eye-catching:

Well, I did kind of want something nightmarish, I suppose.

Giving up on that, I went back later to see if Copilot could help me explain separation of content and presentation for non-geeks, and exactly why trying to combine a food with a plate — like, on the molecular level — just can’t happen (unless, of course, you are Jeff Goldblum and you have just been melded with a teleportation pod).

Me:

How would you explain the separation of content and presentation to someone who knows very little about Web design? I get it, but it’s not easy to explain to laypersons.

Copilot:

Certainly! The separation of content and presentation is a fundamental concept in web design. Imagine a human body: the skeleton represents the core structure (content), while the flesh defines its appearance (presentation). Similarly, in web design:

Content: This is the essential information—text, images, videos, etc.—that you want to convey to users. It’s like the body’s skeleton, providing structure.

Presentation: Think of this as the visual layer—the styling, colors, fonts, and layout. It’s like the body’s flesh, determining how the content looks.
In practice:

HTML (Hypertext Markup Language) defines the content structure.

CSS (Cascading Style Sheets) handles the presentation, making your website visually appealing.

By keeping these aspects separate, web designers can maintain clarity, improve collaboration, and ensure easier maintenance. It’s like having a well-organized wardrobe: clothes (content) neatly hung on hangers (structure) and styled with accessories (presentation). 😊

Me:

That’s very good. I was thinking of the analogy of food (content) versus the plate it’s on (presentation). What do you think of that?

Copilot:

I love your analogy! Comparing content to food and presentation to the plate is spot-on. Let’s break it down further:

Content (Food): Just like a delicious meal, content is the heart of your website. It includes text, images, videos, and other essential information. Think of it as the flavorful ingredients that make up a dish.

Presentation (Plate): The presentation layer—handled by CSS—is like the plate on which you serve your meal. It determines how your content looks: font styles, colors, spacing, and layout. A well-designed plate enhances the dining experience, just as good styling enhances user engagement.

HTML (Cooking): HTML (Hypertext Markup Language) acts as the chef. It prepares and organizes the ingredients (content) into a cohesive structure. Without it, your meal (website) wouldn’t come together.

Remember, a beautifully presented plate can make even a simple dish feel special. Similarly, thoughtful design can elevate your content and create an enjoyable user experience! Bon appétit! 🍽️🌟

That Copilot — such a flatterer.

But yeah, that pretty much sums it up.