0

I have built out a donate page for our website. The buttons are somewhat similar to the LiveStrong donate buttons. Something about the page looks cheap and unappealing. I have some ideas, but I am hoping for constructive feedback as to how I can improve the overall look and feel of the page, preferably without making huge changes.

This page would appear after the user has been through previous pages, so they know what and who they are donating to.

Here is the link to my test site: http://k12fundraising-beta.azurewebsites.net/d/1014-1130/binghamhigh/teststudentteststudent

Improve this question
  • Could you include a screenshot of the page as well, as your test page will not be around forever? Thanks. – Hanna Aug 19 '15 at 18:06
1

Ouf...where to begin, you said not much changes...

  • Well, first of all, get some js in there to stretch the background image cause right now, it's width is 100% and height auto or something like that, you need a code to see if window height > window width then image css = width: auto; height:100%; and the other way around, this way the image fills the entire screen and not just half as i see it.

  • Second, the kid's picture looks stretched to fit the box, fix that.

  • Green for font and buttons doesn't help either, even in the background is with grass...at least equalize the entire view and make the green darker...it's to bright.

  • The donate box is WAY TO BIG for what information you have inside it,make it smaller and compact.

  • Also, your containers shouldn't be so close to the browser top...leave a little bit of space.

This is the least you should do to make it look ok...best of luck.

PS: I just checked your code...get your css cleaned, using this much !important; to prioritize a rule isn't a good practice of it...you will stumble upon it later.

Improve this answer
  • 1
    You don't need JS to stretch the background image, just use CSS background-size: cover; Perfect Full Page Background Image – AndrewH Aug 19 '15 at 16:25
  • @AndrewH Sure thing, but did you think about browser compatibility? Let's not just use code that's easier to write/handle, let's thing about user experience too. – Alin Aug 19 '15 at 16:26
  • That is true for cover, there are other CSS only options as well. – AndrewH Aug 19 '15 at 16:29
  • @AndrewH Tell me one that will work for both portrait and landscape views and be browser friendly. Using media queries is an option but still fails in IE 8 and IE 9-10-11, Safari up till 6, and even Android till 4.3 doesn't support nested media queries. – Alin Aug 19 '15 at 16:33
  • Thank you both for your feedback. I inherited this site from another designer (that's why there are so many !important tags) and have been trying to make it work without making too many changes because it is built on a template that applies to many pages other than this one. @AndrewH what are my other CSS options for centering the background image? – prkr32 Aug 19 '15 at 16:47
0

I would suggest centering the background image so it covers the entire page and does not leave white space on the right hand side. The image of the child looks stretched out and not proportional. And the hover over green does not look appealing. I would suggest with some basic grey hover instead of the piercing green. Also I am not sure if you are aware of pages such as gofundme.com its a crowdfunding platform that is already pre built and easier manageable. Just a thought. Good luck with the fundraiser nonetheless.

Improve this answer
  • Thank you for your help. As I hover over the buttons, they appear black not green . Is that not true for you? – prkr32 Aug 19 '15 at 16:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.