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.

06 LOFI THEME SELECTION: Cheating with Color

PGCw/C is a popular color theming book, published in 2000. You can buy it used at Amazon. The book was supervised by a Senior Vice-president of The Big-P Corp, Inc.

Color Themes for Dummies
Pantone Guide to Communicating with ColorI’ve read the guru author’s other written works and they’re centered on the psychology of color almost to the point of being cosmic. This book is like a “Color Themes for Dummies” –not like the rest. Very practical and brass tacks. It’s definitely written to sell the Big-P color system. Almost every color in their palette is used in the book. It appears this was one of the major goals.

What Colors Should be Used Together?
Regardless of motive or simplicity, the book is a great tool for speeding up website production. One of the things most used on a low-fidelity site is color. This is because color on the web has no-charge, no loadtime, and no setup like print. Millions of web colors instead of a limited print palette like CMYK or Big-P. Frequently, for programmers it’s difficult to know what color should be used together. This is almost bulletproof design.

Reverse Thematic Lookup Table Online
Using the book as a key, I and my wife, Terrie, built a reverse thematic lookup table. It’s written in HTML but uses PHP-GZIP compression so it will load fast. This file is about 25,000 lines of code.

The Book is the Key
How to use the color tool is simple –but requires the book as a key. Using a color picker you select a color sample from a photo, a logo, a corporate color, or put an image through an online color filter.

Convert the hexcolor of choice to a Big-P color (Photoshop?.) You’ve now switched from an RGB palette with millions of alternatives to a palette with just 2,000 colors. Much more manageable for decision making.

Use Your Browser As a FIND tool.
The selected Big-P color is used on the Reverse Lookup using the EDIT > FIND browser function. This will indicate the theme category and what page of the book you can find it. The palette has again been reduced. Each theme page has 24 color combinations demonstrated. Color selection keeps getting easier and easier. From that you can select the dominant, subordinate and accent colors. I’ll be demonstrating this later in future entries.

It’s color combinations that create themes.
Themes are based on visual memories and emotion. This is what the designer wants the audience to feel when they view the site. Color is one aspect of theme. We’ll look at typography soon.

Please comment.

05 ANTI-MARKETING: How slick is too slick?

A change in recent years in marketing strategies is what some call anti-marketing. Sites who’s goal is to sell —perform better when the design is “low fidelity.”

Information Overload
More and more people are becoming uninspired from traditional “over-marketing” techniques. What is found in traditional marketing often is information overload. There is too much sales pressure and choice. This leads to confusion and irritation. People are yearning more for simplicity and authenticity. Most of the world has no design training, and don’t recgnize good design.

Minimalism
LoBand website design strips a site of its “ornaments” and put a higher priority on functionality with a minimalistic attitude. Its success is due to the changing behavior of viewers in general. People are becoming more and more inclined for simplicity, they want their information as quickly and efficiently as possible. Oftentimes adding flair (i.e. elaborate backgrounds, fancy images, etc.) can deter readers from absorbing information because it can easily be a distraction. By focusing efforts on functionality, you maximize getting your information through to the readers.

Overkill
This does not mean LoBand sites aren’t “designed.” They are. But they’re not over designed. They’re well structured, readable and fast-loading. High-gloss, pixel-perfect, grid-aligned page designs using the latest in technology don’t necessarily sell. Without a good product idea, all that work is just fluff.

03 LOFI COLOR TOOLS: Reduce thematic creation time.

Many web programmers confess they have a weak background in graphic design. They erroneously suppose art is a genetically inherited trait and not a learned experience. If you have the gift—great—but if you don’t you can compensate with low-tech shortcuts and workarounds. Sharing this information is the overall goal of this blog.
The Web Designer's Idea Book: The Ultimate Guide To Themes, Trends & Styles In Website Design
Reverse Engineering Website Themes
With a screengrabber—now built-in to most operating systems or as addons to browsers—you can capture attractive screens and start archiving ideas. There are also archival websites like www.designmeltdown.com. In the classic portion of the Design Meltdown site are thousands of screens and hundreds of classification. There is even a nice section on principles of design. I recommend visiting and reading the principles. But it’s a discouraging place when you suddenly recognize web design is just rearranging colored boxes inside a rectangle. Get over it.

Don’t Be Tempted to Buy
A book evolved out of the designmeltdown website: The Web Designer’s Idea Book: The Ultimate Guide To Themes, Trends & Styles In Website Design by Patrick Mcneil. I have read this book and quickly sold it. I don’t recommend it for your reference library. It has a seductive title. Get it through Interlibrary Loan instead. You cannot reverse engineer websites from a book of printed pictures.

