Was lange währt.. ist irgendwann veraltet. Mein erster Restaurant Kunde hatte noch eine Webseite aus dem Jahr 2010 (mykonos-eilbek.de). Damals war von „Mobile-First“ noch keine Rede, das iPhone 4 kam neu auf den Markt und die Anzahl der Smartphone Nutzer lag in Deutschland bei ca. 10 Millionen. Von LTE oder gar 5G war noch gar nicht die Rede. Da ist es verzeihlich, dass damals auf mobiltaugliche Webseiten wenig Wert gelegt wurde.
Also musste die Webseite überarbeitet werden, um sie ins Jahr 2023 zu hieven.
Für die neue Seite wurde eine bewährte Restaurant-Seite kopiert und die Texte und Bilder ausgetauscht. Es konnten die vorhanden Fotos verwendet werden, sie wurden lediglich in höherer Auflösung abgespeichert. Trotzdem war der Arbeitsaufwand ein gut beschäftigter Tag. Zusätzlich wurde Sie zu einen neuen Provider umgezogen und auf HTTPS umgestellt.
Warum ist eine mobile Version so wichtig?
Die neue mobile Ansicht der Speisekarte
Klar, damit Sie auf dem Smartphone besser lesbar ist (Foto oben). Die alte Seite hat z.B. die Speisekarte unleserlich klein dargestellt, man konnte sie zwar zoomen, aber dies war umständlich und schwieriger zu scrollen (Foto unten).
Die alte, nicht mobiltaugliche Speisekarte.
Nicht nur, dass man Mobilnutzer verärgert, man verärgert auch Google, die diese Seite wegen mangelnder Mobiltauglichkeit abstraft.
Die neue Webseite ist noch nicht lange online, weisst jedoch lt. meinen Tools einen deutlich höheren Traffic auf.
Was lernen wir daraus?
Falls Sie noch eine Webseite haben, die noch nicht mobil-optimiert ist, nehmen Sie Kontakt mit mir auf, um eine kostenlose Erstberatung zu erhalten.
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:
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.
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.
functions.php
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:
… 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
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!
Pixellogo aus alten Zeiten
Eine neuere, cooler aussehende Version kam im Jahr 2000, leider ohne Logo:
EDV Beratung im Jahr 2000
Links unten ist das animierte Logo meiner Web-Firma, hier animiert:
Wow!
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.
Webseiten-Laden
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:
Schriften als Grafik
Und jetzt zurück zu ganter.at im Jahre 2001:
ganter.at 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.
ganter.at 2003
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!
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:
Google Ergebnis für „Scheidung feiern“
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:
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.
Sinnvolle Linktexte
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!
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):
Screenshot lange Seite
Man kann auch gerne scherzhaft einen „Schnell lesen“ Knopf anbringen…
