CodeKindness: Mobilizing Techhies for Social Good

[davecr]

Hey everyone,

 

I'd **really** love feedback on a website that I'm completing, written in PHP in a MVC model, called CodeKindness, http://www.codekindness.org. The mission of the website is to mobilize technology professionals to contribute their skills to nonprofits and other social causes.

 

Anyway, I'd love your thoughts!

 

How does it look? Could it be improved?

Is this a technology you might use?

What could we do to improve its operation, to make it even more usable? What's missing from the site (besides project listings, which we're holding off on until it's totally complete!)

 

 

Thanks for all your help!

--Dave

 

p.s. people who propose solid contributions and suggestions that we use will be listed and linked from our About page, contributor's section!

 

[davecr]

p.s. test account access, if anyone would like:

 

u: testvolunteer / p: test

u: testnonprofit / p: test

 

 

Thanks!

 

 

Hey everyone,

 

I'd **really** love feedback on a website that I'm completing, written in PHP in a MVC model, called CodeKindness, http://www.codekindness.org. The mission of the website is to mobilize technology professionals to contribute their skills to nonprofits and other social causes.

 

Anyway, I'd love your thoughts!

 

How does it look? Could it be improved?

Is this a technology you might use?

What could we do to improve its operation, to make it even more usable? What's missing from the site (besides project listings, which we're holding off on until it's totally complete!)

 

 

Thanks for all your help!

--Dave

 

p.s. people who propose solid contributions and suggestions that we use will be listed and linked from our About page, contributor's section!

 

[ardyandkari]

i cant find the page... ???

 

it might be my internet...i dunno.

[davecr]

Really? Yikes... website is http://www.codekindness.org ...  works for me (and shows now downtime..) ... anyone else having the same issue?

--Dave

 

[nrg_alpha]

It loads fine for me.

 

Dave, I think my immediate gripes are as follows:

 

