Web Designer war eigentlich nie meine Traumrolle gewesen. Mir kam es immer so vor, daß jede Person ohne jegliche Form von Ausbildung Web Designer werden konnte – also war ich mir dafür immer zu schade. Aber eine schöne Webseite verlangt halt auch mal ein wenig Aufwand beim Design, und eigentlich bräuchte man dafür einen erfahrenen Web Designer. Da ich davon keine Ahnung hatte, habe ich in den letzten Wochen in meiner Freizeit viel Zeit benötigt, um ein Grundverständnis des Web Designs zu erlangen.
Deshalb meine Abbitte an gute Web Designer: ich bewundere eure Arbeit, euren zielsicheren Geschmack, eure Erfahrungen im Umgang mit Web Tools. Ich bin mittlerweile der Überzeugung, daß Web Designer ein höchst anspruchsvoller Job ist, für den man viel lernen muß und Handwerkszeug mitbringen muß.
Am Beispiel meiner Webseite digitalesleben.blog möchte ich darstellen, welche Erfahrungen ich gemacht habe, um diese Webseite nach der initialen Erstellung zu verfeinern.
Die Webseite entsteht auf WordPress.com
Wie schon in einem anderen Blogbeitrag beschrieben, war die Migration von Tumblr auf WordPress.com relativ einfach. Zusatzaufwände waren vor allem die durchgängige Indizierung der Einträge mit Kategorien und Schlagwörtern. Auch mußte ich die Texte häufig an den neuen WordPress-Blockeditor Gutenberg anpassen.
Über den Wechsel von einem kostenfreien WordPress.com-Tarif auf den kostenpflichtigen Blogger-Tarif habe ich berichtet. Unglaublich wie einfach dieser Wechsel von digitalesleben8668.wordpress.com zu digitalesleben.blog ging.
Aber mit diesem Schritt war mein Ehrgeiz geweckt. Ich hatte mich schon im Januar für das Theme Rebalance entschieden, welches ein schönes Look and Feel bot. Darüberhinaus gab es auch viele nette Funktionalitäten, die ich erstmal verstehen und dann auch nutzen wollte.
- Featured Images
- Featured Content (leider nur ein Blog-Eintrag)
- Portfolio Page und Projekte
- Site Logo
- Social Links auf die eigenen Sozialen Netzwerke
- Custom Menu
- Widgets im Footer der Webseite
- Customer Header Image
- Color Options für Hintergrund und Schriften
- dreispaltige Anzeige auf der Blog-Überblicksseite und der Portfolio-Seite
Damit sind schon viele Möglichkeiten der Konfiguration vorhanden. Und die muß ich alle konzeptionell erstmal verstehen.
Portfolio Page und Projekte
Gerade Portfolio Page und Projekte haben sich nicht direkt für mich erschlossen. Nach Rückfrage beim guten (englisch-sprachigen) WordPress.com-Support konnte ich die richtigen Support-Seiten von WordPress finden, die mir das Konzept verständlich machten. Da zeigte es sich, daß es gut war von Anfang an jeden Beitrag in eine Kategorie einzuordnen. Pro Kategorie war ich in der Lage eine Projektseite einzurichten. Das Theme stellt diese dann in einer schönen dreispaltigen Ansicht auf der Portfolio-Seite dar.
Featured Content
Eine weitere konzeptionelle Hürde war der Featured Content. Aber sowas sieht man sehr häufig auf Webseiten als die hervorgehobenen Beiträge an oberster Position. Leider kann man mit Rebalance nur einen Featured Content darstellen. Auch wenn man mehrere markiert hat, wird doch immer nur der letztmarkierte Eintrag an oberster Stelle der Webseite angezeigt.
Widgets
Die Widgets sind ein sehr mächtiges Tool, um die Webseite mit dynamischen Inhalten anzureichern. Die Konfiguration erlaubt es sehr fein einzustellen, wann und wo diese Widgets angezeigt werden können. Leider werden die Widgets nur im Footer-Bereich und nicht in einer Side Bar links oder rechts neben den Inhalten angezeigt.
Social Links
Die Social Links habe ich am Anfang auch nicht verstanden. Diese werden in einem speziellen Social Menu Header-Bereich angezeigt und führen zu den eigenen Seiten auf den Sozialen Netzwerken. Am Anfang dachte ich, daß der User dort klickt und ein Link auf meine Webseite von ihm auf seinem Social Media Account geteilt wird.
Sharing Buttons
Diese Sharing- oder Like-Funktionalitäten sind unter den einzelnen Beiträgen aufgeführt. Da war es interessant zu lernen, daß es von Instagram keinen solchen Button gibt. Viele andere Sozialen Plattformen sind allerdings vorhanden. Ich habe mich jedoch auf die vier gängigsten beschränkt und z.B. nicht Linked In hinzugenommen, da dies eine private Seite mit meinen privaten Ansichten ist.
Fertig?
Mit einem schönen Site-Logo, Begrüßungstext, Header Bild und Schrift- und Farbeinstellungen sieht die Seite schon sehr gut aus. Aber man ist noch weit entfernt von der Darstellungsqualität professioneller Themes. Diese sind kostenpflichtig und können beim Blogger-Tarif auch nicht genutzt werden. Ein Upgrade auf Premium ist erforderlich.
Die inkonsistente Konfiguration auf WordPress.com
Eigentlich hat WordPress.com viel getan, um die Nutzer beim Konfigurieren ihrer Webseiten zu unterstützen.
Konfiguration über iOS
Für den mobilen Einsatz gibt es iOS-Versionen für iPhone und iPad, die auf den eingeschränkten Screen-Space angepasst sind. Man kann damit alle möglichen Standard-Einstellungen machen. Webseiten und Blog-Beiträge können schnell mobil erfasst werden. Einschränkungen gibt es immer dort, wo man tiefer ins System will. Portfolio Projekte können nicht bearbeitet werden, Einstellungen und Spielereien bei Themes sind eingeschränkt.
Bei der Eingabe von Inhalten werden gewisse Blockelemente von Gutenberg auf den mobilen Versionen nicht angezeigt und können nachträglich auch nicht bearbeitet werden. Beispiele sind Galerien und Tabellen. Die Blockelemente sind auf die wichtigsten, allgemein verwendeten eingeschränkt. Das ist in Ordnung, nervt aber schon. Gerne würde ich mir Galerien auch in der mobilen Variante wünschen.
Auch bei den Themes ist die bei der Desktop-Browser-Variante mächtige Funktion, die unterschiedlichen Themes auszuprobieren, sehr eingeschränkt.
Konfiguration über PC/Mac
Wenn man auf den PC/Mac umsteigt und den Desktop-Browser verwendet, dann eröffnet sich das komplette Portfolio der WordPress-Oberfläche und des Gutenberg-Editors.
Aber hier ist WordPress nicht konsistent, denn es gibt zwei unterschiedliche Konfigurationsoberflächen:
- Einstieg über WordPress.com
- Einstieg über digitalesleben.blog/wp-admin
Der Einstieg über Variante 1 zeigt ein Dashboard, wie man es auch über die iOS-Varianten schon kennt, jedoch gibt es deutlich mehr Möglichkeiten als bei der mobilen Variante. Beim Einstieg über Variante 2 zeigt sich ein deutlich professionelleres und komplexeres Dashboard, das Standard für die durch WordPress.org verteilte Version ist.
Bei beiden Desktop-Varianten macht besonders das Ausprobieren der unterschiedlichen, von WordPress.com angebotenen Themes, Spaß. Dies ist eine großartige Spielwiese.
Auf einfachste Art und Weise werden die Themes über die eigene Webseiten-Inhalte gestülpt, Man erhält dadurch einen schönen Überblick, wie die eigene Webseite mit dem neuen Theme aussehen könnte. Es wird unterschieden zwischen kostenlosen Themes (die man mit dem Blogger-Tarif verwenden kann), oder die kostenpflichtigen Themes (die man nur mit einem teuren Premium- oder Business-Tarif nutzen darf). Auch das Hochladen von extern zugekauften Themes ist nur bei den teuren Tarifen möglich. So funktioniert halt das Geschäftsmodell von WordPress.com. Das war mir aber vorher auch klar.
Ich habe mit den vorhandenen Themes ein wenig gespielt und folgenden kleinen Film mit den von mir verwendeten Themes erstellt. Dort sieht man sehr schön, wie die Webseiten-Elemente von Titel, Site Logo, Featured Content, angepinnte Beiträge, Widgets, Social Media Menu und normales Menu von den unterschiedlichen Themes angeordnet und strukturiert werden.
Wie geht es weiter? Web Design Beispiel mit unterschiedlichen Themes
Das Theme Rebalance habe ich nun ausgereizt. Alle beschriebenen Elemente habe ich im Rahmen des Blogger-Tarifs verwendet.
Damit habe ich eine gute Basis gelegt und möchte mich wieder mehr um die Inhalte kümmern und nicht länger um das Look and Feel. Aber dieser Quick Peak in kostenpflichtige, und schön strukturierte Themes, hat mir durchaus Appetit auf mehr gemacht.
Hier sind Beispiele von Themes, die ich mir in Zukunft mal anschauen werde:
Ich bin gespannt, wann das Kribbeln wieder beginnt, und ich mich weiter in Richtung Web Designer entwickle. Viele Einstellungen habe ich ja noch gar nicht anpacken können, wie z.B. die Einbindung von HTML und CSS.
