Verwenden Sie gra­fi­sche- oder CSS-But­tons?

mit Keine Kommentare

Online-Marke­ting-Bei­trag: Navi­gation

Informationen gemäss Stand vom 15.9.2021

Grafischer Button

Konventionelle grafische Knöpfe (Buttons im Format .gif, .jpg oder .png) als auch CSS-Buttons (Cascading Style Sheets) haben ihre Vor- und Nachteile. Nur wenn man diese kennt, kann man sich für die einen oder anderen klar ent­scheiden.

Buttons
Navigationsschaltflächen

 

Buttons werden als Navigationsschaltflächen verwendet und als Handlungsaufforderungen.

Buttons

Inhaltsverzeichnis: Website-But­tons

Vorteile grafischer Buttons

  • Jede denkliche Art von But­tons
    lassen sich erstellen, die sich optisch ideal in eine Website integrieren lassen.

Nachteile grafischer Buttons

  • Zeitfaktor
    Die Erstellung ist relativ auf­wendig.
  • Mehrere Manipulationen not­wen­dig
    Die Änderung einer Farbe ist aufwendig.
  • Textmutation
    Die Änderung eines Text-Ein­tra­ges ist aufwendig.
  • Ladeintensiv
    Diese Buttons sind sehr schnell um den 100-fachen Faktor und mehr grösser als CSS-Buttons. Der Sei­ten­auf­bau dauert ent­sprechend etwas länger.
  • Doppelter Aufwand
    Für den bekannten Mouse­over-Effekt braucht es min­des­tens zwei Grafiken pro Button.
  • Für den Mouseover-Effekt
    (beim Berühren des Buttons verfärbt sich der Button) braucht es einen Javascript-Code.

Vorteile von CSS-But­tons

  • Schnelligkeit
    Die Erstellung eines weiteren Buttons ist in Sekunden erle­digt.
  • Farbänderung
    Die Änderung einer Farbe ist in Sekunden erledigt.
  • Textmutation
    Die Änderung eines Text-Ein­trages ist in Sekunden erle­digt.
  • Schneller Seitenaufbau
    Die Grösse eines Buttons ist praktisch nur die Anzahl der Buchstaben sowie einiger wenigen Zeilen CSS-Code.
  • Mouseover-Effekt
    Für den bekannten Mouse­over-Effekt sind nur einige Zeichen CSS-Code not­wendig.
  • Für den bekannten Mouseover-Effekt
    ist kein Javascript-Code notwendig. Javascript funktioniert nicht auf allen Ausgabegeräten und kann vom Sur­fer deaktiviert werden.
  • Es muss keine Grafik heruntergeladen werden,
    da der Button nur wenige Zeilen Code gross ist.

Nachteile von CSS-But­tons

  • Alte Browser
    haben Probleme, den CSS-Code korrekt zu inter­pre­tieren.
    So alte Browser sollten Sie aus Sicherheits­gründen eh nicht mehr verwenden!

Nachtrag

  • Kombination von CSS-Code und einer kleinen Grafik
    Selbstverständlich lassen sich mit CSS grafische Buttons einsetzen.
    Damit kombinieren Sie die Vorteile schöner grafischer Buttons mit den Vorteilen der CSS-Technik.
  • Content-Management-Sys­teme
    Die CSS-Buttons lassen sich beim Arbeiten mit CMS ver­wenden. Der Code muss in die ent­sprechenden CSS-Dateien über­nommen wer­den.

Werkzeuge zur Er­zeu­gung von But­tons

Grafische Buttons können Sie mit jedem Bild­be­arbeitungs­pro­gramm erstellen. Wer damit seine Mühe hat, für den gibt es praktische Onlinedienste.

  • Cooltext
    Auf dieser Site können Sie Logos erstellen, die Sie als Buttons verwenden können.
    de.cooltext.com
  • Buttonoptimizer (E)
    Praktischer Onlinedienst, mit dem Sie sowohl grafische wie CSS-basierte Knöpfe erstel­len!
    buttonoptimizer.com
  • CSS Button Generator (E)
    Einfach zu bedienender Generator, der CSS-Buttons erstellt.
    cssbuttongenerator.com
  • CSS3 Button (E)
    Ein weiterer CSS-Button Gene­ra­tor mit vielen Optionen.
    css3button.net
  • Da Button Factory (E)
    Dieser Generator ist einfach zu bedienen. Einfach mit den Optionen spielen, bis es passt!
    clickminded.com/button-generator/
    CSS Button-Generator

Autor: Walter B. Walser, kundennutzen.ch

Verfolgen Walter B. Walser:

Gründer des pra­xis­na­hen On­li­ne-Mar­ke­ting Ma­ga­zins kundennutzen.ch, Autor und Online-Marketing Manager. Er half frü­her Un­ter­neh­mern 100% mehr aus Ihrer Web­site he­r­au­­s­zu­­­ho­len. Er hat KMU in Bezug auf deren Web­auf­tritt be­raten und sich auf die Web­si­te-Pfle­ge, Web­si­te-Opti­mie­rung und das On­li­ne-Mar­ke­ting mit On­li­ne-Tools spe­zia­li­siert.

Letzte Einträge von