Mobile First: Button-Effekte im mobilen Internet

Mobile First: Button-Effekte im mobilen InternetEure Website sieht auf dem Desktop fantastisch aus? Na dann herzlichen Glückwunsch, doch ihr stellt damit nur die Minderheit eurer Besucher zufrieden.

Okay, das war jetzt sehr hart ausgedrückt, doch bei den meisten Websites sind die Statistiken inzwischen recht eindeutig und die sagen, dass die mobilen Nutzer mittlerweile in der Mehrheit sind.

Mobile First, lautet daher das Motto und das betrifft natürlich auch die Buttons, mitsamt ihren teilweise recht aufwändigen Effekten.

Für Werbe-Links auf dieser Seite zahlt der Händler ggf. eine Provision. Diese Werbe-Links sind am Sternchen (*) zu erkennen. Für dich ändert sich nichts am Preis. Mehr Infos.

Button-Effekte auf dem Smartphone?

Ebook Schreiben und Verkaufen
Werbung

Vor kurzem arbeitete ich an einem recht aufwendigen Projekt und plötzlich wurde mir klar, dass all die eindrucksvollen Effekte auf dem Smartphone gar nicht funktionieren werden. Vor allem bei Buttons ist das ein großes Problem. Vor einiger Zeit schrieb ich bereits über diese CTA-Buttons, die maßgeblich für den Erfolg verantwortlich sind. Was ich dabei allerdings vollkommen vergaß war, dass auch die Effekte für die Klickrate von großer Bedeutung sind. Doch wie funktionieren beispielsweise Hover-Effekte am Smartphone?

Die einfache Antwort: Gar nicht. Es gibt per se keinen Hover-Effekt am Smartphone, da es keine Maus gibt, die über dem Button verweilen kann. Es gibt lediglich einen Active-Status, der beim Drücken aktiviert wird. Allerdings nicht unter iOS, denn Safari Mobile deaktiviert diese Pseudoklassen und ersetzt sie gegen einen generischen Farbton. Das macht es kompliziert, schicke Effekte am Smartphone zu erzeugen, da selbige oft nicht so richtig funktionieren.

:active als :hover Alternative

Wenn der :hover via CSS nicht gelingt, muss es eben ein :active sein. Die Pseudoklasse beschreibt bei einem Link den gedrückten Zustand und das wiederum ist auch am Smartphone denkbar. Wird ein Button gedrückt, könnte sich dieser also leicht verschieben. Ein 3D-Effekt wird gerne genutzt, um den Eindruck zu erzeugen, dass der Button wirklich heruntergedrückt wird.

Mobile First: Button-Effekte im mobilen Internet

Doch mit einem :active kann auch die Farbe verändert, der Margin manipuliert oder ein Blinken erzeugt werden. Statt dem :hover scheint die :active Pseudoklasse daher ideal zu sein, um einen Button-Effekt am Smartphone zu realisieren. Theoretisch zumindest.

WERBUNG
Mit der Media-Haftpflicht vor Haftung schützen! Die Media-Haftpflicht-Versicherung von Hiscox schützt bei gesetzlicher und vertraglicher Haftung, z.B. bei Haftpflicht-Ansprüchen, Datenverlust und Abmahnungen. www.hiscox.de
Günstige Online-Rechnungssoftware Easybill nutzen Rechnungen, Angebote, Lieferscheine und mehr kannst du ganz einfach mit Easybill in der Cloud erstellen und von überall darauf zugreifen. Der deutsche Service ist günstig und sicher. www.easybill.de
DSGVO Schritt-für-Schritt Generator - Word- & Excel-Vorlage Ein große Hilfe bei der Erstellung des eigenen Verarbeitungsverzeichnisses, der Risikoanalyse, der technischen und organisatorischen Maßnahmen und des eigenen Datenschutzkonzepts bietet dieser DSGVO Schritt-für-Schritt Generator. Hier sind über 120 vorausgefüllte Vorlagen (Word und Excel) enthalten, so dass man in kürzester Zeit die eigenen DS-GVO Unterlagen erstellt hat. dsgvo-vorlagen.de

Javascript-Trick, um :hover und :active zu aktivieren

Je nach Gerät funktioniert das mit dem :hover und :active auf dem Smartphone nämlich nicht so richtig.

Ein kleiner Trick via Javascript sorgt aber dafür, dass die Pseudoklassen entsprechend interpretiert werden können. Dazu wird einfach ein »touchstart« Event erzeugt. Drückt der Nutzer dann auf seinem Smartphone den Button, bleibt der :hover bestehen, bis er wieder an anderer Stelle drückt.

Das erzeugt auch auf dem Smartphone sehr weiche und gut funktionierende :hover bzw. :active Effekte, die dann auch tatsächlich wieder nutzbar sind.

<![CDATA[
document.addEventListener("touchstart", function(){}, true);
]]>

Das Script wird einfach inline in den Head-Bereich eurer Website integriert und sorgt dann dafür, dass auch unter iOS wieder sämtliche :hover und :active Effekte ordnungsgemäß funktionieren. Ohne den Fix bleiben in Safari Mobile die Pseudoklassen deaktiviert.

