WordPress: Layout

Das Layout ist das Kleid einer Website. Kriterien sind Farben, Spalten, feste oder flexible Breite, Schriften, Funktionen (Widgets) usw.

Layout „Twenty Ten“:

Dieses Layout, das Sie gerade sehen, wird für Anfänger empfohlen, weil man alles so vorfindet, wie man es normalerweise erwartet, d.h. üblicher Hauptbereich für die Artikel und rechts davon die Widget-Bereiche in der Sidebar.

  • Ein einfaches zweispaltiges Design mit diskreten Farbtönen (grau, blau). Blau gekennzeichnete Links werden auf der ganzen Welt verstanden.
  • Der Seitenkopf zeigt ein breites Bild Ihrer Wahl (z.B. Waldboden), mit fester Breite (940 Pixel).
  • Normalschrift mit Serifen, sowie Sans-Serif für die Titel und Ueberschriften.
  • Twenty Ten ist das Gewand meiner Website und ist auf die deutsche Sprache umgestellt worden; der Begriff „Home“ wird mit „Startseite“ übersetzt.
  • Horizontale Hauptnavigation und Suchfeld oben. Das heisst, die Navigation für die fixen Seiten wie z.B. „Impressum“ erscheint oben im Seitenkopf, neben dem Home-Link (weiss auf schwarz).
  • Widget „Letzte Kommentare“ oder „Schlagwörter-Wolke“ in die rechte Spalte hinzugefügt (mittels drag&drop). Zusätzlich könnte man z.B. ein Kalender-Widget auswählen und dieses in den zweiten Widget-Bereich ziehen. Die Schlagwort-Wolke macht allerdings erst dann Sinn, wenn die Schlagwörter sorgfältig gepflegt sind.
  • Abbildungen können ganz einfach auf der Seite eingebettet werden (kein umfliessender Text). Es ist möglich, eine einheitliche Bildgrösse voreinzustellen.

Eine Navigationsspalte auf der linken Seite ist für die Leser des Blogs überflüssig, da die Blog-Artikel wie bei einem Tagebuch einfach chronologisch sortiert sind (in umgekehrter Reihenfolge, das Neueste zuoberst).

Menu zum Anpassen des Kopfbildes

Das Layout kann im Dashboard angepasst werden. Zuerst möchten wir natürlich unser Lieblingsbild wählen.

  1. Im Dashboard: Design
  2. Untermenu Themes
  3. „Twenty Ten“ anpassen
  4. Header-Menu auf der rechten oder der linken Seite

Das Header Menu befindet sich entweder rechts oder auf der linken Seite. Nun kann ein gewünschtes Bild ausgewählt werden, z.B. Waldboden oder Sonnenuntergang. Das Header Image ist 940 x 198 Pixel gross — typisch für die feste Seitenbreite von „Twenty Ten“.

Gute Druckresultate erreichen wir mit einem Browser von Microsoft oder Apple.

Twenty Eleven

Ähnlich wie „Twenty Ten“ ist das Theme Twenty Eleven, bei welchem die Seitenbreite und das Seitenbild aber variabel sind. Wir können den Unterschied sofort beobachten, indem wir das Browserfenster verkleinern. Feste vs. flexible Seitenbreite; die variable Breite ist ein entscheidendes Kriterium und erinnert an ein E-Book! Beispiel Twenty Eleven Theme. Demgegenüber werden bei “Twenty Ten” sowohl Text als auch Bild einfach abgeschnitten, es sei denn man möchte horizontal scrollen (unbeliebt). Ferner zeigt „Twenty Eleven“ im Seitenkopf nicht immer das gleiche Bild an; und die Widget-Spalte rechts erscheint nur auf der Startseite bei Twenty Eleven. Das bedeutet, dass die gewöhnlichen Seiten bei Twenty Eleven nur einspaltig gestaltet sind. Beispiel http://opas-blog.de/

Twenty Thirteen

Auch Twenty Twelve und Twenty Thirteen kennen eine variable Seitenbreite. Die Entwickler weisen darauf hin, dass Twenty Thirteen als einspaltiges Layout verwendet werden soll. Eine Sidebar ist nur möglich wenn viel Platz vorhanden (variable Seitenbreite). Eventuell benötigte Widgets sollen im Footer ihren Platz finden. Die Entwickler bezeichnen Twenty Thirteen als Geräte-unabhängig. Natürlich gibt es hunderte weiterer Layouts, aber im Kurs beschränken wir uns. Für Anfänger ist Twenty Ten die beste Wahl wegen der festen Seiteneinteilung.

