Creepy Critters Entries

+ Enthusiastic! Turned it in at a record time!
+ Reset stylesheet, fonts to 62.5%
+ CSS organized well
- invalid – typo on line 69. haste makes waste!
- No microformats – the one requirement of this time around.
- what happened to the footer nav links? Class breadcrumb? I am confused.
- Looks too silly in IE6.

Author notes:

The template was tested on Win XP in Opera, Firefox, Safari and IE6 (I know it was not really required, but still has the biggest market share). I had to make a small hack for it to work in IE6, I know about display: inline to remove double margin, but it was not the solution in this case.

I don't have a Mac, but i guess (hope) everything will work just fine on a Mac too. About the microformats, I just used hCard for the company info in the footer, I thought it would be misleading to add the offices too.

+ hCalendar working. AWESOME! LOVE hCalendar.
+ Non-js rollover – nice
+ Looks good (identical) in IE6
+ Awesome image replacement for buttons and tabs! And headings! Love! negative text indent, love!
+ valid XHTML and CSS
+ minimal IE6 styles and conditional comments, good.
+/- Footer vcard, and explanation why not implemented elsewhere – nice. However, left out fn class. Groan.
- 1/2 done reset style. Why only margin and not padding? That's the point of reset style sheet: Margin and padding because some browsers use one, some use the other.
- There are modern cross browser ways to do this without extra nonsemantic elements.
- Nonsemantic “rightcol” makes me sad.
- divitus on pests

+ valid xhtml strict + valid css + organized css
+ ie png image loader
+ hCalendar, hCard, works well
+ text indent method of image replace
+ semantic lis for vevents, address for vcard
+ one of the few who put a hover and link on the events! Incredible! Very thoughtful on real world implementation.
+ conditional comments for IE styles
- ounce of divitis – line 29 :(

Author notes:

Here's my work:
Online: http://michalmech.pl/cssoff/CreepyCritters/
Download: http://michalmech.pl/cssoff/CreepyCritters/CreepyCritters.zip
And attachment :)

I had problems with IE6 because I don't have it :) I had to install Virtual PC from Microsoft and test the site on a Virtual PC. That was really annoying.

+ vevent works, abbr for datetime :)
+ ie6 ok, cond comments
+ good h1, h2 outline, nice attention to document structure regarding headings.
- non-accessible headings (display: none)
- S.A.D. Image replacement method. Just use IMG with an alt.
- divitus and loads of non-semantic divs
- nonsemantic classes (right, left, sigh, groan)
- less than fabulous organization of CSS

Author notes:

- Not Pixel-Precise
- Checked w/Fx2, Safari 3.1, IE7, Opera 8.5
- Print Style Sheet Available
- Used Operator 0.9.1 w/Fx2 for microformats checking

Uses CSS3!
+ valid XHTML
+ nice print.css
+ minor CSS organization
+ microformats good (- missed footer vcard :( )
+ nice differentiation of current tab in utility menu
+ :D Self clearing elements!! YAY!
0 INVALID CSS2 - display: inline-block is a myth. But it is valid CSS3, so is cool.
0 fails in IE6 but is still readable
- a lot of unnecessary breaking apart of assets in header image
- superfluous hrs. IMO, heading tags differentiate sections, hr should only be used by CMS users who don’t know any better.
- In a contest like this I hate to see li class=”last”, use :last-child instead.

Author comments:

One precision : the PSD was opened with Fireworks, so the colors seems to be different from the original.

+ valid xhtml
+ eric’s proper reset :)
+ nice organiziation
+ text indent replace
+ good headings outline
+ conditional comments
+ microformats using lis.. good.
- invalid css2/css3
- ok in ie6 but h1/logo is gone! I think that’s important!
- .last class :( instead of :last-child
- ghastly hrs with wrapping divs around them… terrible. way superfluous. IF you use hrs, use image replacement – you can style hr as such.
- nonsemantics :(
- tel missed on microformat… but is done in footer? must have missed it
- should be org, not a person’s name…. but it is on footer, must have missed it

Author comments

* Looks absolutely perfect in Firefox 3 B5 and Safari 3.1 on Windows XP SP2 at 1280x1024. (Hopefully that's a good thing :))
* It's fixed width, didn't get around to dealing with fluidity.
* IE 7: Footer order is messed up. Navigation isn't rounded. Header goes underneath the content.
* Opera: Navigation isn't rounded.
* Image Replacement used, therefore some headings missing without images.
* CSS is invalid due to the -moz and -webkit parameters used.
* In Firefox, can increase text size 5 times before things start overlapping.
* Lastly, uncomment the #overlay

+ valid xhtml
+ css organized ok
+ :first-child AND :before AND self clearing :)
+ conditional comments and print.css very nice.
- invalid css
- text size increases in comment? uh, no it doesn’t.
- ie6 inspection button is broke – not cool, not meeting functionality
- uses non css3 moz nonsense. I acknowledge your comment and think you’re wrong.
- sigh yet another victim of missing the fn in the vcard
- missed microformat in footer
- nonsemantic classes and divitus on pests and vevents (use address! use li or dl!)

Author notes

* I chose to use 'before' and 'first-child' pseudo selectors for the footer navigation dividers, which makes for a slightly different presentation when viewing in IE6/7 vs. Safari/Firefox.
* hCard and hCalendar microformats are in place where applicable
* CSS is compressed, you may view layout-uncompressed.css for a more human-readable version

ADDED:My apologies, the previous zip had an omitted encoding string - please use the attached index.htm and it will validate correctly.Editor's note: The revised index.htm is not included in zip file (sent separately).

+ valid css2 and xhtml
+ yay favicon – goes with spirit of microformats
+ cond comments
+ good header image replacement
+ paragraphs for events – is ok
+ css pseudo selectors
- nonsemantic placeholder image div for pests
- unclear css organization
- microformats could use some attention - syntax and structure need help. microformats.org – it’s all there.

Author notes

Used YahooUI reset and grids for speed and browser consistency. CSS Validation for YUI fails spectacularly.

+ some structure css (but not in reset)
+ vevent works
+ie6 is fun
+ valid xhtml (1 warning)
- invalid css2 css3 (mostly from the reset)
- need fn on microformat. fn means “formatted name”. it’s required.
- stole yahoo’s styles and yahoo is nonsemantic which is SAD.
- b tag? Why not strong?
- clearit class? Why not self clearing?
- Yahoo Grids, which some people like, but I strongly dislike for the use of a semantic markup competition.
- Too many BR tags - not semantic.

+ valid css, valid xhtml
+ teehee what is gar for classname? There is a fish gar. It sounds so familiar.
0 CSS ordered in document structure but no comments to show me structure
0 readable in IE6 but not the same
- display:none is less than ideal image replacement technique..
- FF has strange tab menu text - looks odd
- No microformats - same issue as entry #1 - disqualifies entry.
- No headings - should have some heading tags for semantic markup
- Safari cannot click on tabs, FF cannot click on some others as well. Strange behaviours between browsers. Some things, works on some, some works on not others. FF3 mac, no hover button.

+ valid xhtml
+ tab hilighting/button rollover
+ functional IE6
+ vevent :)
+ favicon
+ eric’s reset stylesheet
+ organized css
+ dl for pests
+ image over text image replace
0 js png fix, isn’t working in IE6, so kind of makes the png fix futile, yes?
- uses hr :( Personal pet peeve though.
- more clearing elements rather than self clearing… but I scratch my head, because some superfluous elements for clearing, and some are self clearing. Why not all self clearing?
- vcard… another fn victim
- lft-column class – not semantic :(
- invalid css… content: none is not valid, it’s content: ’’;
- superfluous elements… Why not try putting the ID on the img itself? Accomplishes same task, streamlines the code :)

Author notes:

- Done in Xhtml 1.0 STRICT
- Fonts in ems
- Not a single css hack was used. And it looks the same even on IE 5.5 :) only the png for the logo looks ugly, but the layout looks fine.

+ valid css2, css3, valid xhtml strict :)
+ subtle rollovers, I like
+ bg image replace good
+ at least recognizes the grass divs are superfluous :) embrace it, and I’ll give you props. Sometimes you can only think of a superfluous element method.
+ dl for pests
+ ul for top nav
+ functional and nice in IE6
+ used generator for hCalendar but used semantic h3 tags yay
+ microformats working
0 vcard uses fn so it works, but should use org instead of n.
- padding div superfluous… eliminate it and just reduce the height
- doc outline is messed.. from h2 to h4?
- no ul for footer nav??

