TYPO3 Microsite: „Kreativer Spielspaß“

Für die Neuauflage 2016/2017 der Broschüre Gutes Aufwachsen mit Medien - Ein Netz für Kinder des Bundesministeriums für Familie, Senioren, Frauen und Jugend konzipierten und entwickelten wir die Microsite Kreativer Spielspaß für Kinder von 4 bis 10 Jahren.

In Auftrag gegeben wurde das Projekt von unserem Kunden jugendschutz.net, der die Broschüre erstellt und inhaltlich betreut hat.

Zur Microsite:
www.surfen-ohne-risiko.net/kreativ

August 2016

Das Projekt startet mit einem Brainstorming der beteiligten Teilnehmer. Neben der bis dahin noch recht abstrakten inhaltlichen Idee des Kunden, kreative Online-Angebote für Kinder in einem Online-Katalogsystem erschließen zu können, ist bisher nur der ungefähre Termin zum Livegang bekannt: Spätestens im November 2016 soll die Neuauflage der Broschüre „Gutes Aufwachsen mit Medien - Ein Netz für Kinder“ des Bundesministeriums für Familie, Senioren, Frauen und Jugend veröffentlicht werden. Da darin auf die Microsite verwiesen werden wird, muss diese bis dahin online gestellt sein. 

Die Rahmenanforderungen sind

• Einhaltung des Styleguides der Initiative „Gutes Aufwachsen mit Medien“.
• Spielerischer und strukturierter Zugang für die Zielgruppen Eltern und Pädagogen, aber nicht zu verspielt.
• Attraktive Darstellung auf allen Endgeräten, insbesondere auf Smartphones.

Wir entwickeln in enger Abstimmung mit dem Designpartner Kontext Kommunikation die grundsätzlichen Konzepte zur Bedienführung und Funktion. Nach Freigabe durch den Kunden erstellen wir hierzu Wireframes. Diese durchlaufen eine Korrekturschleife und werden vom Kunden freigegeben. Der Designpartner startet Ende August mit der Ausgestaltung des Layouts nach unseren Vorgaben.

September 2016

Die Ausgestaltung nimmt Form an. Wichtig für die Minimierung von unerwarteten Ergebnissen: Der Kunde stellt uns Real-Daten für den Inhalt zur Verfügung, so dass im Layout nicht mit Muster-Inhalten gearbeitet werden muss. Icons werden gemäß dem vorgegebenen CI der Initiative Gutes Aufwachsen mit Medien erstellt. Farben, Formen, Schriftarten und Inhaltsbilder werden arrangiert.

Parallel dazu startet die Entwicklung: Das Backend des bestehenden TYPO3-Systems von Surfen ohne Risiko, in dem die Microsite technisch angesiedelt werden soll, wird zur Datenpflege fertiggestellt und zum Test initial gefüllt. Frontend-Prototypen für die ungewöhnliche Bedienführung des Desktop-Navigationskonzepts werden programmiert, um Unsicherheiten bezüglich der Machbarkeit auszuschließen.

Oktober 2016

Das Layout wird freigegeben. Die Umsetzung des individuellen Frontends kann nun zielgerichtet beginnen. Noch während der Umsetzung werden letzte Feinheiten bezüglich der Filterfunktion mit dem Kunden abgestimmt. 

November 2016

Am 08.11.2016 ist die vorläufige Microsite soweit fertiggestellt und inhaltlich befüllt, dass wir zufrieden sind. Nach kurzem Test befindet auch der Kunde das Ergebnis für gut. Es erfolgt ein Betatest: Der Kunde leitet die vorläufige Microsite an ausgewählte Testpersonen weiter. Das Feedback ist generell sehr positiv.

Wenige letzte Fehler werden gefunden und behoben, einige von den Testpersonen angeregte neue Features technisch nachgerüstet. Da wir auch die inhaltlichen Ziele des Kunden in den letzten Wochen kennengelernt haben, unterstützen wir mit dem Ziel der Terminhaltung auch bei der redaktionellen Arbeit: Wir tauschen einzelne Bilder und Texte aus, um ein inhaltlich konsistentes Gesamtbild zu erreichen.

Am 29.11.2016 wird die Microsite online geschaltet.

• Konzeption:
  • Übersetzen der inhaltlichen Idee in innovative Bedienkonzepte (Seitennavigation und Suchfunktion)
  • Erstellen von Wireframes
• Koordination:
  • Aufstellen und Überwachen des Zeitplans
  • Koordinierung des Designpartners
  • Abstimmung mit der Redaktion beim Kunden
  • Begleiten von Korrekturläufen und Freigaben
• Technische Umsetzung:
  • Etablierung des redaktionellen Backends in bestehendem TYPO3-System
  • Umsetzung der Ausgabe mit individuell programmierter TYPO3-Erweiterung basierend auf Extbase (Filter, Listen, Detailseiten)
  • jQuery-Programmierung im Frontend. Fokus auf technischer Usability (z.B. Filter-Funktionen) und Performance (z.B. AJAX-Seitenreload)
  • Etablierung des vollskalierbaren Layouts: Responsive Webdesign, das sich fluid an die jeweilige Breite und Höhe anpasst
  • Buzzwords:
    SVG-Sprites, AJAX, Extbase, Above-the-fold Inline CSS, Viewport Sized Typography, Vertically Responsive Design