Wikinetic Entries

• both html and css file are readable and very well organizing
• directory structure for css images is deliberately organized
• why declare @charset "utf8"; (line 1)
• img replacement for logo, but why use
  when you can use h1?
• ah, I see that h1 is reserved for "wikinopsis". ok...
• reviewer's image has its own table column
• used dl with just dd's (no dt) for links in "also recommended". if no dt, why not just use ul instead of dl?

• Line-height too small, font size smaller
• Drop shadow on top of reviews doesn't extend fully (Safari)
• Lots of graphics not text, image replacement
• More tag not inline with text
• Didn't use ellipses or apostrophes
• Didn't go beyond the comp
• Can't handle resized text (girlfriend said ew)
• Image replacement leads to uncoolness with css && !images
• Way overusing image replacement (like wtf, edit & more, seriously)

• Resizing my browser window just looks good +
• Why can't I rescale the text of the menu-items? –
• It is not possible to add many text to the details of the book (‘Born and raised in'). –
• No hover on the navigation and the ‘buy book'-button. –
• Fluid layout with works great here. +
• No zebra stripes on the table for reviews. –
• Transitional doctype. –
• Singe image for rating. +
• Edit inside header. –
• Mark-up is readable. +
• Used tables for tabular data. +
• No semantic mark-up for the name of the website. It could be H1, and a H2 for your current H1. ‘Also recommended' doesn't use a Hx element, but a span with a string element combined. –
• The definition list is mis-used. –
• Why not using IDs instead of classnames for (e.g.) the header, the contentblock etc. –
• I can easily find where a selector applies to. +
• Learn more shorthands. For example: padding:25px 15px 0 15px; could become padding:25px 15px 0;

Visual Differences

• welcome back is bold. It seems a little heavy-handed, and it was clear in the comp that it was normal, not bold
• the "wikinopsis" shouldn't go all the way to the right.
• wolf whistle cover is missing the glow. This was probably an oversight in copying from PS
• "More" link isn't inline. I think it's important that it would be.
• Font-size seems a little small, line-height looks ok.
• The table: I don't like that the headers are centered. There's also no visual separation between rows.
• It's distracting that the background of the "Read Reviews" only looks like it fluidly comes from the main body when the window is a certain width. It doesn't look good either when it is much wider or narrower than the comp. centering the background position helps...a little. I'm not yet sure what the deal is here.
• contentColumn and sidebarColumn are too close together.
• Didn't really add much. Looks almost as incomplete as the comp. Even the border for "Ecstatic in the Poison" isn't complete. That's no good.
• Cover thumbnails: I would like to see both the inner dark border and the outer green border be purely CSS. Wouldn't be hard. Same with the author photos.
• Only 6 of the clickable areas (I count 16) change on hover. This is a fairly big problem for me. Esp. the tabs at top (Read reviews, submit reviews).
• nice use of min-width and percentages. I'm not sure yet about the decision to go fluid in the first place, having made that decision, it works well.
• On a resize, it only takes one increase to lose a good chunk of the wikinopsis.
  welcome message after 3
  things really break down after 4.
• Looks disorganized with styles off. More on that later.
• I also like that you attempted the transparent border for the table.

CODE

• CSS fails validation because of _property IE hack. There are other hacks out there that do the same thing, but still validate.
• HTML passes. However it passes in transitional, which I'm going to mark off for. In a CSS contest, strict really should be used.
• After looking into it a little more, it turns out that it validates as strict as well. So I'm going to frown but not take this into account. You've got the chops to use strict; do it up!
• Document structure: Why no headers? Well, ok, you have one h1, but it's not even at the top of the document. There is not really any discernible document structure from just looking at the code.
  It would have, for instance, been very easy to use an h1 instead of div class="Title" for the title.
  You wouldn't even need to change the css! (except of course to change .Title to Header.h1)
• Interesting that you used absolute positioning for the Header. I would have used floats. Why positioning instead of floating? I'll have to look into that.
• why use a ul for the mainnavi? It's not much of a list, it's just a couple of links. Don't get caught up in the habit of mindlessly making everything navigation-related into a ul. Here, there's not really any reason to do it, and probably a couple not to do it. also, list-style doesn't apply to li, so you don't need to use it.
• Nice table structure. Well-used thead, th, summary, tbody. Well done.
• In the "Also Recomended" section:
  It's good that the list of books is a ul, that is what uls are for. However, the use of a dl for the actions seems odd. Definition lists are supposed to be a list of terms, along with their definitions (dt + dd). Here you only use dd, and they're not even definitions of anything. Next time, if you must use a list, use a ul, but I really don't even see the need for a list in the first place here.

Browser Testing

• All comments were related to views in FF mac.
• I'm only going to comment on differences I see from the FF view.
• iPhone views are not taken into account in judging, they're just there FYI

• Safari 2.0.4 mac: Looks the same.
• FF windows: Looks the same.
• IE 6 windows: Looks the same.
• IE 7 windows: Looks the same.
• iPhone: Looks the same, except for some reason there's some kind of white line that goes across the page, under the table, but visible in the sidebar and to the left of the table.

• The images are nice and sharp.
• I'm happy to see the careful attention to the text headers. They look good.
• "Edit" needs a hover effect, like all the very nice hover effects in the right column. Going from teal to white, then white to slightly darker is a good move.
• I'm happy to see the main book cover is included. Good move making the white border separate from the image/content.
• The drop shadow across the top of the table looks slick.
• Please reconsider the placement of the "More" link. It should be inline, at the end of the sentence, not the block.
• I'm missing the shadows in the table rows to separate the table rows from each other.
• Table headings would make more sense if they were left-aligned, not centered.
• Good move making "Also Recommended" an image that includes the dark background. That way it's readable without styles.
• Round ed corners on "But this Book" are a little jagged. It would have been nice to have a over effect for the button as well.
• Ecstatic in the Poison really needs to be the full cover. Pay attention to the details!
• I wish there was a footer.
• I think this page should have had a fixed width. Nice thought to set max-width and min-width though.
• Line-height in reviewer meta is too tight. Spread it out a little bit until it matches the height of the thumbnail approximately.
• Line height throughout the table is off.
• When page is narrow, the glow goes under the "Read Reviews" tab. It's not a deal breaker, but it's not perfect either.
• The quality of the brushed metal background is a little lower than would be preferable. To avoid larger file sizes, you could have either A) massaged the texture until it made a nice repeating background (I may not always make that for you) or B) gotten rid of the brushed metal altogether and gone with a teal-black gradient.
• "Also Recommended" needs to be aligned with top of the table.

