Webdesign Archive - Fritz’ Blog

Achtung, Abmahnwelle wegen Google Fonts!

Edit vom 3.9.2022: Screenshot der functions.php wegen Elementor Benutzung.

Aktuell (August 2022) gibt es eine Abmahnwelle für Webseitenbetreiber, die Google Fonts einbinden, die nicht selbst gehostet sind, sondern direkt von Google nachgeladen werden.

Ein Font ist die Schriftart, die am Bildschirm/Drucker dargestellt wird. Im Webbrowser gibt es eine recht kleine Zahl von eingebauten/benutzbaren Schriften. Seit vielen Jahren gibt es die Möglichkeit der Webseite, ein Nachladen eines beliebigen Fonts zu ermöglichen um so schönere Schriften anzeigen zu können. Diese Font-Dateien können am Server der Webseite liegen (das ist ok.). Oder aber z.B. von Google nachgeladen werden, das ist auch die von Google vorgeschlagene Methode. Und Google stellt auf fonts.google.com gleich den Code zur Verfügung, den man in den HTML Code einbindet:

<link href="https://fonts.googleapis.com/css2?family=Alumni+Sans+Pinstripe&family=Montserrat: […] rel="stylesheet">

Praktisch, oder? Doch leider ist diese Art der Einbindung ein Verstoss gegen die DSGVO, wenn der Webseitenbesucher nicht VORHER um Erlaubnis gefragt wird und er zugestimmt hat. Also muss ein Cookie-Banner vorhanden sein.

Der Grund ist folgender: Trifft der Browser auf obigen Code, lädt er die Datei(en) vom Google Server und überträgt dadurch Ihre IP-Adresse, welche Webseite gerade besucht wird usw. an ein datenschutzrechtlich unsicheres Land (USA). Und genau dies ist ohne Zustimmung nicht erlaubt. Zudem werden eventuell noch weiter Daten wie Browserkennung usw. übertragen. Einen sehr interessanten und ausführlichen Artikel dazu findest du hier.

Das ist zwar schon länger so, aber im Januar 2022 hat das Landgericht München diese Praxis verboten und dem klagenden Webseitenbesucher € 100 Schadenersatz zugesprochen. Quelle: www.heise.de

Und jetzt flattern bei Webseitenbetreibern Abmahnungen von Rechtsanwälten oder einfach von so random dudes ein, die Geld wollen!

Also, sicherheitshalber die Fonts lokal auf dem eigenen Server speichern und entsprechend einbinden. Für meine Kunden, die aktiv betreut werden, wurde dies bereits erledigt.

Sie können Ihre Seite selbst mit diesem Link testen: https://sicher3.de/google-fonts-checker/

Inzwischen habe ich einen Facebook Post von Strato.de gesehen, welcher auf das Thema eingeht. Die verlinkte Seite erklärt, wie man die Google Fonts lokal in WordPress installiert.

Habe ich mit der Child-Theme-Methode gemacht. Ich bin ja kein WordPress-Profi aber schon Webentwickler mit Verständnis. Das entfernen der Webfonts und die lokale Installation der Fonts hat mich ca. 1 Stunde gekostet. Auf meinen Kundenseiten, die ohne WordPress erstellt wurden, brauche ich dafür ca. 2 Minuten. Das ist ein weiterer Vorteil, wenn man pures HTML/CSS verwendet.

Ich mag WordPress. Nicht!

