P71
P71 GRM+ Memberand SuperDork
8/4/09 9:30 a.m.

I built a website for work and I wanted some eyes to look at it before we start advertising it. Critique away, I need to know if it's up to snuff. And please, excuse the pig. They forced me to use it

It's cowlitzsaves.com . Please check it out if you can and let me know of anything that needs to be tweaked/fixed or any additions?

EastCoastMojo
EastCoastMojo GRM+ Memberand Dork
8/4/09 9:42 a.m.

On the home page I would remove the feedback form, maybe put it as a link under the Contact Us section. I think the focus of the homepage should be explaining your mission and experience, and how you plan to serve the community. It does that nicely and the feedback form is distracting from that focus.

On the page with the BOCC Partners, are you allowed to make the list links? Even if you don't want to link outside the site, you could have links to pages with more info about each entity, so that people would know what they are and what they do for the community.

And, seriously. Lose the pig.

RossD
RossD Reader
8/4/09 9:45 a.m.

It looks alright. Can you sharpen up the banner across the top? There's little jaggies around the Cowlitz Bank letters and the arc in the middle.

P71
P71 GRM+ Memberand SuperDork
8/4/09 10:11 a.m.

Good idea on the homepage thing, I will move that when I get to work. On the partners we are thinking of linking or doing more pages beyond the four banks.

The banner was made in flipping Microsoft PAINT, so I don't have much to work with. It's a non-profit, we don't have much money for software. That's as clean as it can be for now.

The pig has to stay. I hate the pig. Professional, clean website with a stupid clipart from 1997. Sigh

GameboyRMH
GameboyRMH GRM+ Memberand SuperDork
8/4/09 10:22 a.m.

The basic layout looks okay...I know the pig sucks, had a similar situation with a ticker (ugh), but can you redo the pig? Heck I might redo it for you this evening out of pity

Code-wise, CSS, you need more of it! Abstract as much of the formatting as you can to CSS. I see you have a lot of inline formatting on the td tags. The padding all looks the same, you can abstract that right off the bat. See if you can use classes to control the different widths. You have some div and span tags further down with inline formatting too.

BTW, also get a favicon, you need to have one these days. Oh and I got another suggestion of changing the homepage, needs moar pics up top

procainestart
procainestart Dork
8/4/09 11:27 a.m.

The banner has been compressed so much that there is artifacting. You can re-build the pig in Photoshop, Illustrator, or, for free, GIMP?? so that it looks better.

The low-quality image detracts from the site's credibility. For a financial site, it's a good idea to ensure that the site is credible, especially one affiliated with the US gov't. Graphics don't just spruce up a site: they convey a lot about the information contained within it and viewers use this information to decide how believable the site is.

From a study on site credibility: "Nearly half of all consumers (or 46.1%) in the study assessed the credibility of sites based in part on the appeal of the overall visual design of a site, including layout, typography, font size and color schemes." (http://www.consumerwebwatch.org/dynamic/web-credibility-reports-evaluate-abstract.cfm -- a study out of Stanford Univ.)

Because you're affiliated with the Treasury, it'd be a good idea to link to their website in the home page text and, ideally, directly to the page re: Ofc of Financial Edu.

Consider changing the left navbar color or typeface color to improve contrast between the two. Same with the bottom navbar. Same with page title headings -- especially here, actually: tan type on white background is very hard to see.

Put the mission first, not last, on the home page.

Consider shortening the home page. Users shouldn't have to scroll much here (and they won't). You can fix this partially by making your banner shorter.

Use whitespace between paragraphs, and don't use indents (some pages have this, some don't).

Consider constraining the page width. There's such a thing as too much space: not only does it not look especially good, but it makes online reading a bit harder due to line length. Look at some of the most popular websites and you'll see that most don't do this, even media sites that have tons and tons of content (CNN, NYT, etc.). There are still a lot of 1024x768 users out there: http://www.w3schools.com/browsers/browsers_display.asp -- constraining width to fit on a 1024px screen is fine (don't forget to subtract for the scrollbar).

http://www.useit.com/alertbox/20030825.html http://www.usability.gov/

