22: Links about downgrading bandwidth

• A recent UK survey questioned more than 2,000 people and found that 41% of respondents regarded a slow Internet connection as the most annoying part of their day.

Customization (bottom of the list of site desirables) = decoration and embellishments. It's out of vogue with viewers. The new trend in web design is simple and austere. Those features combined produce speedier page load times. "Content density" is how many pictures and words are crammed onto the page. People want low density, simple messages for faster comprehension. These desirables are the opposite of what websites production is today. This is because business owners and designers aren't listening to the audience. The audience doesn't want what's been served up for the last decade. They want change. And more than anything they want SPEED!

A year ago, enough people downgraded their highspeed bandwidth to cause ISPs to charge new "downgrade fees" (usually about $5.) Another chance to make a buck! Highspeed monthly rates are a little less than $40 --nationwide average. People feeling the pinch for dollars did NOT discontinue services generally but elected to work-and-play with less.

USA Unemployment and Penny Pinching
So will employment go up thus improving the Internet bandwidth situation. Um? I think not. We have several waves to ride out caused by changes in the GLOBAL economy. Bailout begets bailout internationally. This sounds pretty pessimistic, I know. The point I'm making is there now is a demand for unadorned and faster websites. It's driven by need and wish. People wish the web was faster. But it won't be for sometime. The solution IS leaner, smaller websites --economy of scale and less bloated gluttony of bandwidth. As one article put it, the Internet went from "Primitive to Complex and now to Simple." We're being forced to move into the "simplify stage." The Internet isn't going to collapse! It's just will be unpleasantly slow and sometimes painful to use.

ISPs Pullback Building Business
With the downturn in the economy, Internet Service Providers (ISPs) are not upgrading their capacity to match demand. In fact, they are limping along propping up an overloaded system. Internet connections are slowing down because of this delay in upgrading. Streaming video, YouTube, SPAM, and mammoth downloads are some culprits hogging bandwidth. Saturation! I think we'll be seeing more communication company mergers.

Alternative Budget
Instead of dropping highspeed, people are opting to drop cable TV and watch online. This only creates more demand for bandwidth. The pipe isn't getting bigger. Things are tightening.

What About Fiber Optics 100X Speeds?
Idealists and Utopian technocrats are preaching converting copper to glass and connecting America for higher access speeds. This conversion to fiber optics isn't happening soon. We say, "Yeah, but they did it in Japan!" Ahem. Japan is a tiny island nation -smaller than most of our states. We have a lot of mileage to cover in the USA. Is it realistic to say this "growth" will happen during bad times? Perhaps by increasing the money supply (inflation) the government can bankroll it. But how long would it still take for the conversion? Years or decades? Interestingly, Google is giving "matching-fund" grants to rural communities for installation of fiber optics. But Google alone can't bear this burden.

So grassroots innovation in website efficiency is the stopgap and edge --until better times.

http://www.recessionbudget.com/downgrade-high-speed-internet/

http://news.cnet.com/8301-1023_3-10206157-93.html
Recession forces some to downgrade to dial-up

Americans switching from broadband to dial-up
http://www.myce.com/news/Americans-switching-from-broadband-to-dial-up-15598/

DIAL-UP: RESURRECTED BY RECESSION?
http://www.populationstatistic.com/archives/2009/02/26/dial-up-resurrected-by-recession/

"As we've become a high-def, two-way, video-on-demand society, we're overloading the wires and, especially, the airwaves along which our data travels. The result is going to be a three-year slowdown of the Internet experience, with more expensive connections and innovation turning toward efficiency rather than extravagance."
http://www.pcmag.com/article2/0,2817,2344696,00.asp

"Monopoly economics on the wire-line side and inadequate networks on the wireless side means we're not going to see cheap, unlimited Internet over the next few years. The result of this mismatch between applications and infrastructure is going to hurt everyone at the start, but don't underestimate clever technologists. Bandwidth will become a currency. Web pages will get more basic; marketing bloat will decrease."

The Great Internet Slowdown
http://www.pcmag.com/article2/0,2817,2344697,00.asp
"We're entering an era of efficiency —of doing more with less bandwidth. That doesn't mean we're going to stop innovating. It just means we're going to do it with fewer bits."

21: Checking liquid screen sizes

A 10K LoBand webpage compared at different screen resolutions.