Hier meine functions.php von child theme, abweichend vom Artikel hab ich noch die Zeile mit „add_filter( ‚elementor/…“ eingefügt. Das ist unbedingt nötig, wenn man jemals auf der Webseite Elementor verwendet hat, sonst wird doch ein Google Font eingebunden.

Der Vorteil dieser Aktion: ich habe jetzt meine Lieblingsschriftart im Blog und Blocksatz mit Silbentrennung, was vorher nicht möglich war. Hier der Auszug aus der styles.css:

Hier noch ein Artikel über das Erstellen des child-themes, zusätzlich zur auf der Strato Seite verlinkten Anleitung: https://www.webtimiser.de/wordpress-child-theme-erstellen/

Du brauchst eine neue Webseite oder willst die Vorhandene verbessern? Dann schau auf meiner Webdesign-Seite vorbei!

Foto von M. Maggs auf Pixabay, Screenshots von mir

Ich bin ein Dinosaurier…

… zumindest wenn ich an Webseiten-Erstellung denke. Heute fiel mir, mich auf dem Bett wälzend, ein ich könnte mal nachsehen, ob es im Internetarchiv alte Seiten von mir gibt. Ja, gibt es. Die ältesten Seiten sind aus dem Jahr 1998. Zu dieser Zeit hatte ich schon so einen Webseiten-Laden namens GrazForYou, ich wohnte damals ja in Graz.

Ich zeige hier die Seiten, die ich gefunden habe. Oft fehlen einige Bilder, diese sind im Webarchiv nicht vorhanden.

Aber erst einmal ein Screenshot meiner Webseite für meine EDV-Beratung auf ganter.at aus dem Jahr 1998.

EDV-Beratung

Ja, damals gab sahen alle Seiten so strange aus. Es gab ja noch kein CSS bzw. keine Browserunterstützung dafür. Die kam erst so richtig gegen 2010.

Jetzt, wo ich die Fax-Nummer sehe: Ich hatte kein Faxgerät sondern eine Fritz ISDN-Karte, die Fax konnte. Das heisst aber auch, Internet hatte ich damals per ISDN, max. 128kBit/s und teuer. Heute habe ich die 2000-fache Geschwindigkeit und billiger. So, weiter im Text:

Man beachte die Logogestaltung. Da hatte ich mir ja richtig Mühe gegeben um das Logo so pixelig wie möglich zu gestalten. Und kann es sein, dass „EDV-Beratung“ in Comic Sans ist? Bitte nicht!

Eine neuere, cooler aussehende Version kam im Jahr 2000, leider ohne Logo:

Links unten ist das animierte Logo meiner Web-Firma, hier animiert:

Für das Logodesign habe ich eine Bekannte beauftragt, ich konnte damals ja kein Photoshop. Ich war begeistert von ihren Fähigkeiten!

Die Webseiten-Bude

Mit GrazForYou bot ich Webseitenerstellung und Hosting an. Das war um 2000 herum, zu dieser Zeit war für einige nicht klar, ob sich dieses Internet durchsetzen würde. Mein Server hatte eine 2Mbit Standleitung, war also schon ziemlich viel für damals. Ich hatte zu der Zeit ein Büro im Arnold-Schwarzenegger-Stadion in Graz. Natürlich gab es in dem Bürokomplex nirgends Internet. Also musst mein Kabelbetreiber extra einige 100m Koaxkabel legen, um mich mit Internet zu versorgen. Hat mich auch einiges gekostet.

Wow! Ein abgerundetes Logo. Abgesehen davon, dass es noch kein CSS gab, um die Seite vernünftig zu gestalten, gab es auch nur wenige Schriftarten, die man verwenden konnte. Im Prinzip nur Times Roman und Arial.

Wenn man also andere, schönere Schriften verwenden wollte, musst man diese als Grafik einbauen. Wie man bei einer Kundenseite schön sieht:

Und jetzt zurück zu ganter.at im Jahre 2001:

An meinem Buch (linke Spalte) schreibe ich übrigens immer noch. Sind jetzt schon ca. 100 Seiten. Hurra!

Am Schluss noch die Version aus 2003, als ich schon in Hamburg arbeitete.

Ganz anderes Thema: Die Sensation

Wisst ihr, was mir beim schreiben bzw. Korrekturlesen aufgefallen ist? Man kann auf dem Mac und auf dem iPhone in den Bildern den Text direkt im Safari-Browser markieren und kopieren. Wie cool ist das denn?

Diese Funktion gibt es schon seit macOS Monterey, nennt sich Live-Text, aber es war immer nur von der Fotos- und Vorschau-App die Rede. Dass dies auch direkt in Safari funktioniert, habe ich noch nirgends gelesen. Hurra!

Konklusion

Damit euch solche Webseiten nicht passieren, kommt zum Webseiten-Fritz und bestellt euch einen schicken Webauftritt!

Was ist SEO und warum brauchst DU es?

SEO ( Search Engine Optimization) steht für Suchmaschinenoptimierung. Bei SEO ist es das Ziel, dass deine Webseite bei Google, Bing und Co. besser gefunden wird. Das Problem dabei: das wollen alle anderen auch.

Deine Webseite wird nicht gefunden, wenn sie bei Google auf Seite 5 steht. Meine Seite Webseiten-fritz.de steht bei Google auf dem ersten Platz, gleich unter den bezahlten Anzeigen.

Ist doch gut, oder? Nein. Auf Platz eins ist meine Seite nur, wenn man bei Google nach „Friedrich Ganter Webdesign“ sucht, was logischerweise nur Leute machen, die mich bereits kennen. Das ist aber nicht das, was man erreichen möchte.

Den zukünftigen Kunden kennen

Also muss man sich überlegen (und am besten noch einige Freunde/Bekannte und mich fragen) wonach ein Kunde suchen würde, der dein Produkt/Dienstleistung kaufen würde.

Angenommen, du möchtest als Scheidungsfotografin gebucht werden. Ich denke, kaum jemand würde nach „Scheidungsfotografin“ suchen, eben wenige Menschen auf diese Idee kommen würden, so etwas buchen zu wollen. Deine Kunden werden eher nach „Scheidung feiern“ oder ähnlichen suchen.

Die Umsetzung

Jetzt ist es wichtig, die Suchbegriffe in der Webseite umzusetzen. Am besten in einer H1 oder zumindest H2 Überschrift. Eine Möglichkeit für die H1 (Haupt-) Überschrift wäre z.B.: „Die Scheidung feiern: mit der Scheidungsfotografin“, dies sollte man auch in den Seitentitel schreiben, weil dieser im Suchergebnis angezeigt wird:

Für „Scheidung feiern“ gibt es aktuell 1,1 Mio. Suchergebnisse, ist also gefragter als „Scheidungsfotografin“ mit aktuell 716 Treffern.

Die Webseite technisch optimieren

Das ist ein Punkt, den dein Webdesigner – also ich – umsetzen muss. Die Seite sollte folgende Punkte erfüllen:

Schnell sein
Frei von HTML/CSS Fehlern
Für Mobilgeräte optimiert
Eine gute Menüstruktur aufweisen
Genug und gute Backlinks haben
Wichtige Suchbegriffe hervorheben (Überschriften, Fettschriften, Seitentitel)
Einbindung / Verlinkung deiner sozialen Medien
User Signale: Google merkt, wenn jemand die Seite schnell verlässt – gar nicht gut!

Backlinks

Das hat jetzt nichts mit Brotbacken zu tun. Backlinks sind einfach Verlinkungen zu Deiner Webseite von anderen Webseiten aus. Wichtig ist dabei der Linktext, daraus leitet Google ab, welches Thema für Deine verlinkende Seite relevant ist. Der Linktext ist der Text, auf den man klickt.

Wäre in Deinem Fall der Linktext z.B. „Die Scheidung feiern: mit der Scheidungsfotografin“, dann ist dies optimal.

Wie man an die Backlinks kommt, verrate ich Dir gerne, wenn Du bei mir gebucht hast. 🙂

Keine Links von Linkfarmen kaufen!

Ganz schlechte Idee. Genau das bemerkt Google und kann dazu führen, dass deine Webseite komplett aus den Suchergebnissen verschwindet. Google-Strafen sind sehr gefürchtet. Don’t do it!

Bildnachweis: Pixabay

Onepager – was ist das?

Vielleicht hast du den Ausdruck im Zusammenhang mit einer Webseite schon gehört. Ein Onepager (dt. Einseiter) bzw. OnePage-Design ist genau das, was der Name verspricht: Eine Webseite, die nur aus einer Seite besteht.

Klingt jetzt irgendwie armselig, ist es aber nicht. Denn die Seite ist lang. Sie kann sogar so richtig lang sein.

Warum macht man sowas? Sie ist einfacher zu navigieren: man scrollt einfach runter. Scrollen. Scrollen. So wird man durch den ganzen Inhalt der Seite geführt.

Manchmal hat man zwar oben eine Navigationsleiste, aber die öffnet auch keine neue Seite, sondern springt auf der langen Seite direkt zur gewünschten Stelle.

Hier ein kleines Video, um es zu verdeutlichen:

Onepager Demo

Was sind die Vorteile von einer Onepager-Seite?

Einfache Navigation, scrollen bzw. wischen ist die natürliche Art, sich auf einer Webseite zu bewegen
Tolle Effekte möglich
Sieht gut aus
Erzählt eine Geschichte
Übersichtlich und kompakt

Und die Nachteile?

Man muss bei einem Thema bleiben
Größere, komplexe Webauftritte nicht möglich
Eventuell für SEO nicht so optimal

Damit man einen Überblick bekommt, wie meine Seite Webseiten-fritz.de momentan aussieht, wenn man alles auf einmal sieht (Vorsicht, langes Bild):

Man kann auch gerne scherzhaft einen „Schnell lesen“ Knopf anbringen…

Und hier nocheinmal mit der Fotografie-Seite

Ich habe es getan – ich bin zu Wix.com gewechselt – Ein Erfahrungsbericht

tl;dr Zusammenfassung am Ende des Artikels

Nein, natürlich nicht. Aber ich habe Wix ausprobiert. Eine Kundin möchte nämlich Ihre Seite selbst bearbeiten und ob ich dabei helfen kann. Bei dieser Kundin ja, bei Neukunden weiss ich nicht, ob ich mir das antue.

Preise

Bei Wix kann man sich eine kostenlose Webseite bauen, diese wird dort direkt gehostet, z.B. unter den Namen https://fritzganter.wixsite.com/webseitenfritz.

Im oberen Bildbereich sieht man Werbung, anscheinend nur für Wix selbst:

Wenn man keine Werbung und eine eigene Domain verwenden will, fängt das bei knapp 11€/Monat an. Wenn man einen 2-Jahresvertrag abschliesst. Bei monatlicher zahlungsweise sind es schon € 16,66. Und das ist das billigste Model mit 3GB Speicherplatz und 2GB Bandbreite (was mit der Angabe Bandbreite gemeint ist, ist mir noch nicht klar, es ist nicht die „echte“ Bandbreite in MB/s oder so gemeint).

Mit unbegrenzter Bandbreite und 10GB Speicherplatz ist man bei 15 €/Monat, wenn man einen 2-Jahresvertrag nimmt. Bei monatlicher Zahlung sind es 25€.

Bei Strato bekommt man das billigste Paket um 4 €/Monat inkl. 3 Domains und 50GB Speicherplatz sowie5000 Postfächer und zusätzlich 20GB Speicherplatz für Mails. Die Bandbreite ist anscheinend unbegrenzt.

Erster Versuch mit Assistenten

Also, man registriert sich bei wix.com und kann sich sofort eines von vielen Vorlagen verwenden. Ich habe das mal mit einem Assistenten namens „Velo“ gemacht: Man gibt z.B. „Frisör“ ein, kann sogar eine Webseite angeben, aus der Daten importiert werden, dazu eine Buchungsseite und die Webseite ist dann fast fertig. Leider hat die Seite weder was mit Frisör zu tun, noch ist irgendein Text oder Bild importiert worden und Buchungsseite gibt es auch keine. Man kann nicht einmal die Texte in Schriftart/Größe ändern. Dieser „Velo“ ist also Mist. Hier gehts zur Seite: Klicke lieber nicht!

Der Weg ohne Assistent

Verwendet man nicht den Assistenten, geht es schon besser.

Ich habe nun meine Seite schnell nachgebaut, also sowas ähnliches erstellt. Man ist in seinen Möglichkeiten schon eingeschränkt und muss praktisch das nehmen, was die Designvorlage hergibt. Wenigstens kann man die Schriftart und Größe ändern. Aber auch nicht unbeschränkt. Meine Schriftart ist z.B. Railway, die gibt es dort zwar auch, aber nicht in „light“. Die ganze Struktur ist etwas verwirrend, es geht sehr oft ein neuer Tab auf. SEO Sachen gehen nicht mit der Gratisversion ohne Domain. Schade, ich hätte mir sonst gerne eine kleine Linkfarm gebaut.

Wenn man keine besonderen Wünsche hat und auf einige Dinge keinen Wert legt, kann man damit durchaus leben. Flexibel ist halt was anderes.

Die resultierende Webseite

Ich möchte betonen, dass ich mit wix nur die erste Seite (Bild und Text) meiner Webdesigner Seite nachgebaut habe, also 1 von 5 Seiten.

Erst mal der Check auf korrekten HTML Code: 52 Fehler, 5 Warnungen. CSS: 19 Fehler und 516 Warnungen. Meine Seite: HTML und CSS 0 Fehler, 0 Warnungen. Muss sich jetzt nicht auf die Darstellung auswirken, zeugt aber sicher nicht von Qualität.

Jetzt der Vergleich der Geschwindigkeit in der mobilen Ansicht (gedrosselte Download-Geschwindigkeit). Jeweils erst die Wix-Version, dann meine Seite, wobei meine Seite fertig ist und einiges an Text und Bildern mehr hat, als die Wix-Version.

Man kann den Test kostenlos auf https://pagespeed.web.dev/ machen.

Die Wix-Seite: https://fritzganter.wixsite.com/webseitenfritz

Meine Seite: https://webseiten-fritz.de

Jetzt die Desktopansicht. Wieder erst die Wix-Version, dann meine Seite.

Zur Erinnerung, die Wix-Seite hat viel weniger Nutzdaten, nur 1 Bild von mir und das Headerbild. Meine Seite hat 6 Bilder und mehr Text.

Man sieht deutlich, dass die Ladezeiten der Wix-Seite deutlich schlechter sind (10,6 gegen 1,9 Sekunden bei der mobilen Seite, Time to Interactive). Auf der Desktopseite ist die Wix-Seite schon erträglicher, aber noch immer fast 8x langsamer als meine Seite. Beim Test der mobilen Seite wird eine mittelmäßig schnelle Mobilfunk-Verbindung simuliert.

(Nachtrag: In einer früheren Version war der mobile Leistungsindex meiner Seite bei ca 87, jetzt ist er bei 100. Der Grund für die plötzliche Verbesserung: ich habe Google Analytics durch etwas viel besseres ersetzt, aber das ist eine andere Geschichte in einem neuen Blog-Artikel.)

Dafür macht die Wix-Seite einen schickeren Eindruck weil alles hin und her huscht. Wer es mag.

Mit der Wix-Seite kann man aber sehr viele Funktionen einbauen, zum großen Teil über Apps welche zum Teil kostenlos sind, aber auch schon einiges monatlich kosten können.

Diese Funktionalitäten kann ich einfach nicht liefern, es wäre auch viel zu teuer. Wenn man die braucht, sollte man Wix oder vergleichbares verwenden, da bin ich raus. Ebenso wenn man sehr häufig Änderungen an der Seite machen will.

Einen Aspekt sollte man aus SEO Sicht betrachten: die langsame Ladegeschwindigkeit der Seiten wirkt sich ziemlich negativ auf das Google Ranking aus. Die zahlreichen Fehler im HTML und CSS Code eventuell auch. Man weiß es nicht genau.

Resume: 10 Gründe, die gegen Wix sprechen

Warum sollte man also Wix.com nicht verwenden und einen richtigen Webentwickler wie Webseiten-fritz.de beauftragen sollte:

Wix ist relativ teuer, ein brauchbarer Tarif liegt bei 15€/Monat, wenn man sich 2 Jahre bindet.
Lange Vertragsbindung, wenn man nicht den noch teureren Monatstarif zahlen möchte.
Der Assistent Velo taugt nix, das normale Tool ist zwar vernünftig zu bedienen, ist aber eingeschränkt, z.B. Schriftarten nicht frei wählbar.
Insgesamt kann man sich zwar „schöne“ Seiten zusammenklicken, aber flexibel ist es nicht. Man muss nehmen, was da ist.
Die erzeugte Seite hat Unmengen von HTML und CSS Fehler, In meinem einfachen Test waren es über 50 Fehler. Dagegen kann man als Anwender nichts machen.
Langsam: Die erzeugte Seite ist mindestens Faktor 4 langsamer, als eine vergleichbare handgebaute Seite. Besonders auf Mobilgeräten kann das nerven.
Einige Funktionen kann man nur per kostenpflichtiger Apps einbauen.
Durch die langsame Ladegeschwindigkeit wird man bei Google deutlich schlechter gefunden. Auch andere SEO Maßnahmen sind eventuell schwer oder gar nicht umsetzbar.
Man kann die Seite auch nicht einfach von Wix zu einem anderen Provider übertragen, dies wird sogar in den AGB ausgeschlossen.
Du bist Mieter bei Wix, nicht Besitzer deiner Webseite

Aber wenn du schnell eine schöne Seite brauchst und Geld keine Rolle spielt, bist du bei Wix gut aufgehoben.

Du brauchst eine neue Webseite oder willst die Vorhandene verbessern? Dann schau auf meiner Webdesign-Seite vorbei!