Eine moderne Website ist so etwas wie die Eier-legende Woll-Milch-Sau. Sie soll am besten alles können, super aussehen, fantastisch konvertieren und am besten nichts kosten. Dass so etwas nicht ohne Zeitaufwand und auch nicht gratis funktioniert, habe ich bereits beschrieben.  Hier geht es mir aber um die Frage: 

Welche Funktionen sind für eine moderne Website wirklich unverzichtbar?

Die wichtigsten davon: Responsive Webdesign, ein CMS zur Verwaltung, HTML5 und CSS3 als strukturelle Basis, SSL-Hosting, eine eingebundene Analytics-Lösung, ein modularer Aufbau und nicht zuletzt Inhalte, die alle rechtlichen Voraussetzungen erfüllen.

21 unverzichtbare Funktionen einer modernen Website

Nicht alles davon bedeutet Funktionalität auf der selben Ebene, aber alle diese Punkte und auch die weiteren, die im Folgenden noch aufgelistet sind, müssen vorhanden sein und (am besten korrekt) funktionieren.

Manche der folgenden Punkte treffen zwar nicht gleich auf jede Website zu, können aber im Laufe der Zeit relevant werden, wenn sich die Ziele oder Eigentümer der Website ändern. Jetzt also zu den einzelnen Punkten im Detail und auch zu jenen, die in der Auswahl oben ausgelassen wurden.

Responsive Webdesign

Das WWW wird immer mobiler. Das soll bedeuten, dass sich immer mehr Menschen, und auch immer öfter, die Inhalte von Websites auf ihrem Smartphone oder Tablet ansehen. Weltweit sind die mobilen Zugriffe auf Websites gegenüber jenen vom Desktop aus bereits in der Überzahl. 

Wie erreiche ich responsive Webdesign?

Das bedeutet also, dass sich die angesehene Website auf verschiedensten Geräten, und somit auch verschieden großen Bildschirmen, geeignet präsentieren sollte. Es ist fast ausnahmslos zumindest unpraktisch, wenn nicht unmöglich, die Desktop-Version einer Website auf dem Smartphone zu verwenden.

Als Websitebetreiber ist mir persönlich responsive Design schon länger wichtig; damit bin ich aber nicht allein. Manchmal kann es unklar sein, wie man eigentlich zu einer Website kommt, die responsive reagiert und funktioniert. Mehr dazu habe ich in meinem Artikel Wie erreiche ich responsive Webdesign? zusammengeschrieben.

Hier soll aber hauptsächlich betont werden, dass diese Funktionalität für jede moderne Website Pflicht ist. Ein wichtiger Hinweis dabei: Es geht dabei tatsächlich auch um sich anpassende Funktionalität und nicht nur um das Aussehen. Was auf einer Plattform absolut intuitiv sein kann (z.B. ein dauerhaft sichtbares Menü an einer Seite der Desktop-Version), kann unter Umständen auf dem Smartphone nicht nur wertvollen Platz verschwenden: Es kann auch der Nutzung der Website im Weg sein, weil wir eben gewohnt sind, Websites auf dem Smartphone anders zu erkunden als auf dem Desktop PC. 

CMS (einfache Bedienung und leichtes Ändern der Inhalte ohne Programmier-Kenntnisse)

Ein Teil des Menüs im WordPress-Dashboard

Ein Teil des Menüs im WordPress-Dashboard

Ein Content-Management-System ist heutzutage ein Standard, der Websites für viel mehr Menschen zugänglich macht als nur jene, die wissen, wie man HTML-Code schreibt. Dadurch braucht man auch keinen Spezialisten mehr, wenn man für Firma oder Verein oder ein Hobby eine eigene Website aufsetzen will.

Wie immer gibt es Varianten und man erhält auch von so mancher Internet-Agentur ein eigens programmiertes CMS. Am besten eignen sich jedoch die großen open-source CMS wie WordPress oder Typo3. Diese sind nicht nur kostenlos benutzbar, sondern man kann darauf vertrauen, dass sie das auch in der Zukunft bleiben und durch die große Community an Entwicklern und Nutzern auf moderne Trends unmittelbar reagiert wird.

