19: CATHEDRAL EFFECT REVISITED


In entry 09, I talked about the Cathedral Effect. With some consultation with my brother, Brad Teare, he recommended trying some purple behind the text with blurred edges. This is a complementary color (somewhat) to the yellow on the following page. I also added a “prettier” HTML NEXT button. 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 text as black with all that surrounding yellow. This is an optical effect known as “simultaneous contrast.

Here are the new results:
(click to view larger images)


The HTML rollover effect of the button would be better with the opposite colors lit up on rollover. I didn’t particularly want it centered but not all test browsers rendered it in the same place. Centering cured the problem. Fine!

Two Big Questions: Legibility and Speed?
Is the new purplish background more readable than the old screen in entry 09.

Here’s the old:

And the new:

Click to see larger versions. Do we lose the HTML Times New Roman type edges? Is it better? The button definitely is pulling the eye away from the text. It needs the “reverse” color solution as mentioned. The bright red is glaring.

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 pleasure sensation. Is it true? I don’t know. From our experiment, does it seem more pleasant?

Try a live test.

So What About Speed?
I tested the HOME page loading speed on websiteoptimization.com

They said:
Congratulations, the total size of this page is 7081 bytes. This page should load in 2.21 seconds on a 56Kbps modem. This site is not using HTTP compression, otherwise called content encoding using gzip.

I then used some Firefox addons to test pageweight:

YSlow tool for Firefox = A rating 10.9K
Extended Status bar addon for Firefox = 10K in 0.7 seconds.


What is that 1.3K of JavaScript?
I’m not using any JavaScript. It’s an external attempt to load GoDaddy code. It’s being suppressed but still slows down the loadtime a tad. I do not have PHP features because free hosting doesn’t include server languages –something GoDaddy doesn’t tell you when you sign up. (Bait and switch? Most definitely.) Any registration for a domain name qualifies you for this hosting. BUT– Dot-info domains are only $1.07 per year with 10GB of hosting space included. This requires using the “GoDaddy Hack” NOTE: entry #38 is the only trick that still works. GoDaddy changed their code process a few years ago.

GZIP-COMPRESSION: What’s the speed gain?
GZIP is very old –existing even before Internet days. It’s an open-source file compression technique that reduces redundancy in the HTML code. All browsers can decompress GZIP on-the-fly. It’s not the same as removing “white space.” White space removal eliminates spaces between words and code. That would buy a 10% reduction in the HTML and was significant on dialup –but not any more. GZIP will reduce the HTML code (not images) by 50% to 70% of the file size. For this page, we have about 7 or 8K of code. Chopping out 4K would give us a little speed –but it’d be more significant of a gain on a bloated 375K page. So for the extra cost of $75/year we don’t need PHP and GZIP. When I have GZIP-PHP available I use it. The extra boost in speed makes me smile. (Removing white space AND using GZIP is an insignificant gain. Not worth the time since all “blanks” are redundant and compressed by GZIP anyway.)

So the Questions remains: Was the 2.7K purple blur background worth the effect? You tell me.

09: DECONSTRUCTING LOBand PAGE STRATEGIES

Homepage Usability: 50 Websites DeconstructedBelow is an embedded CSS code for altering the letter spacing for a Times Roman headline. This is the equivalent of kerning in print typography (removing space for better fovea fit.) Embedded CSS code means the code does not exist in a separate CSS file. Instead it’s placed right in the header of the HTML document file. There are three ways of styling CSS: External, Embedded, and Inline. I’m not discussing the differences right now. Just be aware they exist and there is nothing “bad” about any of the three methods. Embedded is my preference only because I like to design with “code snippets.” Cut-and-paste.

<STYLE TYPE=”text/css”>
<!–
H4 { letter-spacing:-2px; }
–>
</STYLE>

This code creates CSS-enhanced HTML type used on an Infosite headline. Here is a screengrab of the HOME page:


There are two HTML Frames on this screen. I’ll be talking about Frames in a future entry. There is only one graphic element in the making of this page. It is a small HTML gradient tiling background “string” GIF. It’s size is about 15 px wide and 500 px long vertical. I call these “tiling strings”. They aren’t necessarily gradated and they can be either horizontal or vertical. This one is shown at left and weighs only 850 bytes.

How good is “good enough” page load time?
The screen/page is a type of SPLASH page since you cannot return to it except with the browser back button. But because it has a NAVBAR, it is legitimately a HOME page. The entire page weighs only 8K. To give you a speed-weight comparison, the average Internet webpage weight today is 375K. Pageweight is the aggregate file sizes of all graphic and code elements summed together for one page. That means this page potentially loads 47 times faster than “normal” webpages. You may say, “Fast. Yes. But it’s pretty boring.” It’s DELIBERATELY boring. But there is no waiting.

What’s an Infosite?
The message is very obvious what the site is about: it’s selling the benefits of infosites. By my definition, Infosites have a “.info” extension instead of a “.com” extension. This means the domain registration costs $1.07 instead of $11. A tenth the price. This increases the liquidity or disposablity of the website. Minimum investment.

In the lower NAVBAR, the font usage is ALL CAPS Impact. The letter spacing here is just non-breaking spaces. The space makes the font more readable at it’s smaller size.

So all text on the page is HTML and readable by search engines. It loads fast.

Why Build a Boring Page?
Here’s why –the next page is this one:


It’s as if the screen just “bloomed.” It appears bigger and lighter than if it were the lead page. Psychologically, this is a primacy effect used for centuries by architects. I call it the Cathedral Tunnel Effect. Cathedrals were deliberately built with a constricted passage /entrance hall that once you step out of it and into the grand hall caused an inspiring awe struck reaction. I’m not calling my demonstration that dramatic. But it can be put to good effect. It also works well when switching the pages dominant color to a “complementary color.” 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 is a LoBand effect because it is free and it speeds up page loading. It’s very critical the landing page load fast. Visitors won’t tolerate long delays –or even short delays.