1440x 900 pixels


1024 x 768 pixels

800 x 600 pixels

20: Speed and Ranking

Website Speed Now A Definite Factor in Google Rankings and 12 Tools to Check Site Speed

Check this link for info current as of May 2010 about measuring webpage speed.

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.

18: VALUE ANALYSIS: Why lean websites matter.

Value analysis is a principle used to improve industrial process but it can be applied to many aspects of creativity and innovation. The components are: combination, simplification, elimination, standardization, and substitution. These principles are also used in optimizing lean manufacturing.

Is there really such a thing as lean websites?
While "lean" websites is an ideal, generally "manufacturing" and "web engineering" don't quite fit the same model. It's been tried. Manufacturing has inventory and delivery of materials. Uh? Where is that in websites? LoBand website philosophy is about as close as you can get to this ideal of streamlining web construction.

Does LoBand web make a difference?
It depends upon what your goals are. What kind of resources do you have: time, budget, energy, space, speed, etc. Nothing is faster than LoBand. Nothing is simpler. There are simple "canned" alternatives like templates and blogs, but nothing for custom work with branding and theming.

Branding requires originality.

Branding is more than a logo. It is something beyond your control. It's the perception in your customers mind. They OWN your brand. How visitors feel when they land on your website is part of the branding experience. It is something you can't buy in a can or a template.

Learn more from this slide show by Marty Neumeier what branding really is.

17: Links to LoBand Guides Online

A "LoBand" website is a website with very simple architecture and designed for users with low bandwidth connections.

Aptivate Top10 LoBand Guidelines
Aptivate has a lot of good suggestions for low bandwidth websites. I agree with most of the things they say but their motive seems to be making information accessible to third-world nations. That is a worthy goal, but not the objective of LoBand websites.

Low-Bandwidth Design
This article summarizes the most important considerations when designing a low-bandwidth website. This is a good overview of LoBand benefits and shortcomings.

BMO: Guidelines for Low Bandwidth Websites
There are two very good reasons why creating small websites (sites requiring minimal data download to see and use) is something everyone should consider: usability and global accessibility.

16: Bad Economy: the LoBand friend

With LoBand websites the cost of failure is cheap. It's so low, you can swing the bat many more times. In a bad economy, no one really notices or cares about more failure. That creates a better environment for risk-taking, which is the only way innovation occurs.

At the same time, launching in a bad economy imposes a kind of discipline, forcing entrepreneurs to keep costs low and be smart about marketing and distribution. LoBand is a self-imposed discipline.

15: THE MISSION OF LOBand WEBSITES: Crafting websites out of discarded concepts and code.

LoBand websites are about the actual making of DIY websites, the joy of building (and owning) something unique. It's about crafting faster websites using free and lowtech resources. LoBand borrows from antiquated code recycling, scavenging, and reuse. It takes abandoned, throwaway code and plays with it. Especially code that is considered old-school, unfashionable, taboo, or forbidden by mainstream "web standards" programmers. These are "old code" like HTML Frames, Tables, single-pixel GIFs, marquees, and others.

Complex technology is an enslaving force.
LoBand are built from rediscovering "web artifacts" belonging to another time, primarily the 1990s. Modern websites are too complex today. LoBand sites are nostalgic and have the mark of a craftsperson burnished into them. Reusing old elements is classic craft like during shortages or rationing in a web cottage industry. This provides timelessness in a constantly changing modern technical culture. LoBand are a response to modern plastic-blob consumer technology.

Built with tables, CSS tiling background and HTML text. The screen above is taken from a 17K LoBand site (0.5 sec load time) assembled and hosted in just a few hours.


LoBand sites aren't mass-produced; they're anti-slickness and unique.
They rely heavily on re-purposing vintage, legacy, low-technology code and software tools. Production requires learning low-tech and no-tech techniques to deliver project's faster with little budget. They're built with small or zero investment. There is nothing dogmatic or Utopian about them. This blog is about reducing production lead times and getting things done now —about things that work today. Results and workarounds.

LoBand sites are the answer.
Buyers of products and services have been tuning out traditional forms of marketing and advertising. At the same time, buyers are increasingly relying on search engines, blogs and social networks to research, form opinions and compare solutions. As a result, the effectiveness of traditional marketing services has been waning rapidly. However, despite this transformation, most marketing agencies and professionals have not adapted. LoBand sites are the answer.