Ein Beispiel ist das bereits genannte responsive Webdesign, um das man sich nach der Wahl eines geeigneten CMS nicht mehr kümmern muss, weil es bereits eingebaut ist. Auch einige der nachfolgenden Punkte erledigen sich von selbst, wenn man z.B. WordPress benutzt.

Eine einfache Bedienung setzt dabei zwar eine gewisse Vertrautheit mit ein paar Begriffen des WWW voraus, man kann sich aber in kurzer Zeit schlau genug machen, um per WordPress an der eigenen Website arbeiten, Inhalte ändern und hinzufügen sowie die nötigsten Einstellungen vornehmen zu können.

HTML5 und CSS3 als strukturelle Basis für die Website

Was genau soll das bedeuten? HTML war und ist schon immer die strukturelle Basis für Websites gewesen. Es gab allerdings auch bestimmte Trends, die versuchten, Funktionalität, die es so einfach in früheren Versionen von HTML nicht gegeben hat, ins WWW zu bringen.

Dazu gehören z.B. Flash-Elemente, die einen entsprechenden Player oder ein Browser-Plugin von Adobe benötigen, um zu funktionieren. Abgesehen von den Sicherheitslücken, die sich durch diese Player und Plugins ergeben haben, wird Flash nicht von allen Plattformen unterstützt (z.B. auf dem iPhone von Apple). 

Insgesamt hat sich die Verwendung von Flash aber bereits dadurch überholt, dass prominente durch Flash-Elemente bereitgestellte Funktionalität in HTML5 direkt zur Verfügung steht. Beispiele dafür sind Animationen von Elementen auf der Website oder das Abspielen von Videos.

SSL-Hosting und Unterstützung

Das WWW bewegt sich aufgrund verschiedener Initiativen in Richtung Sicherheit. Ein Teil davon betrifft die Sicherheit der Verbindung vom Browser zur Website. Ist eine Website SSL-gehostet, dann kann man sie nicht nur über http://, sondern auch über https:// erreichen. 

Das ist bei CMS schon alleine deshalb wichtig, weil man sich zur Arbeit an der Website mit Benutzernamen und Passwort einloggen muss. Wenn das über eine ungesicherte Verbindung erfolgt, besteht immer die Gefahr, dass die unverschlüsselte Übertragung “mitgelesen” wird.

https://

Aber auch Browser haben in den vergangenen Monaten verstärkt damit begonnen, Websites, die nicht über https:// erreichbar sind, als “unsicher” zu kennzeichnen. Das ist natürlich ein gewaltiger Nachteil, weil es beim Besucher zumindest Unbehagen auslöst. Dem SSL-Hosting gehört also die Zukunft.

Rechtliche Voraussetzungen

Für Websitebetreiber gelten einige rechtliche Vorschriften, insbesondere dann, wenn es sich um Firmen handelt. Die Standard-Inhalte, um die man sich kümmern sollte, sind ein Impressum und eine Datenschutzerklärung. Mit der Bereitstellung der Inhalte ist es allerdings nicht getan.

Vor allem bei der Umsetzung der DSGVO der Europäischen Union gilt es ein paar Dinge zu beachten, die auch Funktionalität erfordern. Dazu gehört, dass Website-Besucher über bestimmte Dinge informiert werden müssen, bevor diese Dinge passieren. Dazu gehört unter anderem die Sammlung personenbezogener Daten.

Nehmen wir also an, dass ein Besucher eine Website ansehen will, auf der personenbezogene Daten gesammelt werden. Solche Daten können schon durch die erste Interaktion des Besuchers mit der Website erzeugt werden, nämlich dann, wenn eine einigermaßen detaillierte Verhaltens-Tracking-Software eingesetzt wird. 

Dann muss man als Websitebetreiber den Besucher praktisch bereits in dem Moment über alles informieren, in dem sich zum ersten Mal die Website für den Besucher aufbaut. Dafür verwendet man jene netten Banner, die sich inzwischen fast überall beim ersten Besuch einer Website zeigen und erst durch einen Bestätigungsklick wieder verschwinden.

Dabei geht es dann darum, die Datenschutzerklärung, Cookie-Policy, AGB und was weiß ich was noch alles zuerst zu lesen und dann erst weiter mit der Website zu interagieren. Ob das sinn- oder zweckmäßig ist, ist eine ganz eigene Diskussion. Fest steht aber, dass es diese Art von Funktionalität aus rechtlicher Sicht braucht.

