Webdesign: Wie lsgerbsloeh.de entstand

Schneller, hübscher und vor allem benutzerfreundlicher sollte unsere neue Website werden. Inzwischen ist sie online. Welche Kriterien dazu berücksichtigt wurden und was wir mit unserer neuen Website erreichen wollen, schildern wir in diesem Artikel.

Gegenüber der alten Website ist die neue Seite für mobile Geräte optimiert.

Für unsere Luftsportgruppe ist die Präsenz im Internet und ein zeitgemäßer Umgang mit sozialen Netzwerken im Rahmen der Öffentlichkeitsarbeit nicht mehr weg zu denken. Wir nutzen die Website gezielt für die Nachwuchswerbung und informieren über das Vereinsleben und Veranstaltungen.

Drei Gründe für den Relaunch

1. Das Verhalten der Leser

Seit einem guten Jahr sind wir auf Facebook mit einer eigenen Seite aktiv. Unsere Internetseite gibt es schon seit vielen Jahren. Doch das Verhalten unser Leser im Web und die technischen Möglichkeiten haben sich verändert.
Während früher beispielsweise längere Texte auf Webseiten trotz kleiner Schrift und überladenem Desing Beachtung fanden, ist man heute deutlich kritischer auf Webseiten unterwegs. Innerhalb von Sekunden entscheidet sich, ob die gebotenen Inhalte lesenswert sind oder nicht.
Texte werden überflogen, regelrecht gescannt, um Inhalte zu erfassen und interessante Absätze zu vertiefen. Häufig sind es nur die Fotos, die angeschaut werden.

2. Die Anzahl mobiler Geräte nimmt zu

Die Zahl derer, die sich mit mobilen Geräten (Smartphone und Tablets) im Internet informieren, nimmt stetig zu. In der Bahn auf dem Weg zur Arbeit oder in der Mittagspause zwischendurch verraten abonierte RSS-Feeds der Lieblingsseiten schnell, ob es etwas Neues gibt. Das Internet und damit unsere Inhalte sind für fast jeden und zu jeder Zeit verfügbar.
Der Touchscreen und die Auflösung mobiler Geräte stellen neue Anforderungen an das Screendesign der Website. Für eine komfortable Bedienung gibt es zum Beispiel Mindestgrößen für Schaltflächen und Text, damit eine komfortable Bedienung möglich ist.

3. Regelmäßige Berichterstattung mir mehreren Autoren

Für uns stellte sich die Frage, wie wir weiterhin unsere spannenden Themen zeitgemäß aufbereiten und vermitteln können. Im Hinblick auf unterschiedliche Inhaltsformen und eine regelmäßige Berichterstattung war die alte Seite einfach zu unflexibel.
Wir wollen zeitnah mit mehreren Autoren über Fortschritte in der Flugausbildung und über Streckenflüge berichten und dabei nicht auf Facebook angewiesen sein.
Es war Zeit für einen Relaunch der Seite – nach dem Motto: Was vor wenigen Jahren noch gut war, kann jetzt noch besser werden.

In sechs Schritten zur neuen Website

1. Die Entscheidung für ein Content-Management-System

Das Content-Management-System (CMS) werkelt im Hintergrund und verwaltet Inhalte, Benutzer und steuert das Aussehen der Website.
Für uns war es wichtig, dass zukünftig mehrere Vereinsmitglieder bestimmte Themenbereiche redaktionell pflegen können. Unser Ausbildungsleiter Jochen wird sich zum Beispiel um Beiträge zum Thema Flugausbildung kümmern und Segelflugreferent Hanno wird die Rubrik Streckenflug mit Leben füllen.
Darüberhinaus sollen unsere Leser die Möglichkeit haben, Artikel zu kommentieren.
Webtechniken wie CSS3 und HTML5 müssen vom CMS unterstützt werden.
Am Ende der Überlegungen viel unsere Wahl auf WordPress. Ausschlaggebend waren die folgenden Vorteile:

Vorteile von WordPress

  • OpenSource, das heißt kostenlos verfügbar
  • umfangreiche Auswahl an leistungsfähigen Templates
  • viele gute Plugins, beispielsweise zum kinderleichten Einbinden von Formularen und Fotos
  • CSS3 und HTML5 fähig
  • aufgeräumtes, intuitiv zu bedienendes Backend
  • sehr gute Voraussetzung für die Suchmaschinenoptimierung
  • gute Performance (Reduzierung der Ladezeit der Webseiten)

WordPress wird von Millionen Bloggern auf der ganzen Welt genutzt und regelmäßig an aktuelle Webtrends angepasst.

2. Das Screendesign