Code

• Strict Doctype +
• HTML validates +
• CSS validates +
• A bit heavy on the classes. -
• hCards for company offices should have a company name attached. Cleveland and Phoenix Office doesn’t tell me much. -
• Nice use of the definition list for the pests section. +
• Image replacement on headings is pretty clean, but it could be done without using the spans. +/-
• Upon checking the CSS, the image replacement is achieved by setting the text to display:none. There are more accessible methods for image replacement out there. -
• Are divs the best element to wrap the address and copyright info in the footer? Probably a more semantically correct way to do it. -
• CSS is organized nicely +

Visual

• Initial viewing, it matches the comp very nicely +
• Scaling the text up makes the text unreadable. -
• Nav text doesn’t scale up. Just flat images. -
• Only header not visible when images disabled, but that is where the nav is located so… -
• Scroll bars appear on the Pests section when scaled up. -
• Looks good in FF2, FF3b4, Safari, Opera +
• Even looks good in IE6 +

A Different Judge…

Code
Creepy Critters should be the h1, not termite swarm map. Your page structure is pretty good, except all of the headers should be one level down to make room for the company name as the h1.

Semantics nonwithstanding, there is nowhere in the code where the text “Creepy critters – all service pest control” appears, which is sort of a big deal.

.siteContainer is completely unnecessary, you can even remove it without making any changes to the css

As far as using display:none to hide your spans while doing image replacement, there are concerns that screen readers ignore elements with display:none.
See here: http://www.mezzoblue.com/tests/revised-image-replacement/

You want to make sure you don’t rely on browser defaults for styles. for example, in the header, the paragraph has a default margin in firefox. but when you don’t specifically declare this, it has the possibility of causing problems in other browsers that have different defaults. A css reset (http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/ is my favorite, but there are plenty others out there) is the best way to handle this, and then you explicitly declare things like margins. Another benefit of this practice is that you can de-cruft a lot of your css. You don’t have to type margin:0; padding:0; list-style:none every time you create a ul; it’s set that way ahead of time, so you can just declare what you need.

ha, so the pets – pests typo continues into the code. I’m guessing typo is the wrong word; this was a mis-reading of the comp. It happens.

I like using a dl for the pests section

You shouldn’t define the height here if there’s text. min-height is good, height, not so good.

the pets thing is still entertaining me.

I would really prefer to see actual images here, not background images.

All and all, this was an interesting (in a good way) approach, with the absolutely-positioned dt and dd

In the sidebar, i’d like to see that badge represented in the code, so that “pure quality” shows up with styles turned off.

address in the footer should be vcard, too

nice use of li:before and li:first-child:before. very nice.

css file in general is well-organized and easy to read.

css validates
html validates xhtml strict.

microformats: Event list is solid, you forgot the fn class for the hCards, so those don’t work. Check out the Operator toolbar to check your microformats.

Visual

First glance looks pretty good.

I think this is going to be a common complaint, but I’d like to see rollover effects on the tabs and the “free inspection” button. Maybe that should be in the comp, but it’d be nice to see here.

There’s not quite enough space between the intro paragraph and the “free inspection” button

Missing that drop shadow under the shelf between head and body

In the seminar schedule, the spacing between the items is off. It needs less top padding and more bottom padding.

Pests is misspelled

Pests lookout section: font seems a little large.

Sidebar: “Or we’ll kill this cockroach” – why the negative letter spacing?

Footer – “Creepy Critters” should be uppercase

Footer – “comp designed by…” message should be flush to the right end of that bottom border

These are mostly fairly small, nitpicky issues. overall, visually, it’s doing pretty good. The missing drop shadow and the weirdly misspelled headline are the most glaring problems.

Text resizing: Fails horribly. This will become less of an issue in a few years as ff3-style page zooming becomes more common, but for now, it’s really important to consider.

Page very consistent throughout browsers, including ie6, nice.

Author notes:

- I didn't find a proper way to do the menu, so I'm not really happy about that, and I won't blame the judge for that either
- On my own computer I only had access to Firefox 2, IE 6 & Opera. This hasn't been checked in any other browsers
- Please note that the background for each critter in their descriptions has an 'image loading' text in the background and you may not have picked that up on a localhost computer
- I don't know how to properly use the microfomats that you suggested, so i took a punt at it
- As for the website design, not much has been changed by me, but the little addons that i did use were only to slightly enhance the look of the website - i didn't want stuff the look of the page just for this comp.

Code

• Strict Doctype +
• HTML validates +
• CSS validates +
• Presentational class names used throughout. -
• Used div class=”text” instead of p element, keep semantics in mind folks! -
• hCal, should be using the abbr element to markup dtstart and dtend -
• Pest section has the description text floating without an element. Could have used a paragraph element here. -
• hCard… Add the company name in the hCard somewhere, you can visually hide it in CSS, but keep it in the markup so it will show up in my address book. -
• Wish the h1 would have been used for the logo rather than the “Termite Swarm Map”. -
• Looks pretty chaotic with CSS turned off. Purely presentational design elements mixed in with the markup. -
• Heading could use some organization. -
• Strange thing going on with the content div. Two declarations for margins, one set as important to override the other. Setting it like this really screws it up in FF3, removing the declaration for margin altogether seems to fix the problem across the board. -
• CSS organized nicely. +

Visual