14: PREVENTING SITE BLOAT

One of the objectives of LoBand websites is to prevent site bloat. Site bloat is easily recognized by various factors, here's a partial list:
1. Multiple pictures and text blocks compete for attention on a slow-loading generic home page.
2. Small, hard-to-read text size.
3. Emphasis is on the amount of content.
4. Over-engineered with wasteful, unnecessary long or slow features, functions, and code.
5. The site is so overwhelming—it requires a search field function or bread-crumb navigation.
6. Has link clutter (more than 7 to 9 links) or uses drop-down menus.
7. Site visitors frequently call or send email to you looking for answers.

“Has your website become a whale?”
Companies grow. Product lines expand. Sites bloat. It’s assumed that bloat happens to all websites and therefore isn’t really a problem.

“Everybody’s doing it.”
This is poor visitor-oriented thinking. The average page weight is now 375K—up 5X from just a few years ago. With more viewers on highspeed connections, it’s assumed adding extras doesn’t matter. As of January 2010, 44% of American households are still on dialup modems.

Site bloat indicates you really don’t care about your customers or their needs. You may not say it directly but it’s implied. And they know you’re being rude with bad web etiquette. Site bloat is when your website has lost the practical values of simplicity and transparency. It’s now “in the way”, a cluttered impediment and liability to viewers.

WHY BLOAT HAPPENS?

1. Fear of being perceived as insignificant.
2. Designer is using templates.
3. A common mistake is the belief a good site includes everything.
4. Not using file compression.
5. Feature creep.
6. Details that never stop being added or tweaked.

“The worst reason site bloat still exists is apathy.”

13: MARQUEE TAG REVISITED: Lightweight, low-tech animation.

In the 1990s, the Internet was abused with tags like blink and marquee. Hideous stuff. In the last 10 years, these proprietary tags gradually became extinct. Now the marquee effect reappears in modern cascading style sheets (CSS3.) The irony! Today the old HTML marquee tag is well supported among browsers. But the marquee ticker effect was generally ill used by amateurs with no imagination. So I thought I'd challenge myself to do something amateur—but with imagination—and see the result. There are lots of places online to learn the Marquee parameters.

Using the marquee tag was considered a blemish for years. So it was important to make it look different, I went for a vertical scroll (up). The scroll could have contained an embedded GIF or JPEG image (like a logo.) Here is the end result.

The HTML code is just over 1K for the entire page.
How much weight would it take to do this in Adobe Flash or as a GIF animation? I don't know—yet—but I will find out. One of the primary goals of LoBand websites is faster load times. My guess is this effect couldn't be done for less than 100K minimum with other means. How many GIF animation frames would it take to simulate this effect? A bunch.

Is a LoBand slider marquee appropriate or in good taste?
Just because something is LoBand and fast doesn't mean it's "good." Opinions will differ—but most animation is gratutious waste. With that said, just a little motion onscreen attracts the human eye like a magnet. If too much motion is presented, it's overwhelming and garish. It will repel instead of attract. The idea then is use very little and stick to the website communication goal.

Does this slider animation work in all browsers?
Nope! It just worked in the important ones (more on this in a moment.) To do this multiple browser testing, I visited www.browsershots.org and loaded the test page URL. In a matter of minutes, I had results from 32 different browser screens. The only browser that completely flunked was Dillo, a lightweight Linux Debian browser. Anybody using that one? It did show some readable text but that was it.

What matters most in browser testing?
Obviously, consistency from browser to browser. But really only in the most POPULAR browsers. How do you find out what is currently most popular? This chart is from www.w3schools.com
They keep up-to-date web browser statistics. Based on their numbers, it narrowed down the browser screen selections to just 12 screens in different versions of Internet Explorer, Firefox, Google Chrome, Opera, and Safari. All of these rendered properly except Safari. In Safari, the slider still worked but the animated text would overshoot the top by 50 pixels. Which happens to be the same as the specified vertical offset (vspace="50".) So there is a clue and hope of a fix.

css3 animation advanced marquee

12: LoBand Advertising Grabs Attention: Without slick production qualities.

Authenticity indicates whether or not some thing's "real". LoBand websites appear more authentic, and current research shows that "authentic" ads and brand experiences are what consumers crave. People don't trust most advertising. They trust online advertising less, in particular, online video and online banner ads.