Die Website sollte auch für Besucher funktionieren, die Werbung oder Cookies blockieren

Ich gehöre auch zu jenen Surfern im WWW, die von vornherein lieber Dinge auf unbekannten Websites blockieren als gleich alles zuzulassen. Die bekanntesten Beispiele für solches Blockieren sind bei den meisten Menschen Werbung, Cookies und Javascript. So eine Einstellung ist durchaus legitim, wenn man bedenkt, dass man auf unbekannten Websites einiges an unbekannten Überraschungen erleben kann. 

Was mich persönlich oft angenehm überrascht, ist, wie übersichtlich manche Websites plötzlich ohne Werbung aussehen. Bei manchen Extrembeispielen geht das so weit, dass man die eigentlichen Inhalte zwischen den diversen Werbebannern und Einblendungen schon suchen muss. Aber das ist eine andere Geschichte.

Was die Funktionalität betrifft, sollte man jedenfalls sicherstellen, dass die eigene Website nicht völlig auseinander bricht, wenn ein Besucher Werbung (eher kein Problem), Cookies (schon eher ein mögliches Problem) oder Javascript (teilweise ein ziemlich großes Problem) blockiert.

Was muss man bei der Verwendung von Cookies aus Sicht der Funktionalität beachten?

Eine Website kann aufgrund schlechter Cookie-Programmierung nicht angezeigt werden.

Da kann es nämlich passieren, dass eine Website in einen Endlos-Loop, also ein ständiges Neuladen oder Weiterleiten, verfällt, wenn Cookies blockiert sind. Oder man hat eine ganzseitige Überblendung, die einen auffordert, Cookies zu akzeptieren; wenn man diese weg klickt, erscheint sie nach einer Zehntelsekunde wieder, um nochmals komplett die Sicht zu blockieren. 

Ich denke, so etwas ist durchaus problematisch. Soweit ich mich über diese Problematik informiert habe, muss man nicht nur dem Besucher die Entscheidung überlassen, ob er die Verwendung von Cookies akzeptiert oder nicht, sondern auch zeigen, wie Cookies deaktiviert werden können.

Schon klar: Wenn jemand meine Website nicht zu meinen Bedingungen sehen will, dann braucht er das auch nicht zu tun. Man muss sich als Websitebetreiber aber nicht absichtlich dumm stellen und die Leute vergraulen, oder?

Analytics (idealerweise Google-Analytics-Integration)

Jeder Websitebetreiber sollte für die eigene Website Ziele definiert haben. Na gut, wenigstens ein Ziel. Wie weiß ich, ob ich meine gesteckten Ziele erreicht habe? Indem ich nachmesse, genau. Und wie misst man die Erreichung von Zielen auf einer Website? Mit einer Analytics-Lösung.

Google-Analytics Zugriffsstatistik

Soweit, so gut. Google Analytics ist hier ein de-facto Standard für Websites. Analytics gibt es auch von anderen Anbietern. Dabei reicht die Palette von Statistiken über Seiten-Aufrufe bis zum Besucherverhalten auf jeder einzelnen Seite im Detail: wie schnell gescrollt wird, wo sich der Mauszeiger befindet, das ganze Programm.

Hier muss man sich eben ansehen, wie weit die eigenen Ansprüche gehen. Ganz ohne Analytics ist der Betrieb einer Website allerdings ein ziemlicher Blindflug, wenn man sich einmal fragt, was da eigentlich genau passiert und warum.

Vernetzung mit externen Informationsquellen

Das moderne WWW bietet viele verschiedene Möglichkeiten, die eigene Website mit Informationen von externen Quellen zu bereichern. Ob das eine interaktive Karte der Umgebung meines Geschäfts mit Anfahrtsplaner ist oder aktuelle Börsenkurse – der Fantasie sind praktisch keine Grenzen gesetzt.

Ob die eigene Website von solchen Dingen profitiert oder nicht, hängt zwar davon ab, worum es geht; man sollte sich allerdings auf jeden Fall die Möglichkeiten ansehen und passende Lösungen integrieren.

Social Sharing Buttons

Social-Sharing Buttons auf WebsiteBerater.com

