Fachartikel über WordPress, TYPO3, SEO, Webdesign und Webentwicklung

Sie suchen einen Autor für Fachartikel im Bereich Webdesign und Webentwicklung? Mit meinen Schwerpunkten WordPress und TYPO3 stehe ich Ihnen gerne zur Verfügung. Damit Sie mich besser einschätzen können, möchte ich Ihnen in diesem Artikel einen Überblick über mein Expertenwissen sowie die verfügbaren Lizenzen und Installationen geben.

Meine Arbeitsumgebung

Ich bin Digital-Nomade und kann kein komplettes Büro transportieren. Ich arbeite auf einem 15″ Dell XPS mit Windows 10. Mit der 4K-Auflösung kann ich Screenshots, Bildbearbeitung und Videos in höchster Qualität anfertigen. Dafür nutze ich Chrome, Firefox, Edge und wenn es unbedingt sein muss auch mal den IE sowie Snagit und Camtasia von TechSmith.

Als Zweitsystem und für Tests nutze ich ein MacBook Air 2015 mit aktuellem MacOS. Für mobile Tests habe ich ein iPhone 6 und ein aktuelles Android Smartphone im Gepäck.

Als Digital-Nomade bin ich exzessiver Cloud-Nutzer. Von Office365, der Creative Cloud, Plattformen auf AWS und Google Cloud bis hin zur Sicherung auf S3 und Glacier. Selbst wenn mein komplettes Gepäck mit knapp 30 TB Speicherplatz abhanden käme, das wichtigste an Daten bleibt mir auf diese Weise erhalten.

Meine Fachartikel schreibe ich im WordPress Gutenberg-Editor. Dank einiger Plugins und etwas Eigenentwicklung habe ich die meisten Textanalysen im direkten Überblick. Derzeit verwende ich eine lokale Plattform. Sofern gewünscht, kann ich gerne eine geschützte Online-Plattform bereitstellen.

WordPress

WordPress habe ich 2009 zum ersten Mal installiert. Seitdem habe ich etwa 50 Projekte, diverse Plugins und Themes realisiert. Für meine Recherchen habe ich eine Menge Themes von Avada über Divi bis Studiopress getestet, obwohl ich Themes bevorzugt selbst entwickle, wie beispielsweise mein WordPress-Theme Dyna.press.

Verfügbare Lizenzen und Testplattformen:

  • Lokale Entwicklungsplattformen mit Local, Xampp, Docker und Ubuntu VM. Mehrere öffentliche Entwicklungsumgebungen und Testplattformen z. B. https://wptest.dcn.de und https://wpmulti.dcn.de (WordPress Multisite).
  • Divi – Elegant Themes Lifetime Lizenz sowie eine Vielzahl an Plugins für Divi (Alle Injector Plugins von Tortoise IT, diverse Content Modules), eigene Testplattform für Divi auf https://wpmulti.dcn.de/divi
  • Elementor Pro, Astra, OceanWP, Avada, StudioPress Themes und das Genesis Framework sind in verschiedenen Konstellationen auf https://wpmulti.dcn.de verfügbar.
  • WPML (WordPress Multilingual), ACF Pro (Advanced Custom Fields) und WP All Import / WP All Export sind auf mehreren Testplattformen installiert.

TYPO3 Enterprise CMS

TYPO3 betreffend bin ich volljährig. In 18 Jahren habe ich über 500 Projekte mit dem Content Management System realisiert und über 30 Extensions mitentwickelt. Auch Themen wie Cloud-Hosting auf Amazon AWS und hochsichere Intranets auf TYPO3-Basis sind mir nicht fremd. Ich bin Certified TYPO3 Integrator der ersten Generation.

  • Ich betreibe mehrere lokale Enwicklungsplattformen sowie einige Webseiten auf TYPO3.
  • Für nachvollziehbare Tests steht eine öffentliche Testplattform auf https://typo3.dcn.de zur Verfügung.

Contao, Drupal, Neos

Contao, Drupal und Neos habe ich immer in der aktuellen Version verfügbar. Ich halte mich immer auf dem Laufenden, was die populären CMS-Plattformen anbelangt.

Testplattformen:

Laravel

Das PHP-Framework Laravel verwende ich hin und wieder für kleine Apps. Für Entwicklung und Test stehen mehrere Plattformen zur Verfügung, lokal nutze ich bevorzugt Laragon. Mit Laravel verwende ich aktuell am liebsten Bulma und Vue.js. Die meisten Projekte wurden mit Bootstrap und jQuery entwickelt.

jQuery, React und Vue.js

Vorweg muss ich zugeben, dass JavaScript nicht meine Stärke ist. Trotzdem habe ich mein Ziel mit jQuery und Vanilla JS immer erreicht. Seit einigen arbeite ich mich in die JS-Frameworks React und Vue.js ein.

