Wie vorgehen, um die gesteckten Ziele mit der eigenen Website zu verwirklichen? Welche technischen Restriktionen sind zu beachten? Wie wird das eigene Corporate Image am besten im Internet, von Website bis zu Social Media Kan\u00e4len, umgesetzt?<\/p>\n\n\n\n
In einem ersten Schritt erstelle ich Ihnen ein Webkonzept<\/strong>, denn die Anforderungen an eine Website<\/strong> k\u00f6nnen ganz unterschiedlich sein: Pr\u00e4sentieren Sie sich, Ihre Leistungen bzw. Ihr Unternehmen oder steht der Verkauf, d. h. E-Commerce bzw. ein Shop im Vordergrund?<\/p>\n\n\n\n Neben Gewinnung von Neukunden im Falle eines Dienstleisters kann z. B. f\u00fcr eine Arztpraxis die Entlastung im Arbeitsalltag durch die Website ein Ziel sein. Eine Checkliste f\u00fcr den Start, mit deren Hilfe Sie ein wenig mehr \u00fcber sich erfahren werden, finden Sie hier<\/a>.<\/p>\n<\/div><\/div>\n\n\n\n Welches sind die Kerninhalte, die Sie auf der Website vermitteln m\u00f6chten? Wie werden wir diese so aufbereiten, dass Besucher:innen sich intuitiv zurechtfinden und mit maximal zwei bis drei Klicks zu den gew\u00fcnschten Inhalten kommen?<\/p>\n\n\n\n In aller Regel bietet sich f\u00fcr die Navigation eine Kopfzeile im Header<\/strong> oder eine Fl\u00e4che links mit den wichtigsten Punkten an (z. B. Leistungen, Portfolio, Referenzen etc.). In der Fu\u00dfzeile im Footer<\/strong> werden beispielsweise Lage und Anfahrt, Suche, Inhaltsverzeichnis (die sogenannte Sitemap) sowie Impressum und die f\u00fcr jede Website obligatorischen Hinweise zum Datenschutz sowie ggf. zur Verwendung von Cookies<\/a> untergebracht. Dabei ist unbedingt zu beachten, dass die letzten drei Punkte immer sichtbar und zug\u00e4nglich sein m\u00fcssen und nicht durch Banner o. \u00e4. verdeckt sein d\u00fcrfen.<\/p>\n<\/div><\/div>\n\n\n\n Auf der technischen<\/strong> Seite bildet WordPress mit nahezu \u00fcberwiegendem deutschsprachigem Administrationsbereich die Basis als Redaktions- bzw. Content-Management-System. Die Mediathek<\/i> (umfasst alle Bilder und Medien); Beitr\u00e4ge<\/i> (Kategorien und Artikel in den einzelnen Kategorien z. B. Werk, Vita, News etc.); Seiten<\/i> (alle statischen Seiten u. a. Kontakt, Impressum und Datenschutz). Strikte Trennung von Inhalten (Texte sowie Bilder) und Navigation (Datenbank) vom Design (Templates), dadurch schnelle Anpassungen (zus\u00e4tzliche Inhalte oder Seiten, die ggf. auch nur vor\u00fcbergehend entfallen).<\/p>\n\n\n\n Der Aufbau<\/strong> sollte \u00fcbersichtlich und klar strukturiert sein, ohne technische Spielereien um ihrer selbst willen. Navigation(-sleisten) u. \u00e4. sind funktional, aber halten sich zur\u00fcck. Zwecks Lesbarkeit am Bildschirm empfehle ich serifenlose Schriften<\/i> f\u00fcr Texte, optional mit Serifen f\u00fcr \u00dcberschriften, ggf. Bildunterschriften, technischen Angaben oder Informationen (z. B. Roboto, Assistant oder vergleichbar). Ein responsives Layout<\/i>, d. h. anpassbar an jedes beliebige Endger\u00e4t (Mobiltelefon, Tablet, Laptop, Desktop, Kernbereich 280 bis 1920 Pixel) ist f\u00fcr mich eine Selbstverst\u00e4ndlichkeit.<\/p>\n\n\n\n Im Zentrum steht die Benutzerfreundlichkeit<\/strong>, egal wie n\u00fcchtern oder verspielt der Webauftritt wird. Jede Seite erh\u00e4lt im Body Tag die Klasse no-js<\/i>, die durch js<\/i> ersetzt wird, falls JavaScript nutzerseitig aktiviert ist, ansonsten werden Inhalte \u00fcber no-js deaktiviert bzw. nicht angezeigt. Dies gew\u00e4hrleistet die volle Funktionsf\u00e4higkeit der Site, jedoch ggf. eine optisch leicht andere Darstellung. Optional die Weiterempfehlung auf Social Media, mit der datenschutzkonformen Shariff<\/i> L\u00f6sung sowie der Ausdruck der Seiten \u00fcber Browser ohne den Druck st\u00f6render Element, mit Zuweisung eines eignen Stylesheets.<\/p>\n\n\n\n Die eigentliche Abwicklung<\/strong> des Projekts umfasst die Programmierung eines eigenen Themes f\u00fcr WordPress bzw. individueller Templates<\/i> offline auf einer lokalen Entwicklungsumgebung. Erstellung aller Seiten und Beitr\u00e4ge auf Basis der bereitgestellten Texte und Bilder<\/i> incl. automatisierter Bildoptimierung (umfangreichere, manuelle Bearbeitungen gerne gegen Aufpreis auf Anfrage). Permanente Einbindung des Auftragsgebers, Fortschrittskontrolle und Freigabe ggf. \u00fcber Screenshots bzw. Projektwebsite erreichbar unter einer Domain aus meinem Portfolio d. h. ggf. Transfer auf einen meinen Serverpl\u00e4tze (passwortgesch\u00fctzt) bis Fertigstellung und Freigabe durch Auftraggeber:in.<\/p>\n\n\n\n Zum Abschluss<\/strong> \u00c4nderung der Pfade etc. und Transfer auf einen passenden vorhandenen Serverplatz: Webspace und Datenbank erstellen, WordPress einrichten, SFTP Zugang angelegten; SSL Zertifikat der Domain zuweisen und ggf. SSL erzwingen (permanente Umleitung 301) sowie PHP (min. Version 8) einstellen; Datenbank von Projektseite einspielen; alle Daten per File Transfer Protocol aufspielen, WordPress an Serverumgebung bzw. -pfade anpassen; Test Website und ggf. Formulare. Eintrag in Google Search Console und Bing Webmaster Tools, um die Indizierung zu beschleunigen.<\/p>\n<\/div><\/div>\n\n\n\n Von Beginn an lege ich Wert auf Optimierung der Website<\/strong> auch im Hinblick auf die Auswahl passenderer bzw. n\u00f6tiger Erg\u00e4nzungen f\u00fcr eine erfolgreiche, schnelle und sichere Website. F\u00fcr Suchmaschinenoptimierung (SEO)<\/a> erfolgt standardm\u00e4\u00dfig die Installation des Plugin Yoast Seo<\/i> in der kostenfreien Version sowie dessen Einrichtung. Dieses hat sich im Alltag bew\u00e4hrt und unterst\u00fctzt Sie mittels Ampelsystem und Vorschau bei der Optimierung.<\/p>\n\n\n\n Die Ladegeschwindigkeit<\/a> z\u00e4hlt schon seit geraumer Zeit zu den wichtigsten Stellschrauben. Nicht nur Besucher, sondern auch Suchmaschinen ziehen die Zeit, die beim Aufruf einer Seite ins Land streicht, als wichtiges Bewertungskriterium heran. Ein schlanker und komprimierter Code sowie der Einsatz von Caching-Mechanismen z\u00e4hlen ebenso zu den erprobten L\u00f6sungsans\u00e4tzen f\u00fcr eine schnelle Webpr\u00e4senz wie die Verwendung komprimierter Bilder.<\/p>\n\n\n\n Daher sollten Bilder<\/a> nicht nur in passendem Format (H\u00f6he x Breite) passend zum Endger\u00e4t des Nutzers bereitgestellt werden, sondern auch neuere Dateiformate ber\u00fccksichtigt werden. Ein einmalig zu installierendes Tool liefert automatisch generierte WebP-Bilder<\/i> an Browser aus, die WebP unterst\u00fctzen, \u00e4ltere Browser erhalten die gewohnten Formate sowie natives Lazy Loading<\/i> von Bildern, sofern m\u00f6glich.<\/p>\n\n\n\n Weitere Ma\u00dfnahmen zur Beschleunigung des Seitenaufbaus sind u. a. asynchrones Laden<\/i> von Skripten und Schriften wann immer m\u00f6glich; Minifizierung<\/i> des Quelltextes, der Stylesheets und Javascripten; Vorladen<\/i> von Schriften; Laden von Skripten und Styles (z. B. Karten, Formulare etc.) nur dann, wenn diese ben\u00f6tigt werden, ansonsten werden diese nicht geladen; Caching<\/i> um Datenbankabfragen zu reduzieren. Die im Cache vorgehaltenen Seiten aktualisieren sich automatisch z. B. nach drei\u00dfig Tagen oder bei einer \u00c4nderung eines Beitrags bzw. eine Seite. Ressourcen, die das erstmalige Rendern einer Seite blockieren, werden in der Reihenfolge des Ladens \u00fcber H2PushResource<\/i> nach hinten verschoben.<\/p>\n<\/div><\/div>\n\n\n\n Programmierung eines individuellen, ma\u00dfgeschneiderten Layout<\/strong>, dem Template bzw. Theme f\u00fcr WordPress<\/a> statt von der Stange auf Basis von underscores.me bzw. getbootstrap.com mit PHP, SASS, CSS und JavaScript. Einrichtung von Datenbank und WordPress.<\/p>\n\n\n\nGliederung der Website<\/span><\/h3>\n\n\n\n
Umsetzung des Webkonzepts<\/span><\/h3>\n\n\n\n
Optimierung steht am Anfang<\/span>, statt am Ende<\/span><\/h3>\n\n\n\n
Erstellung der Website<\/span><\/h3>\n\n\n\n