Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8
Like Tree1Likes
  • 1 Post By TheGAME1264

Thread: First Attempt at a Responsive website

  1. #1
    Senior Member Fireproofgfx's Avatar
    Join Date
    Apr 2012
    Location
    Washington
    Posts
    839
    Member #
    31498
    Liked
    171 times

    Current Rating

    Visual Appeal:
    5.0 out of 5

    Accessibility:
    5.0 out of 5

    Website Speed:
    5.0 out of 5

    Compatibility:
    4.0 out of 5

    Overall Rating:
    5.0 out of 5

    Rate This Site


    Advertisement (login to hide this!)


    You must be logged in to view this site

    First Attempt at a Responsive website

    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/

  2.  

  3. #2
    Junior Member
    Join Date
    Feb 2015
    Location
    Kildare, Ireland
    Posts
    15
    Member #
    45446
    Liked
    1 times
    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]
    Last edited by TheGAME1264; Mar 10th, 2015 at 07:25 AM.

  4. #3
    Senior Member Fireproofgfx's Avatar
    Join Date
    Apr 2012
    Location
    Washington
    Posts
    839
    Member #
    31498
    Liked
    171 times
    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!

  5. #4
    Junior Member
    Join Date
    Mar 2015
    Posts
    27
    Member #
    47623
    Liked
    4 times
    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.

  6. #5
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,482
    Member #
    425
    Liked
    2784 times
    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.
    Fireproofgfx likes this.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  7. #6
    Senior Member Andrew Yurlov's Avatar
    Join Date
    Apr 2011
    Location
    Portland, OR
    Posts
    1,305
    Member #
    27566
    Liked
    181 times
    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!
    .
    Artificial intelligence is nothing compared to natural stupidity -Someone

    Design is a funny word. Some people think design means how it looks.
    But of course, if you dig deeper, itís really how it works.
    -Steve Jobs



  8. #7
    Senior Member RDesignista's Avatar
    Join Date
    Feb 2012
    Location
    Coconut Tree City
    Posts
    822
    Member #
    30921
    Liked
    123 times
    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

  9. #8
    Junior Member
    Join Date
    Apr 2015
    Posts
    13
    Member #
    49380
    Agreed right there. I think mobile menu should be on top so people would easily notice it.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 01:54 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com