Internetauftritt im mobilen Zeitalter

onlineshop gestaltung
(Bildnachweis: (stock.adobe.com © PureSolution))

Die Menschheit digitalisiert sich Tag für Tag ein Stückchen mehr – und nicht nur Experten wissen längst, dass Corona und alle davon ausgehenden Maßnahmen als gewaltiger Booster wirkten, wodurch sich die Sache nochmals beschleunigte.

Tatsache ist jedoch, dass die Internetpräsenz einer Person oder eines Unternehmens nach wie vor der wichtigste Dreh- und Angelpunkt ist. Just hier hat sich jedoch durch die extreme Verbreitung des Smartphones und anderer internetfähiger Geräte vieles verändert.

Denn die Linie ist schon seit Jahren glasklar: Vor allem gegenüber smarten Mobiltelefonen müssen alle anderen (herkömmlichen) Formen von Computer zurückstecken – sehr stark zurückstecken. Das beweisen die Zahlen und Prognosen aufs Überdeutlichste.

Für jeden, der sich im Web präsentieren will, bedeutet das eine Reihe von Fragen, die er sich stellen muss. Die wichtigste: Ist es überhaupt sinnvoll, eine Website zu pflegen, wenn Apps mehr können und gestatten, vor allem aus unternehmerischer Sicht? Darauf antworten wir dir bereits ein deutliches Ja!

Doch was muss ein Netzauftritt heute überhaupt liefern, um noch aus der riesigen Masse herauszustechen? Schließlich existierten 2021 schätzungsweise 1,7 Milliarden Websites.

Auf den folgenden Zeilen gehen wir den wichtigsten Fragen rund um die Internetpräsenz in den frühen Zwanzigern nach – und liefern dir die ausführlichen Antworten dazu. 

Was überhaupt einen seriösen Internetauftritt ausmacht

Skizzen während der Planung einer Website.

Hinter einer wirklich guten Website steckt eine ganze Menge Planungsarbeit. Das gilt selbst dann, wenn die technische Umsetzung auf einem Baukasten basiert. (Image credit: (stock.adobe.com © Chaosamran_Studio))

Du befindest dich gerade auf TechRadar und somit einer Site, die seit Jahr und Tag nicht nur inhaltlich, sondern auch konzeptionell hochprofessionell gestaltet ist. Gleichsam dürftest du aber andere Seiten kennen, die zwar nicht minder professionell sind, aber in gewissen Punkten völlig anders aussehen.

Und sicher kennst du zudem Sites, die generell katastrophal wirken oder zumindest so aussehen, als wären sie im Look der frühen 00er Jahre stehengeblieben – ja, auch das Website-Design unterliegt Entwicklungen. Schau dir beispielsweise mal über die Wayback Machine an, wie techradar.com anno 2008 aussah.

Allerdings stellt sich dann trotzdem noch die Frage, was eine seriöse Site ausmacht und wie sich eine dementsprechend seriöse Website erstellen lässt. Es sind mehrere Punkte:

  1. Die Site basiert auf einem professionell gebauten Grundgerüst. Das heißt, sie wurde nicht von einem Amateur mit HTML-Halbwissen in WordPad geschrieben, sondern von Leuten, die sich mit der Sache auskennen. Hier muss allerdings angemerkt werden, dass dieser Punkt beim Erstellen der Website durch moderne Baukästen um ein Vielfaches einfacher geworden ist. Da diese bereits alle Grundbausteine enthalten, ist es ähnlich einfach, eine Website zu erstellen, wie beispielsweise mit einem Office-Programm zu arbeiten – Drag, Drop und etwas Tippen.
  2. Die Site hält sich an gewisse (ungeschriebene) Konventionen was die Bedienbarkeit und gewisse Gestaltungsmerkmale anbelangt. Hierzu musst du aber auch regionale und kulturelle Eigenheiten unbedingt beachten.
  3. Das Design entspricht aktuellen Ansprüchen. Das bedeutet zudem, dass der Look regelmäßig geupdatet werden muss.
  4. Die Site ist insgesamt logisch und benutzerfreundlich aufgebaut.
  5. Die Site ist flüssig gestaltet. Das heißt, abzüglich der Faktoren Internetverbindung und Geräteleistung lädt sie so schnell, wie es machbar ist – unsagbar wichtig für Shops, weil Kunden sofort abspringen, sobald die Ladezeit einige Sekunden dauert.

