Verbesserung des Aussehens der Webseite

Ich habe eine Spendenseite für unsere Website erstellt. Die Schaltflächen ähneln in gewisser Weise den LiveStrong-Spendenschaltflächen. Etwas an der Seite sieht billig und unattraktiv aus. Ich habe einige Ideen, aber ich hoffe auf konstruktives Feedback, wie ich das allgemeine Erscheinungsbild der Seite verbessern kann, vorzugsweise ohne große Änderungen vorzunehmen.

Diese Seite wird angezeigt, nachdem der Benutzer die vorherigen Seiten durchlaufen hat, sodass er weiß, wofür und an wen er spendet.

Hier ist der Link zu meiner Testseite: http://k12fundraising-beta.azurewebsites.net/d/1014-1130/binghamhigh/teststudentteststudent

Könnten Sie auch einen Screenshot der Seite einfügen, da Ihre Testseite nicht ewig verfügbar sein wird? Danke.

Antworten (2)

Uff ... wo soll ich anfangen, du sagtest, es ändert sich nicht viel ...

  • Nun, zuerst holen Sie sich ein paar Js, um das Hintergrundbild zu strecken, denn im Moment ist die Breite 100% und die Höhe automatisch oder so ähnlich. Sie benötigen einen Code, um zu sehen, ob Fensterhöhe > Fensterbreite und dann Bild-CSS = Breite : automatisch; Höhe: 100 %; und umgekehrt, auf diese Weise füllt das Bild den gesamten Bildschirm aus und nicht nur die Hälfte, wie ich es sehe.

  • Zweitens sieht das Bild des Kindes so gestreckt aus, dass es in die Schachtel passt, beheben Sie das.

  • Grün für Schrift und Buttons hilft auch nicht, auch im Hintergrund ist Gras...entzerre zumindest die Gesamtansicht und mache das Grün dunkler...es ist zu hell.

  • Die Spendenbox ist viel zu groß für die Informationen, die Sie darin haben, machen Sie sie kleiner und kompakter.

  • Außerdem sollten Ihre Container nicht so nah am oberen Rand des Browsers sein ... lassen Sie ein wenig Platz.

Dies ist das Mindeste, was Sie tun sollten, damit es in Ordnung aussieht ... viel Glück.

PS: Ich habe gerade Ihren Code überprüft ... lassen Sie Ihr CSS säubern, indem Sie Folgendes verwenden !important; Eine Regel zu priorisieren ist keine gute Praxis ... Sie werden später darüber stolpern.

Sie brauchen kein JS, um das Hintergrundbild zu strecken, verwenden Sie einfach CSS background-size: cover; Perfektes ganzseitiges Hintergrundbild
@AndrewH Sicher, aber hast du an die Browserkompatibilität gedacht? Lassen Sie uns nicht nur Code verwenden, der einfacher zu schreiben/handhabbar ist, sondern auch über die Benutzererfahrung.
Das gilt für Cover, es gibt auch andere reine CSS-Optionen.
@AndrewH Sag mir eine, die sowohl für Hoch- als auch für Querformat funktioniert und browserfreundlich ist. Die Verwendung von Medienabfragen ist eine Option, schlägt jedoch immer noch in IE 8 und IE 9-10-11, Safari bis 6 und sogar Android bis 4.3 unterstützt keine verschachtelten Medienabfragen.
Vielen Dank für Ihr Feedback. Ich habe diese Seite von einem anderen Designer geerbt (deshalb gibt es so viele !important-Tags) und habe versucht, sie zum Laufen zu bringen, ohne zu viele Änderungen vorzunehmen, da sie auf einer Vorlage basiert, die für viele andere Seiten als diese gilt. @AndrewH was sind meine anderen CSS-Optionen zum Zentrieren des Hintergrundbilds?
@Alin In dem Artikel gibt es 2 weitere CSS-Techniken. Sie sind nicht perfekt, aber Sie könnten argumentieren, dass jemand JS deaktiviert haben könnte. Sie haben jedoch Recht, wenn Sie eine Lösung suchen, die auf allen Browsern funktioniert und kompatibel ist, dann werden JS oder JQUERY das tun.
@prkr32 Siehe meinen ersten Kommentar für ein Tutorial zu den verschiedenen Optionen für ein Hintergrundbild im Vollbildmodus.
@prkr32 Zentrieren ist eine Sache, Sie können das Bild einfach in einem Bild-Tag platzieren und es absolut machen, indem Sie oben, links, rechts und unten den Wert 0 und den Rand auf Auto setzen, das ist eine absolute vertikale und horizontale Zentrierung, aber wir reden darüber, dass das Bild den Bildschirm unabhängig von seiner Größe oder Ausrichtung ausfüllt.

Ich würde vorschlagen, das Hintergrundbild so zu zentrieren, dass es die gesamte Seite abdeckt und keinen weißen Bereich auf der rechten Seite hinterlässt. Das Bild des Kindes wirkt gestreckt und nicht proportional. Und der Hover über Grün sieht nicht ansprechend aus. Ich würde mit einem einfachen grauen Hover anstelle des durchdringenden Grüns vorschlagen. Ich bin mir auch nicht sicher, ob Sie Seiten wie gofundme.com kennen, eine Crowdfunding-Plattform, die bereits vorgefertigt und einfacher zu verwalten ist. Nur ein Gedanke. Trotzdem viel Erfolg bei der Spendenaktion.

Ich danke Ihnen für Ihre Hilfe. Wenn ich mit der Maus über die Schaltflächen fahre, erscheinen sie schwarz und nicht grün. Ist das bei dir nicht so?
Verbesserung des Aussehens der Webseite
AntwortenHierDatenschutz-Bestimmungen1y, 0v