• Matches comp well. +
• Another one that doesn’t scale well when sizing up the text. It may be a lot to do for a time sensitive contest, but something you should really try to strive for. -
• Hover effects on the inspection button, pest information and office location info. I like it. +
• Hover effects and active state on the nav would have been nice. -
• “stumps” div solely for presentational purposes, effect could have been done without it. -
• Header and footer text not visible with images disabled. -
• Looks good in FF2, Safari, Opera +
• Looks readable and somewhat put together in IE6 +
• Not so good in FF3b4 due to funky margin settings in the style sheet, but since this is just for my curiosity I’m not counting it.

A Different Judge…

Code:

It’s interesting to have capitalized class/id names. Not good or bad, you just don’t see it very often

Fairly simple reset here, it’s good that you’re thinking about that.

In the header – I don’t like lefty and righter. since all they’re doing is displaying what really should be background images, they’re totally unnecessary. It would have been much better/easier to apply one background image to #Header than this.

\#Menu is a pretty big mess. Try googling around for a tabbed navigation solution, but start by using a ul, and css for background images of the tabs instead of including img tags inside your links.

Like I said, I like the idea of having a hover state for the inspection button, but your implementation needs some more work. First, empty links should never be used. if you turn css off, there’s no content to fall back on. second, google css sprites.

Good header structure

I’d consider putting the event list in a list, probably an ol would be best.

Use p tags, everywhere. Any time there’s a paragraph of text, consider a p tag.

Using a common background image for the pests is an interesting concept, but i’d probably just stick with one image for them. You’re loading an individual image anyway, and not saving that much space

In the sidebar, the text for both “satisfaction gauranteed” and “pure quality” is not represented in the code. You should check out http://www.mezzoblue.com/tests/revised-image-replacement/.

\#Grey is unneeded. just apply those styles directly to the h3. you can even give it the id=”Grey”, just ditch the extra div

In general, classnames like “grey,” “moregrey,” etc are a no-no. semantically, you’re mixing up structure and presentation. For that matter, the same applies to “right” and “left”

Ruh roh, inline styles.

I like the indentation in the css file itself

On the microformats, good that you included them. Next time, use a more descriptive name for the hCards, and use abbr correctly in hCal

css validates.
html validates xhtml strict.

Visual:

Ok, I’m not sure if this should go in design or code, but for some reason #Content has a right margin of 100px, which in some browsers (ff3, ie 7+) pushes #Content out of alignment. in ff2, safari, it sits in the right place, but this feels like a rendering bug to me. either way, that 100px margin is a mistake, and it shows up in browser testing. I mention it first because I use ff3 most of the time, and view the entries first in it, so it’s a pretty noticeable issue there.

Content readable in ie6.

There’s too much space between the tabs at the top

The line-height of the text looks good everywhere except in that intro paragraph. line-height there is too little.

I like the rollover effect on the inspection button, good thought.

Padding left and right of the whole page is maybe 5px off, which might not seem like that big of a deal to you, but keep in mind that each design decision like this was made on purpose by the designer.

The Contact Us section is indented too much.

It looks pretty decent after a couple text-size increases.

Author notes:

I didn't correct misspelled word "gauranteed" because I haven't font used in competition (helvetica rounded).

Code

• Strict Doctype +
• HTML validates +
• CSS does not validate (but due to a CSS3 pseudo class) +
• Using HTML 4 Strict, I know there’s a lot of controversy surrounding the argument between XHTML (served as HTML) or HTML. Giving points for going against the norm. +
• h1 for the logo. Nice. +
• JS used for certain hover effects that probably could have been duplicated with CSS. -
• Markup a lot cleaner than the previous two. +
• .clean class on list items to zero out margins and list style… Why not use a global reset? -
• Nice use of a list to mark up the hCards and hCals. Much more semantically pleasing than a lot of divs. +
• Company name??? What good is an hCard going to be if I don’t know what the contact info is for? -
• Great use of headings, document outline makes sense. +
• CSS file could stand to be organized a bit better. -
• Looks decent with CSS turned off. +
• Empty divs used purely for presentation (columns above footer), this could have been done without the extra div. -

Visual

• Matches comp well (as most of them seem to be so far). +
• Scales up better than the previous 2, but not great in the map section. Maybe I’m just being picky. The nav IS text though so that’s good. +/-
• Hover effects on nav in header and footer and on the inspection button. +
• Images of pests as a single image. Probably better if there were sliced up individually. -
• Looks great with images disabled. Very well done! +
• Looks great in Safari, FF2, FF3b4, Opera. +
• Looks pretty good in IE6. +

A Different Judge…

Code:

HTML Strict: niiice

Use the title attribute in your links. It helps with accessibility.

I like the idea of having a rollover for the header, maybe, but the execution is lacking. a) you should never use inline “onmouseover” type javascript behaviors. If you must use javascript for rollover behaviors, use event handlers.

Image replacement on the header. Not my favorite technique, but it works.

I’m not sure about your treatment of the nav tabs. This works, but it adds a lot of work if, say, the content in one of the tabs changed, or a client wanted to add a tab. Use on of the many rounded corners techniques to apply the tab background to each tab.

Next time in the header, try using floats+clears instead of absolute positioning. That way, you can avoid the problem you’re having on text-size increases / if the content in there is longer than it is now.

In regards to the last to points, think hard about what could happen in the future. Strive to come up with the best solution that makes things as clean as possible and easiest to handle unknowns like content sizes.

I still do like the visual of the hand appearing on the rollover of the button, but again, try not to use inline javascript.

I love the clearfix technique, but next time don’t apply the ”.clearfix” class, since it’s not very semantic. Instead, in the css, list all of the element ids / classes that need fixing.

All of your ul/dl have the classname “clean,” which just resets the css. Not very semantic. Next time, use a reset, since none of your uls have the default styling anyway.

I really think each pest image should be in with it’s list item as an actual image, not one big background image.

Nice choice on “last-child,”

Why are those hrs there? I’m beginning to suspect it’s for some kind of ie fix.

Nice work on the satisfaction h2

Ooh, you used the element “address” for something that wasn’t an actual address? Read up on semantics!

nice use of conditional comments

css only invalidates because of last-child. that’s fine.

html validates, in strict. nice.

Visual:

First glance, things are looking pretty solid.

At second glance, things are still looking pretty good.

Either too much line-height or too big of a font in the sidebar

Font sizes are a little too big in a couple places

Things get messed up right away on text-size increase

I like the idea of having a hover effect on the inspection button, not sure about the actual execution.

Good cross-browser. ie6 is perfectly readable, which is all we asked.

Author comments

It is unfortunate that this is not my best work but I tried to make the best out of the time I had. I have tested the site in FireFox, Safari, IE7, and even IE6. I am using a slight hack to get transparent pngs to show up in IE7. Lucky for me it is only one line of code and I have included it in my IE6 style sheet that is targeted through conditional comments.

I built this page using em based fonts as the measurement. This allows the page to scale gracefully. Please try to do so in FireFox. I think you can increase the font-size about 4 times before it gets a little messy. I have also included a print style sheet since it is often times forgotten. Finally, I was going to use SIFR with this build out but I did not have the necessary fonts. Instead I have used my old standby of the Phark Image Replacement technique.

Code