Heutzutage geht es sehr schnell, wenn eine Nachricht, ein Bild oder ein Video die Welt über soziale Medien im Sturm erobern (Stichwort: “going viral”). Das kann auch mit den Inhalten einer Website passieren, wenn sie ein brennendes Problem vieler Menschen lösen oder ansprechen.

Aber selbst, wenn es um eine etwas begrenztere Verbreitung geht, ist das Einbinden von Buttons zum Teilen der eigenen Inhalte in sozialen Medien eigentlich unverzichtbar. Auch diese Funktionalität findet sich z.B. in CMS recht einfach über geeignete Plugins (zum Thema Plugins gleich noch mehr).

Social Embedding

Ebenso interessant wie die Möglichkeit, dass andere die eigenen Inhalte in sozialen Medien teilen können, ist es, Inhalte aus sozialen Medien einfach und schnell einbinden (embedding) zu können.

Das könnten z.B. Nachrichten über Twitter sein, Style-Beispiele über Instagram, Videos über YouTube und viele weitere mehr. Auch hier kann man beim Benutzen eines CMS wie etwa WordPress ganz einfach im Editor den Link zum gewünschten Medium auf eine der eigenen Seiten kopieren, kurz warten und schon wird der eingebettete bzw. eingebundene Inhalt direkt an der verwendeten Stelle angezeigt.

Der Vorteil des Einbindens gegenüber einem Link, der von der eigenen Website wegführt, liegt auf der Hand: Die Besucher bleiben länger auf der eigenen Website, statt bei erster Gelegenheit zu Twitter oder Facebook zu verschwinden und dort weiter zu surfen.

Barrierefreie Aufbereitung der Information

Die Informationen auf einer modernen Website sollten prinzipiell barrierefrei aufbereitet sein. Das kann in letzter Konsequenz bedeuten, CSS-Anweisungen in separaten Stylesheets für wirklich alle Ausgabemöglichkeiten zu haben.

Spracheingabe beim Email-Schreiben auf dem iPhone

Spracheingabe beim Email-Schreiben auf dem iPhone

Als Anfang sollte man allerdings zumindest darauf achten, dass es für Bilder oder andere nicht-Text-Medien eine geeignete alternative Beschreibung gibt. Dadurch kann man sich zumindest, auch ohne z.B. ein Bild zu sehen, sich wenigstens die Beschreibung des Bildes vorlesen lassen.

Ein wichtiger Faktor bei solchen Überlegungen ist auch der Vormarsch von Sprach-Ein- und Ausgabe. Diese Funktionalität verwenden viele Menschen z.B. am Smartphone in Situationen, in denen sie ihre Aufmerksamkeit für etwas anderes brauchen oder keine Hand für die Bedienung frei haben.

Ohne entsprechende Funktionalität sieht es für eine Website schon bald nachteilig aus. Insbesondere Geräte, die noch kompakter als Smartphones sind, können hier bei der Vorstellung helfen. Beispiele dafür sind Smartwatches oder Brillen mit augmented-reality-Funktionen.

Dynamisch erzeugte Inhalte

Die Inhalte einer Website werden grundsätzlich als HTML-Dateien vom Webserver an den Browser übertragen und mittels CSS-Anweisungen dargestellt. Wie kann man aber erreichen, dass die Website mit dem Benutzer interagieren kann, z.B. auf die Eingaben des Benutzers reagiert? Muss man dafür wirklich alles neu laden? Und woher kommt der Unterschied in der Darstellung?

Die Antwort auf diese Frage sind dynamisch erzeugte Inhalte. Diese Inhalte sind zwar nach wie vor in HTML und CSS bereitgestellt, werden jedoch durch sogenannte Skripte je nach Situation verändert. Für Skripte gibt es dabei zwei Möglichkeiten: Entweder sie laufen auf dem Webserver oder im Browser (im sogenannten Client).

Server-Side Scripting

Skripte auf dem Server (server-side scripting) können in verschiedenen Sprachen laufen; am gebräuchlichsten dafür ist heutzutage PHP. Skripte auf dem Server haben den Vorteil, dass sie unter der Kontrolle des Website-Betreibers stehen. Man kennt also z.B. die installierte Version von PHP, weiß, welche Datenbank im Hintergrund läuft und muss sich nicht darum kümmern, welchen Browser jeder einzelne Besucher der eigenen Website benutzt, denn das Resultat der Skripte ist am Ende immer eine HTML-Datei.