HTML Color Picker: A key tool for reverse engineering a website.
There are lots of freeware color pickers. A color tool is an application, utility or addon. They are usually found within graphics software and online. They are used for color management, creating color schemes, picking colors, and more. They sometimes feature a color harmonization interface, a color picker, RGB and hex conversion and manipulation, a collection of saved schemes, and other similar features. Web masters, designers, developers, and professionals that work with other types of screen or print media use these tools in their work. Do I have a recommendation? No. It depends most upon your operating platform and programs you use—including your browser. Firefox has lots of nice addons—but many don’t work on Linux machines. So you must decide. Find one.

A Picker Isn’t a Color Expert
A color picker allows you to explore other designers successful color combinations (themes.) You may wonder where I’m going based on the blog entries thus far:
1) I’ve talked about how web fees are dropping and lowtech can combat the price erosion.
2) I’ve talked about The Big P Corporation and how they won’t let online color tools use their reference numbers.
3) and now I’ve mentioned screengrabbers and color pickers.
While these topics may seem random, soon I’ll tie the ideas together and show how to find the right theme fast for your new website project.

Please comment.

01 WEBSITE DESIGN FEES DROP

Just about anyone can create a web presence with a DIY blog and other low-end online tools. And some of those are quite fancy. This trend of eliminating barriers to web entry worries web designers and programmers. The competition is not other programmers, but blogs and social sites. Like movies competing with restaurants for entertainment dollars. This competition is of such extreme emotional frenzy it causes a piranha effect among web designers.

The Motive to Kill Low-tech Websites
Programmers and IT people seem enthusiastic to kill legacy or low-tech website production. They mock it’s non-conformity to future standards that don’t exist yet. Why? Fear! As the level of understanding and knowledge increases in the general web-sphere, the magic of building websites is diminished. This decreases perceived value—or market worth. To increase value, programmers must embrace and push more sophisticated programming techniques, web standards, buzz vocabulary, and peddle dizzy benefits—even when something simpler would do. There is no motive to simplify. Standards geeks would be appalled at such a cheap accusation as pay scale motivation! But I can see little other reason than money. I don’t believe in the idealist altruism they claim of “Making the Web a Better Place.” Cognitive dissonance at it’s best.

Web Fee Erosion: Client’s Get Smart
Programmers and web designers are generally not in favor of fast, old-fashioned sites because they then would be paid less. Especially if they charge by an hourly rate—or even by lines of code. Feature creep, mystery, and site bloat are necessary evils for keeping prices high. The customer doesn’t usually know they’re buying an over-engineered website because of their own web anxiety. The more web savvy the client, the less likely they will buy fluffy features purely on recommendation or speculation of future need. There will be more future erosion of prices and economic hard times. Who will be ready to compete?

Avoiding the Forever Learning Spiral
One of my biggest peeves, is why would I, as a web engineer, keep pushing uphill on a steep learning curve when it’s not necessary for good-enough end results. I can master the web for marketing communication purposes at Pareto’s “80%”—if I limit my palette. Perfect—100% technical knowledge—is unnecessary overkill -aka diminishing returns. Each web technology has ideas to skim and use but that doesn’t mean embracing the whole kit and caboodle. For what purpose? Just so I can say “I know it all.” Whoopee! The goal with low-tech is facilitating faster production. Marketing departments want to reduce the time to test ideas and products. Low-tech websites are faster, more measurable testing with smaller investment. They’re not coding monuments—but adaptive tools.

Creativity Can Run Amok
Innovation requires limitations. Low-tech simplicity forces limitations on the design. Creativity and innovation are not the same thing. Creativity requires freedom. Innovation requires profits. My formula is C=1/$ or Creativity is the Inverse of Dollars. This forces creativity to be constrained by hours, money, talent, etc. Then I can evaluate the appropriateness of a whole construction process—not just artwork.

Benefits of Low-tech Websites
Entrepreneurs are risk averse. They have few resources to waste. They must have a win “out of the gates.” No second chance. Low-tech is the answer for many of those problems. I’ve seen companies spend years developing gold-plated, over-engineered, bloated websites. These could have been built incrementally with low-tech in sections and accelerated completion time. By minimizing investment, pieces become disposable. Unfortunately, once a corporate authority site is built, management is frequently hooked. They are so heavily invested / addicted, they can’t bear to let go. Low-tech allows for more message experimentation without anxiety or commitment.

Please leave a comment. Thanks.