confuZion3
confuZion3 SuperDork
8/4/09 9:37 p.m.

Ditto on the color changes. I literally cannot read the links on the bottom of the page. I don't know what color that is, but maybe black would work better? Blue seems to be a popular color choice for hyperlinks too.

Also, the page runs right to the edge of the screen on the right side viewed from a standard 17" monitor. Perhaps you can add a margin to the right side so the text doesn't just run right up against the edge?

confuZion3
confuZion3 SuperDork
8/4/09 9:39 p.m.

... and I like the pig! It's cute.

pinchvalve
pinchvalve GRM+ Memberand SuperDork
8/4/09 9:44 p.m.

The top graphic does not resize well under different screen sizes. The text goes beneath the pig.

Tim Baxter
Tim Baxter Online Editor
8/4/09 9:51 p.m.

Don't resize the images in HTML. Your logo (not the pig, the one at the top of the content) is about 2500 pixels square and 355k. Properly resized, you'll get that down to less than 10k, and it will look the same.

I don't necessarily hate the pig. Lots of sites are going to "mascots" these days. I'm not sure it conveys "trustworthy financial institution" but I don't necessarily hate it. However, if you're going to have the pig, OWN the pig. Make it the best damn pig you can. Cute, charming, memorable, and integrated with the site as a whole.

If you can't get anything better, download GIMP. It's free. I don't like it, but it gets the job done, and the price is right.

P71
P71 GRM+ Memberand SuperDork
8/4/09 10:19 p.m.

Thanks! I worked on some of the suggestions already. I'll get GIMP tomorrow and work on the pig.

shoebox
shoebox New Reader
8/4/09 11:15 p.m.

I think Tim was looking at the CABC logo, and it is huge. I used paint to shrink it (crude editor) and it comes out much better.

I think if you get GIMP, clean up, and resize the photos you'll make a huge improvement. Then work on the code (CSS)

The navigation panel on the left needs to be set to a smaller width (if only for the home page). The text in the top banner should be text instead of an image.

Instead of spending the time cleaning up the treasury logo just download a new one there are a couple of good ones that come up with a simple Google images search.

this one even matches the colors your using

http://upload.wikimedia.org/wikipedia/commons/thumb/6/65/US-DeptOfTheTreasury-Seal-AltColors.svg/600px-US-DeptOfTheTreasury-Seal-AltColors.svg.png

Can you move the brown line on the links banner to the inside of the banner. It looks out of place on top.

For the photos on the homepage, I've to agree about scrolling down, since the puzzle is the second part of the pg. I would see what it looks like if you put the CDBD, or the puzzle or both into the background under the words. You can fade the image with gimp, and let the words rest on top.

for reference with CSS try here http://www.csszengarden.com/ If you go through some of the designs you may come up with ideas for style.

Good luck

P71
P71 GRM+ Memberand SuperDork
8/5/09 7:33 p.m.

OK, I changed the banner, touched up the pig (you should really see what I started with), moved the feedback form, reduced the CABC logo, made a favicon.ico, and downloaded GIMP. I can't do much about the colors/placement/size of the regular stuff (buttons, menus, etc) as I'm working off of a free template program (I work for a non-profit, this is the best I can get). I'll start working on linking the partners and stuff later this week.

Gimp
Gimp GRM+ Memberand Dork
8/5/09 10:14 p.m.

Yup... download GIMP and use it (it, not me).

I'm mostly going to second what everyone else has said, but I would also suggest trying to design on a grid - that is to say - pay attention to margins and how other elements line up with each other... seems picky, but it ends up really making sites...

Templates can always be modified... play with the CSS to try to get things to line up the way you want.

Also, the pig isn't so bad - http://pigiceshelf.nasa.gov (another shameless plug)....

Good of you to go out and get critiques... I just made a resume site (http://przybang.com) and I'm currently bugging people for the same.

You'll need to log in to post.

Our Preferred Partners
JI6Fd9dYRiS5xxNIlsqoK4TTSaIG1pmKfaLYEQvq7tVK1ed3UynS2jE6uHL5J7Ym