Mejorar la apariencia de la página web

He creado una página de donaciones para nuestro sitio web. Los botones son algo similares a los botones de donación de LiveStrong. Hay algo en la página que parece barato y poco atractivo. Tengo algunas ideas, pero espero recibir comentarios constructivos sobre cómo puedo mejorar la apariencia general de la página, preferiblemente sin hacer grandes cambios.

Esta página aparecería después de que el usuario haya visitado las páginas anteriores, para que sepa qué y a quién está donando.

Aquí está el enlace a mi sitio de prueba: http://k12fundraising-beta.azurewebsites.net/d/1014-1130/binghamhigh/teststudentteststudent

¿Podría incluir también una captura de pantalla de la página, ya que su página de prueba no estará disponible para siempre? Gracias.

Respuestas (2)

Ouf... por dónde empezar, dijiste que no hay muchos cambios...

  • Bueno, antes que nada, obtenga algunos js para estirar la imagen de fondo porque en este momento, su ancho es del 100% y la altura es automática o algo así, necesita un código para ver si la altura de la ventana> el ancho de la ventana y luego la imagen css = ancho : automático; altura: 100%; y al revés, así la imagen ocupa toda la pantalla y no la mitad como yo la veo.

  • En segundo lugar, la imagen del niño se ve estirada para encajar en la caja, arregla eso.

  • El verde para la fuente y los botones tampoco ayuda, incluso en el fondo hay césped... al menos iguala toda la vista y oscurece el verde... es demasiado brillante.

  • La caja de donación es MUY GRANDE para la información que tiene dentro, hazla más pequeña y compacta.

  • Además, sus contenedores no deberían estar tan cerca de la parte superior del navegador... deje un poco de espacio.

Esto es lo mínimo que debe hacer para que se vea bien... la mejor de las suertes.

PD: Acabo de revisar su código... limpie su css, ¡usando esto muy importante! priorizar una regla no es una buena práctica... te toparás con ella más adelante.

No necesita JS para estirar la imagen de fondo, solo use CSS background-size: cover; Perfecta imagen de fondo de página completa
@AndrewH Claro, pero ¿pensaste en la compatibilidad del navegador? No solo usemos un código que sea más fácil de escribir/manejar, pensemos también en la experiencia del usuario.
Eso es cierto para la portada, también hay otras opciones solo de CSS.
@AndrewH Dígame uno que funcione tanto para vistas verticales como horizontales y que sea compatible con el navegador. El uso de consultas de medios es una opción, pero aún falla en IE 8 e IE 9-10-11, Safari hasta 6 e incluso Android hasta 4.3 no admite consultas de medios anidadas.
Gracias a ambos por sus comentarios. Heredé este sitio de otro diseñador (es por eso que hay tantas etiquetas importantes) y he estado tratando de hacerlo funcionar sin hacer demasiados cambios porque está construido sobre una plantilla que se aplica a muchas páginas además de esta. @AndrewH, ¿cuáles son mis otras opciones de CSS para centrar la imagen de fondo?
@Alin En el artículo hay otras 2 técnicas de CSS. No son perfectos, pero se podría argumentar que alguien podría haber deshabilitado JS. Sin embargo, tiene razón, si desea una solución que funcione en todos los navegadores y sea compatible, entonces JS o JQUERY lo harán.
@prkr32 Vea mi primer comentario para un tutorial sobre las diferentes opciones para tener una imagen de fondo de pantalla completa.
@prkr32 El centrado es una cosa, simplemente puede colocar la imagen dentro de una etiqueta de imagen y convertirla en absoluta con la parte superior, izquierda, derecha e inferior del valor 0 y el margen en automático, eso es un centrado vertical y horizontal absoluto, pero estamos hablando sobre hacer que la imagen llene la pantalla independientemente de su tamaño u orientación.

Sugeriría centrar la imagen de fondo para que cubra toda la página y no deje espacios en blanco en el lado derecho. La imagen del niño parece alargada y no proporcional. Y el cursor sobre verde no parece atractivo. Sugeriría con un poco de gris básico en lugar del verde penetrante. Además, no estoy seguro si conoce páginas como gofundme.com , es una plataforma de financiación colectiva que ya está preconstruida y es más fácil de administrar. Solo un pensamiento. Buena suerte con la recaudación de fondos, no obstante.

Gracias por su ayuda. Cuando paso el mouse sobre los botones, aparecen negros, no verdes. ¿No es cierto para ti?
Mejorar la apariencia de la página web
RespuestasAquíPolítica de privacidad1y, 0v