First Attempt at a Responsive website

[Fireproofgfx]

I pretty much donated my time to this local ministries web design needs and with that I decided to push myself to try and learn and grow my understanding of Responsive web design.

I know there are some issues with some of the responsiveness such as the Footer Links, where on some smaller sizes they bunch a little to tight together.

For the MENU, I followed this which I found very helpful and useful!

I would like to thank Andrew for his help on this project as well, he really helped me through this process and was SUPER helpful.



One last thing I thought was really cool during this whole project. MHM was set to pay close to $500 for 3 years of hosting on their current host, before I came aboard, and since they are a 501c3 non profit I quickly moved them over to Dreamhost which honors the 501 status and offers free hosting to non profits, no strings attached so I moved them over and they were so thankful due to the fact every penny they can save and send to the kids is so much more helpful and they would have wasted $500 that could have gone to the kids. Pretty Cool!

Oh and I am currently adding more children to the sponsor a child page, there are over 200 children, so processing them will take some time.

http://www.mastershandsministries.org/

[i3webservices]

Nice job. 3 things i would change but its personal preference. 1. Fixed header menu when scrolling. 2. Thumbnail image gallery like 4 across. and 3. i would hide footer elements when viewing on mobile. But very nice job!

Regards,
[EDIT: please don't post fake signatures again. Second warning. TheGAME1264]

[Fireproofgfx]

Thanks for your advice i3. I thought about hiding the Footer element as well, maybe I will just do it.. That is a good idea on the menu as well. Thank you!

[LearnWebsiteDesign.com]

If I can offer a few suggestions - first of all, I wouldn't hide the footer. There isn't any reason to do that. I've put a sample responsive footer here: Sample Responsive Footer by LearnWebsiteDesign.com. Also, Google doesn't take to kindly to hiding elements, if anything use the CSS clip property to "hide" something.

For the navigation, some ideas are to either use a menu icon of some kind to bring out the navigation menu when at smaller screen sizes or maybe use an off-screen navigation menu when at smaller screen sizes.

I would also make the title bigger.

Also, there are actually quite a few hosting companies that will host some non-profit websites for free.

btw, if you look at the source code, I should have converted the pixels to em units.

It looks good though and it's nice of you to do this for them.

[TheGAME1264]

No W*rdPr*ss? Your own code? Dude, this is SO not the way to go about building sites these days. Go back, bloat the living sh*t out of the code, add several plugins that serve no purpose, use a theme, claim it as your own, and then​ repost. That way, we'll know what a real designer you are.

You can hide things using a responsive design and Google doesn't care. There's a common misconception that they get mad about hiding things, but that's not true. It comes down to intent. If you're hiding it for "SEO" reasons, then they get pissed. Otherwise, they don't care. If they did, about 80% of site navigations would be penalized by Google.

With that said, I'd look at clearing the floats for the nav/resources menus in the footer and putting the part about tax deductibility underneath. That way, you don't have to hide anything. I'd also look at a bigger line height for the .footer h3 elements (probably 1.5em would do the trick). That's about all I would fix.

[Andrew Yurlov]

Wow you're site came a long way. However there are a few things I would improve on. (sorry i'm just ocd about design. I need everything perfect haha)

1) Use more padding on you're main divs. Divs like you're main content, and "sponsor a child" sections. I think it would look more professional with more padding but that's just my personal preference

2) The text in the footer isn't centered perfectly
3) Also on the footer you're blue link hover effect is a bit hard to see. Maybe use that same yellow as the navigation for the hover effect?

That's about all I got for now. Keep going its looking great!
.

[RDesignista]

whoa FPGFX,

first try at responsive? where you been man??? lol jk, this glad to see you're trying it out.

i think it's a pretty nice first job.

some things i would recommend:

1. you need to test on mobile devices, responsive or not. android OS browsers and iOS browsers are webkit, but they act differently or have small differences from normal mac OS Window OS browsers.

for example, here in my android, i can see your images are resized widths, but not height, resulting in stretching

Screenshot_2015-03-10-12-09-12.jpg

img { max-width:100%; height: auto}

2. i would prefer the mobile menu "MENU" be at the top, so it stays stationary when menu is expanded.

3. footer is messy on mobile view. i would recommend collapsing the columns and then centering content.

you know media queries right? you basically are making rules for certain width ranges.

@media only screen and (max-width: 600px) {
.this-footer-column, .that-footer-column { width: 100%; float:none; text-align:center}
}

right now on my phone, those columns stay thirds, and my screen is about 320px... so we're looking at 106.66 px per column.... anyway, collapsing columns is a common strategy in responsive design.

4. I would recommend looking into using more columns or a responsive grid.

when reading, i enjoy having text in a limited area, meaning it doesn't span an entire width of the screen. you can do this by using columns. so it would be something like:

<div id="one-half"> cool image here </div>
<div id="one-half"> text here </div>

like this:

Stunning CSS3

[clippittee]

Agreed right there. I think mobile menu should be on top so people would easily notice it.