Css Zen garden critique

CSS Zen Garden is one of my favorite sites. I look at it both for inspiration and solutions as well as a way to see how the graphical style of the web is changing. It is pretty amazing to see how flash has really influenced the css style: both in a good way in terms of beautiful graphics and scenic layouts and not so good: such as use of tiny fonts both for links and for text!. The biggest issue with all the websites on Zen Garden is the use of background graphics for heading text(which undoubted in integral to each design). When images are disabled you loose the headings, and therefore destroy some of the semantics of the page. If only there was an alt tag for css :( .

Retro Theater is in my opinion one of the least effective in terms of readability and usability. It would have benefited from having a custom scroll bar near the screen(in addition to the browser scroll) and to not follow the theater credits look so closely with the treatment of typography. The short double spaced column on the right and the all capital column on the left inside the screen are serious impediments to readability. The links in the very end would have benefited to be kept separate from the general text. People do not expect to be able to click on credits as links, and taking out the underline until mouseover makes it that much more confusing.

Icicle Outback is an example of effective design. The graphics are very tasteful and not distracting. They are used in addition to positioning to separate the different elements of the page: for example the links and the text are on different islands connected by a bridge (cool!)The choice of justified main text and centered links( which usually look really bad on most sites)works well with the ragged edge graphics in the background.

Index redesigned

Browser handling of certain css elements such as relative positioning and padding and float was an issue. An example is the ul and li tags as used for the top navigation menu. For some reason setting top margins in ul cause some serious problems: creation of space between the Heading div and the Nav div while setting li's to have margins at the top was not a problem. Also it seams like a good idea to control the div's spacing: in case of side by side with width and as minimal margin as possible, because I found that IE does not handle large margins accurately. On the graphic design side: photoshop shadows have to be dealt with care and precision: had to go back into the background image of the footer to correct for lighter colors at the edges and it still is not perfect.

In-class I

The server side include footer was not displaying: probably because of the absolute positioning type chosen for the other divs. Putting the footer into a div and setting the positioning solved that.
-----------------
xhtml recipe page completed, need to review floats and clear.

http://www.rit.edu/~txswml/rit737/xhtmlrecipe.html
-----------------
Started applying some CSS to index last class. Probably going to do some graphics in photoshop for the background and implement with tiling.

http://www.rit.edu/~txswml/rit737/

737 index page created

http://www.rit.edu/~txswml/rit737/