Kiva.org: Code Feedback

Hey guys,

Here's some feedback from Kiva's front end guy, Jeremy. Overall you all did a phenomenal job of coding your prototypes. Looks like you impressed the hell out of them. Nice work.
-Jon & Johanna

---------

From Jeremy:

Overall the submissions were coded very nicely. Segmentation between
Javascript, CSS and HTML made the readability of code easy. Logical
layout of code blocks was done very well. No style tags (a no-no in
web design) were used on any of the sites which was good thing to see.

There were a few things that stood out that one should keep in mind
when designing a site. Below is a little more detailed feedback from
a code perspective.

1) http://oswald.se/sites/kiva/
Pros:
- Use of floated columns.
- Readability was facilitate through logical blocks of coding as well
as html commenting.
- No style markup used in html
Cons:
-
tags were used for layout, and their effect can vary across
different browsers. CSS markup can ensure a consistent layout and
experience cross-browser.
- Code indenting was inconsistent
- Does CSS need to be in 4 separate files? Server performance can
increase if combined into one large file
- Javascript files were being referenced at their original location
(on the interweb) and not copied to the server. If that location goes
down unpredicted behavior can occur. Copying to your server can
maintain availability.
- Old code that was commented out remained in the source.

2) http://kiva.christopherhein.com/
Pros:
- IE dependent stylesheets, cross-browser compatibility, easy
maintenance of specific browser issues
- All assets were copied locally
- No style tags, no
tags.
- clearly defined styles
Cons:
- indenting - too much whitespace for tabs
- could combine css and javascript files into one file for each,
increasing performance
- absolute paths for assets, referencing the full path to the asset
can help maintain a good file structure and allow you to easy find and
change locations of assets.

3) http://newmedia.academyart.edu/~02294028/kiva/
Pros:
- logical css layout follows html markup in sequence, i.e. navigation
is first in HTML and first in CSS
- no style tags
- great segmentation of javascript, css, and html markup

Cons:
- utility nav seems to be missing some padding (server issue? seeing
some other assets that might be missing)
- There were a number of Javascript files referenced, they could be
combined into one file to reduce the overhead of separate calls to the
server.
- Javascript files were being referenced at their original location
and not copied to the server, If that location goes down unpredicted
behavior can occur. Copying to your server can increase availability.
- Close comments at ends of logical blocks in the HTML markup, open
comments could be useful too

Jeremy