Und selbst wenn es sogar manche seriösen Seiten anders machen, so sollte eine gute Website heute ihre Besucher nicht zwingen, Add-Blocker auszuschalten. Das heißt, du als Ersteller und Betreiber solltest den Wunsch deiner Besucher nach dieser Form von digitaler Privatsphäre respektieren, selbst wenn es deine Umsätze durch Werbung schmälert.

Allerdings muss dir klar sein, dass diese genannten Punkte dir nur einen groben Überblick geben können. Nicht zuletzt mit Blick auf unser mobiles Zeitalter und die damit einhergehenden Apps muss vieles davon deutlich detaillierter betrachtet und erklärt werden. Das tun wir in den nun folgenden Abschnitten.

Eine Website – mehrere Versionen?

Eine Website auf mehreren Geräten

Responsive Webdesign ist die einzige Möglichkeit, mit der du sicherstellen kannst, dass deine Site trotz der unüberschaubaren Vielfalt internetfähiger Geräte immer gleichgut aussieht und sich benutzen lässt. (Image credit: (stock.adobe.com © MclittleStock))

Einmal angenommen, du betrachtest diese Zeilen gerade über den Safari-Browser eines iPhone 13 Pro Max. Dann wird TechRadar etwas anders aussehen als würdest du beispielsweise mit einem älteren Samsung-Tablet lesen – das du zudem quer hältst. Dort wiederum sieht unser Portal anders aus als bei jemandem, der auf einen riesigen Gaming-Bildschirm mit 21:9 Seitenverhältnis unterwegs ist oder der auf seinem Fernseher surft.

Hier erkennst du bereits die Schwierigkeit, die für heutige Designer von Websites beziehungsweise dahinterstehenden Baukästen besteht: Es gibt eine unüberschaubare Vielfalt von Geräten, die darauf zugreifen können. Und auf jedem davon muss der Netzauftritt gleichermaßen gut wirken.

  • Bildschirmauflösung,
  • Seitenverhältnis,
  • Bildwiederholfrequenz,
  • Eingabemethoden,
  • Orientierung des Bildschirms und
  • Abmessungen des Browserfensters

sind alles Kriterien, die hier berücksichtigt werden müssen.

Heute funktioniert das relativ gut. Vor gut zehn Jahren allerdings war das ein riesiges Problem. Damals waren fast alle Sites für die Betrachtung auf waagerecht ausgerichteten Computermonitoren ausgelegt. Smartphones hingegen haben eine (primär) vertikale Bildschirmausrichtung. Hinzu kommt außerdem die Bedienung, die sich ebenfalls unterscheidet.

Es dauerte einige Jahre, bis die meisten Website-Betreiber so nachgezogen hatten, dass man sein Smartphone nicht mehr quer halten musste, um alles adäquat sehen zu können – Mobiles Webdesign war geboren. Doch weil sich so viele Geräteklassen mit noch mehr Modellen entwickelten, wurde es nötig, nochmals weiterzugehen.

Heute sind deshalb die allermeisten Websites nach dem Rezept des Responsive Webdesign aufgebaut. Das heißt, die Site kann aufgrund zeitgenössischer Standards in Sachen CSS, HTML und JavaScript erkennen, von welchem Gerät sie angefordert wird. Sie enthält kaum noch starre Elemente, sondern ist in jeder relevanten Hinsicht responsiv, also in diesem Zusammenhang reagierend.

Ein faltbares Smartphone vor einem schwarzen Hintergrund.

