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
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.
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.)