Webdesign Archive - Fritz’ Blog

Klar kann ich das!

Wenn der Kunde fragt, ob du…

auch Videos machen kannst, sage ja. Auch wenn der letzte ernsthafte Schnitt für einen Kunden schon, Moment mal, vierzehn Jahre her ist.

Damals schnitt ich noch mit der 30-Tage Testversion von Premiere Pro, später dann mit Wondershare Filmora, eine gute Software für Anfänger und Gelegenheitsschneider, die bei einem neuen Projekt schon wieder vergessen haben, wie das ganze überhaupt funktioniert.

Ich hatte also vor, mir ein „echtes“ Schnittprogramm zu beschaffen, schließlich schneide ich jetzt ja wie ein Profi. In Betracht kamen natürlich Adobe Premiere Pro, Apples Final Cut und mal schauen, was es sonst noch gibt. Adobe habe ich eigentlich schon lange vom Rechner gelöscht, also wäre es eine unangenehme Situation. Final Cut wäre ok. Aber immer wieder hörte ich über die Jahre hinweg etwas von „DaVinci“, es soll ein in Hollywood bewährtes Programm für Farbkorrektur sein. Die Software wurde aber kürzlich (2009) von der Firma Blackmagic Design übernommen und massiv ausgebaut. Wohl weiterhin berühmt für das Farbnachbearbeitung, ist es inzwischen eine vollwertige Schnittsoftware geworden, die so langsam Adobe Premiere Pro vom unverdienten Sockel stossen wird. Das gute daran ist, dass es nicht nur auf Mac, Windows und Linux läuft, sondern als leicht eingeschränkte Version kostenlos ist. Eingeschränkt heisst, keine KI Funktionen, Videos max. 4k und 60 FPS. Reicht also für über 90% der Anwender vollkommen aus.

Also, das Handbuch runterladen und auf dem Topf setzen. Naja, das Handbuch hat über 4000 Seiten. Also doch an die hundert Videos auf YouTube geschaut. Dann entschieden, dass ich dann doch die Kaufversion will (€300). Ich habe sie als Dongle gekauft, damit kann man auf verschiedenen Rechnern arbeiten, einfach Dongle (USB-Stick) umstecken. Wer die Bezahlversion will, benutze bitte gerne meinen Amazon Link. Die kostenlose Version gibt es direkt beim Hersteller.

Die Videoaufnahmen für den Kunden sind abgedreht, ich habe aber ein kleines Testvideo geschnitten.

Hier klicken, um den Inhalt von YouTube anzuzeigen.
Erfahre mehr in der Datenschutzerklärung von YouTube.

Inhalt von YouTube immer anzeigen

Mit DaVinci Resolve Studio geschnitten

Seht es auch auf YouTube an, lasst ein Like da und abonniert meinen Kanal (habt ihr schon tausendfach gehört, aber HIER lest ihr es!!!)

Die Restaurierung des Restaurants

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?

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).

Mykonos Eilbek — 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.

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