We Rely on "Authenticity" to Trust a Website
Long ago, we trusted "the media" to give us the straight story, but trust in the press has been declining for years. The Web has further blurred the picture by creating a relatively level playing field for communicators, where scamming can appear just as well-produced as legitimate companies.

Not Slick or High-brow
LoBand websites are not "hip", they're not slick, and they're definitely not "high brow." But they work by being direct, memorable, and honest. They work because they feel down at our "level," connecting with us in a way flashy sites can't.

LoBand Websites are More Powerful
A personal touch generates response by triggering "reciprocity." We believe someone put personal effort into reaching us. These websites are simple. They work at a visceral level. They don't try to be more than they are. They're unpretentious.

"Glossier," "artier," or "more highly produced" websites are NOT more effective. They just cost more and take more time.

Please comment.

11: POINT SIZE: Equivalance of HTML font sizes compared to print.

I mentioned "The 100% Easy-2-Read Standard" in an earlier entry. That standard recommends setting the font size to zero. This is approximately equivalent to a 12 point printed type size. For point sizes above 36 points, you'll need to specify CSS styling or use a GIF image.

SIZE="1"|"2"|"3"|"4"|"5"|"6"|"7": sets the size of the text. The font size also can be set using a negative or a positive number from “–2” to “+4,” which is added to the default value of “3.” (For example, "–2" corresponds to "1" and "+4" corresponds to "7".)
"1" (or "-2") causes the print to be this size (8 point).
"2" (or "-1") causes the print to be this size (10 point).
"3" (or "+0") (the default) causes the print to be this size (12 point).
"4" (or "+1") causes the print to be this size (14 point).
"5" (or "+2") causes the print to be this size (18 point).
"6" (or "+3") causes the print to be this size (24 point).
"7" (or "+4") causes the print to be this size (36 point).

10 NON-RICH MEDIA: Stretching dollars in design means embracing and leveraging limitations.

Going LoBand gives web designers a chance—and a reason—to experiment. In the view of many designers, a LoBand approach doesn’t have to be confined to projects that are cash-restricted. It may just be the right approach in terms of aesthetics. "Handcrafted" simplicity in LoBand web design speaks of a straightforward approach. Handmade and hightouch are common threads in lofi projects.

Distortion and visual noise—either as a result of a production technique or a deliberate artistic choice—are hallmarks of LoBand. It feels more authentic.

Inherent in the LoBand style is an emotional resonance. Often there are references to the past. LoBand can seem more spontaneous. “Mistakes” become a desirable part of the look, which can give LoBand graphics a more honest tone to serve to the client’s message.

Budget limits can be effectively and successfully linked via a lofi strategy. Environmentalism and LoBand are a particularly good match, to limit the use of slick materials and go LoBand. The LoBand approach can grab and hold attention, standing out in a slick world as a reaction against all that is super-polished and prepackaged.

LoBand for many designers, is a backlash against overproduced style and work that is too glossy-looking (Web 2.0 style, for example). LoBand offers an inspired way to use design within budget constraints.

Please comment.

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.

08 WEB FONT FUTILITY: LoBand Type Compromises for Readability, Speed, and SEO

Before I jumped from print to web design, I had amassed "tons of fonts" and type families—30,000+ all archived on CDROM. I categorized and loaded 1,000 fonts on my computer. I even had "font recognition" software (FontExpert V2.) to reverse engineer type. Imagine how stunned I was to learn all that type was essentially useless for HTML coding.

Typocide: The Web Murdered My Typography
First, I mourned my typographic loss. Then I was angry. How stupid could the web be!? I was forced to build my headlines and subheads as GIF files. It just seemed so stone age and primeval. I'd been crippled by the pixel medium. Small serifs became fuzzy and unreadable and GIF files slowed down page load times. Double insult!

CSS Comfort for the Sad Designer
Now, after building web-type for years with ImageReady, I wonder, "Was it really worth the extra effort? How did it improve results? How good was good enough?" Cascading Style Sheets introduced more control over HTML fonts and I experimented with letter spacing (kerning) and line spacing (leading.) I also began to realize how important "machine-readable" text really is for search engines and ranking.

Like Designing with an Old Manual Typewriter, Just Get Over It
I now endorse The 100% Easy-2-Read Standard—100%E2R. Below is the edited, boiled down version. I recommend highly reading the source link material.