Foldables sorgen gerade dafür, dass Webdesign einen neuen Schwierigkeitsschub erhält – aber daneben auch einige sehr spannende Möglichkeiten. (Image credit: (stock.adobe.com © kmls))

Dadurch wird die Seite automatisch für jedes Gerät hinsichtlich der genannten Parameter angepasst. Es werden beispielsweise Bilder skaliert und passend positioniert (oder gar weggelassen), Text sinnvoll umgebrochen, simplere oder komplexere Icons verwendet. Meist fokussiert man sich dabei auf drei Grund-Ansichten innerhalb derer dann exakter angepasst wird:

  • Die Smartphone-Ansicht wird durch ein heute sehr stark senkrecht ausgerichteten Seitenverhältnis (etwa 20:9 beim OnePlus Nord 2) gekennzeichnet und dadurch, dass das Gerät oft einhändig bedient wird.
  • Die Tablet-Ansicht zeichnet sich durch ein größeres Display mit meist beidhändiger Bedienung aus, das zudem ein deutlich quadratischeres Seitenverhältnis aufweist und sowohl horizontal wie vertikal gehalten wird.
  • Die Bildschirm-Ansicht fokussiert sich auf typische Monitore von PCs, Notebooks, allerdings auch Fernsehern mit ihren größeren Betrachtungsdistanzen sowie die Bedienung über Maus und Fernbedienung.

Klingt kompliziert? Ist es auch – ein bisschen. Denn aktuell kommen natürlich immer mehr Smartwatches hinzu. Und im Handy-Sektor bekommt der seit dem ersten iPhone etablierte Formfaktor immer mehr Konkurrenz von Klapp- beziehungsweise Falt-Smartphones.

Das heißt, selbst responsive Webdesign muss weiterentwickelt werden. Ignorieren kannst du das keinesfalls. Denn wenn praktisch jeder Mensch das Netz nutzt, darf es keinen geben, bei dem deine Site nicht gleichermaßen gut aussieht und sich bedienen lässt. Apropos Aussehen:

Der Optikfaktor

vier verschiedene Webseiten im Flat Design

Flat Design ist Minimalismus pur und heutzutage Maß aller Dinge. Wirkt aktuell dadurch sehr modern, wird aber auch von vielen kritisiert und dürfte in einigen Jahren reichlich veraltet erscheinen. (Image credit: (stock.adobe.com © PureSolution))

Dort wirst du zwei Sachen feststellen:

Schon im ersten Kapitel haben wir kurz angeschnitten, dass Webdesign ganz ähnlichen Gezeitenströmungen unterliegt wie jede andere Form von Design. Und falls dir der Blick auf die alte Version von TechRadar in der Wayback Machine noch nicht gereicht hat, sei dir eine wunderbare digitale Zeitmaschine namens Web Design Museum empfohlen.

  1. Es werden dort ausschließlich professionelle Sites gezeigt. Etwa von Apple oder Spielzeughersteller Mattel.
  2. Egal ob du damals schon das Internet nutztest oder deutlich jünger bist, die Sites sehen für heutige Geschmäcker haarsträubend unprofessionell und veraltet aus.

Der Grund dafür ist, dass man damals in Sachen Optik und Look einfach völlig andere Vorstellungen hatte. Beispielsweise nutzte man vielfach noch Schriftarten mit Serifen, wie sie für Zeitungen typisch(er) sind. Abermals muss dir deshalb klar sein, dass eine Website niemals stehenbleiben darf.

Ähnlich wie beim Responsive Design gibt es hier aktuell eine Art stille Übereinkunft darüber, was einen modernen Look ausmacht. Damit wären wir beim Flat Design. Am bekanntesten dürfte es dir durch den Aufbau von mobilen Betriebssystemen und deren Icons sein. Aber auch im Webdesign gelten dieselben Regeln – ergänzt um das, was eine Website braucht:

  • Maximaler Minimalismus als Grundtenor. Keine Verläufe, Verzierungen oder sonstige Schnörkel.
  • Schriftarten ohne Serifen, Outlines, Schattenwürfe und dergleichen.
  • Großformatige, aber immer zweidimensionale Elemente und Icons.
  • Keine komplizierten Farbverläufe. Meist sogar einfarbige Elemente.
  • Stilisierung und Vereinfachung statt möglichst großem Realismus.