Ein Nachteil bei Skripten auf dem Server ist, dass es recht lange dauern kann, bis eine Anfrage vom Besucher zum Server geschickt wird, dort verarbeitet wird und dann wieder zum Besucher zurückgeschickt wird und für ihn sichtbar ist. Deshalb kann man auch direkt im Browser des Besuchers Skripte ausführen lassen.

Client-Side Scripting

Der Vorteil dieses sogenannten client-side scriptings ist, dass der Besucher in Echtzeit mit den HTML-Seiten interagieren kann, weil der zugehörige Skript-Code bereits mitgeliefert und vom Browser geladen wurde. Die bevorzugte Skriptsprache für diese Anwendungen heißt Javascript (JS).

Der Hauptnachteil bei dieser Art von Skripten und dadurch für jede Funktionalität, die so erreicht wird, ist, dass jeder Browser unterschiedliche Umsetzungen für Javascript haben kann und noch dazu jeder Benutzer eines Browsers Javascript teilweise oder vollständig blockieren kann.

Dadurch ist von vornherein nicht klar, ob eine bestimmte Funktion, die man über JS erzeugt hat, auch wirklich bei allen Besuchern der eigenen Website korrekt oder überhaupt funktioniert. Um das sicher zu stellen, braucht es dann geeignete Hinweise auf die Notwendigkeit von JS für die Darstellung oder Interaktion mit der Website. Bringt man so einen Hinweis nicht an, riskiert man ein sehr schlechtes und enttäuschendes Besucher-Erlebnis auf der eigenen Website.

Interaktive Elemente für direkten Kundenvorteil

QR Code www.websiteberater.com URL

QR Code für die URL www.websiteberater.com

Solche Elemente geben dem Kunden die Möglichkeit, Dinge schnell und einfach zu tun, für die man sonst noch etwas anderes bräuchte (z.B. einen Anruf, einen Gang zu einer Behörde, etc.).

Beispiele können so unmittelbar sein wie etwa einen QR-Code der eigenen vCard, also der gesammelten Kontaktinformationen, bereitzustellen, sodass man nicht alles noch extra eintippen und speichern muss. Es gibt Buttons für die Website, die direkt eine gewünschte Telefonnummer für den Anruf am Mobiltelefon aktivieren.

Etwas komplizierter sind die üblichen Kontaktformulare, durch die man z.B. eine Support-Anfrage stellen kann oder ein Buchungssystem, dass man bequem von zu Hause aus benutzt, anstatt zu einer Agentur zu gehen.

Interaktive Elemente für Kunden-Engagement

Eine etwas andere Intention steckt hinter interaktiven Elementen, die den Besucher der eigenen Website dazu bewegen sollen, Informationen herauszugeben, mit der eigenen Marke zu interagieren oder ähnliches. 

Die bekanntesten Beispiele sind Kommentare in jeglicher Form auf Foren oder Blogs, Online-Umfragen oder Chat-Funktionen.

Möglichkeiten zur Bereitstellung von Produkten für Kunden direkt auf der Website

Dieser Punkt mag zwar nicht für alle Websites unmittelbar relevant erscheinen, aber eine Datei zum Download bereitzustellen kommt eigentlich fast immer irgendwie vor. Ganz grob betrachtet fällt sogar der Download von AGB oder Datenschutzinformationen als pdf in diese Kategorie.

Der Fantasie sind allerdings auch hier keine Grenzen gesetzt. Auf Websites können Info-Produkte, e-Books, oder Fotos (z.B. in voller Auflösung oder ohne Wasserzeichen) über einen geschützten Bereich der Website zum Download bereitgestellt werden.

Oder man braucht vielleicht einen zugangsbeschränkten Videobereich für Kurse, macht Webinars über einen Streaming-Dienst, oder betreibt den fast schon allgegenwärtigen Webshop.

Möglichkeit für Firmen-internen Bereich der Website

In größeren Firmen oder Organisationen kann es sinnvoll sein, ein Intranet, also einen nur Mitarbeitern per Benutzername und Passwort zugänglichen Bereich der Website, für interne Schulungen, die Verwaltung, oder als Kollaborationsplattform zur Verfügung zu stellen.

Auch diese Möglichkeit bietet sich über CMS recht einfach. Hier punktet vor allem das für diesen Einsatzbereich optimierte Typo3.

Modularer Aufbau für erweiterbare Funktionalität

Warum kann ich bei WordPress keine Plugins installieren?

An eine moderne Website werden viele Anforderungen gestellt. Nicht alle davon kennt man allerdings bereits beim Start der Website. Daher ist es wichtig, einen modularen Aufbau der Website-Struktur anzulegen, damit bei Bedarf zusätzliche Funktionalität problemlos dazu geschaltet werden kann.

In CMS ist dieses Prinzip durch eine Kern-Installation realisiert, die durch sogenannte Plugins um zusätzliche Funktionen erweitert werden kann. Das geht z.B. in WordPress ganz einfach mit zwei Klicks: Installieren und Aktivieren. Ein weiterer Vorteil von WordPress in dieser Hinsicht ist die Vielfalt an Zusatzfunktionen und Plugins, die eine solche erreichen.

Sollte es beim Installieren von Plugins in WordPress Probleme geben, hilft vielleicht mein Artikel Warum kann ich bei WordPress keine Plugins installieren?

Klares, übersichtliches Design

Design ist zwar ein strittiges Thema und dazu gibt es unübersichtlich viel zu lesen, aber eins ist bei der Nutzung einer modernen Website klar: Man sollte die Botschaft der Website betonen und die nötigen Informationen bereitstellen, dabei aber auf Übersicht in der Bedienung und Navigation achten. 

Außerdem gilt: Information ist zwar gut, aber dazwischen muss man auch mal Luft holen können. Das Stichwort dazu ist der sogenannte Whitespace, also der Raum zwischen den Informationsblöcken.

Structured Data und eine gute Basis für SEO

Suchmaschinen verwenden immer öfter strukturierte Daten zur Präsentation von Suchergebnissen. Dabei extrahiert die Suchmaschine solche Daten direkt aus der Struktur einer Seite. Man kann allerdings auch geeignete Informationen bereits selbst als strukturierte Daten auf einer Seite einbinden.

An der Suchmaschinen-Optimierung (SEO für das englische “search-engine optimization”) kommt heutzutage kein Websitebetreiber mehr vorbei, der über die Suche im WWW gefunden werden will. 

Wie man die eigene Website für Suchmaschinen optimiert, ist hinreichend kompliziert, aber es gibt ein paar einfache Grundsätze, die als gute Basis dienen können. Die Inhalte sollten per HTML-Element-Auswahl gut strukturiert sein und für den Besucher hilfreiche und relevante Informationen bringen.

Kleiner Tipp: Einige Suchmaschinen untersuchen (“indizieren”) Websites inzwischen so, dass sie dafür die mobile Version der Seite verwenden. Dort sollte also in erster Linie die Struktur und die Information zu den gesteckten Zielen passen. Hat man sich um responsive Webdesign gekümmert, dann wird dieser Punkt allerdings nicht allzu viel Kopfzerbrechen bereiten.

Rascher Seitenaufbau

Dieser Punkt gehört zwar hauptsächlich zur Frage der Infrastruktur für eine Website, ist aber auch als wichtige Funktion der Website anzusehen. Wenn die Seiten nicht schnell genug geladen werden, helfen der beste Inhalt, die schönste Präsentation, die konsequenteste Struktur und ein Arsenal von Zusatzfunktionen gar nichts. Denn niemand wird die Website zu Gesicht bekommen.

Unverzichtbare Funktionen einer modernen Website: Infografik und Fazit

Mit allen Möglichkeiten und Notwendigkeiten, die ich hier beschrieben habe, kann man sich getrost an die Erstellung der eigenen Website wagen. Einige Fragen in diesem Zusammenhang habe ich schon in anderen Artikeln beleuchtet, die Sie ebenfalls interessieren könnten: Wieviel Zeit braucht das Website-Erstellen?, 5 kritische erste Schritte beim Website-Erstellen, Worauf muss ich beim Kauf einer Premium-Domain achten? oder 15 Profi-Tipps für den Vergleich von WordPress-Hosting. Ich wünsche jedenfalls viel Erfolg mit der eigenen Website!

Hier nochmal die wichtigsten Funktionen, zusammengefasst in einer Infografik:

Unverzichtbare Funktionen einer modernen Website: Infografik

Pin It on Pinterest