Season 3 is liveAEO//DECODEDListen at aeodecoded.ai ↗

Active Component Library

SYSTEM
LOGIC.

This is our living component library. It is an ongoing log exploring how to engineer digital tailwinds, accompanied by the exact, production-ready UI components built to enforce them.

Log 001July 13, 2026Pattern Recognition & Safety

Removing Click Anxiety

See it live: Every blog post, for example The 15 Web Standards →

The brain burns unnecessary energy trying to guess what a link does. Most websites treat hyperlinks as mystery boxes, which creates micro-moments of executive dysfunction.

By enforcing strict, predictable link colors immediately, I remove the hesitation of the next click. You never have to guess; you just glide forward.

Production Component: Interactive Legend

Hover over a link above to reveal its underlying logic...

Internal Link

Red dotted links are internal links. They safely link you to another major section of the studio's architecture.

External Link

Solid text with a hot pink hover state is an external link. This means you are leaving the safety of the studio ecosystem.

Glossary Link

Blue dotted links never leave the site. They jump straight to our glossary of terms so you don't have to secretly Google acronyms while pretending to understand tech jargon.

Production Pattern: Inline Copy Integration

This is standard body copy. If you need to direct users to our Performance Metrics, the red dot keeps them in the house. But if they want to view an external site like LinkedIn, pure red text warns them of an exit. When discussing a complex topic like Answer Engine Optimization, the blue dot provides safety and context.

Log 002July 13, 2026Sensory & Spatial Stability

The Physicality of the Web

See it live: The series banner in the footer of every page →

There is a profound difference between rewarding interaction and causing instability. I design for spatial stability. Instead of jarring layout shifts, I engineer safe, predictable color transitions. The UI acknowledges your presence without threatening your balance.

Production Component: The Spatially Stable Banner

Explore The Series

Gaining Your First Traffic

Deep-dive strategies and technical execution for building an audience.

Log 003July 13, 2026Interaction Timings

Asymmetrical Animation

I build with asymmetrical interaction timings. A deliberate reveal rewards hyper-focus and curiosity when you enter a space. But the moment your attention shifts, the element collapses instantly.

Production Component: The Asymmetrical Reveal Card

Answer Engine Systems

Focus to Open

A slow, cinematic reveal proves there is depth worth reading. Moving your cursor away triggers an instant zero-delay snapback. Try closing it.

Log 004July 13, 2026Structural & Environmental UI

Structuring the Chaos

See it live: The footer of every page →

A standard three-column footer is unstructured chaos. I group navigation strictly by intent. A dedicated Business Panel for immediate action, and separated architecture sections to structure the chaos before the user has to.

Furthermore, instead of letting negative space sit dead, I use it as an active, environmental HUD (Heads Up Display). Hovering over a link populates the void with a full contextual readout of exactly where that link goes before you ever click it.

Production Component: High-Intent Footer Grid & Routing Readout

Business Panel

Immediate action & physical contact details.

Contact Studio

The Architecture

Log 005July 13, 2026Information Architecture

The Right to Choose Your Depth

See it live: The SEO & AEO Glossary →

My glossary and content architectures are built on a "Real Talk vs. Deep Dive" toggle. This puts the power entirely in the user's hands.

Here is how we do it: The "Real Talk" option is the easy version—a fast, frictionless summary for immediate context so you can keep moving without burning mental calories. The "Deep Dive" option allows you to trigger a hyper-fixated, institutional-grade breakdown of the exact same concept, exposing the underlying architecture. You choose your depth based on your current bandwidth.

Production Component: Glossary Term Toggle Stack

Entity Framework

Real Talk Summary

An entity is just a defined "thing" (a person, place, or concept) that search engines understand as a distinct fact, rather than just a keyword.

Answer Engine Opt.

Real Talk Summary

The strategy of formatting your website so that when someone asks an AI tool like ChatGPT a question, your brand is the answer.

Knowledge Graph

Real Talk Summary

A massive invisible web that search engines use to connect facts, people, and places together so they can understand context, not just matching words.

Log 006July 13, 2026Technical Performance

Content Over Metrics

See it live: The Performance Log →

100
Performance
100
Accessibility
100
Best Practices
100
SEO
3/3
Agentic Browsing

We hold ourselves to an absolute standard. Our foundational architectures sustain a flawless 100/100 on Google Lighthouse across every category. You can verify the raw receipts of this foundation in our Performance Log.

However, we do not confuse metrics with perfection. A score card is a helpful guideline, but content rules. If our score drops on a live build, it is a calculated, intentional architectural decision. I will happily accept a 50/100 if the experiential value justifies the weight. When we choose to inject high-fidelity content—cinematic video or heavy WebGL interactions—we are making a conscious trade-off to prioritize an unforgettable human experience over a raw machine metric.

Production Component: The Trade-Off Metric Board

State: Pure Structural Code

100/100

Zero render-blocking resources. Highly optimized standard media. The raw, engineered foundation operates at maximum theoretical speed.

Log 007October 28, 2026Discovery & Delight

Choice Before the Jump

See it live: The bottom of the blog →

Most "random post" buttons are a trapdoor. You press them and you're gone — dropped onto a page you didn't pick. I don't send people anywhere blind. The spin is a bit of fun, but the jump is always yours.

So the wheel slows down like a real one, lands, and then waits. It shows you the question the post answers, and you decide whether to step through or spin again. Random gets you curious. Choice keeps you in control.

It also respects where you are. If you've told the blog which stage your website is in, the big top only picks from posts for that stage.

