BEFORE screen 8K page weight. No purple background.
This somewhat bland webpage, above, weighs only 8K. To give you a speed-weight comparison, the average Internet webpage weight today is 1 to 2.3 megabytes. Page weight is the aggregate file sizes of all graphics and code elements summed together for one page. That means this page potentially loads 125 times faster than today’s “average” webpages. that isn’t true, of course, because of various factors like browser parallel loading.
You may say, “Fast. Yes. But it’s pretty boring.” It’s DELIBERATELY boring. But there is no waiting. All text on the page is HTML browser-safe type and readable by search engines. It loads instantaneously fast. That was part of the experiment. NOTE: The background color is not “black” but #333333, a very dark gray. Using black on screen produces a color that isn’t naturally seen in nature. It can appear surreal. Toning it down helps.
Why Build a Boring Page?
Here’s why – the next page is this one:
Black text over yellow flower petals. BEFORE.
It’s as if the following screen just “bloomed.” It appears bigger and lighter than if it were the lead page. Psychologically, this effect was used for centuries by architects. I call it the “Cathedral Tunnel Effect.”
Cathedrals were deliberately built with a dark constricted passage or entrance hall that once you step out of it and into the grand hall caused an awe-inspiring reaction. I’m not calling my demonstration that dramatic. But it can be put to good use. It also works well when switching the first pages dominant color to a “complementary color” on the following webpage. I’ve seen this done and it’s beautiful. Think of it as using a full-coverage solid complementary ink color on the inside cover of a catalog. If you’ve seen that, you know what I’m talking about.
The effect is based on a physiological phenomenon inside the eye where the cones reverse and pleasure is actually generated in the brain from the visual stimulation. This effect is “free” and –as a bonus– speeds up page loading because it is basically using HTML color which is a simple code, not a heavy image file.
After some consultation with my brother, Brad Teare, he recommended trying some purple behind the text with blurred edges.
Shown in the example below. This is a complementary color (somewhat) to the yellow on the following page.
purple-background-glow
AFTER screen 10K page weight. With purple halo background.
It then seemed the next page with the former black-text-over-yellow-flower appeared bland or flat. Switching the text color to a purple helped – but not the same purple (#330033) as on the HOME page. It had to be lighter (#330066). The eye read the dark purple (#330033) text as black with all that surrounding yellow.
Purple text over flower petals. AFTER.
This is an optical effect known as “simultaneous contrast.“
Two Big Questions: Legibility and Speed?
Do we lose the HTML Times New Roman type edges in this color experiment? Is it better? The button definitely is pulling the eye away from the text. Try to ignore that button-blunder. It needs a “reverse” color solution. The bright red is glaring. This was changed in the live experimental page.
So Why Add the Purplish Background Glow?
We’re doing an experiment based on Johann Wolfgang von Goethe’s color theories of physiological color. There is some speculation complementary color resets the cones in the eye giving a pleasant sensation. Is it true? I don’t know. From our experiment, does it seem more pleasant?
So The Questions remains: Was the 2.7K purple blur background a worthy effect? You tell me.
The experimental site was never commercialized. It was all great creative fun.