• Strict Doctype +
• HTML validates +
• CSS validates +
• Would have liked to have seen the h1 used for the logo instead of “Termite Swarm Map”. -
• .imageReplacement class? You’re already using an id on the element, let that be your hook for image replacement. -
• Whoa! Those are some looooong ids for the hCal events. What purpose? +/-
• Like the use of definition lists for the pests section. +
• Print style sheet. Very nice. +
• CSS is organized. +
• Looks pretty good with the CSS disabled, some of the imagery could have been kept as a background to keep them out of the markup though. +/-
• Yay! Someone finally put the company name in the hCard! Failed to use fn though, so that kinda ruins the effort. +/-
• Could have made better use of the headings. +/-

Visual

• Matches comp well. +
• Scales up very nicely (best so far), only problem is the inspection button gets lost. +
• Hover effects on both nav sections and the inspection button. +
• Header and footer disappears when images are disabled. Thankfully the map area had a bg color declared. -
• Looks great in Safari, FF2, FF3b4, Opera +
• Looks wonderful in IE6 as well. +

A Different Judge…

Code:

Print stylesheet: niice.

\#tagline really really should be a header

nice work on the nav tabs. they’re extensible, and handle text resizes really well.

I like the thoughts here in the #header section. like I said, I like that the whole map is there, and hiding under the shelf. It’s just too bad that there are text resizing problems, or if that content changed. I can think of a couple ways to address this, but none of them are easy fixes. What do you think?

I don’t like the classname “SEO.” What is the thought here?

Phark is a solid replacement technique indeed, and my method of choice.

I’d like to say again that your solution with the layered images here is cool and imaginative, it just needs a little tweaking to be awesome.

I’m not sure about putting a hidden hr in the shelve div, seems like a sort of useless gesture.

In the classifications, for sure use a dl, but just use one, not four! One definition list containing a list of definitions. Good idea, bad execution. Also, in a dl, one term can be defined by multiple definitions, but not the other way around.

In the sidebar, I like the idea of classname “module.” It shows you’re trying to think ahead in case more could be added.

I like that you gave the badge it’s own element.

“em” should be “strong” here, I think. that’s just a small choice, though

YAHOO reset, nice

nice use of conditional comments

nice use of comments in your css files

Forgot hCard .fn, so hCards aren’t showing up.

css validates
html validates xhtml strict

Visual:

First glance: things are looking really solid.

The header is a little taller, but you made sure to include the full country map, so it’s not a problem. excellent.

Ah, but that caused a problem when increasing text size, as things disappear on the first increase. Although, the nav/logo really handles it well, nicely done there.

Nice work on the rollovers! Yeah, I like that a lot.

You’re missing that drop-down under the shelf.

I like the transparent png above the shelf.

Visually, pretty strong.

Cross-browser, very nice.

Author notes:

I put a few comments in the markup and did the best I could with my minimal understanding of Microformats.

Code

• Strict Doctype (would have gotten points, but HTML doesn’t validate) -
• HTML does not validate, kind of negates the strict doctype. -
• CSS validates +
• h1 for the logo, I like it! +
• Okay, you have to give the author props for trying to Rick Roll the judges in the logo link! +
• Presentational ids in the markup… Not so good. -
• What’s with using span and br elements in the pests section? Why not use heading and paragraph elements? Semantics people. -
• hCal, nice use of lists for markup. Using ‘()’ in your id is what killed the vailidation. +/-
• hCard, the company is not named Cleveland Office or Phoenix Office. -
• CSS could use some organization. -
• Missing level 2 heading. -
• Looks good with CSS disabled. +

Visual

• Matches comp pretty well, but text in Map section seems a bit small. +/-
• Another thing, the addition of Upcoming Events heading. Maybe nice with CSS disabled, but this probably should have been hidden. -
• Upper portion of the layout breaks when scaling text up. -
• Header and footer vanish when images are disabled. Don’t always rely on the background images to support your text. -
• Hover effects used on the main nav and inpection button, not on the footer nav. +/-
• Looks good in Safari, FF2, FF3b4, Opera. +
• Looks good in IE6. +

A Different Judge…

Code:

Did you really think rickrolling the judges was wise(;

Oof, i really don’t like having one big, honkin background image for the header. They’re separate elements, treat them that way.

Nice work with the nav tabs.

Again, if “want to learn more” is an h2, “pests” should be, too.

Don’t use class=”clear”. It’s not semantic, and there are better ways to handle it. I see this as just as bad as including empty clear elements.

In the pests section, i like that you included the images as actual image elements. This is good thinking.

I don’t like the span, strong business, especially since you gave that span display:block. Use sub heads and paragraphs. br really should very rarely be used; most times, a p is more appropriate. Not always, but usually, and definitely here.

Try to avoid non-semantic classnames like “left” and “right” (and “clear”)

In the footer, you could have done your “left,right” business with two paragraph elements, instead of two spans inside of a paragraph.

Nice use of comments inside your html

Interesting formatting of your stylesheet. What happens when your declarations get too long, though?

It’s a very clean-looking stylesheet though. Nice.

forgot hCard .fn, so they won’t show up.

css validates
html does not validate. you missed the closing tag for all of your abbr elements!

visual:

nav seems a little scrunched

line-height / font-size is way off in the header paragraph

The events section: I don’t really like the addition of that “Upcoming Events” header. It’s good that you’re thinking about things, but, again, Brad made the choice to leave it out for a reason.

Definitely don’t like the underlines on the dates.

Not enough space between the events and the pests sections.

“want to learn more..” and “pests to lookout for” should be the same font/size as each other, like they are in the comp.

Distance between the right side of the page and the right side of the sidebar is off.

I like the hover treatment on the nav and the inspection button, nice choices.

Things work for a couple resizes, then break.

cross-browser consistency is very good.

Author notes

document XHTML 1.0 Strict

Code

• Strict Doctype +
• HTML validates +
• CSS validates +
• h1 doesn’t make its appearance until the main content section. -
• br elements used after the h1 - h1 is block level and will take up entire line with no additional help. -
• A line with a br element does not a paragraph make. -
• Presentational class names. -
• All caps in the markup for the nav, what if the client decides they want lowercase? Use the text-transform property. -
• No microformats. That was part of the contest this time. -
• CSS turned off - could use some document structure. -
• CSS is organized into readable sections. +

Visual

• Some spacing and image issues
• Looks the same in Safari, FF2, FF3b4, Opera. +
• Looks fine in IE6. +

A Different Judge…

Code:
Your .creepy_critters div should both contain text, and probably be an actual header.

Think about using a ul for the nav here.

When designers include elements that are in ALL CAPS, put them in the mark up how they’d normally be written (“Home, About Us, etc”), and then use text-transform:uppercase; This is important for screen readers, as they see all caps text and think that they’re abbreviations, and will read each letter instead of the word. (“H, O, M, E” instead of “home”)

“Termite Swarm Map” should absolutely be included in the markup as text.

Line breaks? Use a paragraph with some margin.

Any time you’re including text as a background image, that text should also be in the markup and hidden. Look up “Phark Image Replacement”

In the event list, try a list and some paragraphs. That way you can just use css borders instead of including images for borders. This is very important.

Headers and paragraphs in the pests list, good.

Avoid using non-semantic classnames like “right”

Avoid setting heights on elements that contain text, that’s where you’re running into problems with text-resizing.

CSS file is well-organized

No microformats.

css, html both validate.

Visual:
Spacing and image issues.

Things get really wonky after two text-size increases.

Cross-browser consistent.

Code

• Transitional Doctype -
• HTML does not validate (ids have to have a unique name, can’t use the same one twice) -
• CSS does not validate (but due to a CSS3 pseudo class so that’s cool) +
• Document outline requires an h1 - missing.
• Definition list used to markup the events and contact information. Some would argue that its not semantically correct to use a dl this way, but I’m giving points for it. Much better than more divs and spans. +
• No microformats. -
• Good use of definition list for the pests section. +
• Don’t think the use of an unordered list for the contact info in the footer was a good choice. Extra markup with no real benefit. -
• Overall, the markup is clean. +
• Looks pretty good with CSS turned off, would have liked to have seen headings in place of images in some cases. +
• CSS is organized very nicely. +

Visual

• Matches the comp pretty well. +
• Readability hampered when text is scaled up, backgrounds don’t grow with text. -
• Header and footer disappear with images disabled. -
• Looks the same in FF2, FF3b4. +
• Main nav gets positioned at the top of the page when viewed in Opera. -
• Readable in IE6, but layout is broken (gets the point for still being able to view the content). +

A Different Judge…

Code:
This is the first transitional doctype i’ve run in to. It’s time to stop using transitional; it’s only meant to help people transition to strict. Since you’ve got the chops, take the strict doctype and own it.

I like transparent pngs a lot.

Interesting, using straight-up images for the logo.

Not too happy with the nav implementation. Research some rounded corner techniques to make this more extensible.

There’s no reason to include a classname like phark. I LOVE the phark technique, and this is the perfect place for it, but just use #teaser h2, since there’s only one. Or, if you must use a classname, use something semantic.

I like the thought of using a dl with the events list, but not sure if it’d work with microformats.

For the pests section, a good place for a dl, but not four of them! Use one definition list for one list of definitions.

I love the meyer reset

css stylesheet is clean and organized

no microformats.

HTML not valid because of repeated #ids. An easy mistake to make, but an easy mistake to find. This is the kind of thing you use the validator for.

Visual:
First thing i notice is that the background blue is a lot darker than in the comp.

The logo seems larger, but that might just be because it is too far to the left and too close to the top

The nav is a little off. not quite tall enough, and the far-right corner is not the right kind of rounded. Plus, there’s too much space between the tabs

Line-height looks very good throughout.

Margins are messed up in a few places.

I like the choice of using the original header fonts from the comp. They look a little cleaner than system fonts on the web.

Things start getting a little screwy on a couple text-size increases.

Line height is a little messed up in the contact us section

Extra border under the pests header

Things are a little wonky in ie7, the tabs are off in safari, and things are a little hard to read in ie6. Applying a transparent png fix for ie6 would fix that issue right up.

Code

• Transitional Doctype -
• HTML does not validate -
• CSS validates +
• No level 1 heading -
• Image replacement on some headings that have no text to replace. Does that even count as image replacement? -
• In one section there is div id=”head”, h2 id=”h2head” and p id=”head”, why not just declare the id for the div and use inheritance in your CSS to style the rest? -
• br element after a closing tag on the paragraph element? Its block level, unnecessary. -
• No microformats. Folks its part of the contest this time! -
• With CSS disabled, one has no idea what the company name is. -
• CSS is organized okay. A bit more differentiation between the sections would have been good. +
• Not gonna give negative points on this, but its a pet peeve of mine: Please don’t dump all of the files into one folder. One for CSS, one for images, etc. Keeps thing organized and neat.

Visual

• Matches the comp okay in FF2 only. Nav seems a bit tight as well. -
• Needs more breathing room on some elements, also needs to differentiate headings in sidebar better. -
• Another one that doesn’t scale up very cleanly. Maybe I should give up judging on this criteria. -
• Nothing visible when images are disabled. -
• Looks okay in FF2 only. In FF3b4, Safari, Opera the map section and header are shifted over to the left a bit. -
• Readable in IE6. +

A Different Judge…

Code:
It’s time to stop using transitional;

If you put all these elements inside a container div, you wouldn’t have the weird alignment issues.

Position:absolute and float:right don’t go together.

I do like the execution of the rounded corners on the tabs

When using image replacement, be sure to include the text and then hide it. Google “Phark image replacement”

Since almost all of the text on the page is white, why not put that in the “body” declaration in the css, instead of in each element?

I like that you included the pest images as real images. Next time, think about using a ul here, that way you could just do ul.pests li, instead of declaring an id for each one.

Use indentations in your html and css files to help with readability.

No microformats

CSS valid

HTML not valid at all, missed a bunch of closing tags

Visual:
Things are not looking very good here.

The top and main sections of the page are only aligned if the window is less than a certain width, but at that width, the nav section starts sticking off the end at the top. Bizarrely, the nav section holds this position no matter how wide or narrow the window gets.

Line-height and margins are incorrect throughout.

Nav – The font is too big or something, plus there’s no space between the tabs.

The sidebar and pests sections look pretty good.

Things stay readable past two text-size increases.

Same problems cropping up in other browsers, plus a couple issues i hadn’t seen yet.

Author notes:

I used the Dean Edwards scripts to account for the PNG usage in IE6. I also came across a bug in IE7 that I had never encountered: if an absolutely positioned element is a sibling of a floated element, sometimes that absolutely positioned element just goes away in IE7. So a fix for this is to just wrap the floated element in another non-floated element. Hence, the extra div around the primary navigation. I have also styled the logo for the subpages (commented out in the code), since having the logo be an h1 on subpages is not ideal You should be able to bump the text size up 2 times and all the content is still readable. You can also disable images and everything except for the logo text is still there. I had no problem sacrificing an extra span in order to make the text still be visible when images are disabled.

Code

• Strict Doctype +
• HTML validates +
• CSS does not validate (but due to a CSS3 pseudo class) +
• h1 for the logo! FTW! +
• Skip links to the nav and content. Awesome. +
• Good use of HTML entities in markup. +
• Nice use of the cascade and specificity for styling. Is very apparent in the clean markup. +
• Use of lists for the events. Nice touch. +
• Still going to bring this up… If you’re marking up an hCard, make sure the organization’s name is there somewhere. -
• Good use of headings as reflected in the document outline. +
• Looks superb with CSS disabled. +
• CSS is very well organized. +
• Comments in the CSS explaining reasons for certain elements in the markup. Thanks! +

Visual

• Matches the comp very well. +
• Scales up beautifully when text is resized. I was waiting for this! :) +
• No hover effects on either nav or the information button. -
• Readable with images disabled. +
• Looks great in Safari, FF2, FF3b4, Opera. +
• Looks great in IE6! +
• Favicon, nice touch. +

A Different Judge…