Responsive Design

Man spricht von “responsive design”, weil sich das Design ans Ausgabegerät anpasst: PC oder Smart Phone. Die Hauptnavigation der fixen Seiten wird bei Smart Phones und Tablets entsprechend optimiert. Siehe https://schreib1buch.com/?attachment_id=531
Im responsiven Webdesign wird meist mit Prozentwerten anstatt mit Pixelwerten gearbeitet, da die Display-Grössen sehr unterschiedlich sind.

WordPress schrieb 2012 zum „Twenty Ten“ Layout:

  • Our most popular theme!
  • 6,403,323 blogs use the Twenty Ten theme
  • Launched on April 26, 2010
  • Twenty Ten design by the WordPress team.

Wenn man bei WordPress eine private Homepage hostet, dann muss man sich bewusst sein, dass bisweilen am Mobile Design herumgeschraubt wird. Manchmal, wenn ich mit dem Smart Phone eine Seite betrachte, dann hat eine Farbe auf einen neuen Farbton geändert oder ein grafisches Element ist vielleicht verschoben worden. Das responsive Design von „Twenty Ten“ wird also von Zeit zu Zeit optimiert… Unser Corporate Design der Universität ist zwar auch nicht für alle Ewigkeit gemacht, aber immerhin für viele Jahre!

Die Senioren schätzen es weniger, wenn sich das Aussehen oder die Benutzer-Schnittstelle (Dashboard) ändert.

Twenty Fourteen

Twenty Fourteen mit eingefügtem Header-Bild und einem Widget in der rechten Spalte (Schlagwörter). Das Design ist durch einen senkrechten schwarzen Balken auf der linken Seite gekennzeichnet, der allerdings nur dann erscheint, wenn das Bildschirm-Fenster ziemlich breit ist. Ich empfehle, Widgets ausschliesslich auf der rechten Seite zu platzieren, damit die Seiteneinteilung möglichst einfach bleibt; der Leser des Blogs soll nicht abgelenkt werden. Eine Navigationsspalte links wäre nur bei einer sehr grossen Website angezeigt, z.B. bei einer grossen Firma, einem Webshop oder einem Magazin. http://bloghaus.hypotheses.org/

Auch das Dashboard von wordpress.com kennt eine Navigationsspalte auf der linken Seite (weiss auf schwarz). Aber eine so umfassende Administrationsoberfläche ist eine andere Schuhnummer als unser privater Blog mit einem einfachen Webdesign.

Twenty Fourteen ist ein typisches responsives Design mit modernen Schriften, das auf allen Geräten ausgezeichnet aussieht. Betrachten Sie http://schreib1blog.com auf verschiedenen Geräten, falls Ihnen solche zur Verfügung stehen.

Beitrag: Webdesign und Widgets

Origin

Das Origin Theme ist eine moderne Alternative zu den klassischen Anfänger-Layouts.

Minimalistisches Layout: Origin Theme

Advertisements

9 Antworten zu WordPress: Layout

  1. pvollenweider2012 schreibt:

    Abbildungen im Text: es ist kein Problem, auf einer Seite eine Abbildung oder ein Foto einzubetten. Knopf „Dateien hinzufügen“: Bilder. Dabei ist es einfach, das Bild auf Wunsch zu verkleinern, damit es besser passt.
    Es ist jedoch möglich, die einheitliche Bildgrösse voreinzustellen (empfohlen).

  2. Pingback: Glossar der Seniorenuni | Kurs

  3. Pingback: Webdesign an der Seniorenuni | Kurs für Senioren

  4. Pingback: Im Schnellzug zur eigenen Homepage | Kurs für Senioren

  5. Pingback: Programmieren – ohne mich | Kurs für Senioren

  6. Pingback: Statistik der Aufrufe | Kurs für Senioren

  7. Pingback: Minimalistisches Layout | Kurs für Senioren

  8. Pingback: WordPress Einführung | Kurs für Senioren

  9. Pingback: Neue Einträge im Glossar | Kurs für Senioren

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s