1. Standard font size for long texts.
100% font-size for the main text. All browser makers chose this as the default text size. (HTML size = 0)

2. Active white space.
Having air around the text reduces the stress level. It's easier to focus on the essence. White space looking nicer is not a side effect: it’s the logic consequence of functional design. For liquid layouts, at 100% font size, 50% column width (in relation to window size) is a good benchmark for most screen resolutions.

3. Reader friendly line height.
If you increase the line height, the text becomes more readable. 140% leading is a good benchmark.

4. Clear color contrast.
Benchmark: #333 on #fff, dark gray on white.

5. No text in images.
We want to search text, copy text, save text, play with the cursor and mark text while we read. Text in images looks pretty, but pretty is not what the web is about. It’s about communication and information, and information needs to be readable and usable.

What Fonts Can I Use?
Here's the LoBand list: Georgia, Courier, Verdana, "Times New Roman", "Comic Sans", Arial, and Impact. While web designers frequently claim more fonts work fine (under certain conditions,) these 7 fonts are my official LoBand List. Welcome to web reality. I'll talk about how to use these fonts creatively in another entry. Some should be used as little as possible!"Web-safe fonts are fonts likely to be present on a wide range of computer systems, and used by web content authors to increase the likelihood that content will be displayed in their chosen font. If a visitor to a website does not have the specified font, their browser will attempt to select a similar alternative, based on the author-specified fallback fonts and generic families."

Please comment.

07 QUICK THEMING: A checklist for fast theme generation.

Building a Color Theme from an Image.
1. Find a nice image pertaining to the site content. Here I selected an image of terraced rice paddies. I copy it and size it down by half to speed the online color translation. I save the original for the site.

2. Upload the image via browser to http://www.pictaculous.com/, a color palette generator and it quickly produces this selection of five experimental colors.3. The yellowish color hexcode #FFD064 is of interest to me. But any of these colors might work. In Photoshop's color picker, the hex color number translates to approximately The Big P Corp ~1355. A little pinkish, but the colors don't always match exactly, in fact, if they're close that is good enough.
4. I go to http://www.pagepipe.com/www3/ and use the EDIT > FIND function to locate ~1355 [#FFD064]. It is a FESTIVE color accent. I pull THE BOOK off my shelf and go to page 98 and 99. The matching dominant color is ~244 and the subordinant is ~228. While this combination and classification weren't what I was expecting, I decide to try it out. Back to the chart and copy and paste the hex approximations.
5. These then are the experimental results generated in minutes.

Dom ~244 = #EDA0D3
SUB ~228 = #8C004C
ACC ~1355 = #FFD0646. Now I'll mock it up in GIMP as a test.
Adding a little calligraphic brush font as an headline or caption would add interest, but I decided just to use color. This combination makes a simple welcoming and even somewhat dramatic theme. And the accent, yellowish color did turn out the right color onscreen. Amazing?!

How to apply this technique to your HTML pages? We'll be getting to that soon.

Comment please.

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
I'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.

Please comment.

04 WHY WEB THEMES ARE IMPORTANT

Before I show methods of creating themes, it's important to understand what a theme is and why it is critical in web design. I present a quote by Johannes Itten and then a quote by Hillman Curtis.

ITTEN Wrote:
"Decorators and designers sometimes tend to be guided by their own subjective color propensities. This may lead to misunderstandings and disputes, where one subjective judgment collides with another. For the solution of many problems, however, there are objective considerations that outweigh subjective preferences. Thus a meat market may be decorated in light green and blue-green tones, so the various meats will appear fresher and redder. Confectionery shows to advantage in light orange, pink, white, and accents of black, stimulating an appetite for sweets. If a commercial artist were to design a package of coffee bearing yellow and white stripes, or one with blue polka-dots for spaghetti, he would be wrong because these forms and color features are in conflict with the theme." (The Elements of Color by Johannes Itten. c1961)

COMMENTS ON THEMES FROM HILLMAN CURTIS
According to Hillman Curtis, theme is central. Hillman draws three concentric circles on a piece of paper in the very first client meeting. As he jots down keywords during the meeting, he figures out how close to the center of the "target" each one fits. The words in the center become the theme. Theme can be the most difficult part of the creative process. An idea generated in collaboration with the client is more likely to express their story than one generated in isolation.

