TYPO3 microsite: "Creative fun"

For the new 2016/2017 edition of the brochure Growing up well with media - A network for children of the Federal Ministry for Family Affairs, Senior Citizens, Women and Youth, we designed and developed the microsite Creative Play fun for children from 4 to 10 .

The project was commissioned by our client jugendschutz.netwho created the brochure and supervised its content.

To the microsite:
www.surfen-ohne-risiko.net/kreativ

August 2016

The project starts with a brainstorming session of the participants involved. In addition to the customer's idea, which is still quite abstract in terms of content up to that point, of being able to make creative online offerings for children accessible in an online catalog system, only the approximate date for going live is known so far: The new edition of the brochure "Growing up well with media - A network for children" from the Federal Ministry for Family Affairs, Senior Citizens, Women and Youth is to be published in November 2016 at the latest. Since the microsite will be referenced in it, it must be online by then. 

The framework requirements are

• Adherence to the style guide of the "Growing up well with media" initiative.
• Playful and structured access for the target groups parents and educators, but not too playful.
• Attractive presentation on all devices, especially smartphones.

In close cooperation with our design partner Kontext Kommunikation, we develop the basic concepts for user guidance and function. After approval by the customer, we create wireframes for this. These go through a correction loop and are released by the customer. The design partner starts designing the layout according to our specifications at the end of August.

September 2016

The design takes shape. Important for minimizing unexpected results: The customer provides us with real data for the content, so there is no need to work with sample content in the layout. Icons are created according to the specified CI of the initiative Gutes Aufwachsen mit Medien. Colors, shapes, fonts and content images are arranged.

Parallel to this, development begins: the backend of the existing TYPO3 system of Surfen ohne Risiko, in which the microsite is to be technically located, is completed for data maintenance and initially filled for testing. Frontend prototypes for the unusual user interface of the desktop navigation concept are programmed to rule out uncertainties regarding feasibility.

October 2016

The layout is released. The implementation of the individual frontend can now begin in a targeted manner. Even during implementation, final refinements regarding the filter function are coordinated with the customer. 

November 2016

On 08.11.2016, the preliminary microsite is completed and filled with content to the extent that we are satisfied. After a short test, the customer also finds the result good. A beta test is carried out: The customer forwards the preliminary microsite to selected test persons. The feedback is generally very positive.

A few final bugs are found and fixed, some new features suggested by the test persons are technically retrofitted. Since we also got to know the content goals of the customer in the last weeks, we also support with the editorial work with the goal of keeping the deadline: We exchange individual images and texts to achieve a consistent overall picture in terms of content.

On 29.11.2016, the microsite will go online.

• Conception:
  • Translating the content idea into innovative operating concepts (page navigation and search function)
  • Creating wireframes
• Coordination:
  • Setting up and monitoring the time schedule
  • Coordination of the design partner
  • Coordination with the editorial team at the customer
  • Accompanying correction runs and approvals
• Technical Implementation:
  • Establishment of editorial backend in existing TYPO3 system
  • Implementation of output with individually programmed TYPO3 extension based on Extbase (filters, lists, detail pages)
  • jQuery programming in the frontend. Focus on technical usability (e.g. filter functions) and performance (e.g. AJAX page reload)
  • Establishment of fully scalable layout: Responsive web design, which fluidly adapts to the respective width and height.
  • Buzzwords:
    SVG sprites, AJAX, Extbase, above-the-fold inline CSS, viewport sized typography, Vertically Responsive Design