Zwar ist nicht jeder glücklich mit Flat Design. Deshalb wird seit einigen Jahren schon „Flat 2.0“ postuliert, welches ein wenig mehr Dreidimensionalität gestattet. Aktuell ist jedoch kaum abzusehen, dass hier ein echter Paradigmenwechsel ansteht.

Allerdings: Deinen Internetauftritt ebenfalls „flach“ zu gestalten, ist nur ein Rahmen. Innerhalb davon muss sich alles, zumindest wenn es die Site deines Unternehmens ist, an deiner Corporate Identity (CI) orientieren.

Das bedeutet vor allem Einsatz der dazugehörigen Farben, Logos, bis hin zur Sprache – hierhinter findest du den Grund, warum in den vergangenen Jahren so viele Unternehmen selbst ihre Offline-Gestaltung ziemlich abgeflacht haben. Das ist sowohl der Wunsch, eine durchgängige CI zu erschaffen, wie es aufzeigt, wie extrem groß und wichtig die digitale Welt für jede Firma heutzutage ist.

Der Faktor Bedienbarkeit

Eine website wird auf einem Tablet angezeigt.

Optik ist wichtig, aber sie ist nichts ohne eine gleichermaßen ausgefeilte Bedienbarkeit. Im Zweifel sticht sie sogar immer einen guten Look aus – oder sollte es zumindest. (Image credit: (stock.adobe.com © Stanisic Vladimir))

Stell dir bitte einmal vor, du besuchst irgendeine Website. Sie ist zwar schick im Flat Design gehalten, aber: Dauernd ploppen irgendwelche Fenster auf, du findest keine Buttons zum Anklicken und irgendwie scheint alles darauf ausgelegt zu sein, Nutzer möglichst stark abzuschrecken.

Noch vor einigen Jahren gab es manche Sites, die so „funktionierten“. Heute hingegen kann sich das niemand mehr leisten. Vorteil Baukastensysteme: Dort ist es weitgehend unmöglich, eine Website zu erstellen, bei der wirklich krasse Fehler in Sachen Usability gemacht werden.

Doch stellt sich die Frage, was macht denn eine Website gut bedienbar? Es sind eine ganze Reihe von Faktoren, über die sich problemlos ganze Artikel schreiben lassen. Deshalb an dieser Stelle ein Überblick über die wichtigsten Punkte, die du unbedingt kennen und beachten musst:

  • Die Site ist so strukturiert, wie es den Lesegewohnheiten deiner User entspricht. Das bedeutet für die westliche Welt also von oben links nach unten rechts.
  • Die Darstellung ist übersichtlich und selbsterklärend. Jeder findet durch einfaches Lesen, Klicken, Wischen oder Scrollen alles, was er sucht.
  • Alles ist eindeutig beschriftet, enthält alternativ leichtverständliche einzigartige Symbole oder solche, die allgemein akzeptiert sind (beispielsweise eine Lupe für die Searchbar).
  • Die Farbgestaltung ist kontrastreich und augenfreundlich, konzentriert sich aber auf einige wenige Farben.
  • Texte sind snackable aufbereitet. Das bedeutet, es gibt viele kleinteilige Absätze und du kommst auf den Punkt, statt ewig lange zu erklären.
  • Die Benutzerführung bzw. Customer Journey ist so ausgelegt, dass deine Besucher möglichst flott agieren können. Besonders wichtig, wenn es sich bei deiner Site um einen Shop handelt. Dazu gehört es auch, dass es sinnvolle Ober- und Unterkategorien gibt und der User in der Tiefe dieser Baumstruktur durch sogenannte Breadcrumps erkennen kann, wo genau er sich gerade befindet.

