OK, Lem'me have it! Site Review Time!

[ecobb]

Ding, ding! Round 1!

I just finished this site and I wanted to get some professional opinions on it. But before you guys dive in, I've got a couple of points I want to make.

1) I used Tables. (gasp!)
I know css is the preferred method for layouts, but I was under a time crunch and after spending numerous hours trying to get it to work in css I gave up and slapped everything in a table. I'm already planning for a css layout in version 2 of the site.

2) I used Flash. (double gasp!)
While I'm not a big fan of Flash and never really use it much, I had a somewhat intensive form that I used it on this time. To use html with this form I would have either had to break it up into several chunks, or have a reaaalllyyy long form that was extremely user un-friendly. While I realize that sometimes Gnarly Little Geek Dweebs such as ourselves don't always have flash installed, this site is targeted towards the average John Q. Home User, and not us techies. That being said, I'm also already in the process of creating a "Non-Flash" form so that everyone will have the option. (For the record, I'm not impressed with the Flash Form's performance so far. It seems to load extremely slowly)

So, that's about it. Here's the site, and I look forward (gulp!) to your comments!

http://www.kidcardservices.com

Hope This Helps!

ECAR
ECAR Technologies

http://www.ecartech.com

"My work is a game, a very serious game." - M.C. Escher

 

[johnwm]

I like the clean simple look. Should be really straightforward to translate a fixed-width and centred site to CSS.

Couple of small points:
KidCards page and FAQ page both jump to the left in a rather distracting manner when viewed in FF
Cursor:Hand should be Cursorointer
...and of course the flash bit triggers the IE 'Click to continue' security nonsense!

___________________________________________________________
If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
Steam Engine Prints

 

[ca8msm]

As John said, it's a very clean look and I think the colours fit well.

Behind the scenes, it's very neat and there's not an awful lot to do to get rid of the tables. For the container table, you'll just be able to use a div with "margin: 0 auto" to centre the content.

Also, for the "Contact Information" form, it will be fairly easy to get rid of the table there as well. Have a look at

http://www.coedit.co.uk/contact/

(nice bit of advertising for Dan & Jeff there ) for a good example on how this can be done with a fieldset.

There's one HTML validation error on

http://www.kidcardservices.com/cards.cfm

and a few CSS validation errros on all pages however, there doesn't look to be a lot to fix and overall I'd say it's a job well done.


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[ecobb]

Thanks! I appreciate the feedback!

johnwm - What version of FF are you using? I designed and tested the site in FF 1.5.0.9, but I don't see any jumping. Do you have any idea what may be causing it? As far as the IE nonsense goes, is this for IE 7? I haven't tested on it yet (I'm scared to install it!). Thanks for the cursor tip, by the way!

ca8msm - Thanks for the CSS goodness, I'll definitely check out the contact form. D'oh! I thought I ran all of the pages through the validator! But I did forget to run my stylesheet through it, thanks for the tip!

Hope This Helps!

ECAR
ECAR Technologies

http://www.ecartech.com

"My work is a game, a very serious game." - M.C. Escher

 

[kaptlid]

The site is very nice, organized easy to use. You can make the tabs like that too with regular forms and have similar behavior with the form.

 

[GUJUm0deL]

ECAR, Like the site design and look/feel. very clean and non-cluttery. My comments:

[ol]
[li]The image(s) don't have an alt tag values[/li]
[li]The navi menu, when you roll over the link, the gray border should fit the height equidistant from the top/bottom. Right now, there is much more space at the bottom then at the top[/li]
[li]The FAQ, I know that there aren't many FAQs but I think it would look better if you added some sort of a horizontal line seperator between the faqs. And, adding the 'back to top' link would also be a nice UI experience[/li]
[li]On the contact page the validation catch tells me to enter a phone and an e-mail , but the 'Contact Me Via' field gives me the option to choose which contact method to be used. If I choose e-mail, then I shouldn't get an error for my phone number.[/li]
[/ol]

Godo job!

____________________________________
Just Imagine.

http://www.imajinarts.com

 

[johnwm]

ECAR
I'm using FF1.5.0.9 as well. For me the 2 mentioned pages jump about 10px left - all the others are consistent.

For me the security pop-up appears in IE6 under XP SP2. Doesn't do it in IE7 for me.

The Cursor bit I got from running the validator. If you use FF then add the Developer toolbar extension, which gives validation tools for HTML, CSS, WAI and more

___________________________________________________________
If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
Steam Engine Prints

 

[Rieekan]

Few comments:

[ol]
[li]No Alt tags for imagery. Very bad.[/li]
[li]Avoid using images for headings of sections. If you feel you must, use CSS to style the heading so that the text is still there for users that don't have the appropriate level of CSS (i.e. - Mobile users)[/li]
[li]Virtual Kid Card Creator - This can all be done in an HTML form using a little JavaScript and layering to create the tabs[/li]
[li]Contact Us Form - No labels for the form fields. Also, the form seems to be a little squished together.[/li]
[li]Using the image as your main header will negatively impact your sitting in SEO given that there is no Heading 1 tag on the main page of the site[/li]
[li]Even if you stick with the table design, you should go to percentage widths for easier printing. Also suggest adding a print style sheet to remove the unnecessary imagery from the site[/li]
[/ol]

Just my two cents.

- George

 

[ecobb]

Thanks guys! I overlooked the alt attributes , I'll get those in.

GUJUm0deL - on the nav nenu, would you happen to be viewing the site with IE? When I view it in both browsers, it looks OK in FF and a little off in IE. I guess it's just one of the little quirks between the two. I'll tweak it around a little and see what I can do. Also, good idea about the FAQs and I'll check on the contact form validation.

Rieekan - Thanks for the tips! I'll try to get those incorporated.

johnwm - Thanks again, I'll see what I can do to get those straightened out. I wound up having to do my final testing on a Win 2000 machine (XP machine was down) with it's version of IE6 and FF. Maybe that's the difference.

Hope This Helps!

ECAR
ECAR Technologies

http://www.ecartech.com

"My work is a game, a very serious game." - M.C. Escher

 

[GUJUm0deL]

ECAR, yes I originally viewed the site in IE, now that I looked at it via FF it the mouse-over looks much better. But I did notice something else (and maybe i'm being too picky here) but in FF when I click on the nav menu links a very faint red-ish border appears around the link...is that intentional?

Also, in contact page, you first have a blurb of text and an image on the right-side of the screen, but when I click submit (to get the server side validation) the blurb and the image disappear. Might want to keep that displaying.

____________________________________
Just Imagine.

http://www.imajinarts.com

 

[ecobb]

Does anyone have any examples or tutorials on how I can create an html version of the form using JavaScript and layering?

Hope This Helps!

ECAR
ECAR Technologies

http://www.ecartech.com

"My work is a game, a very serious game." - M.C. Escher

 

[Stretchwickster]

Here's a starting point:

http://jadetower.org/muses/archives/000351.html

Clive

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
"To err is human, but to really foul things up you need a computer." (Paul Ehrlich)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To get the best answers from this forum see: faq102-5096

 

[janet24]

The empty space on the top bothers me. It seems like wasted real estate. Web space it usually used up. I like space with it looks like it goes with the design. I guess because it's white, it looks like something is missing. Maybe a brush of color like a crayon or brush.