QR-Code auf der Website: Übergabe vom Desktop ans Handy

QR-Codes auf Websites

Ein QR-Code auf einer Website wirkt wie ein Widerspruch. Wer liest, hat den Link bereits, und wer am Handy ist, kann den eigenen Bildschirm nicht scannen. Aber die Übergabe vom Desktop-Bildschirm an das Handy im selben Raum ist einer der wenigen wirklich reibungslosen Schritte im Web, und deshalb zeigen Login-Masken heute überall ein Quadrat.

QR-Code für Ihre Website erstellen

SVG für gestochen scharfe Bildschirmdarstellung, dynamische Ziele, funktioniert im Dunkelmodus

Die Regel: nur Desktop, am Handy ausblenden

Der mit Abstand häufigste Fehler ist, den Code auch Handy-Nutzern zu zeigen. Er lässt sich nicht scannen, er kostet vertikalen Platz, und er lässt die Seite schlampig wirken.

Zeigen Sie den Code oberhalb des Tablet-Breakpoints und blenden Sie ihn darunter aus. Das ist eine einzige Media Query und der Unterschied zwischen einer klugen Funktion und einem offensichtlichen Fehler.

Was ein Website-Code leisten sollte

Jeder gute Fall ist eine Übergabe, bei der der nächste Schritt tatsächlich auf das Handy gehört:

Anmelden ohne Tippen. Am Desktop scannen, am Handy bestätigen. Die Erklärung zum QR-Login beschreibt den Token-Austausch dahinter.
Ein Gerät koppeln. Set-Top-Boxen, Dashboards, Kioske und Smart Displays, bei denen das Eintippen eines Passworts eine Qual ist.
Die App installieren. Ein Code, der iPhones in den App Store und Android zu Google Play schickt, über einen smarten App-Code.
Auf dem Handy weitermachen. Ein langes Formular, eine Bordkarte, ein Ticket oder eine Karte, die in der Tasche nützlicher ist als auf einem Monitor.
Zwei-Faktor-Einrichtung, die verbreitetste Verwendung von QR-Codes im Web, beschrieben im Leitfaden zu Authenticator-Apps.
Vom Handy aus bezahlen, denn dort liegen die Banking-Apps.

Bildschirme scannen anders als Papier

Halten Sie den Code auf dem Bildschirm bei 200 px oder mehr. Darunter tun sich Handy-Kameras mit dem Pixelraster schwer.
Verwenden Sie reines Schwarz auf reinem Weiß, keine Verläufe und keine Markenfarben dahinter.
Achtung beim Dunkelmodus. Ein invertierter Code auf einer dunklen Oberfläche wird auf vielen Handys langsamer gelesen. Stellen Sie den Code auch in dunklen Themes auf eine weiße Fläche.
Animieren Sie nichts im Umfeld des Codes. Bewegung stört den Autofokus der Kamera.
Codes, die sich beim Login erneuern, sollten einen sichtbaren Countdown und eine Schaltfläche zum Neuerzeugen haben, damit ein abgelaufener Code verstanden und nicht für kaputt gehalten wird.

Es gibt weitere Eigenheiten beim Scannen eines Codes vom Monitor, etwa Streifenbildung durch die Bildwiederholrate, beschrieben im Leitfaden zum Scannen vom Bildschirm.

Nennen Sie immer die Alternative

Jeder Code auf einer Website sollte neben einem Link, einer Kurz-URL oder einem manuell eingebbaren Code stehen. Manche Nutzer sitzen am Desktop ohne Handy in Reichweite, manche sind ohnehin schon am Handy, und manche verwenden einen Screenreader, der ein Quadrat nicht beschreiben kann.

Dieser letzte Punkt ist nicht optional. Ein QR-Code ist ein Bild und braucht eine Textalternative, die dieselbe Information transportiert. Der Leitfaden zum Alternativtext erklärt, was diese Alternative sagen sollte.

Wann Sie keinen einsetzen sollten

Auf einer reinen Mobilseite, wo niemand scannen kann
Um eine Seite auf demselben Gerät zu öffnen, was ein Link mit zusätzlichen Schritten ist
Als Dekoration in einem Hero-Bild, was den Leuten beibringt, dass Ihre Codes nichts tun
Als Ersatz für einen kopierbaren Code in einem Support-Ablauf, wo Text markieren schneller und barrierefreier ist

In 4 Schritten einen QR-Code auf eine Webseite bringen

Prüfen, ob es eine echte Übergabe ist

Login, Pairing, App-Installation, Zahlung oder Weitermachen am Handy. Wenn der nächste Schritt auf demselben Gerät problemlos funktioniert, nehmen Sie einen Link.

Nur auf dem Desktop ausspielen

Blenden Sie den Code unterhalb des Tablet-Breakpoints aus. Handy-Nutzer können ihren eigenen Bildschirm nicht scannen.

Mit 200 px oder größer auf Weiß zeichnen

Reines Schwarz auf reinem Weiß, keine Bewegung in der Nähe und eine weiße Fläche auch im Dunkelmodus.

Immer die Textalternative anbieten

Eine Kurz-URL, ein manuell eingebbarer Code und echter Alternativtext, damit Tastatur- und Screenreader-Nutzer nicht ausgeschlossen werden.

Häufig gestellte Fragen

Sollte ein QR-Code auch in der mobilen Version einer Website erscheinen?

Nein. Ein Handy kann seinen eigenen Bildschirm nicht scannen, der Code ist also totes Gewicht. Blenden Sie ihn unterhalb des Tablet-Breakpoints aus und zeigen Sie stattdessen einen normalen Link.

Wie groß sollte ein QR-Code auf dem Bildschirm sein?

Mindestens 200 px, gezeichnet als reines Schwarz auf reinem Weiß. Darunter tut sich die Kamera mit dem Pixelraster des Displays schwer, besonders auf hochauflösenden Monitoren.

Warum scheitern QR-Codes im Dunkelmodus?

Invertierte Codes werden von modernen Handys unterstützt, aber merklich langsamer decodiert. Wenn Sie den Code innerhalb der dunklen Oberfläche auf eine weiße Fläche setzen, entfällt die Verzögerung.

Was ist die häufigste sinnvolle Verwendung eines QR-Codes auf einer Website?

Login und Gerätekopplung, gefolgt von der Zwei-Faktor-Einrichtung. In allen drei Fällen gehört der nächste Schritt tatsächlich auf das Handy und nicht auf den Desktop.

Verursachen QR-Codes auf Websites Probleme bei der Barrierefreiheit?

Ja, wenn sie der einzige Weg sind. Ein Quadrat ist für einen Screenreader unsichtbar, stellen Sie ihm also immer eine Kurz-URL, einen manuell eingebbaren Code und einen aussagekräftigen Alternativtext zur Seite.

Inhalt eingeben

QR-Code gestalten

QR-Code herunterladen