Das heißt, du musst bei allen anderen Wünschen immer maximal darauf achten, dass die Besucher deiner Site so gut wie möglich das tun können, weshalb sie hier sind. Alles, was sie davon ablenkt, solltest du zumindest maximal überdenken.

Wenn du dann noch das Impressum korrekt einbaust und alle anderen rechtlichen Punkte erfüllst, dann ist deine Site zumindest grundlegend benutzerfreundlich.

Sonderfall Webshop

Ein Einkauf in einem Webshop

Beim Webshop muss eine Maxime über allem anderen stehen: Deinem Kunden muss es so einfach wie möglich sein, bei dir einen Kaufabschluss zu vollziehen. (Image credit: (stock.adobe.com © Atstock Productions))

Grundsätzlich gelten all die bislang gemachten Angaben für jede Art von Website. Also ganz gleich, ob du dort deine Band präsentieren willst oder eine Ferienwohnung vermieten möchtest. Ganz speziell, wenn du einen Webshop betreibst, kommen jedoch noch weitere Dinge hinzu.

Unter dieser Prämisse gilt es, die folgenden Punkte unter allen Umständen zu vermeiden. Teils, weil sie deinen Shop in Sachen Look und Usability schlecht machen, teils aber sogar, weil derartige Fehler als Warnsignale für Fake-Shops gelten. Mach dementsprechend bitte folgendes nicht nach:

  • Zu kleine, zu wenige und/oder nur vom eigentlichen Hersteller stammende Produktbilder.
  • Texte, die vor lauter Keywords triefen und somit klar erkennen lassen, dass hier nur (eine sehr altbackene) Form von Suchmaschinenoptimierung betrieben werden soll.
  • Fehlende oder zwischen Produkten von verschiedenen Herstellern uneinheitliche Informationen, Bezeichnungen, Abkürzungen usw.
  • Ein Bestellvorgang, bei dem man durch Länge und Komplexität den Eindruck bekommt, dass der Kunde eher davon abgehalten werden soll, eine Bestellung aufzugeben.
  • Überraschende Zusatzkosten, die erst ganz am Ende des Bestellvorgangs angezeigt werden.
  • Zahlungsmöglichkeiten, die deinem Kunden nur ermöglichen, in Vorleistung zu gehen, statt dann zu zahlen, wenn das Produkt eingetroffen ist.

Was ebenfalls ganz häufig falsch gemacht wird: Wenn dein Kunde in der Searchbar etwas eingibt, dann muss er ohne Wenn und Aber nur passende Produkte angezeigt bekommen. Nicht irgendwelche Dinge. Achte deshalb wirklich peinlich genau darauf, die dahinterstehenden Schlagwörter und Verlinkungen mit ständiger Präzision zu pflegen.

Die eigene App

Ein Tablet wird von einer älteren Person gehalten, man sieht die verfügbaren Apps

Apps können in der Tat einen Internetauftritt extrem aufwerten. Ob sie sich jedoch auch finanziell rentieren, steht auf einem anderen Blatt. (Image credit: (stock.adobe.com © Andrey Popov))

Je nachdem, an welche Zielgruppe du dich genau richtest, dürfte die krasse Mehrheit ausschließlich vom Smartphone aus im Netz unterwegs sein. Smartphones beziehungsweise artverwandte Mobilgeräte bedeuten in diesem Zusammenhang folgendes:

  • Lediglich zwei relevante Betriebssysteme, iOS und Android.
  • Die Möglichkeit, durch Apps manches besser zu machen als es ein Browser ermöglicht – weil es deutlich mehr (mobile) Browser als Betriebssysteme gibt.
  • Das Umgehen sämtlicher Suchmaschinen und sogar mancher Blocker in Sachen Cookies und anderer Dinge, die für dich als Website-Betreiber wichtig oder interessant sein können.
  • Erleichtertes Implementieren von zusätzlichen Funktionen, weil die App auf praktisch alle Baugruppen des Geräts zugreifen darf, sofern der User dem zugestimmt hat.
  • Verwendung selbst ohne bestehende Internetverbindung, sofern es sich um eine native App handelt – also eine, bei der alle relevanten Inhalte und Funktionen mit-installiert werden.
  • Ein unbestechliches Messen deiner User-Zahlen in absoluten Werten statt durch irgendwelche anderen, vagen Statistiken.