Code:
Hidden skip-links. Nice.

With the nav, you could do away with the tabs dropping down if you remove the explicit width.

I’m not sure about floating the nav tabs right; it sort of messes up the order and for no benefit. Next time, float the nav right, and then the tabs inside the nav left.

I am not a fan of empty clearing divs. Check out easyclear for a better solution.

I would like to see the critter images as actual images in the markup, instead of background images.

That being said, since you chose to use a background image, I like your execution with the css sprites and all that.

In the sidebar, i like the idea of classname “module.” It shows you’re trying to think ahead in case more could be added.

Really, other than the clearing divs, your markup is pretty solid. lean and clean.

Nice use of conditional comments / ie6 png fix.

I’m glad to see people starting to use last-child, nice choice.

Nice work with the microformats, except next time, include a better .fn for the hCards than “cleveland office” etc. You can hide it with css, but make sure it’s in the markup.

CSS valid except for last-child, that’s fine.
HTML valid xhtml strict.

Visual:
First glance, things are looking ok.

The padding in each nav tab is a little to large. back that up a little and it’ll look good.

Line-height is a little too much in the pests section, resulting in that section ending further below the sidebar than was intended.

No hover behaviors. I know this wasn’t explicit, but it’d still be nice to see for next time.

The majority of the content stays very readable after text resizing, well done.

Everywhere except the nav, where the tabs start dropping down after the first resize.

Good page structure. Page looks excellent with styles turned off.

I can tell you used transparent pngs, very nice. I love those things.

Also, the favicon was a very nice touch.

Cross-browser looking pretty good.

Code

• Strict Doctype +
• HTML validates +
• CSS validates +
• h1 used for the logo, nice. +
• Kudos to the author on using skip links. +
• “All Service Pest control” probably should be on a line all its own, negating need for br element. -
• Good use of definition lists on the pests section. +
• Not liking the way the hCal list is marked up. Why not put a heading for the seminar title inside the li? It would be more semantic and you wouldn’t have to use a br element. -
• Markup is nice and clean. +
• Note on the implementation of microformats… Pretty good overall. My main issue with them so far is that no one seems to want to include the company name in the sidebar office location entries. Yeah, they’re not on the comp, but that doesn’t mean they don’t have to be included. You can always hide them. They would just make more sense in the address book if they were present… + (for additional hCard for Brad C.) – (for lack of fn and company name in sidebar entries)
• Awesome with CSS disabled. +
• CSS is organized nicely. +
• Commented for certain workarounds in CSS. +

Visual

• Matches comp very well. +
• Love the hover effects on the nav. Would be cool to use it for the active state as well, but that’s okay. +
• Doesn’t scale up very well, text easily runs out of its own container. -
• Nav just static images. Text on scalable backgrounds would have been better (sliding doors of CSS). -
• Header and footer disappear when images are disabled. -
• Looks good in Safari, FF2, FF3b4, Opera. +
• Looks pretty good in IE6. Text spills out of the side of “Termite Swarm Map” and the inspection button, but it’s still readable. +

A Different Judge…

Code:
I’m not sure why those comments are there between list items. I assume it’s to remove any text nodes, but why?

Nice css sprite on the nav. That’s pretty work, good execution of your little tab-popping thing

Not my favorite image replacement technique, but it definitely works.

I like transparent pngs, and it looks like you’ve made good use of them.

This is maybe the third time i’ve seen this, but the pests section should be ONE dl, not four of them. A list of definitions.

Also, i’d like to see those pest images to be included in the markup, not as background images.

Nice work on the quality badge.

HTML validates xhtml strict
CSS validates.

Visual:

Tabs look very good, except now that you’ve fixed the spelling error, you need to make sure the padding is the same. That tab should be a little wider, since the word is now a little longer.

That map butts right up with the edge of the container; stick in a little margin on the right.

I don’t know if i like the negative letter spacing on the headers.

In the pests section, you could probably make those dts a little wider so that “Common Tree Sloth” appears on one line.

On a page like this, i’m not sure if we need the “skip to content/back to top” type links. They’re good to have, but maybe hide them next time, since they’re only going to be helping people using assistive technology.

I absolutely love the hover treatments on the nav tabs. That was a pleasant surprise.

I like the button hover, too.

It takes a few text-size increases before things start going bad, nice.

Looks pretty good cross-browser, too.

Code

• Strict Doctype +
• HTML validates +
• CSS validates +
• h1 used for logo. +
• Markup free from a lot extraneous classes and ids. +
• Definition list for marking up the vevents. Not my first choice, but not bad. +
• Company name in hCard, company name in hCard, company name in hCard… -
• ‘balka’ div used to separate footer from main content purely presentational. Effect can be done with CSS. -
• Looks pretty good with styles disabled. +
• Nice clean document outline. +
• CSS organized well. +

Visual

• Matches the comp. +
• Scales wonderfully, although I wish the map section would expand when text is increased. +
• No hover effects. -
• Sliding doors on the nav! +
• Still readable with images disabled. +
• Looks good in Safari, FF2, FF3b4, Opera +
• Looks pretty good in IE6, transparent PNG on the logo still shows the gray background, but readability is key. +

A Different Judge…

Code:
Nice css sprite on the nav. I like this implementation.

I love the clearfix technique, but next time don’t apply the ”.clearfix” class, since it’s not very semantic. Instead, in the css, list all of the element ids / classes that need fixing.

I’ve said this a few times already, but a dl = definition list. so use one dl, containing a number of definitions. A collection of dls is pretty useless.

The pets section should probably be a ul, since it’s a list of pets to be on the lookout for.

I like that you included the pest images in the markup.

I’m not sure if the extra div inside the #balka div was necessary.

Nice with the text-transform:uppercase

Love the meyer reset.

Nice use of conditional comments / ie6 png fix

CSS validates
HTML validates xhtml strict.

Visual:
First glance, things are looking fairly decent. You can tell at first there are margin/padding issues in a few places, like the sidebar. Nothing horrible, but definitely visible when you compare the page with the comp.

The nav text looks chunky.

Line-height is VERY good throughout.

No hover behaviors. I know this wasn’t explicit, but it’d still be nice to see for next time.

This is by far the best i’ve seen so far at handling text-size increases, nice work.

Overall, very solid.

Looks pretty good cross-browser, too. Include a png fix for ie6, and you’re golden.

Author comment:

I wasn't sure what your expectation were for the code because I found out about this last minute and wasn't sure if you wanted things as percentages or not. However, I coded it the way I think was the best for the template.

Code

• Strict Doctype +
• HTML validates +
• CSS validates +
• h1 for the logo. +
• Why the nested lists for the pests section? Extra markup for no reason. -
• divs used for the sole purpose of clearing. No reason for it. -
• Not to beat a dead horse, but… Company names in the hCard, please. -
• Presentational class names in footer. -
• “Termite Swarm Map” should be level 2 heading. -
• Little bit image heavy when CSS is turned off, also use of nested lists for pests section is a bit much when viewed like this. -
• CSS is organized. +

Visual

