Webdesigner gestalten Websites mit Dutzenden Unterseiten, Shops mit Tausenden Produkten und komplexe Webanwendungen. Ein Format, das dagegen oft unterschätzt wird, ist die digitale Visitenkarte. Technisch ist sie eine sehr kleine Website, häufig nur eine einzige Seite. Gestalterisch stellt sie aber hohe Anforderungen, denn sie wird fast ausschließlich auf dem Smartphone geöffnet, meist unterwegs, oft mit schlechter Verbindung und mit wenigen Sekunden Aufmerksamkeit. Dieser Beitrag betrachtet die digitale Visitenkarte aus der Sicht des Webdesigns.
Mobile first ist hier keine Option, sondern Pflicht
Bei klassischen Websites diskutieren Teams manchmal noch, ob zuerst für Desktop oder Mobilgeräte gestaltet wird. Bei der digitalen Visitenkarte stellt sich diese Frage nicht. Sie wird nach dem Scannen eines QR-Codes oder dem Antippen einer NFC-Karte auf dem Telefon geöffnet. Alle Gestaltungsentscheidungen müssen daher vom kleinen Bildschirm ausgehen. Die Grundprinzipien des Responsive Webdesign gelten selbstverständlich, doch der Schwerpunkt liegt eindeutig auf einer Breite von etwa 360 bis 430 Pixeln.
Daraus folgt eine klare Struktur: Oben stehen Foto, Name und Funktion. Direkt darunter folgen die wichtigsten Aktionen als große, gut antippbare Schaltflächen, etwa Anrufen, E-Mail schreiben und Kontakt speichern. Weitere Informationen wie Social-Media-Links, Adresse oder ein Kurztext folgen weiter unten. Wer scrollen muss, um den Speichern-Button zu finden, verliert einen Teil der Nutzer.
Ladezeit und Technik
Eine digitale Visitenkarte wird oft auf Messen, Konferenzen oder in Tagungshotels geöffnet, also an Orten mit überlastetem Mobilfunknetz oder schwachem WLAN. Jedes Kilobyte zählt. Bewährte Maßnahmen sind:
- Profilbilder in modernen Formaten wie WebP oder AVIF und in passender Größe ausliefern.
- Auf große Schriftdateien verzichten oder Systemschriften nutzen.
- Kein schweres JavaScript-Framework für eine einzige statische Seite laden.
- Den Kontakt-Download als vCard-Datei direkt bereitstellen, ohne Umwege über Formulare.
Gerade der letzte Punkt ist technisch interessant. Ein Link auf eine Datei mit dem MIME-Typ text/vcard veranlasst iOS und Android, den Kontakt-Dialog zu öffnen. Wichtig ist, die Datei korrekt zu kodieren, damit Umlaute und Sonderzeichen in Namen richtig übernommen werden. UTF-8 ist hier der sichere Weg.
Gestaltung: Marke auf kleinstem Raum
Für Unternehmen ist die digitale Visitenkarte ein Teil des Corporate Designs. Farben, Logo und Typografie sollten zur Website passen, dürfen aber reduziert werden. Ein Logo in voller Breite ist auf einer Visitenkarte selten nötig, ein kleines Signet reicht. Ausreichende Kontraste sind besonders wichtig, denn die Seite wird oft im Freien oder bei grellem Hallenlicht betrachtet. Die Empfehlungen der Web Content Accessibility Guidelines zu Kontrastverhältnissen sind ein guter Maßstab.
Wer für Kunden digitale Visitenkarten umsetzt, muss nicht immer bei null anfangen. Es gibt spezialisierte Dienste, die Profilseiten, QR-Codes und NFC-Karten bündeln und Gestaltungsspielraum für Farben und Logos lassen. Einen Eindruck, welche Funktionen dort heute Standard sind, vermitteln digitale Visitenkarten im Überblick. Für Agenturen kann es sinnvoll sein, solche Lösungen zu empfehlen und die eigene Arbeit auf Konzept und Gestaltung zu konzentrieren, statt eine eigene Infrastruktur zu betreiben.
QR-Code und NFC als Einstiegspunkte gestalten
Auch der Weg zur Seite gehört zum Design. Ein QR-Code sollte ausreichend groß gedruckt werden und eine helle Ruhezone um sich haben, damit Kameras ihn zuverlässig erkennen. Farbige Codes funktionieren, solange der Kontrast zwischen Vorder- und Hintergrund hoch bleibt. Bei NFC-Karten ist ein kleines Symbol hilfreich, das zeigt, wo das Smartphone angehalten werden soll. Die Zieladresse sollte kurz und dauerhaft sein, damit gedruckte Codes auch nach einem Relaunch der Website weiter funktionieren.
Datenschutz und Tracking
Viele Anbieter bieten Statistiken zu Aufrufen und Kontakt-Speicherungen. Das ist für Vertriebsteams interessant, berührt aber den Datenschutz. Wer Tracking einsetzt, sollte prüfen, ob dafür eine Einwilligung notwendig ist, und eine Datenschutzerklärung verlinken. Im Zweifel ist ein sparsamer Ansatz besser: einfache, anonyme Zählungen statt detaillierter Nutzerprofile. Auch das Impressum darf bei geschäftlich genutzten Profilen nicht fehlen.
Ein kleines Projekt mit großer Wirkung
Die digitale Visitenkarte ist eines der kleinsten Projekte im Webdesign, aber eines mit sehr direkter Wirkung. Sie entscheidet darüber, ob ein Kontakt nach einem Gespräch tatsächlich im Adressbuch landet. Wer hier sauber arbeitet, mit klarer Struktur, schnellen Ladezeiten und gut sichtbaren Aktionen, liefert seinen Kunden einen Mehrwert, der bei jeder Begegnung sichtbar wird.