• I don't like how its not fluid when I expand my browser
• good looking
• I didnt like how they used 3 divs/classes for the reviewers name, reviewed, and view more link... could have used dl
• no footer
• no rollover on nav or ‘buy this book'

• link tag doesn't have media attribute. is that ok?
• why bother using id's that specify what you're doing in teh style sheet, like "header_float_right". Won't just "header" do?
• shouldn't have to use a clearer div between
• tags. Instead, force the
• tags to clear themselves.
• didn't use a "table" for the reviews and ratings. why not? it's a perfect place for one.
• html reads well, but the css file does not, and is not organized logically.

• NO ALT ATTRIBUTES!
• Image replacement leads to uncoolness with css && !images
• Wikinopsis breaks when over min-width (Safari, Firefox)
• NO ALT ATTRIBUTES!
• Font spacing/size like what!
• Completely dies when font resized, like spectacular
• Didn't use ellipses or apostrophes

• The page looks like the psd. +
• The large white ‘footer' looks a bit ugly. –
• Text doesn't wrap nice around for the book description (Firefox 2). –
• Weird hover state for plain links, and none at all for the buttons. –
• Text resizing DESTROIS the layout. –
• Nice zebra stripes for the table. +
• Transitional doctype. –
• Multiple images for rating. –
• Edit inside header. –
• Nice usage of header elements. +
• A block element inside an inline element? A div between li elements? –
• ID and classnames don't make sense. Like ‘header_float_right'. –
• Ever heard of the alt-attribute? –
• The CSS file is not readable. +

Visual:

• Right off the bat it starts getting weird when the window is even a little wider than the comp image.
• The Wikinopsis starts falling up (can you fall up? i don't know) next to the title/edit button. All you need to do is remove the float on the h2 and give it a left margin.
• Also, when you get wider, the tabs at the top start floating around, and look a little funky.
• All of the text links change on hover, but none of the replaced links do. I'd really like to see a change on those tabs at the top, esp.
• Completely explodes upon bumping up the text size...possibly because you rely on percentages? I'm actually not sure why the reviewer table blows up like that.
• I would make the thumbnails of reviewers and the also recommended section clickable.
• If you did this, it would make it easy to implement both the inner white border and the outer black border in css. This is important, because it would make future updates to the site much easier (since you wouldn't have to open up photoshop to change the borders)
• You finished the comp, but didn't really add anything (aside from a copyright notice)
• At least you finished the border of Ecstatic in the Poison.
• Most of the margins are right on, which is nice
• It's good to see the "more" link inline with the rest of the review.

Code:

• Another one using a transitional doctype. We should be striving for the best in this contest, and that means using a strict doctype.
• Lots of validation errors in the html. The majority are from not ever using an alt tag for images. This is required! And even if it wasn't, it's just really bad practice to not use them, since it makes the site inaccessible for screen readers, people browsing with images turned off, search engine spiders, etc
• There are also some issues with a uls and lis that aren't closed properly. This kind of thing is just a little sloppy, and can quickly lead to big problems in the future.
• The presentation of your html is good though. The only thing I would add is maybe some comments for when big sections end.
• Your link tag for your css needs a type="text/css". The validator can't find the css with this, although most browsers will fix it for you.
• Your css validates, which is nice. Visually, though, it's kind of a mess. Use comments to make it presentable to other people!
• Good use of h1 and h2s. Documents need to have a good structure, and using headers is the best way to make the outline work. Perhaps consider using h3s as well, for an even more organized document structure.
• I don't think there's any need for the header account links nor the header navigation to be uls. I suspect I'm going to continue seeing this, but its a case of "listoma" (tumor of the list). They're not supposed to be there, they're not necessary, get rid of them!
• As far as the navigation goes, first of all, divs aren't allowed inside of a tags. A = inline, div = block. It just isn't natural! I'm also not sure about using visibility:hidden for text replacement, but I think that argument's still in the air.
• I wouldn't put the edit link inside the h2. It's a different thought.
• I like the fact that the Buy This Book section is next after the review! I wasn't sure if I was going to see it. It's not really aligned with the also recommended section, which it should be, but I still like the progression here.
• More listoma in the review section.
• I like the implementation of the stars. Give them alt tags, and they'd be pretty good. Not exceedingly clever or anything, but simple and solid.
• OK. So you called it "reviews_table" but you didn't use an actual table? It was the perfect place for one, and your sub-conscience was even telling you! You chose a list instead. Here's your assignment: next time you are tempted to use a list, stop for a moment. Look at what you're trying to make, and describe it in real words. "This is going to be a table of reviews," or "this is going to be a couple of tabs for navigation," or "this is going to be a list of reviews." See what happens? I only used the word "list" once, and that's the only place an actual list should be used. Just because lists can be used to make anything doesn't mean they should be.
• There are better ways to clear floats than using an empty div with class ="clear". Research them for next time!
• Footer – just use a background image instead of adding another empty div at the end.
• In general – be careful when you combine percentage widths and pixel based left and right margins/padding. It can quickly get you into trouble, esp when combined with floats.
• It's good to see shorthand values for padding/margin. Use them for fonts and borders!

Browser Testing

• All comments were related to views in FF mac.
• I'm only going to comment on differences I see from the FF view.
• iPhone views are not taken into account in judging, they're just there FYI

• Safari 2.0.4 mac: Looks the same.
• FF windows: Looks the same.
• IE 6 windows: okish, except all of the transparent pngs look like garbage. There's a couple simple solutions out there for this...look them up!
• IE 7 windows: Looks the same.
• iPhone: Looks the same, except for some reason the "More" link is aligned to the bottom instead of the middle. Not a big issue.

• The spacing between all the elements is fairly reliable and even. I appreciate the effort and attention given to that.
• I like the hovers for the Account/Sign Out links.
• Wikinopsis headline should have a drop shadow on it, but it doesn't hurt too badly not to have it.
• The dark border on the main book is a nice touch. It makes it pop from the background. I like it.
• It was a good move to lose the drop shadow on the table to save time.
• The word "More" in the Wikinposis paragraph needs a little more padding on the right side, because it feels like it's not nestled into the bookmark icon properly.
• I'd like to see more hover effects.
• When the page is maximized on decent sized monitors, the glow repeats. This feels a little old school and isn't a good move.
• I wish that Ecstatic in the Poison wasn't lopped off.
• Line spacing in the table needs to have a little more attention paid to it. Designers spend time working line-height (also called leading (pronounced letting)) for good reason. Try to pay attention to that.
• At least the footer was thrown in there. It's kind of weak, but it's there.
• The font size is good in the "Wikinospis". I think it's a little small in the table.
• Things fall apart when the window is larger.
  It's good that the glow is included on the book image. With the use of an additional un-semantic div, it could be detached from the image itself through the use of a transparent PNG.
• Why make some headers images and others hypertext?
• Nice move making the borders for the images with CSS.
• "Also Recommended" looks to be aligned with top of the table, but it may be a hair off....

• fluid yet bottom of page is white, not dark green/black, looks odd
• weak footer
• props for no table for review section / yet it is tabluar data (possibly from a database even) so I'd be cool with it
• "also recommended" could have been a dl set up too, then might have gotten rid of the ‘clear div'

• uses inline styles in several places. why?
• css is organized and readable
• html is readable too
• uses conditional comments for ie6/ie7 css and for ie6 png js.
• good use of tfoot in review table

• Handles font resizing well
• Yay! A footer
• Went beyond the comp, total reviews / average rating
• Disabling images works! Yay!
• Not sure about the plus/minuses for the stars, but it's sure nice to see something that isn't using image replacement, not really accessible.
• Aw, blank alt tags on photos, I was pretty happy with this one
• Shouldn't View John McReview Profile be View John McReview's Profile
• Didn't use ellipses or apostrophes
• He probably would need less hack if he didn't include the xml prolog (puts IE into quirks mode)

• Resizing my text is just great! Good job on that. +
• Fluid layout is a bit too wide. Give some more space between the border of my browser window and the content. –
• Footer is nice. Not the best, but still nice. +
• Hovers for the navigation are a bit unreadable.
• Strict doctype. +
• Multiple images for rating. –
• Edit inside header. –
• Metadata with name ‘content-style-type' and value ‘text/css', never heard of that one before.
• Did you know accesskey and tabindex attributes don't add accessibility?
• Inline styles. –
• Usage of headers is not good, there is e.g. no H1. –
• Cellpadding-attribute for the table can be done by CSS.
• CSS is well organized. +
• Conditional comments for IE6 and IE7.

Visual:

• Looks decent with window wide-ish, but starts getting stretched out when all the way wide.
• Smashes and falls apart when the window gets narrow. Use max and min width, they're your friends.
• Margins, most font-sizes look good.
• Site is fairly ok with when text gets bigger for a while.
• Interesting choice using actual text for the "Buy this book" and "also recommended" instead of images. The designer might get mad, but it does make things better (easier) from a code perspective.
• I like that most of the clickable areas react to hovers. It'd be nice to see some reaction on the "edit" and "more" links though.
• I like that the "more" link is inline.
• I really like the addition of "Total reviews" and the average. Nice expansion on the comp.
• The footer looks a little funky, but it is functional.
• I notice you did away with the inner, white borders on the author and book thumbnails. I think you might get into a fight with the designer about this one, and I'm going to side with the designer. It wouldn't be hard to have two borders going on here.

Code:

• Inline styles are no good, and you've obviously got the chops to not need them. Why are they there?
• Finally, someone rocking the strict doctype. I like it. CSS and HTML both validate.
• I've said it before, but I don't like the use of a ul for the tabs at the top. Maybe I'm in the wrong here, but it seems excessive and unnecessary.
• I like the use of h2s and h3s. It works nicely. However, you shouldn't ever use an h2 before you've used an h1. If you think of the page structure as an outline, h1s should either be the title of the whole outline, or the main items, with h2 and h3 being sub-items.
• Related to that, there are some issues with your code order. I would put the Wikinetic logo as the first item, in an H1. It's the title of the whole page, and should be the first thing people / search engine spiders see. Secondly, the sidebar really should be after the main content. For people with screen readers, it becomes a huge pain when the extra stuff comes before the meat of the document.
• That said, I like the structure of the sidebar. I do think the list is the way to go here.
• I like the "currentBook" section, except I would have used a p instead of a div for the actual text of the review. It's a paragraph of text, so structure it that way.
• The table is well done. Nice use of tfoot.
• I kind of like the way you've done the stars. Not entirely sure about using + and – for the alts. It does seem like there's a better solution for the stars, but this is in the ok range.
• No reason to use empty alts for the Author photos.
• Stickler point: you didn't need the class="right" for the div inside the footer. since its the only div, using #footer div would have been fine.

Browser Testing

• All comments were related to views in FF mac.
• I'm only going to comment on differences I see from the FF view.
• iPhone views are not taken into account in judging, they're just there FYI

• Safari 2.0.4 mac: Ok, except the border under the rating column is messed up.
• FF windows: Looks the same.
• IE 6 windows: Is COMPLETELY messed up here.
• IE 7 windows: Looks the same.
• iPhone: Same issue as safari above, also I would consider adding a padding to the bottom of the review cells to make sure the text doesn't go over the border and become hard to read.

On a quick first glance, there's obviously a lot of careful attention to some of the details. For example:

• The glow is its own PNG layered over the textured background.
• The drop shadow was smartly replaced with a 1px dark border across the top of the table and a 2px dark border along the right of the table
• The books in the sidebar were given nice little hover effects

A few other things I noticed:

• The average rating in the table footer is a nice idea, semantically. It's repeated in the top of the page, but maybe JavaScript could hide it from the table footer and write it into the top of the page. That may be over the top, too. Who know?
• The black fade at the footer turns back to the metallic teal, which is a good idea. Not sure I'm the biggest fan. The bottom aligned copyright disclaimer line shows effort.
• I wish that Ecstatic in the Poison wasn't lopped off. Pay attention!
• Headers were turned to hypertext. On this comp, the font wasn't defining the mood for the site, so it's okay to do this.
• "More" is a little tight with the line above it. Maybe increase the leading on that paragraph.
• Not a fan of the expandable width. I would have used fixed width for this design.
• The hover effects aren't my favorite, but they're fairly effective. "Submit reviews" is a little hard to read on hover (a little too dark).
• Maybe "Welcome back, Arnold" doesn't need to be bold...
• "Also Recommended" needs to be aligned with top of the table.

• inline styles? :(
• I like how its fluid
• table styles are nice
• nice rollovers on nav and ‘buy this book'
• i like how the footer doesn't just fade to black, but back to the green pattern

• is the "dsa" in dsa a typo?
• didn't use tables. sintead, each row is a ul, and each cell an li.
• included all their psd's

• Uses strikingly different pallettes/formats for the shine on the main body and the button, they are rendered with a distractingly different gamma then the background in Safari
• Link colors bad in Also Recommended
• Spacing bad in Also Recommended
• Finally a sane markup for the star ratings, although only under Buy this book
• Handles font resizing alrightish
• Doesn't handle images off at all, text all the same color as the background
• Uggggggggg, didn't use tables...

• Window resizing works very good. Very small sized break only a bit, but are usable though. +
• Text-resizing is possible, but not for really large text.
• I really like the hover states for the links and buttons. +
• Footer is nice. +
• HTML strict doctype. +
• Single image for the rating. I really like these. +
• Edit inside header. –
• Why not used a table? –
• Headers are overused. –
• ‘Also recommended' comes before the reviews. –
• You could have put the cover of the book (also recommended) into a dd as well.
• CSS is a bit unreadable.

Visual:

• First impression: I like it.
• The also recommended jumps out as being a little...overstated.
• You chose a fluid design that expands as wide as the browser window goes. With the way monitor trends are going these days, you need to be aware of how it looks when it get stretched fairly wide. There's been plenty of studies that say readability declines with line-length.
• It also falls apart pretty badly when the window is made narrow.
• Use min and max width!
• It also starts to fall apart after a couple of text size increases. Be aware of this sort of thing, and learn how to fix/avoid it
• I love Heinrich's review.
• I really like the hover treatments you've given everything. They're all subtle but really nice. Especially the wikinetic logo!
• However, I do notice you've chosen to forgo most, if not all, of the text replacements. By doing this, you lose the nice drop-shadows and other treatments that your designer might have spent a lot of time on. This is definitely the kind of thing that could get you in trouble, or could end up working out.
• It makes things simpler on your end, but makes things look less refined, especially when you start moving from browser to browser.
• I don't like that you left both inner and outer borders on the thumbnails in the image, instead of using CSS. No one has pulled this off yet, and I keep saying it, but it really wouldn't be that difficult to use CSS to make the borders.
• The glow background was an interesting approach. I like the thought, but it becomes noticeable when the browser window is narrower. Perhaps a transparent png ?
• Finishing the comp: This is fine. Simple and easy.
• Something I noticed later: since you didn't set a :visited color for the links, they're going to their default, and it looks awful against the green.
• Also, and this is a much bigger problem, when you use a:link, there are no styles associated to it once it's visited. So the tabs at the top? Yeah, they're just plain, chunky text that disappear on hover.

CODE:

• CSS and HTML validate, nice. In strict, also nice.
• Document structure: Setting the wikinetic logo as h1 is good, but don't jump from h1 to h3 without an h2. There needs to be a progression for the document structure to work well.
• More "listoma" in the navigation. There's two options for each logging in and tabbing. Are lists necessary?
• I don't like the fact that the "sub-navigation" comes before the content. The content is what people come to this page for, give it to them sooner!
• More listoma in the sidebar. Two links don't require a list.
• An ok implementation of the stars.
• Interesting use of a dl for the reviews. I think I like it.
• .publisher and .author don't have any attributes. Intentional?
• You know what those class names made me think of? hreview. http://microformats.org/wiki/hreview
  This would actually be a great place for them. I wonder if anyone did that?
• As far as the content section goes.
• First, I like the h2 for Wikinopsis. But I think that the cover image should be after the h2 in the code, and the "edit" link shouldn't be inside the h2.
• As I said before, this is the place for a table. Don't shy away from them when they're called for.

Browser Testing

• All comments were related to views in FF mac.
• I'm only going to comment on differences I see from the FF view.
• iPhone views are not taken into account in judging, they're just there FYI

• Safari 2.0.4 mac: The background glow image behind the wikinopsis is messed up. Also, there's a background showing behind "Buy this book" that doesn't look right.
• FF windows: Looks the same.
• IE 6 windows: Looks the same.
• IE 7 windows: Looks the same.
• iPhone: The issues above with safari are non-existant here. The only issues are those of the narrow window, and those are easy to test no matter what operating system you use.

• I'm sorry, but it's kind of a big no-no to make the logo into hypertext. It's just not the same.
• The page doesn't look good when the browser window is too big or too small.
• I like the hover for "Edit" but I wish it was attached to the horizontal line.
• Set a:visited!
• The books in the right column need to have some space between them
• I wish the big book, Wolf Whistle, was the whole cover, not the cropped version. You could have put the hidden part behind the table.
• I like the hover for "Buy This Book" a lot. On the other hand, I wish that the text were vertically aligned better in it.
• Overall, the spacing in the Wikinopsis area looks great.
• "Also Recommended" Should be aligned with the top of the table.
• I like that the entire cover was included for Ecstatic in the Poison.
• The line height for the reviews looks nice!
• Footer is simple, but effective.
• Rating header for the table is right-aligned. Interesting choice. Not sure what I think about it. I would have left-aligned it in the cell.

• only one who used text for the logo
• reviewers table isn't a table... nice
• nice rollovers on nav and ‘buy this book'
• scales awesomely... adapts to shrinking/expanding window

• good preambule (sp) up front (go to menu, go to reviews, etc)
• table caption and tfoot introduced. all look good
• all readable
• markup is well done
• css is readable, but not well organized. put some comments in there.

• Death by font resizing
• Woot, nice star ratings
• Death by image disabling
• Blank alt tags
• I'm going to feel like kissing the first person to properly markup ellipses or apostrophes
• Uhhhh, wtf! Also Recommended a dl with empty dt's (blank alts tags)
• Done with this one

• Footer looks bit ugly with those links. –
• Never heard of the hover state. –
• Small browser window breaks the thing. <900px wide. –
• Text-resizing ruins the layout. –
• Logo is clickable. +
• ‘Go to'-links are good. +
• I like everything being 100% free. +
• Average rating is not visible with CSS turned off.
• Strict doctype. +
• Single image for rating. +
• Nice edit link. +
• HR could be done via CSS. –
• CSS in order of the HTML file.

Visual

• You chose a fluid design that expands as wide as the browser window goes. With the way monitor trends are going these days, you need to be aware of how it looks when it get stretched fairly wide. There's been plenty of studies that say readability declines with line-length.
• It also falls apart pretty badly when the window is made narrow. Make the window 800xwhatever, you'll see what I mean. It should be at least presentable at 800. Not all of the content has to be visible, but it shouldn't fall apart.
• Use max and min width!
• I like your extension to the end of the comp. Both the footer to the table and the footer to the page in general are nice.
• I don't like that below the footer is all white. It wouldn't have been that hard to make it black instead.
• Why are all of the book thumbnails the same image? I guess it doesn't really matter.
• The page fails on text resizing.
• Font size and line heights look pretty good.
• None of the clickable areas react to hovering. This isn't very good for usability, and it makes the site seem less dynamic.
• I like the way you worked the background images in getting that glow glowing.

CODE:

• Was the div "page" really necessary? You could easily achieve the same affect by giving body a padding-top
• There's a lot going on in that header. You used absolute positioning, which works with your fluid layout. Why not use float right? And actually, you have both float right and absolute positioning on #header p. That's some indecision. Pick one!
• The preambule is interesting. (Was it supposed to be "preamble?"...French?)
• You used a list for the preambule, no list for the welcome back links, and a list for the menu. If you must use lists for this kind of thing (and I'm not convinced), be consistent.
• "Here is the menu:" An odd choice. I'm not sure about this one. I like the spirit of it, though.
• content: Good execution of the wikinopsis. h3 for the book title (image), h4 for wikinopsis of the book, the wikinopsis itself (with inline "More" link) and the Edit link last in the code. Well done.
• I also like that the "actions" come after the synopsis but before the reviews in the code.
• One of two "average" solutions to the rating stars.
• Used a table.
• Very well constructed table, thead, tfoot, tbody
• I like the thought of using dl for the authors, except for this: Each dl only has (and only will ever have) one item. One item != list.
• Also recommended: so...you have a bunch of dls. One dl for each single review....wouldn't you just have one dl? You know, a list of definitions?
• Also, I would put the title of the book in the dt (definition term)
• Footer is fine (although it would have been possible to use just one list here, instead of two)
• The HTML code is nice to look at. I like the use of comments for end tags, this is a good habit to have.
• Get into this habit with your css. It's in order, but start using comments to keep things organized. You'll be glad you did once you start getting into some big projects.

Browser Testing

• All comments were related to views in FF mac.
• I'm only going to comment on differences I see from the FF view.
• iPhone views are not taken into account in judging, they're just there FYI

• Safari 2.0.4 mac: Looks the same.
• FF windows: Looks the same.
• IE 6 windows: Serious problems here. Some are with transparent pngs, others stem from positioning problems.
• IE 7 windows: There are some problems here, too. Part of the wikinopsis is cut off by the table.
• iPhone: Looks the same.

• At 1024, this design stayed very true to the original comp. Nice job!
• However, at other screen sizes, this designs kind of falls apart. When it's on a larger monitor, the gap between the columns spreads out and makes the design feel gapped up. When the window is smaller, things start dropping off. However, I do like what happens to the main book cover when the window size decreases. Be sure to check that out!
• Overall, the vertical rhythm is well crafted. Pay attention to how this contestant made the padding to the left and bottom of the Wikinopsis paragraph match up. Very well done.
• This page could benefit from some hover effects. But subtle ones, not dramatic ones.
• I LOVE what was done with table footer. I wish more reviews were thrown in the table to make it feel more complete.
• The footer looks okay. It's not my favorite, but it looks okay.
• I like the addition of the "Top" link at the bottom of the page.
• I think the links at the header are okay, too. Light grey and unobtrusive.

• only one who used a "top" anchor – nice!
• also recommended nice DL's

• just an image id="logo" for logo. like it.
• why does the reviewer's table cell have class="picture", when there is so much more than a picture that is part of these cells? Maybe it's to distinguish from reviewers who do not have pictures on file with wikinetic, and therefore the reviewer presentation is different. Makes perfect sense.
• moz corners for new footer stuff. not sure about the red being so dominant, but I see where red was introduced in the original comp as a border color for the images, so I can appreciate the designer wanting to use more of it.

• Getting strange rendering glitches in Safari 2, probably due to the javascript (the navigation sticks up top after page reload)
• Not cutting off the bottom of the book Wikinopsis
• Green footer dude has bottom margin in Safari
• Navigation pushed above the start of the page when images disabled, counting on the push from the image height
• Star ratings using image replacement, blah
• Nice that he thought beyond the comp
• Didn't use ellipses or apostrophes

• The footer is really crap. –
• A white border on the right. –
• Sort-able reviews! Cool! +
• Nice to see your favourite books. +
• Text-resizing is a TERRIBLE. –
• Thought about RSS updates. +
• Transitional doctype. –
• Crap background for rating –
• Edit link is nice. +
• Headers abused. –
• Extra divs used when it was not needed –
• Why deleting the outline for the focus? That is for usability! –
• CSS is well organized. +

Visual:

• This is by far the most ambitious completion of the comp I've seen so far.
• I really like the idea, but I'm not sure about the execution. The red is kind of glaring, and kind of clashes with the rest of the page. But I like the concept.
• I like that you used a max width for the page. Why not a min-width, too? Oh, I see now that you did, but not for the header. Well...ok then.
• The page falls apart after a couple of bumps up in text size.
• Leaving the white background surrounding the right side and bottom of the page makes it seem a little incomplete. Maybe a different bg color?
• I think the Wikinetic title really needs to be a link.
• I like that all of your clickable areas react to hovering. I don't think they always look good, though. Look at the navigation tabs, the edit link, and the more link. That gray doesn't work everywhere.
• I like that you made the thumbnails clickable.
• The up/down arrows are a nice addition to the review table. However, on my browser (FF mac) the arrows next to "Rating" fall on another line.
• The spacing/font sizes are all off when compared to the comp. Most are too big.
• The table looks how it should, which is nice.
• I don't like that the book cover doesn't fall behind the table.
• Again, I do like the idea of the footer, but the execution wasn't very good. (At least visually)

CODE

• HTML validates, but in transitional....
• But it appears that it validates in strict....USE STRICT!!
• CSS doesn't validate because of using mozilla's proprietary border properties. This is interesting, but I'm not sure it was a good idea. For one thing, it just doesn't look good. The way mozilla renders those curves is all chunky. For another, the whole idea of web standards is to get away from proprietary technology and move towards a set of standards that everyone can use. I think rounded corners would work really well here, but I would use one of the ten billion techniques that already exist (and look good).
• Upon looking at the CSS file, I have to say, I really like (so much that I might start using it) the way you've commented. Putting all of those stars and pushing the comment horizontally over so it has less to compete with when scanning the file...brilliant!
• I like the page structure, except that I would have made the Wikinetic logo a heading, since it should be. You had the right idea making it the first thing in the code, just complete the idea.
• I like that the author names are headings, but I probably would have used h3 here.
• Finally, someone didn't use a ul for the header navigation. Thank you.
• Wikinopsis section seems solid.
• You know, it wouldn't be hard to change this to an elastic layout. All you'd have to do is change out a couple of px to em. That'd be nice.
• Good that you used a table. Use thead next time along with tbody.
• I really, really like your implementation of the stars. Nice and clever. You only need to edit/load two images (well, four including the average rating section, i guess. Very nice.
• In your #average_rating span, make sure you set the background to no-repeat. When you increase the font-size, it starts making rows of stars.
• Sidebar: I like the buy section.
• Also recommended: arg. My happiness at not seeing listoma in the navigation is lost in the lack of a list in the perfect place for one. Lists, like tables, really should be used when they're needed.
• And then, for some reason, a list for the choices. You might be able to make a case for using lists here, but then why not a list for the list of recommended books? You're toying with my emotions!

Footer:

• Ok, I've already talked about the -moz-border stuff. Moving on...
• I do like the icon image having the negative margins to place them inside the border. This is nice, and well done technically.
• I also like that you used p here for these little blurbs.

Browser Testing

• All comments were related to views in FF mac.
• I'm only going to comment on differences I see from the FF view.
• iPhone views are not taken into account in judging, they're just there FYI

• Safari 2.0.4 mac: Looks the same, except with square borders at the bottom. As I said, this actually looks better.
• FF windows: Looks the same.
• IE 6 windows: Serious problems here.
• IE 7 windows: There are some problems here, too. It looks like one of the conditional comments is messed up, and there's no space below the table.
• iPhone: Looks mostly the same, a couple of spacing issues.

• Favicon! Great!
• Not a bad idea to go ahead and show the full book cover for Ben Hur. As the designer who cropped the book, I would like to have seen it cropped, but I can definitely understand people taking issue with it. If you show the full book, at least make the bottom-padding match the right- and top-padding.
• The grey hovers for are very difficult to read.
• I like the addition of the sorts for the table columns. Very good idea. On the other hand, why would anyone want to sort by "Review"?
• I like the thought behind adding the line with "More Recommended books".
• Very ambitious footer. I love ambition and fearlessness. However, I think the color is not right for the site. I see where you pulled the red from the reviwer thumbnails, but that was a much better accent color than an additional primary color. Also, the icons don't match the mood of the site, and the mozilla rounded corners look jagged. I like the addition of the right shading on the footer as well. Again, very ambitious, just maybe not suited for this design. Imagine this as a solid teal band across the footer. That would have looked sweet!
• Making rounded corners on "Also Recommended" was a nice touch. But again they look a little jagged.
• I like the improvements to the little star icons. It's all in the details!
• Make the reviewer names bold. *You almost had the repeating background working. Keep massaging that!
• Good move to lose the glow from the background. Saves time and bandwidth.
• Copyright line needs left-padding to match the left border of the table.

• doesn't expand to my browser width... no like :(
• great effort on ‘red stripe' near bottom
• good rollovers for nav and ‘buy this book'
• only one to use a different favicon

• Went beyond the comp
• Star ratings sucked, image replacement by the looks, although the one under buy this book seems good
• The wikinopsis falls under the reviews when images are disabled, counting on the image's block.
• I bet that means it can't handle font resizing—yep.
• Review section not full width in Safari
• Wikinopsis falls under right hand content when browser too small
• Didn't use proper ellipses or apostrophes
• Used microformats

• Page looks clean. +
• Page size is HUGE, not everybody uses fiberglass or satellite connections. –
• Footer idea is good, but the graphic design itself is crap. +/-
• Text-resizing destroys the navigation. –
• Window resizing doesn't work for small sizes. Your fixed layout isn't real fixed. –
• Hover states are not used, or used in ADHD-mode (buynow-button). –
• Is Dan Ott your favourite judge?
• Transitional doctype. –
• Rating is usable, but could be done better. +/-
• Edit inside header/definitionterm. –
• Visual classnames instead of semantic ones. –
• Table mark-up could be done better (thead etc instead of classnames for tr's). –
• H1 good used. +
• CSS file is very well organized. +

Visual:

• ::sigh:: Brad, didn't anyone tell you flattery will get you nowhere?
• As far as completing the comp goes, I'm going to say, same as #6, that I like the idea, but something's a little off visually. I'm not sure exactly what would fix it, but something's off.
• You used a max-width and a min-width, which I admire. But if you're going to go to the trouble of using a min-width, make sure everything is readable when it's at that width. Here, the paragraphs start to overlap and everything when the window gets tiny.
• Things start disappearing upon one text-size increase.
• Only one of the clickable areas (the "Buy This Book" link) react to hovering. It wouldn't be hard to add a :hover state to the links at least. Remember, this is a big thing for usability.
• You left the borders for the author and book cover thumbnails up to the image, instead of using css. Since they're going to be links, it wouldn't be hard to apply a border to the image, and then a border to the link. Using css for borders is a good habit to get in to, because it takes some of the workload off of whoever's making the images, and makes things much easier to change in the future.
• You need a little more leading in the review table to match the comp, but everywhere else looks good.
• I'm still not convinced (even though many of you did it) that using text instead of image replacement for the navigation is the right move. Even on a mac, the text looks terribly blocky compared to the comp.
• I like, at the footer, the addition of the book logo. Nice touch.

CODE:

• CSS validates ,nice
• HTML validates, but in transitional. This is starting to get frustrating. It validates in strict! Use it! Most of the transitional entries I've seen here have been fine in strict. Your doctype should be a conscious choice, not something you use because that's how a new document opens in your code editor, and you've all got the talent to rock the strict. Do it!
• Document structure: I like using h1 for the title. I also like the h2 for "Welcome back". "Wikinopsis" definitely needs to be a heading, though.
• Since "Other Great Book Resources" and the other sections like it are completely different sections, they should be on a heading level equal to another section above it. I would think they'd be around equal to "Also Recommended", so they should be h3, not h5. Think of it like an outline for a report in school.
• Used a list for the nav. I've ranted on it a lot above. At least the account and not arnold links aren't in a list.
• What's wrong with giving #main-content a clear:both attribute instead of going to the trouble of attaching another class that only does one thing?
• I don't like the use of a dl for the wikinopsis. It really should be a heading and a paragraph.
• I really like the treatment of the book cover. Linking it to amazon and including it in the markup is nice.
• I like the use of the "summary" attribute for the table.
• Use thead for tables!
• Oh snap, hreview! Niiiiice. I was wondering if anyone was going to bust hreview out. Very cool.
• Ok solution for star ratings. I'd include a little more info in the hidden text though. Maybe "3/4 stars" or something like that. The visual cue of the stars conveys a lot more information than "3" does.
• It looks like the "inner-sidebar" div is completely useless? Yeah, it doesn't have any styles applied to it.
• I've said it before, but I really would use a ul for the list of recommended books. Otherwise, looks ok.
• There are better ways to clear sections than using an empty div with a clear attribute. Research them!
• In the secondary-content is coded in a very weird way. Why not just use three divs floating left? Why all the extra ids and divs and everything? I think you could definitely cut the code (both HTML and CSS) waaaay down.
• Visually, the HTML code looks good. It's well organized, and I like the use of comments to keep things clear.
• Same with the CSS, well done.
• There really isn't any need to use non-semantic class names like "right," "left," and "clear"

Browser Testing

• All comments were related to views in FF mac.
• I'm only going to comment on differences I see from the FF view.
• iPhone views are not taken into account in judging, they're just there FYI
• Safari 2.0.4 mac: For some reason, the table doesn't extend all the way across like it does in ff. Everything else looks ok.
• FF windows: Looks the same.
• IE 6 windows: Some definite problems here. You mentioned in your comments you didn't test in ie6. This is an example of why you should.
• IE 7 windows: There are some problems here, too. The rating tds don't have a grey background like they should.
• iPhone: The navigation stacks up instead of sitting next to each other, and part of the wikinopsis is cut off. You can see the navigation issue when you make the window narrower in FF. There's also a noticeable border between tds in the table. I dunno why.

---

• Finally, fixed width!
• The grey background is a little...well...Zzzzzz... but whatever. Maybe a drop shadow would help?
• Spacing throughout is consistent and tight.
• I would like a few more hover effects. The hover for the "Buy this Book" button is a little over the top.
• The headlines are text, which is fine with this design. The font wasn't too terribly important to the design.
• The drop shadow / striping for the table rows needs to be consistent. Above Jessica it is a drop shadow. Above Dan it is just a lighter grey rows with a 1px border.
• There may be a little too much spacing between the table and the footer.
• The footer is probably the closest to a finished looking footer, and adds great content to the page.
• It kind of makes the lack of grid obvious because it's three columns and shows how off my grid is...(oops!)
• The grey lowest part iof the footer is nice, too. The muted book icon is kind of cool. I would bump the text down a little to center vertically beside the book icon with equal distance on the top and bottom.
• You lopped off Ecstatic in the Posion!
• Borders on the reviewer thumbnails would be better if they were achieved with CSS and not embedded in the image.
• Font size in Wikinopsis paragraph is a little small...

---

• I honestly dont like the fixed with for this particular design, but thats just me... but it does give them some bonus points for the only one who did that
• i like the three callouts at the bottom
• best footer/ most original