• Matches comp nicely. +
• Scales pretty well, although the map and footer sections could expand with font size increase. +/-
• Main nav scales well. That’s good. +
• All nav links and inspection button have hover effects. +
• Active state for the main nav. Thank you! +
• Header and footer info lost when images disabled. -
• Looks good in Safari, FF2, FF3b4, Opera. +
• Definitely usable. +

A Different Judge…

Code:
Nice rounded corners execution, although you probably could have used just one image instead of two. Check out css sprites.

Phark image replacement – nice.

Class=”clear” is not ideal. Non-semantic class names are to be avoided.

And DEFINITELY not cool with empty divs that are just there for clearing. Check out http://www.positioniseverything.net/easyclearing.html

Think about using a ul, or even a ol, for the events list. It’s a list of events, so it should be contained in a list.

I like the use of a ul for the pests, and i like that the pest image is included in the markup.

I don’t really understand the extra ul inside of the pests items; shouldn’t this just be a paragraph?

In the sidebar, “satisfaction guaranteed” and “pure quality” should be seperate in the markup.

I don’t really thing “Or we’ll kill this cockroach!” should be a header, just a strong would do.

CSS and xHTML both validate.

Visual:
Line-height is off in the header, but looks good everywhere else.

I like the “current” tab, and the rollovers on the other ones.

Nice rollover treatment on the button.

Spacing/padding seems off in places.

Things start disappearing after two text-size increases.

I like that you added the space to the end of the page.

You’re missing that drop-shadow under the shelf

Overall, fairly solid. Next time, pay some more attention to widths/padding/margins

Pretty consistent cross-browser

Author comment:

- tested on IE6
- tested on IE7
- tested on IE8 b1
- tested on Firefox 2
- tested on Opera 9.5
- tested on Safari 3.1 (win)
- validate (xhtml strict & both css)
- resize properly (not an em aficionados though)
- tested without images
- tested basic keyboard navigation

Code

• Strict Doctype +
• HTML validates +
• CSS validates +
• h1 should be the name of the company (IMHO) -
• Nav marked up in reverse order due to use of float:right, could’ve been implemented better. -
• Nice clean markup with minimal use of extraneous classes and elements. Nice. +
• hr element used to separate certain sections. Will look nice when viewed with styles disabled. +
• hCard needs company name attached. -
• Looks pretty good with CSS turned off. Would’ve liked to have seen a level 1 heading though. +
• CSS organized. +
• Comments in CSS. +

Visual

• Matches comp pretty well. +
• sIFR! Nice! +
• Hover effects on nav and inspection button. +
• Hover and active state on nav is well done. +
• Scales really, really well. Nav falls behind the map section a bit, but not too bad. Nicely done. +
• VERY readable with images disabled. +
• Looks good in FF2, FF3b4, Safari. +
• Opera doesn’t like sIFR too much, but other than that pretty good. +/-
• Looks good in IE6, not perfect, but good and very usable. +

A Different Judge…

Code:
In the nav, nice execution of rounded corners tabs. CSS sprites and all.

I don’t like the float-right for the tabs, because it mucks up the code order. This is important for accessibility. For example, a person using a screen reader is going to see the contact link first, and the home link last. Use float left for the tabs, and float right for the ul#navigation

Like i said, i like the use of sIFR.

Interesting image replacement technique for the button. I’ve actually never seen that method in the wild before, only on articles talking about image replacement.

Oh, i definitely don’t like using hr in the events. It really really should be a list, and then you can include a border-top on the list items.

Same with the pests, this should be a list.

I like that the quality badge is in the markup.

Yeah, remove all of those horizontal rules. Normal css borders can and should be used everywhere they appear.

Included a print stylesheet, nice.

“only hack of the stylesheet, I swear” haha

Ironically, you could get ride of those hacks by dropping the hrs, too.

CSS and xHTML validate

Visual:
First difference i see is the nav, obv. I like the thought here, for sure. I’m not sure about the colors (the faded brown is a little…ugly) but good thought.

I like the hover effect a lot on the nav, too.

The font-size is a little off in the nav, however.

That green is nice in the hover on the button.

sIFR is cool. When you have a little more time, spend some tweaking thing a little more. Font sizes in replaced fonts are a little off, and line-height in “satisfaction” header is a bunch off.

Line-height and margins are off in a number of places. These are very important, and not too hard to pull off.

The font is wrong in the “contact us” header.

Handles text-size increases very well, nice work.

Looks good cross-browser

First impression
Hovers on most links and ‘get free protection’. +
Link on logo. +
Bumping up font size doesn’t work. -

Microformats
Tried to implement, but not well enough. -
Dates in abbr title need to be formatted as ISO_8601, eg 2008-04-26 or 2008-04-26T14:22Z. -

HTML & semantics
Well commented, indented etc. +
Uppercase text, could easily be done via text-transform:uppercase with CSS. -
Specify the id or class in a way that it describes what’s in it, not what it looks like. id=’contact’ instead of class=’box_right’ etc. -
Some really weird validation errors. -
Main menu in reverse order. -
You could have used lists or headings for the events and pests, instead of divs. -

CSS
Nice Sliding Doors menu (unfortunately I cannot resize my text). +
CSS usage for headers. +
No real usage of new CSS things. -
Cool outlines. +

JS
Out-dated JavaScript, you could have used the CSS hover/focus state for that (all browsers support that, IE6 was not a commitment). -

Author notes

It uses a Javascript called Offspring that I used a few times for some nth- and last-child classes, but for some reason I couldn't get it to compress using Dean Edwards' packer. Hope it's not too big of an issue, it would have cut about 20k off the transfer.

First impression
Nice hover effects. +
Bumping up font size doesn’t work. -
Cool favicon (but why a png? ICO -> better cross-browser support). +
Link on logo. +

Microformats
Implemented quite good, some minor errors: dates in abbr title need to be formatted as ISO_8601, eg 2008-04-26 or 2008-04-26T14:22Z. +/-

HTML & semantics
Commented closing tags. +
Describe content, not visual info in ids and classnames; id=”index-content-right” → id=”sidebar” etc. -
Underlines for the events/pests/offices links makes it quite busy. Underline when hovering/focussing? -
You’d better use a DL instead of a UL+H3s for the pests. -

CSS
I think he planned to use the border-radius on the menu, but forgot. Good idea, slightly poor execution ;) +
CSS content property for footer. +
CSS sprites for hover with button. +
Why did you remove outlines? I can’t use my tab key any more to navigate. -

JS
Library used to apply some classes. However, the classes are not used often with the CSS and the library is quite big (33 KB? WTF!). Point is, you only use it a few times, why not hard-code it in your HTML? Ultimately you could use the real CSS equivalents, since we promoted to use new CSS techniques. -

First impression
No link on header. -
No hovers, only the footer has some. -
Bumping up font size doesn’t work. -

Microformats
Not implemented everything that could be Microformatted. -
Dates in abbr title need to be formatted as ISO_8601, eg 2008-04-26 or 2008-04-26T14:22Z. -

