Was ist neu?

Mit dem Relaunch wurden Grundzüge des Hobby-Designs und des Erscheinungsbildes der vorigen Website übernommen. Alle Elemente wurden aber neu gebaut und das System vollständig modernisiert. Da die Seite zum einen wieder möglichst langlebig und zum anderen barrierefrei nach Konformitätsstufe AA sein soll, haben wir folgende sechs Grundprinzipien festgelegt:

1. Wahrnehmbar
2. Bedienbar
3. Verständlich
4. Robust
5. Nachhaltig
6. Skalierbar

Alle Elemente, Features und Inhalte müssen im Hinblick auf diese Grundprinzipien überprüft werden. Gegebenenfalls ist abzuwägen, welches Prinzip man zugunsten eines anderen Vorteils vernachlässigen kann.

Der wohl größte Unterschied in der Pflege der Seite ist die Tatsache, dass es keine Raster-Elemente mehr gibt. In der Vergangenheit musste für die meisten Content-Elemente zunächst ein Raster-Element angelegt werden, in welches die Elemente platziert wurden. Das ist nicht mehr nötig! 

Die heutigen Content-Elemente tragen ihre Raster in sich. Über den Reiter „Erscheinungsbild“ können bei den meisten Elementen Layoutvarianten ausgewählt werden, die die Inhalt auch mehrspaltig verteilen oder je nach Möglichkeit des Elements anders anordnen. Welche das je Element sind, könnt ihr auf den jeweiligen Seiten nachsehen.

Vorteil: Die Pflegenden müssen weniger Zeit in den Aufbau des Frontend-Layouts stecken. Ein Layout kann schnell gewechselt und Inhalte ergänzt werden. Auch die Übersetzung sollte schneller vonstatten gehen, da keine Raster mehr gesondert übersetzt werden müssen.

Wir haben versucht, ein System zu entwickeln, das nicht so einfach „kaputt“ zu pflegen ist und welches den Inhalt semantisch korrekt darstellt. Dazu gehört einerseits der Verzicht auf Raster, die vorgegebenen Layoutvarianten, aber auch weitere „Restriktionen“ innerhalb der Content-Elemente. 

Wenn ihr eine bestimmte Vorstellung von einem Layout habt, das ihr so nicht umsetzen könnt - versucht bitte auf keinen Fall, es trotzdem „irgendwie hinzubiegen“ wie in der Vergangenheit. 

Beispiel 1: Ein Abstand gefällt mir nicht. 

Früher wurde gerne ein leeres Raster-Element eingepflegt, um einen Abstand zu erzeugen oder es wurden Leerzeilen in den Text eingefügt. So etwas tun wir nie mehr! Sollten Abstände nicht passen, wendet euch an das Design-Team von New Communication!

Beispiel 2: Mir gefällt die Überschrift hier nicht, ich nehme einfach eine andere.

Früher wurden Überschriften häufig nach optischen Gründen gewählt, ohne Rücksicht auf die semantische Reihenfolge. Das soll nicht wieder passieren! Im heutigen System sind weniger Überschriften-Typen verfügbar und haben eine zugeschriebene Semantik. Wenn euch hier etwas nicht gefällt, wendet euch ebenfalls an das Design-Team von New Communication. Die semantisch korrekte Reihenfolge von Überschriften ist essenziell für die Barrierefreiheit der Seite.

Beispiel 3: Ich möchte etwas in einem Layout darstellen, das es so noch nicht gibt.

Früher wurden ab und zu Raster in Raster gepflegt, z.B. um eine vierspaltige Darstellung zu realisieren. Oder es wurden Grafiken in einem Fullimage-Element gepflegt, um einen bestimmten visuellen Effekt zu erzeugen. Auch so etwas tun wir nie mehr! Sollte eine andere Aufteilung der Elemente gewünscht sein oder sollten neue Elemente gewünscht werden, wendet euch an das Design-Team von New Communication. Vielleicht reicht es schon, eine neue Layoutvariante dem Element hinzuzufügen. Zu allererst hinterfragt euch aber bitte, ob es nicht doch mit den bestehenden Elementen realisiert werden kann!

