Generation Blue / Startseite / Tablet-Ansicht [Responsive Webdesign] © echonet communication GmbH

  • Generation Blue / Responsive Ansicht [Repsonsive Webdesign] © echonet communication GmbH .
  • Generation Blue / Startseite / Fullscreen © echonet communication GmbH .
  • Generation Blue / Startseite / Tablet-Ansicht [Responsive Webdesign] © echonet communication GmbH .
  • Generation Blue / Startseite / Smartphone-Ansicht [Responsive Webdesign] © echonet communication GmbH .

Generation Blue

Projektumfang:
Konzeption, Design, HTML
Fertigstellung:
Mai 2012
Link:
www.generationblue.at
  • Generation Blue / Responsive Ansicht [Repsonsive Webdesign] © echonet communication GmbH
  • Generation Blue / Startseite / Fullscreen © echonet communication GmbH
  • Generation Blue / Startseite / Tablet-Ansicht [Responsive Webdesign] © echonet communication GmbH
  • Generation Blue / Startseite / Smartphone-Ansicht [Responsive Webdesign] © echonet communication GmbH

Für das österreichische Lebensminsterium setzte echonet das Konzept, Design und Front-End der neuen Webseite der Generation Blue als responsive Webdesign um. Ohne iPhone- oder iPad-Version!

Responsive Webdesign für alle Endgeräte

Zukunftsorientiert und optimal passend für die Zielgruppe der Teenager setzte die Agentur echonet das Design und die HTML5- und CSS-Programmierung für die Generation Blue um. Geneartion Blue ist eine Aktion der Sektion Wasser im Bundesministerium für Land- und Forstwirtschaft, Umwelt und Wasserwirtschaft.

Das responsive Webdesign, das die Agentur für den Kunden konzipierte und entwickelte ist so ausgelegt, dass sich die Seite automatisch an die Breite es Endgerätes anpasst. Damit entfallen die in der Vergangenheit oft üblichen Methoden der eigenen Programmierung für Smartphones oder Tablet-Endgeräte. Wie das Design sich selbst an die Breite des jeweiligen Endgerätes anpasst, kann jeder Nutzer auch am Computer verfolgen, wenn er den Browser entsprechend verkleinert. Das flüssige Webdesign organisiert dabei die Inhalte je nach Breite des Endgerätes für den Nutzer entsprechend um und optimiert auch in der Höhe des Displays durch die Reduktion von Content. Wichtige Grundvoraussetzung dabei ist allerdings, dass keine Inhalte völlig dem User verborgen bleiben, alle Inhalte sind auch im Hintergrund erreichbar. CSS und HTML5 ermöglichen diese Technik, die von echonet hier eingesetzt wird.

Wissenswertes über das Thema "Responsive Webdesign" erfahren Sie auch in unserer Seite im Bereich Wissen.

Magazin-Stil im Design

Um der Zielgruppe entsprechend erwachsen entgegen zu kommen wurde das früher eher für Kinder ausgelegte Design verworfen und durch ein magaziniges Design basierend auf fließenden Boxen entworfen. Dies ist keine Zwangsvoraussetzung für responsive Design, aber in der Umsetzung durchaus hilfreich.

Schwerpunkt-Themen-Setzung per Startseite

Ausgehend von der Idee des Magazin-Stiles im Design der Seite wurde auch die Startseite mit besonderen Möglichkeiten ausgestattet. Die Startseite kann redaktionell so geführt werden, dass Sie für den Nutzer klar die Themenschwerpunkte kommuniziert, großflächige Bilder, große Typographie (mit Hilfe der Einbettung von Webfonts) wurden umgesetzt. Durch die eingesetzte Technik ist die Seite auch barrierearm.

Im Projekt war die Startseite und ihre sehr unterschiedlichen Ausprägungsmöglichkeiten auch die stärkste Herausforderung in Sachen Responsive Webdesign.

Social-Media-Implementierung: 2-Klick-Verfahren

Im Rahmen des Projektes, das sich an die junge Zielgruppe der Teenager wendet, wurde auch eine Social media Implementierung vorgenommen. Diese wurde extra mit einem 2-Klick-Verfahren ausgestattet. Hintergrund dieser Idee ist, dass die Social Plugins nicht ohne Zutun des Nutzers geladen werden (und damit auch sein Datenschutz gewährleistet bleibt). Nur, wenn der Nutzer selbst zustimmt, erscheint das Social Plugin korrekt und es können Tweets oder Facebook-Likes dazu erfolgen.

Umsetzungspartner beim Projekt Generation Blue

« zurück zur Übersicht