Professionelle Website erstellen | Theorie und Praxis

Teil 2 – Professionelle Website

• Spezielle Funktionen / Plugins
  • Professionelle Website mit Diensten von US-Anbietern
  • Beliebte Google Dienste
  • Google Fonts
  • Soziale Netzwerke
• Professionelle Website mit Formularen
• SEO
  • Bilder
• Professionelle Website erstellen – Zusammenfassung
• Fazit

Spezielle Funktionen / Plug-ins

Da in die Vorlagen viele Funktionen schon automatisch integriert sind und du sie per Drag & Drop einfach einzufügen kannst, 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 oder darfst.

Neben dem bereits oben erwähnten CDN handelt es sich meistens um Analyse- und 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 problematische 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 – siehe auch unter « Cookie-Hinweis. Aber auch dann sollte dir bewusst sein, dass du dich im Falle einer Datenübertragung in Nicht-EU-Länder oder die USA 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, das oft schon vom Hoster aktiviert ist, erfassten Daten können, entgegen aller Behauptungen, nicht vollkommen oder nur mit speziellen Programmierkenntnissen wirksam anonymisiert werden.

Außerdem werden immer Tracking Cookies von Google oder anderen von dir eingesetzten, externen Services dieser Art auf deiner Website gesetzt. Dies gilt in besonderem Maße für das Marketing mittels Google-Ads und ähnlichen Anbietern von Werbung. 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 oder 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 oder das Video startet. Gleichzeitig werden aber auch alle Besucherdaten von deiner Website direkt an Google übertragen. Selbst wenn dein Cookie Consent Tool ordnungsgemäß erstellt ist, 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 mittels 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 mittels 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 nicht vorinstalliert sind, erweiterte Kenntnisse erfordern und auch optisch nicht unbedingt 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 an Fonts 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 und 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 ja nichts zu lesen.

Einerseits folgt daraus nicht, dass du Google Fonts grundsätzlich nicht verwenden darfst – nur eben nicht so, wie sie angeboten werden. Demzufolge hast du für eine professionelle Website zwei, rechtlich zulässige Möglichkeiten. Die erste ist, die gewünschten Schriften von der Google Fonts Seite herunterzuladen, auf deinem Server zu installieren, mit deiner Website zu verknüpfen und die Verbindung zu Google zu unterbinden.

Eine Alternative ist die Installation des Plugins › OMGF, das die auf deiner Website aktiv genutzten Google-Fonts automatisch von Google Servern herunterlädt und in deiner WordPress-Installation speichert. Allerdings solltest du auch hierbei sicherstellen, dass anschließend keine Verbindung zu Google-Servern mehr aufgebaut wird. Bei beiden Methoden kannnst du danach die heruntergeladen Schriften auf deiner professionellen Website 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 bei der ersten Methode den Zugriff auf deine serverseitig installierten Dateien und musst das Recht haben, diese zu bearbeiten. Des Weiteren sind gewisse Programmierkenntnisse notwendig. Doch auch die programmier-technisch einfachere Lösung mittels Plug-in klappt leider nicht bei allen Hosting-Paketen. Infolgedessen bleibt dir nichts anderes übrig, als die in den Vorlagen für deine professionelle Website voreingestellten Google Schriften 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 zum Teilen oder für Likes 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 und Messengers wie Facebook, X, WhatsApp, etc. ebenfalls um US- oder Nicht-EU-Unternehmen handelt, entspricht auch die Datenschutz-Problematik der für Google beschriebenen. Insbesondere Meta hat wenig Hemmungen, deine Besucher auch Website-übergreifend zu verfolgen und die erhaltenen Daten zur Profilerstellung zu nutzen und zu vermarkten.

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