And the motion follows one rule: never leave a blank space. The flag flutters, the doors stay open most of the time and close briefly on a long loop, and the lights chase. For anyone who has asked their device to reduce motion, the big sweeping movement stops and the small, gentle motion stays — so it still feels alive without demanding attention.

Production Component: The Big Top Picker

The live banner from the bottom of the blog. Give it a spin.

Can't decide? Roll up, roll up

Feeling lucky?

Spin the big top and we'll pick a post for you.

Tonight's actPress the button to find out
Log 008October 28, 2026Structure & Upkeep

The Map That Draws Itself

See it live: The Site Map →

Most site maps are a page someone wrote once and forgot. A new post goes live, the map doesn't know, and a crawler following it never finds the new page. A map that's out of date is worse than no map, because it tells search engines and AI systems the wrong story about what you have.

So nobody maintains ours. Every time the site builds, it reads its own files, lists every page and every published post, and draws the map fresh. Add a page and it shows up. Delete one and it's gone. There's no list to keep in sync, so there's nothing to forget.

Publishing works the same way. A post gets a date and time, and until then it doesn't exist anywhere — not the blog, not search, not the map. At 9 AM Eastern each day, the site checks whether anything is due and rebuilds itself if it is. The post, the map and the feed all appear together.

The readout below is real. It was written by the build that produced this page.

Production Component: Build Manifest

Pages mapped
18
Posts live
18
Posts queued
0
Next release
Nothing queued
Map last drawn
Nov 9, 2026, 8:38 PM ET
Open the Site Map
Log 009October 29, 2026Forms & Friction

Meet the Address Halfway

See it live: The intake form, and the signup form on every service page →

Nobody types https:// in front of a web address. People write yourbusiness.com, and that's fine.

But to use the link, we need the full address, and we want the secure version: the one that starts with https://. A standard web-address field handles this by refusing the entry and showing "Please enter a URL." That makes our problem the visitor's problem.

Our forms take the address exactly as it's typed. When you press send, the form adds https:// to the front if it isn't there. You never see an error, and every link we receive is complete and points to the secure version of the site.

On a phone, the field brings up the keyboard with the .com key, and it doesn't capitalise or autocorrect what you type.

Try it below.

Production Component: The Forgiving Web Address Field

A standard field says
Waiting for an address
Our form sends
Waiting for an address

Demo only — nothing is submitted. The same code runs on the intake form and every signup form on the site.

Log 010October 29, 2026Machine Readability

The Schema Map: One Business, Not a Pile of Pages

See it live: The schema panel at the end of every blog post →

Schema is the label on the jar. It tells search engines and AI what a page is: a business, a person, an article, a question with an answer.

Most sites label each page on its own. The business on the homepage, the author of a blog post and the company behind a service page all look like separate strangers, and an engine has to guess whether they're the same.

We give each one a single ID and point back to it. Every post says its author is the Gary on the About page and its publisher is the studio. Every service says the same studio provides it. Engines read one business with one founder and a body of work, not a pile of pages.

It's built from the content, so it can't drift. A new post picks up its article, FAQ and list markup automatically, and the result passes Google's Rich Results Test with 0 errors and 0 warnings.

Tap any piece of the map to see what it says and where it lives.

Production Component: The Live Schema Map

How the site's schema connects: posts, services, the blog and the podcast all point back to one studio and one founder.worksForauthorpublisherproviderpublisherisPartOfauthorpublisherThe studioLocalBusinessGaryPersonServices ×3ServiceAEO DecodedPodcastSeriesThe blogBlogPosts ×18BlogPostingFAQ ×18FAQPageLists ×1ItemList

LocalBusiness

The studio

Says
Lives on
Connects
@id

Counts are live from this build. See the real code on any blog post under "Inspect the schema we deployed for this page."

Log 011October 29, 2026Reviews & Trust

A QR Code You Can Click

See it live: The Genuine reviews standard in The 15 Web Standards →

A QR code is made for phones. Point the camera at it and it opens a link. That works well on a printed receipt or a thank-you card.

On a website, many visitors are already on a computer. Asking them to pick up their phone to scan a code on the screen in front of them adds a step they don’t need.

So the Irishguy Design Studio review QR code is also a link. On a phone, scan the QR code. On a computer, click the QR code. Both open the Google review form for Irishguy Design Studio.

The QR code is drawn as a sharp graphic rather than a photo, so it stays crisp at any size, and it was tested by scanning before it went live.

Production Component: The Scan-or-Click QR Code

QR code that opens the Google review form for Irishguy Design Studio

This is the Irishguy Design Studio QR code for posting reviews to Google. Scan the QR code with a phone, or click the QR code on a computer.

Log 012October 29, 2026Navigation

All 15 at a Glance

See it live: All 15 at a glance in The 15 Web Standards →

A long list is hard to keep in your head. Fifteen standards in a row turn into a wall of text by number six.

So the post opens with all fifteen as squares. Each square shows the standard’s number, its name, and which kind of site it applies to, in the same color as its card further down: blue for every site, pink for e-commerce only, gold for depends on your content.

Tap a square and you jump straight to that standard. The same colors and shapes carry through to the cards, the edge labels, and the big picture summary, so readers always know where they are.

Try it below. Each square opens that standard in the post.

Adapt
My
Ideas

The Exception to the Rule

Rules create the foundation, but joy makes it human. I spent 30 years learning the rules so I could engineer the perfect system, just to prove I can step completely outside of it. Do not just copy me—adapt my ideas, break them, and make them your own.

Free 15-point website checklistGet it →