- the location of the login | join link.. it is tucked beside the social bookmarking button (which is in itself tucked awkwardly in relation to other elements.

 

I would think about a better structure.. having those elements (bookmarking and login |join links) perhaps placed on a line all by themselves or above the menu system.. Point being, they currently feel very awkward where they are placed. They need to be more isolated and thus stand out more.

 

The colour of the menu links when dealing with rollovers is harsh (the bright red on bright blue). While the blue and red colours match the rest of the interface, I think it would work out better if the non hovered state of the links was a very light blue (or something close to that), and when hovered over, they turn white.

 

If these colour combinations don't find your fancy, I would suggest playing around with them abit to find something that doesn't clash as much.

(perhaps base link is a light grey, with hover state as white?)

 

The last thing I can think of off the top of my head is that the width of the content varies across the site. You home page makes full use of the available site width, yet all the other links have the content more or less close the the width of the menu system. I would think about consistency among page widths (read: content width). By keeping them all one width or the other offers more continuity.

 

Other than that.. I like it.

 

Cheers,

 

NRG

 

P.S Perhaps a general contact menu link / page would be good?

[proggR]

Not to be the broken record playing songs that nobody likes... but IE6 support is minimal (mainly just the banner and navbar)

In FF it looks pretty good. I think maybe reorganizing the individual sections might have a better overall feel but I can't picture how in my head right now. Good start though

[.josh]

Top 10 link gives a 404 error

[davecr]

 

- the location of the login | join link.. it is tucked beside the social bookmarking button (which is in itself tucked awkwardly in relation to other elements.

 

I would think about a better structure.. having those elements (bookmarking and login |join links) perhaps placed on a line all by themselves or above the menu system.. Point being, they currently feel very awkward where they are placed. They need to be more isolated and thus stand out more.

 

 

A really great suggestion! Working on it...

 

 

The colour of the menu links when dealing with rollovers is harsh (the bright red on bright blue). While the blue and red colours match the rest of the interface, I think it would work out better if the non hovered state of the links was a very light blue (or something close to that), and when hovered over, they turn white.

 

 

Fixed! 

 

 

The last thing I can think of off the top of my head is that the width of the content varies across the site. You home page makes full use of the available site width, yet all the other links have the content more or less close the the width of the menu system. I would think about consistency among page widths (read: content width). By keeping them all one width or the other offers more continuity.

 

 

Working on this -- several people have suggested something simlar... will take some finagling... !

 

Thanks for your comments and thoughts!

--Dave

 

[tibberous]

I like it, though the business model seems pretty questionable. How much are you going to change the non-profits to post listings? Are you going to have a way for organizations to pay to show up at the top of the list?

[davecr]

I like it, though the business model seems pretty questionable. How much are you going to change the non-profits to post listings? Are you going to have a way for organizations to pay to show up at the top of the list?

 

It's free.

 

If nonprofits want to thank the programmer AND support the project, they can purchase an organic, non-sweatshop-made t-shirt (we have about 10 different designs, designed by designers around the world) for a markup of their choice. Or they can donate straight-away.

 

But the service is designed to be free, excepting their decision to thank the programmer & project.

 

--Dave

 

[davecr]

Hey everyone!

 

I'l also like to let everyone know that our FIRST seven nonprofits have posted projects they need help with. So if any of you would like to use your skills for social good, AND receive a cool t-shirt in the process, please check out the site & their projects.

 

Or, if none of the existing posts interest you, kindly subscribe to our RSS feed, which will keep you informed of the newest postings )

 

Finally, more feedback is great! How could we improve? We'll be rolling out a slightly redesigned homepage over the weekend... but that's just to contain everything to a central element. Anything else to improve?

 

Thanks & cheers!

--Dave

[nrg_alpha]

Hi Dave.

 

Just a quick immediate comment on the home page (I'll have to go through the other links)...

 

I come across this issue with many sites (not just yours). I do not have my browser's background colour set at the default white. It is set to black. The results when viewing websites with a color different than their default white one is an unsightly one. Using a simple css rule can rectify this instantly:

 

In your .css stylesheet:

body {background-color: #ffffff;}

 

Case in point.. if you are using Firefox or Opera, open a new tab, enter about:config in the url.. options come up.

• In firefox, you can simply enter 'color' in the filter field, and double click on 'Browser_display_background_color' and set it to something other than #ffffff... exmaple: #000000
  
• In Opera 9.5, click on 'colors' link. Background is the top variable.. change from #ffffff to say #000000 and click 'save' button at the bottom of this color panel.. then view your site.. you'll know what I mean.
  
• 
  

 

Now I know people can argue that most users don't change their color settings (which is prbably true).. but point being that one simple css rule will ensure that for those that do have background colors changed (or even entire themes loaded), your site will still display as it should.

 

Cheers,

 

NRG

 

 

[davecr]

Thanks! Fixed & tested )

 

 

Hi Dave.

 

In your .css stylesheet:

body {background-color: #ffffff;}

 

[davecr]

Hey everyone,

 

We have 21 organizations as members, and 15 truly incredibly, important projects listed - for organizations that span the USA and other countries (for instance, an education organization in Guatamala!).

 

But there's a challenge: recruiting tech volunteers! 

 

If anyone is interested to help one of these fine organizations out, OR has some ideas about how to expand the reach of the message to others, please step forward - this is more of a challenge than anticipated! 

 

Many thanks for your ideas, and hoping to help promote the social good,

--Dave

 

[akitchin]

alright, i have a laundry list of issues that i see with the site. i like the idea, by the way - how have most of these nonprofits heard of you?

 

- the promotional blocks (round-edge green blocks) seem haphazardly placed. the spacing between them is non-uniform, they start at the left and stop "whenever they're done," and generally just feel like they were shoved in with no planning. maybe extend them the width of the site with even spacing, or scrunch them together in the centre? not sure.

 

- the font you've chosen (under CodeKindness, "Mobilizing technology..." and in the description blocks on the right-hand side) doesn't scale-down well. it looks pixelated and difficult to read. perhaps a simpler font like verdana or arial would be more suitable?

 

- in general, i don't understand the use of :: as a separator in normal prose on websites. IMO, it detracts from the professional demeanor a site like this should be giving off.

 

- the RSS link image is missing the bottom border on two sections.

 

- i agree about the bookmarking and login/join links; you could maybe move them to be between the site title and the nav menu? or even put it below the birdie, since none of your content (apart from the home page) ever seems to extend beneath him.

 

- the project request list is hard to read. the hatched border, :: delimiter, and light grey background make it less readable. perhaps put them into tables with headers for the title, date, type, and organization and only change the background every second row? a total listing count would also be helpful, as i didn't realize there were page number at the bottom.

 

- the project and nonprofit details pages are also a little difficult to read, since it doesn't appear to have much form to it. with variable question lengths, it's a bit of a pain to read the answers when they come right at the end of the question - perhaps line them all up along the right-hand side, so the answer to any given question is easy to find.

 

- in the help section, the blocks are a bit jumbled - maybe offer more vertical space between them to allow the eye to feel less busy trying to go from section to section.

 

again, these are all nitpicks, but it's mostly because i'd hate to see a site like this lose traffic because of its appearance and feel. it's a great idea, and if you could get more nonprofits on board to list their projects, could really take off.

 

EDIT: registration pickies:

 

- i'm not sure why i should have to enter a cause or organization i want to help in particular, especially only if i put in my technology background.

- the phone field isn't starred, but does stop me from registering if not entered

[scottybwoy]

Great Idea, and nice simple site.

 

Most of my knit bits have already been stated, but I think the content of the pages should be extended to the width of your top-nav bar.  The rest of my quarms are just down to some of the styling.

 

I don't like the font used under Code Kindness header, maybe opt for a smoother rounded one.  The red links within the black body text, although in line with your theme, maybe make it a bit darker and richer, for instance I think #c00 might be good, or one closer to f @ the beginning.

 

On the How It Works page, the small bold text is hard to read and needs a bit more contrast, I would definitely make it a bit bigger, nice font tho.

 

And lastly on the requests page, I would separate the rows a bit more, and maybe have alternating colours <- probably a colour from your sign up form.

 

All in all tho, good luck.

[sam_h]

First of all, great site! Really quality cause....very web 2.0!

 

Actually that is probably my first major positive for this site....has web 2.0 written all over it! (at least I think so anyway!)

 

It is bright, it is clean and it is appealing. It's the sort of site I would bookmark if I stumbled upon it...

 

My main thought with regard to the layout is that I would like to see a greater clarity in the general alignment of the site.

 

Personally, and you may have already tried this, I would maybe like to see the content of the page aligned with the edges of the nav bar only (currently the content fits from the left wing of the bird through to the right hand side of the nav bar)

 

I think that currently there is maybe a little too much white, too many gaps. I think you can afford to 'compact' the page content together a little.

 

However, on the whole a very attractive site....if only I knew code a little better, I would be straight in there with help!!

 

Regards, Sam

 

[dhcrusoe]

Akitchin, Scotty, Sam:

 

All of you have pointed out something really necessary that I spent some serious time with a CSS developer fixing -- it's not TOTALLY there yet, but the major thing, the size and width of the content boxes, menu, etc., has been fixed. Whew. The project pages and profiles have also been clarified... Believe it or not, it was major overhaul of the CSS, in the end.... and oh -- the site is also browser-configured, which makes a good differences (still doesn't work totally right in Safari, but that's minor) )

 

The next thing to get edited is going to be the "Project List" page, which I'm going to space out a lot more, and include more detail per row. Some of the links are still weird (blue against red), and I'm working to remedy.

 

The other thing I'm doing is truly running through a host of PHP edits to make registration simpler, showing interest simpler, and the fonts much more readable... so please know that your feedback isn't going unheeded - there's just a lot to work through at once!

 

Many thanks again,

--Dave

 

[sam_h]

looking a lot better!

 

maybe a top padding on the two sub headings in the main area?

[AV1611]

1 things:

 

1.  When I go to the site then click TOP 10 the "foot" div is mis-aligned.  I use FF3 in Fedora 9. (This one I think:  <div id="contentBottom"> </div>)

 

2.  The bird at the top of the page is touching the top of my browser. this is just my personal psychosis but that annoys me. give me at least 1 pixel separation

[nrg_alpha]

Much better version!

 

I do have one small quibble, and one additional observation.

 

- The social bookmarks icon is stretched (as it is not being displayed in its native dimension. You have specified width="125" height="18", but the correct height should be 16 I believe.

 

- When viewing the homepage in Google Chrome, the div that contains the main content contains the background colour #003333..(the other pages check out though (as they display with a white background)).

[dropfaith]

http://www.codekindness.org/index.php/volunteer only thing ive seen that isnt mentioned is on this page

i joined and selected interested in a few projects  i can do.  then went to view my profile area i guess youd call it(page above) i think it would be a good idea to list the projects one is interested in that way if its a company(tech) with more then one users they can see they have a list already and not add to many to it and have to deny some due to over booking the  jobs.

 

i signed up for two or three jobs on the site just see it as a good idea to list what the user has selected interest in