Sass, Bootstrap, Bulma & Co.

Ich habe einige Jahre mit Less gearbeitet, bin nun zu Sass / SCSS gewechselt und verwende bevorzugt Bootstrap und Bulma. Foundation, Semantic UI, Materialize und Tailwind habe ich ausgiebig getestet.

Adobe Creative Suite

Die Creative Suite habe ich voll lizenzert aber nicht komplett installiert. In den meisten Programmen würde ich mich als Anfänger bezeichnen.

Fortgeschrittener Nutzer bin ich in dem Videoschnittprogramm Adobe Premiere und in der Fotosoftware Adobe Lightroom.

Absoluter Profi bin ich in der Bildbearbeitungssuite Adobe Photoshop. Photoshop benutze ich seit Version 4.0 (anno 1996) für Weblayouts und Foto-Retusche. Auch in Zeiten von Responsive Design bin ich mit Photoshop produktiver als in allen bisher getesteten Alternativen.

Sprachen und weitere Informationen

Obwohl ich auf meinen eigenen Blogs auch in englisch und russisch übersetze, biete ich als Texter nur deutschsprachige Artikel an.

Einige Fachartikel und Textproben finden Sie auf der Seite Freier Autor.

Content First – auf den Inhalt kommt es an

Als Webdesigner, Webentwickler und Autor mit SEO-Ambitionen habe ich über die Jahre eine Menge Projekte gemeinsam mit Werbeagenturen realisiert. Immer wieder kam es dabei zu Problemen, die durch einen falschen Workflow entstanden sind. Deshalb bin ich inzwischen ein großer Fan von Content First.

Content First ist Unsinn, Mobile First ist besser

Um es gleich vorweg zu nehmen. Content First ist nicht der einzige Startpunkt für neue Internetprojekte. Auch Mobile First und User First sind richtig. Das eine schließt die anderen nicht aus.

Typische Fehler durch Content First vermeiden

Das hat doch jeder Internetnutzer schon einmal gesehen. Der Text passt einfach nicht in den Button, die Navigation ist zu lange geraten, bricht an einer denkbar schlechten Stelle um und zerstört das hübsche Weblayout.

Oft sind es mehrsprachige Webseiten, bei denen diese Probleme auftreten. Auch große Webseiten wie Amazon, Microsoft oder Google haben dieses Problem erst im Laufe der Jahre in den Griff bekommen. Mehrsprachigkeit ist eben nicht trivial. „Buy now!“ ist eben kürzer als „Jetzt bestellen!“. Wenn dann noch der Rechtsanwalt mit dem Zusatz „Jetzt zahlungspflichtig bestellen!“ kommt, um den Shop für Deutschland rechtssicher zu bekommen, dann hat der Button endgültig seine Passform verloren.

Dieses Problem könnte Nutzern älterer Windows Versionen schon begegnet sein. Anstatt über den Button hinaus zu schreiben, hat man sich für eine Abkürzung entschieden. Optimal ist die Lösung trotzdem nicht.

Ich brech ab! Problem im Windows UX Design beim Cancel Button.

Nicht nur Mehrsprachigkeit und Rechtssicherheit sind typisch für solche Anzeigefehler. Immer wenn Texter und SEOs in einem vorgefertigten Layout-Rahmen arbeiten sollen, passieren Unfälle dieser Art.

Der alte Workflow und seine Tücken

Das Webdesign steht. Es steht zwar überall „Lorem ipsum dolorem“, der typische Platzhaltertext, aber die Geschäftsleitung ist begeistert. Die Präsentation ist rundum gelungen. Jetzt sind die Webentwickler dran, den Designentwurf in eine funktionierende Webseite umzuwandeln.

Es wird eifrig programmiert. Vor allem der großflächige Teaser soll später Aufmerksamkeit erregen. Auf dem Hintergrundbild, das als Platzhalter verwendet wird räkelt sich ein Model auf der schicken Designercouch. Die Textbox ist geschickt darüber drapiert, ohne das Produkt oder die weibliche Schönheit zu verdecken. Statt Lorem Ipsum hat man inzwischen sogar „Schöne Wohnwelt – Willkommen in Ihrem neuen Zuhause“ als Platzhalter eingesetzt.

Weder lesbar noch vertrauenserweckend. Dieser Fehler kostet Kunden.

Nach vielen Stunden Programmierarbeit ist die neue Webseite fertig. Das behaupten zumindest der Webdesigner und die Webentwickler. Die Textagentur und der Suchmaschinen-Experte sehen das anders. Sie versuchen gerade gemeinsam eine Lösung für ihr Problem zu finden. Denn statt dem wenig aussagekräftigen Platzhaltertext sollen gute Inhalte in die Webseite, die das Suchmaschinenranking unterstützen. Der Fotograf fragt sich zur gleichen Zeit, wie er alle Produktbilder so hinbekommt, dass die Textbox nicht das halbe Produkt verdeckt.

