• Browser Kompabilität
  • Unterschiede CSS <-> HTML
  • Vorteile CSS
  • Was ist CSS?
  • Willkommen
  • CSS Beispiele

    • apfel.org
    • asien.org
    • Austauschschueler.de
    • Autokredit.de
    • balkonmöbel.net
    • billard-kicker.de
    • billardtisch.org
    • brettspiel.net
    • computerspiele.com
    • deko.net
    • Diät.de
    • domfolio.de
    • einrichtung.com
    • fahrraeder.org
    • gameaudio.net
    • gartengeraete.org
    • gartenhaus
    • geburtstagsgeschenke.net
    • gutscheindatenbank.de
    • Gutscheinpony.de
    • hifianlagen.net
    • Holz-im-Garten.de
    • hundeleine.com
    • jacken.org
    • kaffeeshop.net
    • kaffeevollautomat.de
    • kamera.org
    • Kinderbett.net
    • kinderwagen.org
    • kinofilme.org
    • kopfhörer.net
    • kopieren.net
    • kreditangebote.com
    • küche.org
    • Lacadena.de
    • landhausmode.biz
    • lichterkette.net
    • massageliegen.com
    • meingutscheincode.de
    • mietwagenmarkt.de
    • mobiltelefone.net
    • Modebrands.net
    • Moderatgeber.de
    • musiknews.net
    • navigationssysteme.com
    • notebook.org
    • prepaid-handy.org
    • schmuck.org
    • schrank.og
    • solaranlage.org
    • sommerurlaub.net
    • tftmonitore.de
    • tintenstrahldrucker.org
    • trachtenmode-dirndl.com
    • vasen.net
    • weihnachtsgeschenk.com
    • westerland.org
    • witzedatenbank.de
    • wunschkredit.org

Blog Related CSS

CSS Features, Downloads, Beispiele und vieles mehr

Gutscheinpony.de

Gutscheinpony.de ist ein Gutscheinportal, welches auf Affiliate-Basis funktioniert. Der Besucher kann sich seinen gewünschten Gutschein sehr unkompliziert über eine eingebaute Ajax-Suchfunktion heraussuchen und gelangt zu einer entsprechenden Seite. Am Beispiel der Zalando Gutschein Unterseite möchte ich den Aufbau des Gutscheinportals kurz erklären.

Die Website wird oben links vom Firmensignet – einem Pony - verziert. Rechts daneben schließen sich die recht große Suchleiste, sowie unterhalb dessen eine horizontale Menüführung auf Basis einer unsortierten Liste, unterteilt in Hauptnavigation (<ul id=”mainNavigation” class=”clearfix“>) und Unternavigation (<div id=”subNavigation“>), an. Unter den Menüleisten befindet sich die Breadcrumb-Navigation gefolgt von der Überschrift <h1> in auffälligem Rot, sowie der Unter-Überschrift <h2> in Schwarz. Rechts im Content-Bereich wird das jeweilige Logo der ausgewählten Firma angezeigt, um recht schnell zu verdeutlichen, um welches Unternehmen es sich gerade handelt, da man ein Signet schneller wahrnehmen kann, als blanke Schrift. Ein schneller Wiedererkennungseffekt ist also garantiert.

Die einzelnen Schnäppchen und Sonderangebote werden in einem Boxenraster mit jeweils 3 Boxen nebeneinander dargestellt. Diese sind ebenfalls als unsortierte Listen definiert (<ul class=”productbox clearfix”><li class=”whiteboxsm”>[…]</li>[…]</ul>). Die einzelnen Boxen sind in der gutscheinpony-lp.css Datei folgendermaßen formatiert:

.whiteboxsm{width:232px;height:178px;background:url(http://g.gutscheinpony.de/white-small-bg.gif) left top no-repeat}. Das einfache Auffinden der jeweiligen Vergünstigung wird durch große rote als Grafiken eingebundene Buchstaben und Zahlen, sowie Prozentzeichen und Piktogrammen begünstigt. Geht ein Angebot bald dem Ende zu, so wird dies farblich und schriftlich entsprechend gekennzeichnet. Bei noch drei verbleibenden Tagen sieht das so aus: <img width=”117” height=”13” title=”Nur noch 3 Tage gültig” alt=”Nur noch 3 Tage gültig” src=”http://g.gutscheinpony.de/n3.gif“>.

Unterhalb der einzelnen Gutscheinboxen wird ein suchmaschinenrelevanter Text im Umfang von ca. 370 Wörtern angezeigt. Dieser ist mit einer weißen Überschrift <h2> auf grauem Grund verziert.

Der Content-Bereich wird rechts von einer 231px breiten Randleiste (<div class=”narrowcolumn alignright“>) begleitet. Diese zeigt oben einen Screenshot der Webseite des jeweils aufgerufenen Unternehmens, sowie Vorschläge, welche Firmen den Besucher noch interessieren könnten. Diese Elemente sind in sichtbar abgetrennte Textboxen unterteilt.

Abgeschlossen wird das Gutscheinpony Portal von einem Footer, der unter anderem eine Newsletter-Funktion, sowie eine für den User eher weniger relevante Navigation anbietet.

Durch die Eingabe seiner Mail Adresse kann man sich vom Gutscheinpony direkt zum jeweils gewählten Unternehmen über die aktuellsten Gutscheine und Coupons automatisch informieren lassen, um möglichst nichts zu verpassen. Ein klasse Service!


Blog Related CSS