Allgemein

Web Design am Beispiel des Digitalen Lebens

Auch mit dem Blogger-Tarif kann man eine Vielzahl von Themes ausprobieren. Web Design an meinem Blog und Beispiel-Auswahl von Themes

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.

Web Design Beispiel: Rebalance
Digitales Leben im Rebalance-Theme

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.

Den Wechsel von einem kostenfreien WordPress.com-Tarif auf den kostenpflichtigen Blogger-Tarif habe ich in diesem Blogbeitrag beschrieben. 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
Beschreibung der Features des Rebalance-Themes
Die Funktionen von Rebalance

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.

iOS-App von WordPress.com. Die OberflÀche
OberflÀche der iOS-Version von WordPress

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.

In der iOS-App von WordPress.com. Anpassung der Themes

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:

  1. Einstieg ĂŒber WordPress.com
  2. 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.

WordPress.com-OberflĂ€che fĂŒr Themes Auswahl - Variante 1
Konfiguration der Themes Variante 1 auf dem Desktop-Browser
WordPress.com OberflÀche zur Auswahl von Themes. Variante 2
Konfiguration der Themes Variante 2 auf dem Desktop-Browser

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.

Eine kleine Theme-Kollektion angewendet auf das Digitale Leben

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:

Web Design Beispiel: Attache
Attache

Web Design Beispiel: Broadstreet
Broadsheet

Web Design Beispiel: Optitheme
Optitheme

Web Design Beispiel: Patch
Patch

Web Design Beispiel: Hive
Theme: Hive

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.

1 Kommentar

Kommentar verfassen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darĂŒber, wie deine Kommentardaten verarbeitet werden.

%d Bloggern gefÀllt das: