Professionelle Website erstellen | Theorie und Praxis

Professionelle Website – Seite 2: Spezielle Funktionen, Formulare, Bilder

Spezielle Funktionen / Plugins

Da in die Vorlagen viele Funktionen schon automatisch integriert sind und sie per Drag & Drop einfach einzufügen sind, verführt das dazu, sich nicht mit den Konsequenzen zu beschäftigen. In fast allen Angeboten für eine professionelle Website findest du einige Optionen, die du in der EU aufgrund rechtlicher Probleme nur modifiziert oder besser gar nicht verwenden solltest/darfst.

Neben dem bereits oben erwähnten CDN handelt es sich meistens um Analyse- und / oder Marketing-Verknüpfungen.

Übersichtliche Analytics: Mit dem integrierten Analyse-Tool zu Besucherzahlen und weiteren Statistiken optimieren Sie Ihre Website gezielt.
Wächst mit: Ihre Ziele werden größer? Prima! Erweitern Sie MyWebsite einfach um Marketing-Tools oder einen Onlineshop.
Quelle: IONOS

Sieh dir die Einstellungen und Plug-ins im Bearbeitungsbereich deiner Website an und schalte diese Funktionen aus. Falls du unsicher bist oder das Deaktivieren nicht möglich sein sollte, kontaktiere diesbezüglich deinen Anbieter. Sollte er auf einer automatischen Einbindung bestehen, muss du ein Cookie Consent Tool aktivieren und entsprechend anpassen (s. Cookies). Aber auch dann sollte dir bewusst sein, dass du dich im Falle einer Datenübertragung in Nicht-EU-Länder oder die USA (z. B. von Google Diensten) rechtlich in einer Grauzone bewegst.

Professionelle Website mit Diensten von US-Anbietern

Google, das hier als Beispiel für alle Anbieter aus Nicht-EU-Ländern dienen soll, ist ein US-Unternehmen mit zugegebener Maßen recht nützlichen und anwenderfreundlichen Services. Zwar stehen deren Server unter anderem auch in der EU und das Unternehmen hat (auch) einen Firmensitz in Irland. Trotzdem kann eine Datenübertragung in die USA weder vertraglich wirksam ausgeschlossen noch tatsächlich verhindert werden. Insbesondere die über Google Analytics erfassten Daten (oft schon vom Hoster aktiviert) können entgegen aller Behauptungen nicht vollkommen oder nur mit speziellen Programmierkenntnissen wirksam anonymisiert werden.

Außerdem werden immer Tracking Cookies von Google bzw. anderen genutzten, externen Services dieser Art auf deiner Website gesetzt. Dies gilt in besonderem Maße für das Marketing mittels (z.B. Google-Ads, …). Gemäß der aktuellen Rechtslage dürfen solche Dienste in der EU nur unter bestimmten Voraussetzungen verwendet werden. Die folgenden Erläuterungen zu einzelnen Funktionen gelten ebenfalls nicht nur für Google, sondern für alle vergleichbaren Dienste von Anbietern außerhalb der EU.

Beliebte Google Dienste

Weit verbreitet ist auch die Meinung, in eine professionelle Website müssten Dienste wie Google Maps oder YouTube, integriert sein. Per Drag & Drop lässt sich ein Kartenausschnitt mit deinem Standort bzw. das Startbild eines Videos einfügen. So bequem das sein mag, du bettest auf diesem Weg (oft ohne es zu wissen) einen Code von Google ein.

So öffnet sich zwar nach einem Klick sofort der passende Kartenausschnitt bzw. das Video startet. Dabei werden aber dann auch alle Besucherdaten von deiner Website direkt an Google übertragen. Selbst wenn dein Cookie Consent Tool ordnungsgemäß erstellt ist und funktioniert und du in der Datenschutzerklärung auf diese Dienste hinweist, so ist deren Verwendung trotzdem problematisch. Denn du hast keine Kontrolle darüber, in welchem Umfang und welche Daten von Google gesammelt sowie wie, wo und zu welchem Zweck diese verarbeitet werden.

Verzichte auf das Einbetten dieser Codes / auf das Drag & Drop-Prinzip, wenn du eine professionelle Website erstellst. Rufe stattdessen deinen Standort oder das Video über deinen Browser auf und kopiere den jeweiligen Link. Füge anschließend eine Grafik, ein Foto (Screenshots von Google Maps verbietet Google übrigens ausdrücklich) oder einen Button ein und verlinke auf die jeweiligen Seite (Hyperlink). So erhält Google nur Zugriff auf die Daten, die ein Besucher nach dem Klick direkt auf der Seite des Unternehmens zulässt und kann sie nicht schon auf deiner Website sammeln. Zwar gibt es inzwischen noch andere, rechtssicherere Lösungen, die jedoch bei vielen Vorlagen (noch) nicht vorinstalliert sind, erweiterte Kenntnisse erfordern und auch optisch nicht sehr ansprechend sind.

Google Fonts

Die größte Falle, in die fast alle Betreiber (nicht nur diejenigen, die mit Vorlagen eine professionelle Website erstellen) tappen, sind Google Schriften. Zweifelsohne ist die Auswahl riesig und für jeden Geschmack und Verwendungszweck ist etwas dabei. Dagegen sind die Standardschriften wie Arial oder Times eher langweilig. Außerdem findest du im Anpassungsbereich der Websites eine Liste mit allen einsetzbaren Schriften, ohne dass der Unterschied zwischen Standard- und Google-Schriften erläutert wird. Diesen gibt es jedoch.

Im Gegensatz zu den Standardschriften, die auf den Geräten / in den Browsern bereits vorhanden sind, wird zur Darstellung von Google Fonts eine Verbindung zu Google-Servern aufgebaut. Das bedeutet wiederum, das Daten der Besucher deiner Website an den US-Dienst übermittelt werden. Dasselbe gilt natürlich auch für die (nicht selbst-gehostete) Verwendung von Fonts anderer Anbieter wie beispielsweise Adobe.

In diesem Zusammenhang ist auch das Einholen des Einverständnisses zur Datenübertragung keine Lösung, da die Verbindung bereits hergestellt wird, bevor der Besucher überhaupt die Gelegenheit hat, einer Datenübertragung zuzustimmen. Ohne Schrift gäbe es nichts zu lesen.

Einerseits folgt daraus nicht, dass du Google Fonts grundsätzlich nicht verwenden darfst – nur eben nicht so, wie sie angeboten werden. Die einzige, rechtlich zulässige Möglichkeit für eine professionelle Website ist, die gewünschte/n Schrift/en von der Google Fonts Seite herunterzuladen, auf deinem Server zu installieren, mit deiner Website zu verknüpfen und die Verbindung zu Google zu unterbinden. Danach kannnst du für deine professionelle Website die heruntergeladen Schriften verwenden. Denn dann wird die Schrift von deinem Server geladen, ohne dass eine Verbindung zu Google Servern aufgebaut wird.

Andererseits bedeutet das bezüglich der günstigen Angebote, mit denen sich dieser Beitrag beschäftigt, dass Google Fonts doch tabu sind. Um sie wie oben beschrieben rechtssicher zu nutzen, benötigst du den Zugriff auf deine serverseitig installierten Dateien und musst das Recht haben, diese zu bearbeiten. Des weiteren sind gewisse Programmierkenntnisse notwendig. Infolgedessen bleibt dir nichts anderes übrig, als die in den Vorlagen für deine professionelle Website voreingestellte/n Google Schrift/en durch eine der Standardschriften zu ersetzen.

Soziale Netzwerke

Um auf deinen Internetauftritt und somit auf dein Angebot aufmerksam zu machen, bieten sich die sozialen Medien an. Zu diesem Zweck fügst du in deine professionelle Website sogenannte Social-Media-Buttons (Teilen, Like) ein. In den Vorlagen findest du auch hierfür bereits eine Auswahl an vorprogrammierten Schaltflächen. Meistens sind diese Buttons direkt mit dem betreffenden Netzwerk verknüpft und ermöglichen es diesem, auf deiner Website Tracking-Cookies zu setzen.

Das Verfahren entspricht also in etwa dem bereits für Google Dienste beschriebenen. Da es sich bei den meisten Netzwerken / Messengers wie Facebook, Twitter, WhatsApp, etc. ebenfalls um US-Unternehmen handelt, entspricht auch die Datenschutz-Problematik der für Google beschriebenen. Insbesondere Facebook hat wenig Hemmungen, „deine Besucher“ auch Website-übergreifend zu verfolgen und die erhaltenen Daten zu vermarkten.

Aus diesem Grund müssen Links zu den Netzwerken bzw. Messengers so gestaltet sein, dass von deiner Website keine personenbezogenen Daten übertragen werden. Es darf nur eine Weiterleitung zum Internetportal des Netzwerks stattfinden, wo sich dann die Besucher gezielt einloggen, um deine Inhalte / Links zu teilen.

Professionelle Website mit Formularen

Eine professionelle Website ohne Formulare ist für viele ebenfalls unvorstellbar. In den Vorlagen kannst du diese ebenfalls per Drag & Drop relativ einfach einfügen. Meistens ist auch das Layout schon passend zum Vorlagen-Design gestaltet. Da beispielsweise Kontaktformulare immer der Erfassung von personenbezogenen Daten dienen, musst du wieder die Vorschriften der DSGVO beachten. Unter jedem Formular ist ein Hinweis auf die Datenschutzerklärung verpflichtend (evtl. mit einer Checkbox zur aktiven Einwilligung in die Datenerfassung und -speicherung). Dies ist bei den Vorlagen in der Regel jedoch nicht voreingestellt.

Einfach anzunehmen, dass den Besuchern bei der Nutzung des Formulars klar ist, dass du die eingegebenen Daten speicherst und verarbeitest, entspricht nicht den gesetzlichen Vorgaben.

Darüber hinaus musst du über die Datenerfassung auch in deiner Datenschutzerklärung informieren. Falls du mit Diensten Dritter, z. B. für den Versand eines Newsletters, arbeitest, ist auch die Angabe von deren Namen, Adressen und ein Link zu deren Datenschutzerklärung notwendig. Vermeide die Speicherung und Verarbeitung der Daten auf externen Servern und verzichte vor allem auf Anbieter außerhalb der EU.

SEO

Wenn du eine professionelle Website erstellst und veröffentlichst, möchtest du natürlich, dass diese von den Suchmaschinen indexiert, möglichst weit vorne gelistet und von potentiellen Interessenten gefunden wird. Neben technischen Faktoren spielt dafür auch die Optimierung der Inhalte eine Rolle.

Suchmaschinen werden Ihre Website lieben, denn MyWebsite ist bereits für hohe Sichtbarkeit optimiert und auch schnelle Ladezeiten sind garantiert. Mit hilfreichen Tools wird Suchmaschinenoptimierung (SEO) zum Kinderspiel.
Quelle: IONOS

Ein SEO-Plugin ist dabei sehr hilfreich. Allerdings erledigt dieses seine Aufgabe nicht ganz ohne dein Zutun. So sollte deine professionelle Website aussagekräftige Titel und ansprechende Einleitungen, die auch als Browser-Snippet angezeigt werden (können), enthalten. Wichtig ist ebenfalls ein zum Inhalt passendes Schlüsselwort (keyword, keyphrase), das sofort erkennen lässt, um was es geht und das sowohl im Titel, in weiteren Überschriften, mehrfach im Text als auch in den ALT-Texten (s. u.) der Abbildungen, die auf Baukastenseiten besonders häufig fehlen, erscheint. Gliedere außerdem deine Texte durch Zwischenüberschriften und unterteile sie in relativ kurze Absätze. All dies nimmt dir kein Plugin ab, sondern es kontrolliert nur, ob du deine Seite entsprechend optimiert hast.

Bilder

Gerade Abbildungen haben einen großen Einfluss auf die Performance sowie den Gesamteindruck deines Internetauftritts. Jedoch bringen vor allem Fotos ungeheure Datenmengen mit, was sich negativ auf die Ladezeit auswirkt. Darüber hinaus ist ihre Originalgröße (Breite, Höhe) für eine professionelle Website nicht ideal. Infolgedessen solltest du deine Bilder nicht einfach – wie von den Anbietern angedeutet – im Original hoch laden. Obwohl bei den Vorlagen oft angegeben ist, dass die Bilder beim Hochladen automatisch optimiert werden, verändert das die Datenmenge nur unzureichend.

Achte zunächst auf das Format der Abbildungen. Bei Fotos verwendest du am besten das jp(e)g-, für Grafiken (insbesondere mit Schrift) das png- oder für alle gleich das neuere webP-Format. Dann sieh in den Einstellungen deiner Vorlage nach, welche Standardgrößen vorgegeben sind. Für eine professionelle Website verwendest du das größte aufgeführte Maß (und verdoppelst es für Retina Displays noch). Denn einerseits verringert eine im Voraus vorgenommene, rein optische Verkleinerung (geringere Breite / Höhe) die Datenmenge kaum, sondern kann sie u. U. sogar erhöhen. Andererseits resultiert daraus besonders auf Geräten mit Retina-Display (Apple) oder großen, sehr hoch auflösenden Bildschirmen eine unscharfen Darstellung.

Nachdem du deine Bilder in einem Fotobearbeitungs-Programm an die geeigneten Maße angepasst und mit einem sinnvollen Namen versehen hast, komprimierst du die fertigen Bilder im Browser z. B. bei › tinypng. Dadurch wird die Datenmenge deutlich zu reduzieren, ohne die Qualität der Bilder merkbar zu beeinflussen. Die so optimierten Bilder kannst du nun hochladen und in deine professionelle Website einfügen sowie gegebenenfalls dort dann prozentual verkleinern. Versieh jedes Bild nicht nur mit einer Bildunterschrift und dem Hinweis auf den Rechteinhaber (s. o.), sondern füge auch einen ALT-(Alternativ-)Text hinzu, um eine professionelle Website zu erhalten.

Zwar ist der ALT-Text für Besucher nur sichtbar, falls das Bild nicht angezeigt werden sollte, für Suchmaschinen ist er jedoch von entscheidender Bedeutung. Denn ein Bot / Webcrawler kann keine Bilder betrachten, sondern nur Text lesen. Die Bild-URL sagt ihnen folglich nur, das dort ein Bild ist, aber nicht welchen Bezug es zum Inhalt der Seite hat. Dieses „Nichtwissen“ hat negative Auswirkungen auf die SEO-Bewertung durch die Suchmaschinen und, besonders bei neuen, kleineren oder weniger besuchten Seiten, auf das Ranking. Deshalb sollte im ALT-Text immer kurz beschrieben sein, was auf einer Abbildung zu sehen ist.

Professionelle Website erstellen – Zusammenfassung

Was ist also dran an der Aussage „In drei Schritten zur eigenen, professionellen Website“ – ohne Vorkenntnisse. Sind Webdesigner für das Erstellen professioneller Websites heutzutage wirklich überflüssig? Oder handelt es sich bei den Versprechungen der Anbieter von vorgefertigten Vorlagen, dass jeder eine professionelle Website erstellen kann, um leere Werbeaussagen oder gar um Betrug?

Beides stimmt so pauschal nicht. Die Wahrheit ist nur nicht auf den ersten Blick, das heißt auf den Angebotsseiten, ohne Weiteres erkennbar. Sobald du dich jedoch tiefergehend mit den Angeboten beschäftigst, die Details sowie die Vergleichstabellen der unterschiedlichen Preisklassen genau liest und dich durch FAQs sowie diverse Links klickst, landest du irgendwann auf einer Seite mit Hintergrundinformationen.

Dort erfährst du, › unter welchen Voraussetzungen eine wirklich professionelle Website erstellt werden kann, dass sie auch bei diesen Anbietern ihren Preis hat und dass es eben doch nicht so ganz ohne gewisse Fachkenntnisse und/oder fachliche Hilfe geht. Anders gesagt eignen sich diese Vorlagen allerhöchstens für ein erstes (am besten nicht öffentliches) Herantasten an das Thema Website-Erstellung, aber nicht für eine, nach allen Regeln der Kunst erstellte professionelle Website.

Natürlich kannst du theoretisch auch „als Hobby“ eine professionelle Website erstellen. Wähle, wenn du Erfolg haben willst, jedoch nicht nur einfach das günstigste Hosting-Angebot. Außerdem benötigst du viel Zeit, denn du musst bereit sein, dir zumindest HTML- und CSS-Grundkenntnisse anzueignen und die Grundlagen des modernen (Web-)Designs, der Fotobearbeitung, Texterstellung, etc. zu erlernen. Vor allem aber musst du dich durch die unterschiedlichen gesetzlichen Vorgaben durcharbeiten und diese anschließend auch umsetzen.

Darüber hinaus ist jedem Laien zu empfehlen, sich vorher von einem (unabhängigen) Webdesigner zumindest beraten zu lassen und/oder das Ergebnis überprüfen zu lassen, bevor die Website online geht. Allerdings gibt es inzwischen leider auch in meiner Branche „Profis“, die nur noch oder überwiegend mit Vorlagen arbeiten. Wende dich an einen Dienstleister, der keine vorgefertigten „Modelle“ anbietet, sondern wirklich individuelle Websites erstellen kann und Kenntnisse in allen dafür notwendigen Bereichen hat.

Fazit

Bemerkenswert ist, dass selbst bei den Anbietern der „günstigen Paket-Lösungen“ bei genauerem Nachlesen nicht mehr die Rede davon ist, dass jeder im Handumdrehen ohne jegliche Vorkenntnisse und für kleines Geld eine professionelle Website erstellen kann. Nachdem du diesen Beitrag gelesen hast, dürftest du eigentlich ebenfalls zu der Erkenntnis gelangen – nein, der Beruf des Webdesigners ist noch nicht vom Aussterben bedroht. Sich als zukünftiger Website-Betreiber von (Hoster-unabhängigen) echten Fachleuten beraten zu lassen, kann vor späterem Ärger bewahren.

Der in diesem Beitrag als Beispiel für viele ähnliche Unternehmen genannte Anbieter IONOS fasst es so zusammen:

1. Mit einem entsprechenden finanziellen Budget spart man Zeit und benötigt weniger Know-how;
2. Mit viel eigenem Knowhow und dem entsprechenden finanziellen Budget spart man Zeit;
3. Mit wenig Know-how und geringem finanziellem Budget muss man viel Zeit investieren;

© eb | › Externe Verlinkungen: Dieser Beitrag enthält keine Affiliate-/Partner-Links.