Derzeit zeichnet sich auf zahlreichen Webseiten und Blogs ein minimalistischer Desingtrend ab. Dabei geht es im Kern darum, dass die Inhalte, also Texte und Fotos, im Vordergrund stehen. Wir finden das gut und wollen auf Designelemente und Strukturen verzichten, die die Seite überladen wirken lassen und von den eigentlichen Beiträgen ablenken.
Darüber hinaus möchten wir für unterschiedliche Bildschirmgrößen ein optimiertes Erscheinungsbild der Website anbieten, damit das Informieren auf dem iPhone oder das Schmökern auf den iPad zur Freude wird. Das umständliche Hinein- und Hinauszoomen mit zwei Fingern – wie es auf Webseiten ohne mobile Optimierung der Fall ist – soll entfallen.

3. Die Typografie

Die Wahl von Schriftart, -größe und -farben trägt entscheidend zur angenehmen Lesbarkeit der Beiträge bei. Tendenziell erscheint Text im Web heute größer als früher. Eine Schriftgröße von 14 Punkten findet man sehr häufig – früher waren es zehn bis zwölf (je nach Schriftart).
Wir gehen noch einen Schritt weiter und definieren eine Größe von 16 Punkten für den Fließtext. Durch den großen Weißraum links und rechts der Beiträge können damit auch längere Reportagen angenehm am Bildschirm gelesen werden.

4. Das Farbklima

Segelfliegen bedeutet für uns Freizeit, Aktivität, Natur, Sport und sehr viel Begeisterung. Deshalb haben wir uns für eine Kombination aus Blau und aktivem Rotorange entschieden. Außerdem sollen unterschiedliche Grautöne für Text, Hintergründe und Linien zum Einsatz kommen.

5. Das WordPress Theme

Nachdem die Anforderungen der neuen Website anhand der oben beschriebenen Kriterien definiert waren, ging es an die Auswahl eines geeigneten Templates. Ein Template bzw. das WordPress Theme ist eine Webseitenvorlage, die neben einem Screensdesign bereits zahlreiche Funktionen beispielsweise zur Darstellung unterschiedlicher Inhalte auf verschiedenen Bildschirmgrößen enthält.
Da die Seite auch auf mobilen Geräten optimal dargestellt werden soll, muss das Theme entsprechend flexibel sein. Das Zauberwort lautet „responsive Design“.

Hier wird quasi »Eine Lösung für alles« gefunden und ein fle­xi­bles Webdesign wird so erstellt, dass es sich auf die unter­schied­lichsten Bildschirmgrößen anpassen kann. Mit Hilfe von eigenen CSS-Styles für die unter­schied­li­chen Bildschirmgrößen, können so neben dem Grundlayout auch Buttons oder Inhalte wie Videos und Schriften für mobile Geräte opti­miert werden.
Ellen von Elmastudio

Wir haben dazu vieles ausprobiert und uns schließelich für das Theme Pohutukawa von Elmastudio entschieden. Die große Schrift, das beeindruckende Foto im Kopfbereich der Website und der großzügige Weißraum haben uns besonders gut gefallen. Das Template wurde nach dem Prinzip „mobile-first“ von Elmastudio entwickelt.

»Mobile-first« bedeutet, dass man ein responsive Webdesign nicht vom großen Desktop-Layout Schritt für Schritt ver­klei­nert, sondern dass man die mobile Webseiten-Ansicht als Ausgangsbasis nimmt, und das mobile Webseiten-Design dann schritt­weise für größere Bildschirmformate optimiert.
Ellen von Elmastudio

Pohutukawa ist ein modernes responsive, mobile-first WordPress Blog-Theme von Elmastudio.

6. Anpassen des Themes und Einpflegen der Inhalte

Zum Schluss haben wir noch ein paar Anpassungen am Template vorgenommen und dabei die Startseite neu gestaltet, um auf die drei wesentlichen Kategorien („Fliegen lernen“, „Streckenflug“, „Verstehen“) und aktuelle Reportagen aufmerksam zu machen.
Nach der Installation von WordPress und diversen Plugins, konnten unsere Artikel und Seiten erstellt werden. Auf unsere Leser warten jetzt Fotos, Videos und Reportagen zum Segelfliegen bei uns im Verein. Zwischendurch werden wir mit Kurzmitteilungen immer wieder über aktuelle Ausbildungs- und Streckenflugerfolge berichten.

Neues von uns im Blog, auf Facebook oder im RSS-Feed
Wer über Neues von uns informiert werden möchte, kann uns auf Facebook folgen, unseren RSS-Feed abonieren oder regelmäßig im Blog vorbeischauen.

Wir hoffen, dir gefällt unsere neue Website und freuen uns über dein Feedback.

5 Kommentare

Schreibe einen Kommentar zu da_ta Antworten abbrechen

Pflichtfelder sind mit * markiert.


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