Problem erkannt? Hier kommt die Lösung.

Content First ist die Problemlösung

Zuerst kommt der Inhalt. Schicke animierte Webseite, Online-Shop oder mehrsprachiges Newsportal. Es spielt keine Rolle für welche Art von Projekt eine Neuentwicklung oder ein Relaunch geplant ist. Wer zuerst eine optisch simple Plattform aufsetzt und alle Inhalte dort vereint, spart sich das Ping-Pong Spiel zwischen Texter und Gestaltung. Am besten wäre es, wenn sich die Inhalte nicht auf wenige Beispiele beschränken, sondern alle Artikel, Produkte, Webseiteninhalte und Sprachen bereits vorhanden sind.

Geben Sie Ihrem Webdesigner direkten Zugriff auf diese Plattform und machen Sie die Vereinbarkeit von Design und Inhalten zur dringenden Zielvorgabe.

Lassen Sie den Webentwickler direkt auf Ihrer Content-Plattform arbeiten. Tauchen während der Programmierung des Weblayouts und der Gestaltungselemente Probleme auf, können diese frühzeitig gelöst werden.

Content First, Mobile First und User First

Wenn Webdesigner und Webentwickler mit echten Inhalten arbeiten dürfen, steht auch den beiden Ansätzen Mobile First und User First nichts im Wege. Dazu werde ich in Kürze einen ausführlichen Artikel schreiben.

Content First in der Praxis

Ich selbst habe beschlossen, die Content First Strategie auf meinen Webseiten zu nutzen. Das ist nicht immer einfach, denn während die Gestaltungsideen schon in meinen Fingern jucken und schleunigst aus mir heraus wollen, ist die Erstellung von Inhalten manchmal zäh und langwierig.

Auf dieser Webseite möchte ich trotzdem mindestens 15 Artikel schreiben, nahezu alle Unterseiten, Kategorien, Tags und Projekte mit Textinhalten versehen und jeden Button beschriftet haben, bevor das erste Pixel geschubst wird.

Sieht noch nicht gut aus. Content First Webseite ohne Layout und Design.

Ich werde diesen Prozess in den nächsten Wochen für Sie festhalten. Bereits bei den ersten drei Artikeln wird klar. Die langen Titelzeilen meiner Artikel passen nicht in ein kleines dreispaltiges Layoutsystem. Ich hatte ein entsprechendes Grid geplant. Jetzt ist noch eine gute Zeit, mir etwas besseres einfallen zu lassen:

Blog Grid mit viel zu langen Titelzeilen. Dank Content First frühzeitig erkannt.

Notiz: nach Content kommt nicht immer sofort das Design. Wer den Webentwickler frühzeitig in das Projekt einbezieht, erspart sich eventuell weitere Überraschungen. Beispiele folgen.

WordPress Development Workflows im Überblick

Wer mit WordPress in die Webentwicklung einsteigt, macht sich oftmals wenig Gedanken über seine Arbeitsabläufe. Es ist schließlich ganz einfach, die ersten Anpassungen zu machen:

Konfiguration und Theme Customizer

Viele Änderungen können direkt in WordPress konfiguriert werden. Themes, Plugins, Menüs und Widgets bringen schon einige individuelle Einstellmöglichkeiten. Der Theme Customizer ist ebenfalls eine feine Sache. Je nach Theme können dort Header, Footer, Hintergründe, Farben und Formen angepasst werden. Was nicht mit wenigen Klicks zu ändern ist, kann über das Custom CSS individualisiert werden.

Auf den ersten Blick erscheinen diese Möglichkeiten grenzenlos. Ist die pixelgenaue Umsetzung oder eine Individualentwicklung gefordert, reichen Konfiguration und Theme Customizer dagegen nicht mehr aus.

Der Theme Editor

Der Theme Editor soll den Zugriff auf Theme-Dateien auch ohne FTP oder SSH-Zugriff ermöglichen. Wer aus dem WordPress Admin auf den Menüpunkt Design > Theme Editor klickt wird mit einer Warnmeldung begrüßt. Nicht ohne Grund.

Denn der Theme Editor ist aus mehreren Gründen keine gute Idee. Erstens macht es wenig Sinn, Anpassungen an einem Theme vorzunehmen, die beim nächsten Theme-Update überschrieben werden. Zweitens kann ein unerfahrener WordPress Entwickler die Webseite mit dem Theme Editor abschießen und sich dabei selbst aussperren. Eine kleine Unachtsamkeit im Code reicht aus und WordPress ist ohne direkten Zugang zu den Dateien nicht mehr zu retten.

Wie im Artikel über WordPress Sicherheit (kommt in Kürze) beschrieben, empfehle ich deshalb den Theme Editor ganz abzuschalten.