Kein berechtigtes Interesse
Der Ausweg, den Einsatz der oben beschriebenen und ähnlicher Drittanbieter-Dienste durch ein berechtigtes Interesse hinsichtlich der Funktion deiner Website oder der Bedeutung für dein Unternehmen zu legitimieren, entspricht ebenfalls nicht den Vorschriften. Einerseits gibt es beispielsweise für den Einsatz von Fonts, Videos oder Sozialen Netzwerken DSGVO-konforme Lösungen, die keine echte Beeinträchtigung bei der Nutzung deiner Website zur Folge haben. Andererseits gibt es auch beim Marketing rechtlich unproblematischere Optionen.

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. 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 gibt es die Pflicht zur Datenminimierung. Das bedeutet, dass du nur die Daten abfragen darfst, die für den jeweiligen Zwecke unbedingt notwendig sind. Beispielsweise reicht für ein Newsletter-Abonnement die Angabe einer E-Mail-Adresse aus. Zwar könntest du auch nach dem Namen des Abonnenten fragen, dies darf aber kein Pflichtfeld sein, sondern höchstens optional.

Darüber hinaus musst du über die Datenerfassung auch in deiner Datenschutzerklärung informieren. Falls du mit Diensten Dritter, zum Beispiel 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.

DSGVO-konforme Dienste und Plug-ins
Überprüfe jeweils, ob und welche Daten gesammelt sowie wo und von wem sie gespeichert und verarbeitet werden. Passe die Einstellungen von Plug-ins DSGVO-konform an. Binde keine Dienste aus Nicht-EU-Ländern in deine Website ein und kläre deine Besucher detailiert über die Datenerfassung und ihre Rechte auf.

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 Alternativ-Texten 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 Plug-in ab, sondern es kontrolliert nur, ob du deine Seite entsprechend optimiert hast.

Sei nett zu Suchmaschinen
Du schreibst zwar für Menschen, aber ohne Suchmaschinen wird niemand deine Website finden.
– Nutze aussagekräftige Titel und Schlüsselwörter.
– Optimiere deine Bilder und versieh sie mit ALT-Texten.
– Überprüfe deine Seiten und Beiträge mittels eines SEO-Plugins. Versuche dessen Verbesserungsvorschläge, soweit möglich und für deinen Inhalt sinnvoll, umzusetzen, ohne deine Website zu unpersönlich erscheinen zu lassen.

Bilder

Gerade Abbildungen haben einen großen Einfluss auf die Leistung 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 und 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, verringert 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. Das neuseste AVIF-Format ist noch nicht zu empfehlen, da es derzeit nicht von allen Browsern dargestellt werden kann.

Des Weiteren 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 bei Grafiken noch, damit sie auch auf Retina Displays scharf dargestellt werden. Denn einerseits verringert eine im Voraus vorgenommene, rein optische Verkleinerung in Form einer geringere Breite und Höhe die Datenmenge kaum, sondern kann sie manchmal sogar erhöhen. Andererseits resultiert daraus besonders auf Geräten mit Retina-Display 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 – zum Beispiel bei › tinypng. Dadurch wird die Datenmenge deutlich reduziert, ohne die Qualität der Bilder merkbar zu beeinflussen. Die so optimierten Bilder kannst du nun hochladen und in deine professionelle Website einfügen. Solltest du beispielsweise bei einem Spalten-Layout kleinere Bild-Maße benötigen, kannst du sie beim Einfügen noch prozentual verkleinern. Versieh jedes Bild nicht nur mit einer Bildunterschrift und dem Hinweis auf den Rechteinhaber, sondern füge auch einen ALTernativ-Text hinzu, um eine professionelle Website zu erhalten.

Zwar ist der ALT-Text für Besucher nur sichtbar, wenn das Bild nicht angezeigt werden sollte, für Suchmaschinen und Screenreader ist er jedoch von entscheidender Bedeutung. Denn ein Webcrawler oder Bot 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. Besonders bei neuen, kleineren oder weniger besuchten Seiten, resultiert daraus ein schlechteres 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 Website-Vorlagen, 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 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-Designer 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 Webdesigns, der Fotobearbeitung, Texterstellung, etc. zu erlernen. Vor allem aber musst du dich durch die unterschiedlichen gesetzlichen Vorgaben durcharbeiten, solltest die Design-Standards für professionelle Websites wie beispielsweise Berrierefreiheit kennen 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 oder sein Website-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 Webdesign-Dienstleister, der keine oder zumindest nicht ausschließlich 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 immer noch 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.