Da das iPhone und iOS entsprechend verbreitet sind, ist es durchaus wichtig darauf zu achten, dass die Effekte auch hier ordnungsgemäß funktionieren. Denn auch der Effekte entscheidet darüber, wie gerne und häufig geklickt wird.

Buttons einfach komplett animieren

Bei der Suche nach einem schicken Effekt, der auch mobil gut funktioniert, stieß ich auf eine ganz andere Möglichkeit. Buttons können mit CSS nämlich auch komplett animiert werden. Ein schwebender Button zum Beispiel. Eine kleine CSS-Animation reicht bereits aus, um den Button in eine leichte Schwingung zu versetzten. Dazu ein Box-Shadow und schon wirkt es, als würde der Button leicht schweben und förmlich auf einen Druck des Nutzers warten.

Mobile First: Button-Effekte im mobilen Internet

Eine Methode die einfach realisierbar ist, aber nur dezent eingesetzt funktioniert. Was Nutzer nämlich gar nicht mögen, sind blinkende oder gar nervige Buttons. Das leichte Schweben hingegen, erhöht im besten Fall die Aufmerksamkeit, ohne dabei direkt zu stören. Und es funktioniert eben auch auf jedem Smartphone, ganz ohne :hover und :active, versteht sich.

Die Alternative zu einem Effekt, der via :hover oder :active ausgelöst wird, heißt also CSS-Animationen. Beispiele zum einfachen kopieren, findet ihr hier.

Aber noch einmal die Warnung: Wer Elemente zu stark animiert, nervt seine Besucher. Gerade Anfänger finden das alles immer sehr schick, vergessen dann aber schnell, dass es auch irritierend oder störend sein kann, wenn sich alles auf einer Website bewegt oder die Farbe wechselt. Bleibt also immer dezent und animiert nur vorsichtig und nie mit zu viel Bewegung, denn das stört nur wieder.

Mobile Buttons erfordern viel Feintuning

Buttons auf mobilen Geräten darzustellen erfordert viel Feintuning. Nicht jedes Gerät eignet sich für jede Art von Effekt und zu viel ist in der Regel auch nicht gut. Dann gibt es noch die fehlenden Pseudoklassen in Safari und das Problem, dass ein :hover, egal wie, auf dem Smartphone eben selten korrekt funktioniert. Der :active muss ebenfalls clever getaltet sein, damit er bei dem kurzen Klick bzw. Touch des Besuchers überhaupt eine Wirkung erzielen kann.

Am Ende halte ich solche Effekte aber für sehr wichtig. Die Interaktion des Nutzers wird mit einem solchen einfach noch einmal bestätigt und das wiederum sorgt für ein dynamisches, flüssiges Gefühl auf der gesamten Website. Mit dem richtigen Effekt fühlt sich der Klick einfach gut an.

Was haltet ihr von Button-Effekten? Welche Effekte nutzt ihr auf mobilen Geräten? Oder habt ihr das Thema bislang weitgehend unbeachtet gelassen?

Gebt mir euer Feedback in den Kommentaren und zeigt her eure Effekte, damit wir darüber diskutieren können.

ALL-INKL.COM - Webhosting Server Hosting Domain Provider
Werbung

5 Gedanken zu „Mobile First: Button-Effekte im mobilen Internet“

  1. Mobile Anpassung kann sehr viel Zeit in Anspruch nehmen, aber es lohnt sich. Man sollte mal ein paar Test mit den mobilen Buttons machen. Peer hast du ein Artikel darüber wie man ein Suchfeld so wie auf deiner Seite, frei in einen Artikel einfühgen kann? Gibt es da ein Shortcode oder eine Funktion? Würde gerne genauso wie du das Suchfeld über jeden meiner Artikel ganz oben anzeigen lassen. Danke schon mal für deine Hilfe.

    Grüße aus Berlin

    Mathias Will

    Antworten
    • Einen Artikel dazu habe ich nicht. Ich baue dieses Suchfeld einfach per Hook des Themes an diese Stelle ein und lasse es per CSS nur ab einer kleinen Auflösung anzeigen. Das könnte man auch mit einem Werbebanner-Plugin machen.

      Antworten
  2. Ich persönlich finde Button-Effekte eher problematisch.

    Ist es nicht so, dass zusätzliche javascript-Schnipsel unnötig die Ladezeit verschlechtern? gerade im mobilen Bereich zählt doch jedes byte oder?

    Antworten
    • Ist ja alles CSS, bis auf das minimale Snippet für den Touch. Muss am Ende aber natürlich jeder für sich selbst entscheiden. Ich selbst bin ja als Performance-Fanatiker bekannt und wurde/werde oft dafür kritisiert, dass ich alles auf ein Minimum reduziere und optimiere, finde Button Effekte aber tatsächlich recht wichtig.

      Antworten
  3. Hallo David,
    solche kleinen Animationen teste ich auch hin und wieder durch. Meist bleibe ich aber bei der Standardausgabe von AAWP hängen. Dessen Produktboxen insgesammt gefallen mir einfach und sie passen.
    Danke für den Link zu Animate.css & dein kleines JavaScript-Snippet.
    Schönen Gruß

    Antworten

Schreibe einen Kommentar