Hierin findest du die Gründe, warum praktisch jede irgendwie relevante Website (auch) eine eigene App besitzt. Und es sind starke Gründe. Denn eine App ist praktisch eine Website auf Zaubertrank: Sie kann viel, viel mehr, erlaubt sowohl dir wie den Usern ein ungleich umfassenderes Erlebnis.

Dem gegenüber stehen jedoch andere Punkte, die du unbedingt bedenken musst:

  • Die allermeisten User beziehen ihre Apps von offiziellen Stores, also wahlweise von Apple oder Google. Das heißt, du musst deren Kriterien erfüllen und außerdem unterliegst du selbst dort einem gewissen Ranking-System.
  • Es gibt zwar auch Baukästen für Apps. Diese sind aber (noch) nicht so leistungsfähig wie solche für Websites. Um eine wirklich einzigartige App zu erstellen, die deutlich funktionaler als eine Website ist, kommst du deshalb nicht ums Programmieren (-lassen) herum.
  • Wenn ein User deine App installiert, musst du dich darauf verlassen, dass er sie immer wieder benutzt, wenn er etwas aus deinem Portfolio benötigt. Im Netz über den Weg der Suchmaschinen kannst du deutlich leichter dafür sorgen, dass deine Site immer wieder weit vorne angezeigt wird.
  • Wenn deine App keinen echten Mehrwert bietet, gehört sie zu denjenigen Programmen, die als erstes beim regelmäßigen Aufräumen vom Handy gelöscht werden.

Das heißt, eine eigene App ist ein durchaus zweischneidiges Schwert. Ob du eine benötigst, hängt im höchsten Maß davon ab, wie groß und bedeutsam dein Internetauftritt ist und was du überhaupt offerierst.

Für eine kleine Site lohnt sich der Weg höchstwahrscheinlich nicht. Dafür ist dann die Kosten-Nutzen-Rechnung einfach nicht vorteilhaft genug. Und wenn du dich für diesen Weg entscheidest, dann sorge unbedingt dafür, dass deine App wirklich nativ oder zumindest hybrid aufgebaut ist.

Eine reine Web App ist kaum mehr als ein auf dem Gerät installiertes Lesezeichen und bietet daher kaum Mehrwert zum Aufrufen einer herkömmlichen Website.

Fazit

Wenn du heute im Web präsent sein möchtest, dann musst du dabei vor allem beachten, dass wir uns mit Volldampf in Richtung einer weitgehend mobilen Internetwelt bewegen.

Die Zeiten, in denen man sich darauf verlassen konnte, dass die meisten Besucher per Desktop-Rechner oder Laptop zugriffen, sind schon lange und vor allem für immer vorbei.

Das heißt, dieser „mobile Leitgedanke“ muss über allem anderen stehen. Das bedeutet aber, dass du selbst bei allem Wunsch nach Eigenständigkeit immer Dinge beachten musst, die einfach in dieser mobilen Welt als Standard gelten – ganz gleich, wie sehr es dir widerstreben mag oder es deinen Wunsch nach Eigenständigkeit einschränkt.

Dafür kannst du bei einem wirklich gut gestalteten Auftritt aber sicher sein, dass theoretisch die ganze Welt zu deinem Besucher werden kann – ganz gleich, ob sie vom Smartphone, der Smartwatch, dem Fernseher oder dem E-Book-Reader auf deine Seiten zugreift.