HTML & semantics
Minor indention, less readable HTML. -
Abuse of Hx elements. -
‘ WHY A TABLE? BECAUSE IT’S TABULAR DATA!—>’ – it is not tabular data! Better use a DL for it. -
Main menu in reverse order. -
Why not use a list for the events? -

CSS
Text-transform to uppercase. +

First impression
Doesn’t feel like a web site. No hover effects when I mouse over the menu/buttons. -
Logo not clickable. -
Bumping up font size works very good for ‘Termite sparm map’ block (good job!), menu breaks a bit (stays accessible). +

Microformats
vCards? Empty ‘fn’ etc etc. -
Dates in abbr title need to be formatted as ISO_8601, eg 2008-04-26 or 2008-04-26T14:22Z. -

HTML & semantics
Specify with id/class what the content of an element is, not what it does. class=”spacer” and class=”clear”: do not use them again. -
Quite readable. (Newlines after every tag?) +/-
Why didn’t you use lists for the events/pests? -

CSS
Why did you remove outlines? I can’t use my tab key any more to navigate. -

Author notes:

added the v-card but commented the card out at the bottom of the page added in data from contact us callout, added png fix for ie6, added external class for link at bottom of the page for www.cssoff.com

browser compatibility:
PC : Firefox 2 [2.0.0.13], IE6 [6.0.2800.1106], IE7 [7.0.5730.11]
Mac : Firefox 2 [2.0.0.13], Safari 3.1 [4525.13] , Safari 2.0.4 [ 419.3], Opera 9.20 [3669]

First impression
Menu hover state could be a bit more clear. -
Logo clickable. +
Bumping up the font size quite works, but makes your layout very ugly. -

Microformats
Not used. -

HTML & semantics
Very well indented. Strict doctype and UTF8. +
A div directly in a DL? A DL is good, but you didn’t do the rest well. -
Better use a UL for the events. -
Separators (’|’) in an separate LI? Check out the CSS content property. -
Describe what an element contains, not what it looks like. class=”clearfix” -
You can better use rel=”external”, but that isn’t a big issue. -
Images for the layout inside the HTML? Better move it to CSS using backgrounds. -

CSS
Why did you remove outlines? I can’t use my tab key any more to navigate. -

JS
Uncool JS to open new windows. -

First impression
Cool favicon. +
Weird hover on main menu, why not change the background color or something? But not too big of an issue.
Logo not clickable. -
Bumping up the font size works quite well (minor issue: sidebar overlaps footer). +

Mircroformats
Quite well implemented. +
Dates in abbr title need to be formatted as ISO_8601, eg 2008-04-26 or 2008-04-26T14:22Z. -

HTML & semantics
Very well organized. +
Good useage of classnames and id values. +
charset=US-ASCII? UTF-8 please. But not too big of an issue.
RSS feed, cool.
You use too many H1s. The H1 must contain the main title/subject of the page. So better put them in H2s and the current H2s in H3s. -
OL for events. +
List for pests. Better use a DL but not too big of an issue. +

CSS
Why did you remove outlines? I can’t use my tab key any more to navigate. (You added :focus for a part of all links…) -
CSS sprites for hover on button. +

Author note

Was the .psd file a layered file? I'm using CS2 and it was not layered.

First impression
Logo clickable. +
Hovers (main menu could be more contrasting with the normal state). +
Bumping up the font size hides the main menu partly, intro text becomes less readable, footer destroyed. -

Microformats
Not used. -

HTML & semantics
‘Pure Quality’ W3C spec on Label: ‘The LABEL element may be used to attach information to controls. Each LABEL element is associated with exactly one form control.’. -
‘class=”clearing”’ isn’t semanticly correct.
List for events and pests. +

CSS
CSS sprites for button hover state. +
Why didn’t you make the links in the main menu as large as the tab?

Author note

- I am aware of the spelling mistake in "guaranteed", however, did not have the font to properly fix it.
- I am also aware of a problem with my PNG image files having trouble displaying transparency correctly in IE6, I believe there is a hack out there for this, but I don't think it's compliant, so I did not apply that.

First impression
Cool favicon. +
Very clear hover states. +
Logo not clickable. -
Bumping up text size destroys page layout and makes text unreadable. -

Microformats
Not used. -

HTML & semantics
Used caps inside HTML for main menu, please use text-transform:uppercase in your CSS to do the magic. -
class=”boldtext” – You can use the B element to format text bold; or the STRONG element to give it a strong emphasis. -
Use classnames and id-values in a way they describe the content of the element, not what it looks like or does. Some examples that need to be changed: class=”underline”, id=”footer_top”, id=”footer_content_bottom”, class=”float_right” etc. -
You could have used a UL and DL for respectively the events and pests, instead of using nasty DIVs. -

CSS
Why did you remove outlines? I can’t use my tab key any more to navigate. -

First impression
Very cool hover states. +
Logo not clickable. -
Bumping up the font size works very nice. Great job. +
Cool favicon. +

Microformats
hCards: good job including ‘Creepy Critters’. However work is not needed. +
vCaldender: nice (Dates in abbr title need to be formatted as ISO_8601, eg 2008-04-26 or 2008-04-26T14:22Z.). +

HTML and semantics
Used good, semantic id values and class names. +
Well formatted HTML, good readable. +
‘Or we’ll kill this cockroach!Just kidding’ Note that that will be rendered as if there is a word ‘cockroach!Just’. -
DL for pests is good, for events you’d better use a UL. +/-

CSS
I frequently see ‘0pt’ in your CSS, you can shorten that as just ‘0’. -

First impression
Good hover states. +
Logo not clickable. -
Why put that ugly ‘valid XHTML’ button in the footer?
Bumping up font size does not work well. My ‘get a free inspection’ is not visible any more. -

Microformats
Not used. -

HTML & semantics
‘’ an empty link? Without CSS you can’t follow it. -
Use id values and class names to describe the content of an element, not to say how it looks like. Bad examples: id=”rightCol”, class=”clear”, class=”floatLeft” etc. -
Uppercase text, could easily be done via text-transform:uppercase with CSS. -
Main menu in reverse order. -
You’d better use lists for events and pests, instead of Ps and DIVs. -

CSS
CSS sprites for button. +

First impression
Cool hover states. LOL@logo. +
Logo is clickable. +
Bumping up text makes intro text unreadable. -

Microformats
vCard: I can’t see what offices. -
vCalender quite properly implemented (If there is not time, do not put any time in the abbr title.). +

HTML & semantics
Describe the content with id values and classnames, not how the element looks like. Bad examples: id=’centerMe’, class=’textTOimg’ etc. -
You use ’ and ” for attributes. Why not only one of them?
Lists for events/pests. +

CSS
I frequently see things that could be shortened. ‘0pt’ → ‘0’, ’#FFFFFF’ → ’#FFF’ etc. See http://www.dustindiaz.com/css-shorthand/. -
CSS sprites for buttons. +

JS
Cool pest forecast. One tip: insert needed HTML dynamically via JS. Besides, Prototype is not really useful for web sites, but for web applications. Smaller libraries can do the same. +