Hillman Curtis says: "It's all about communicating the theme. You do it by combining color, type, layout, and motion in a way that supports an identified theme. You might not see the way these elements work to communicate theme, but you "feel" it. As a designer, I try to justify every element and to [consistently and clearly] support the theme."

"Every product or brand has a theme and these products and brands exist because of their ability to tap into recognizable themes...and make people feel something. So I focus on the theme...on telling a story. If you look at that title "Commercial Artist" and deconstruct it, you can look at it this way; you have a responsibility to your client and their brand...which is the "commercial" part of the title...but you also have a responsibility as an artist...and artists have always responded, reflected upon, and hopefully influenced the world."

"Our challenge as designers is to target a given project's theme and use it as a guide that will influence every design decision we make, from the initial concept to the final composition."

MY THOUGHTS: INFLUENCES ON THEME
Here's are my observations about web theming. A project outline or text leads to the exploration of storytelling possibilities, imagining picture-and-word sequences, making discoveries, and uncovering unforeseen problems. Out of this design puzzle, is then formulated a "theme." A theme grows out of the communication goal. It affects all design elements. It needs to be appropriate to the client and the audience. It's frequently a metaphor, a stereotype, or a cliche as these accelerate understanding. Memories alter perception. The reader/viewer's historical memory (emotions) helps them recognize and interpret "theme" (images, symbols, fonts, colors, etc). The theme alters their perception of reality. (Steve Teare c 2010)

Please comment.

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.

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.

02 PRIMAL SCREEN: Why print colors are impossible to match on the web.

When a designer switches from print to web design, one of the first tools they go searching for is an ink color to hexcode conversion chart. The industry-standard is not available. The Big P Corporation does NOT provide an online web color chart, nor will they allow anyone else to publish one. Not for profit and not for free.

Can You Really Own a Color?
You can't own a color but you can own a color NUMBER. The Big P Corporation asserts their lists of color numbers are the intellectual property of The Big P Corporation and free use of the list is not allowed. This is why The Big P Corporation colors cannot be supported in Open Source software such as GNU Image Manipulation Program (GIMP). However, The Big P Corporation palettes supplied by printer manufacturers can be obtained freely, and do not come with usage restrictions beyond a sales ban on hard copies of the palette.

Web Color Ban
The Big P Corporation actively bans online color conversion and hunts down anyone trying any monkey business. They then threaten them legally until they remove the "offending" site or page. They will not support their own system or allow anyone else to support it. Nice guys.

How Can I Get THE Numbers in Hex?
Photoshop comes with a color picker to do "custom color" conversions. Usually I just use Photoshop 6 or a Mac OS9 Picker Plugin called "ColorSync" which was copyrighted in 1998 by The Big P Corporation, inaccurate but better than a literal poke in the eye.

Absolute Versus Relative Color
A designer soon learns it doesn't really matter what exact numerical colors you set on your page. It's a realm of RELATIVE color, not ABSOLUTE color. When you look at your website on different monitors, they will look different. Settings make colors washed out or brighter. There are too many variables: user setting, viewing angle, resolution, age, brand, cost, platform, CRT vs LCD, etc. Web color rendering is inconsistent. There is is no best and no perfect way to measure how colors will look on a viewers screen. You may say, "Well, use websafe colors!" Uh. It helps sometimes.

Industrial Color Failure
On a recent industrial project, I had a nice cream background in a sidebar that rendered "pastel pink" on another machine and display. Not good. I switched to a websafe approximation (yellow-butter in hex code) and it was still pinkish. I then switched to a light websafe gray. Those matched. Go figure. I went with the light gray. I wasn't going to fight monitor-weirdness.

All Web Colors Are Approximations
Color varies from one monitor to the next. But a conversion is necessary to get colors as close as possible to their printed counterparts—like corporate colors or logo colors. None of The Big P Corporation colors are websafe anyway. You can get close sometimes but the "gamut"—or color range—is completely different because of the way colors are constructed. Plus, we're attempting to compare RGB emissive light to printed reflective light. Because of the vast difference in monitor color rendering, it's IMPOSSIBLE to maintain color continuity on the web. But let's keep trying.

So the question is: if it's impossible to render The Big P corporations color "numbers" on screen, why are they threatening law suits? What damage is done? They can't provide accurate online color results either. Strange world?