Eine der größten Änderungen liegt in der Pflege und im Umgang mit den Inhalten der Seiteneigenschaften. Zum einen werden diese von den Hero-Elementen der Seite genutzt, zum anderen von den Teaser-Elementen. So werden Teaser zukünftig nicht mehr unabhängig von der Zielseite gepflegt. In den Teaser-Elementen werden lediglich die gewünschten Seiten verknüpft. Somit erreichen wir Einheitlichkeit z.B. in der Kommunikation von Produkten und verringern den Aufwand in der Texterstellung und -übersetzung.

Ich möchte andere Inhalte im Teaser als die der Seiteneigenschaften:

1. Unter der gewünschten Zielseite einen Ordner „Seitenteaser“ anlegen (wenn es ihn noch nicht gibt).
2. In diesem Ordner eine Seite mit dem Typ „Verweis“ anlegen.
3. Als Verweisziel die gewünschte Zielseite angeben.
4. Die Seiteneigenschaften der Verweis-Seite mit den gewünschten Inhalten des Teasers befüllen.

Ich möchte eine externe Seite anteasern:

1. Teaserbilder bzw. -medien in der Dateiliste in den Ordner „Externe-Seiten“ hochladen.
2. Im Seitenbaum im Ordner „Externe Seiten“ eine Seite mit dem Typ „Link zu externer URL“ anlegen.
3. Als URL die Adresse der gewünschten Zielseite angeben.
4. Die Seiteneigenschaften der Seite mit den gewünschten Inhalten des Teasers befüllen.

Versuche, soweit wie möglich auf referenzierte Objekte zu verzichten! Das neue System sollte den Bedarf auch drastisch reduzieren. Dennoch wird es immer mal wieder Elemente geben, bei denen es doch Sinn macht, sie zu referenzieren. Das ist der Fall bei Objekten, die 1:1 auf mehreren Seiten vorkommen, z.B.:

• bestimmte SectionHeadings
• Adressblock auf Stellenanzeigen

Wichtig: Referenziere niemals Teaser-Listen! Solltest du die gleiche Teaser-Liste mehrfach benötigen, kopiere sie dir einfach und setze eine Kopie – keine Referenz – ein!

Auch wichtig: Wenn du ein Objekt referenzieren möchtest, lege das Original-Objekt im Ordner „Referenzobjekte“ an und referenziere von dort. Dort finden sich bereits ein paar Beispiele.

Die Seite wird zum größten Teil auf mobilen Endgeräten genutzt. Daher geht die mobile Darstellung vor - denkt immer daran, wenn ihr Seiten aufbaut. Das Design ist so konzipiert, dass die Seiten mobil gut aussehen sollten. Zerbrecht euch nicht zu sehr den Kopf, wie die Desktop-Darstellung aussieht. In der mobilen, einspaltigen Darstellung steht sowieso alles untereinander. 

Wir wollen zukünftig einheitlichere Bildgrößen verwenden. Um das zu unterstützen haben wir den Medien-Elementen Bildcropping-Varianten hinzugefügt. In der Pflege muss darauf geachtet werden, die gewünschten Croppings einzustellen. Auf einer Seite, zumindest innerhalb eines Content-Elements sollten die gleichen Croppings verwendet werden. Bevorzugt ist das 16:9 Format für Querformate und das 1:1 Format bzw. 3:4 Format für eher hochformatige Bilder anzuwenden.

Bei den Übersetzungen ist zu beachten, dass diese zukünftig aus verschiedenen Ursprungssprachen gepflegt werden, sofern es eine passende Ursprungssprache gibt. Da nicht erkannt werden kann, aus welcher Ursprungssprache übersetzt wurde, muss immer nach folgender Logik vorgegangen werden:

Wichtig: Nach wie vor sollte immer im verbundenen Modus übersetzt werden. Nur auf der Startseite kann davon abgewichen werden.