09: DECONSTRUCTING LOBand PAGE STRATEGIES

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