WordPress Theme Builder

Theme Builder wie Divi oder Elementor sollen diese Limitationen aufheben. Auch ohne jegliche Programmierkenntnisse. Aber diese Möglichkeiten haben einen Preis. Damit ist nicht nur der Kaufpreis eines Theme Builders gemeint, sondern vor allem Themen wie Vendor lock-in, Performance und Security. Im Artikel über WordPress Theme Builder (kommt in Kürze) gehe ich näher darauf ein.

All Magic comes with a price.

Cowboy Coding

Der nächste Schritt, den WordPress Einsteiger in der Regel gehen, ist das sogenannte Cowboy Coding. Die Datei eines Themes oder Plugins wird per FTP heruntergeladen, lokal geändert und dann wieder hochgeladen. Das ist nicht nur ermüdend, sondern vor allem gefährlich. Vergisst man vor der Änderung eine Sicherung der geänderten Dateien anzulegen, wird man nach einiger Zeit eine schmerzhafte Erfahrung machen. Jeder Entwickler hat sich in diesem Moment schon selbst verflucht.

Abgesehen davon ist diese Vorgehensweise zwar für eine kleine Änderung tragfähig. Ein eigenes Plugin oder Theme auf diese Art zu entwickeln, grenzt dagegen an Selbstgeißelung.

Local by Flywheel

Wer vom Cowboy Coding bereits die Nase voll hat, stößt auf seiner Suche nach einer besseren Lösung wahrscheinlich auf Local. Die Lokale Entwicklungsumgebung bringt eine schicke Oberfläche mit, einen Webserver, Datenbankserver, automatische Sicherung und die einfache Bereitstellung auf einen Webserver. Hört sich super an!

Das Problem dabei: die direkte Bereitstellung ist auf das Flywheel Webhosting begrenzt. Auch wenn Flywheel durchaus einen guten Eindruck macht. Das WordPress Hosting bei Flywheel ist teuer und hat einige Limitationen.

Eine ausführliche Beschreibung finden Sie im Artikel WordPress Workflow mit Local by Flywheel.

Eigener WordPress Workflow mit Git

In Kürze wird es an dieser Stelle weitergehen. Bis dahin empfehle ich Ihnen diese Artikel.

Qualitätssicherung

Es wird noch mehrere Artikel zu diesem Thema geben, aber auf die Schnelle einige Links zur fortlaufenden Qualitätssicherung:

Das sind für den Anfang die wichtigsten QS-Tools. Mehr in Kürze …

Die Gestaltung startet ab hier

Im Artikel weiter oben muss ich noch einiges aufräumen. Es ist nicht ganz einfach, die Webseite und mein Theme gleichzeitig mit den Artikeln weiter zu entwickeln. Aber ich bleibe dran. Inzwischen habe ich mein Logo und die Hintergrund auf der Seite aktiviert. Ganz ohne ein Design weitermachen … hmm … kann ich einfach nicht. Das Thema Webdesign ist in einem Extra Artikel zu finden. Einer der nächsten Schritte ist der Sticky Footer

WordPress oder TYPO3?

Mit der Frage nach dem richtigen Content Management System für meine eigene Webseite, ein Reiseportal und einige Blogs habe ich mich einige Zeit befasst. Die Bezeichnung Blogs nimmt es ja eigentlich schon vorweg, aber so ganz ohne einen Vergleich wollte ich mich nicht auf eine Plattform einlassen.

Mein großes Problem mit TYPO3 ist der nicht vorhandene Schreibfluss. Wer mit dem Gutenberg Editor schon einmal längere und grafisch aufwändige Artikel gestaltet hat, kommt mit der Bearbeitung von TYPO3 Content Elementen einfach nicht mehr klar.

Deshalb habe ich alle infrage kommenden CMS installiert und unter die Lupe genommen.

Drupal, Contao und Neos

Drupal war schon seit jeher nicht mein CMS. Die Admin-Oberfläche wirkt altbacken und unaufgeräumt und die Dokumentation hilft in vielen Fällen nicht weiter. Trotzdem wollte ich Drupal testen. Der Grund dafür war der Gutenberg Editor. Wie? Ist der nicht für WordPress? Richtig, aber auch für Drupal steht der Editor bereits als Modul zur Verfügung. Nach wenigen Minuten war aber bereits klar, dass Drupal meine Probleme keinesfalls lösen kann. Der Gutenberg Editor war zwar ruckzuck installiert Die UI wirkt komplett eingestaubt.

und habe auch Drupal und Contao installiert, um das beste CMS für meine neuen Projekte zu finden. Auch Website-Builder wie Webflow, Wix und Jimdo habe ich getestet. In Kürze erfahren Sie mehr zu meiner Entscheidung, die – man kann es kaum übersehen, für WordPress gefallen ist.