Summary

The Final Word About Ice:

Ice Design will continue to be used by novices and beginning web designers who haven't the interest and/or need to advance their designer skills to the level of producing solid Liquid Design. In time, Ice Design will be a vivid red flag that the designer is an amateur.

The Final Word About Jell-O:

Jell-O not only shares many of Ice Designs characteristics, but also shares its fate. In the near future, no professional designer will earmark his design by placing it in a Jell-O mold.

The Final Word About Liquid Design:

Unlike Ice or Jell-O, there is a lot to be said about Liquid Design. Top notch professional designers agree unanimously that Liquid Design is the ideal housing for their web pages. However, they begin to choose different corners of the boxing ring when it comes to how Liquid Design should be delivered to their cyber audience.

Division among the ranks rises in part from the ingrained standard to provide a respectable user experience to as great a number of their audience as they possibly can. This entrenched standard is what has set the professional designer apart from the overflowing resevior of amateurs that swamp the WWW.

Ironically, the tendency of some web designers to cling to a well-meaning value is what stifles the advancement of web design standards. Standards that would liberate both designer and user to experience the web the way it was meant to be. Standards that are powerful and work now. But, the power of these standards can not impact the web until designers take a walk on the wild side.

It is not just non-compliant browsers that prevent good designers from converting en masse to standard based web design. The learning curve in this industry is long and demanding. Putting out a professional product does not require that you operate at the industry ideal!

With standard based Liquid Design, designers need a solid grasp on CSS and its use in positioning design elements. It is the foundation of any reliable standard based sites. Appalling things can happen because solutions fall beyond the designers knowledge base. No matter what web design level you are at, there is nothing worse than seeing your design degrade disgracefully in a browser. Each designers transitional periods from one skill level to another varies greatly. When it comes to mastering Liquid Design, using Liquid Tables is a respectable and viable compromise allowing the designer to produce while working toward the industry ideal.

Tutor Tots Made Up Words and Pronuciations:

Caught By Tutor Tots

Mommy Says if you claim to be a pro, you are fair game for evaluation. Caught by Tutor Tots only features professional sites. As a professional designer, if you say it; you best display it:

Cylophon

This section is not for everyone. The Cylophon is included more as a courtesy to beginners than for preaching to the choir (the savvy web designers). Experienced web designers will know at a glance most of the information that is conveyed in this section (The only exception to this may be the section on CSS problem solving).

Mommy Says no matter what level of experience you are at, if you are not the Curiouser Type, skip this section! However, we at Tutor Tots being the epitome of the Curiouser Types and beginners ourselves not too long ago, want to answer any questions that may keep you up at night wondering, "How did they do that?" So, brace yourself, here's the scoop from conception to birth and the ongoing maturity of Tutor Tots.

Tutor Tots Tutorial was conceived a year before its birth. It brewed and grew inside a student's head too practical to invest time and energy into it until it could serve some academic need or demand. Finally, a class assignment triggered its labor and it arrived in cyber space April, 2002.

It was developed within the perimeters of the class assignment which was to use CSS and no tables. Tutor Tots site (being the firstborn) has a few developmental problems that may find their way to curable solutions as both parent and child progress.

Tutor Tots genetic pixels reside in Fireworks in png form where they can be brought forth and cloned, modified, and then exported to the home site. Using circular heads and stick figures for their bodies was a deliberate design decision to facilitate modifications for different poses.

Macromedia Fireworks is a user friendly Web graphics program where you can create, edit, and animate Web graphics. It also functions as a companion software to Dreamweaver making everything you do just that much easier because they are designed to be compatible.

The color scheme is tetrad which is using two sets of complements based on a rectangle (Tetrads may also be done using squares). We took the liberty of using more blue and red than orange and green plus we added a bit of yellow for contrast. Having use of all the primary colors included in the color scheme gives the site the energy and brightness the Tutor Tots personify.

C.A.R.P. principles (Contrast, Alignment, Repetition, and Proximity) are applied to maximize the aesthetic appearance of the project. It is the effort to gain balance and harmony among the many design elements used on a page. Putting these principles into play enhance a design dramatically.

Screen shots were caught by SnagIt, saved, and modified in Fireworks. The font, Born, was used for text on images and the banner. The body content is set for Arial, Helvetica, and sans serif, size 9.

Two external CSS were made. The first for the Liquid site you are on and the second applying to the Ice and Jell-O Design example pages. Both the Ice and Jell-O examples were made in Dreamweaver to expedite the process and are the only pages in the site that were not hand coded. The style rules can be perused by the hopelessly Curiouser types at CSS 1 and CSS 2. Notes to the instructor remain intact.

HomeSite 5 Editor was used to type code. It's an editing program that helps take the mundane out of typing code. It is a quick study and well-worth the low cost of under $80.

Design Challenges

Now to the biggest unresolved problems that we are aware of in the Tutor Tots site. There are two that we can't live with and must outgrow. The first is the BLUE (Yes, we are screaming) columns.

The left column containing the navigation buttons and the right column holding the Mommy Says comments. Without tables, the blue that extends beyond the occupied area poses post par tum headaches. Depending on a monitors screen resolution, the blue is either too little or too much. We had to decide which was the lessor of two visual evils. We chose to have long blue columns so the blue would stretch and expand to the length of any browser size or resolution. However, they began to be the Tutor Tots nemesis immediately!

To acquire the extra blue a value of 1000 percent was given to the height attribute in the CSS style rule. It added the extra blue and then some to cover all possible resolutions. It also made both blue columns end evenly. However, any visitor wanting to print out a page would discover that a single page of printout became ten (one with content and nine more to include something no one wanted...the BLUE columns. It was the 1000 percent height causing the problem. It had an annoyance factor that went off the scale and had to change!

The effort to relieve us of the eternal blue columns involved removing the height attribute completely and putting in multiple br's in each column to gain the length needed to cover the resolution ranges. It was tedious trying to make them even and we are still checking and rechecking. It did eliminate the multiple prints that showed up in print preview. However, the blue is still as excessive and annoying. Frustration reigns but we continue to seek a better remedy. This type of problem may be one of the reasons many designers still cling to Liquid Tables. If it were Liquid Tables, these columns would automatically adjust themselves and not exceed the end of the content. However, we are bound by using only CSS so when the Aha! arrives, it will be posted here for any and all Curiouser Types who have actually read this far!

The second problem we can't live with and must resolve is the way content on some of the pages some of the time on some monitors will slip beneath the blue columns. This is perplexing because the same page can display properly at a different station hooked up to the same network as the one where it slipped into oblivion. The images were checked for size and are within the perimeters of safety. Again, more checking and more experiments ensue and updates will be posted when the problem is resolved.

Final, Final Words From Tutor Tots:

Congratulations on your Curiouser Type nature! Yippee! Hey! Hey! Whoopie!

Hats off to you...ya made it through! 2Kewl! Wow! Zowie! Way To Go! What do ya' know! 2Kewl! Wow! Zowie! Way To Go! What do ya' know! 2Kewl! Wow! Zowie! Way To Go! What do ya' know!