IronShark mit neuem Screendesign für Jolie.de

Der Auftrag der Vision Media GmbH an IronShark war die Umsetzung eines mobile first optimierten Portals.
Seit dem 21. Oktober 2015 können die Leserinnen ihre Lieblingszeitschrift mit neuem Screendesign genießen.

Ein responsives Portal für alle Endgeräte

Um ein optimales Ergebnis für die Zielsetzung „mobile first“ zu erreichen und langfristig zu ermöglichen, haben unsere WebDesigner ein modernes, responsives Portal auf einem Gridsystem erstellt. Dieses ermöglicht optimale Anpassung an Phone, Tablet oder auch Desktop.

Ein Gridsystem ist nach Spalten und Zeilen aufgebaut, quasi wie eine Art Mauer. Die einzelnen Blöcke dieser Oberfläche positionieren sich je nach Screen des Endgerätes und passen sich in der Mauer ein. Diese neue Anordnung steckt hinter dem Begriff responsive.
Anordnung von Spalten und Zeilen im Grid System.
Anordnung von Spalten und Zeilen im Gridsystem.

Screendesign nach neuesten Stardards

Schnelles Laden, hohe Flexibilität und klares Design gewähren den Besuchern der Seite ein maximales Erlebnis am mobilen Gerät.

Passgenaue Frontendtemplates für Jolie.de

Um eine langfristig hochwertige Leistung des Screendesigns zu ermöglichen, entwickelten unsere Webdesigner für das Frontend individuelle HTML5 Templates. In dieses wurde speziell Microdata nach schema.org eingebunden um die maschinelle Lesbarkeit für Suchmaschienen, Newscrawler und Screenreader zu gewährleisten. Um eine geringe Ladezeit zukünftig garantieren zu können, sind mehrere Elemente in den Webauftritt der neuen Jolie.de eingebaut. Um eine fehlerfreie Darstellung zu garantieren, wurde die Werbung als Teil des Grundrasters im Frontend verankert.Eine gestochen scharfe Darstellung und schnelle Ladezeit des eMagazins erreichte das Team u. a. indem SVG Icons eingebunden wurden.

Flexibilität und hohe Lade-Geschwindigkeit durch optimale Verwendung von CSS3

Mit CSS3 wurde ein Layout mit Flexbox für ein flexibles Layout auf verschiedenen Gerätetypen umgesetzt. Grundlage der CSS Struktur ist einerseits die Umsetzung in SASS für Übersichtlichkeit und leichte Lesbarkeit und andererseits die Verwendung von BEM CSS Terminologie für eine lesbare und modulare Struktur. Diese Punkte garantieren eine durch Suchmaschinen positive Bewertung als auch eine erleichterte Möglichkeit der Weiterentwicklung in der Zukunft. Und auch die Stabilität ist damit gegeben.
Ein besonderes Augenmerk galt bei der Entwicklung die Ladegeschwindigkeit. Damit die Seite möglichst schnell lädt, wurde „critical CSS“ eingebunden. Hierbei wird zuerst das Design für Elemente geladen, die auf dem ersten Blick sichtbar sind (above the fold). Diese sind dann sofort sichtbar. Die restlichen Elemente der Seite (below the fold) werden im Anschluss gestyled. Dadurch kann die Ladezeit drastisch reduziert werden. Damit eine starke Performance geleistet werden kann, verpackte das Team das CSS in spezifische CSS Selektoren. Dies ergibt eine geringe CSS Dateigröße.
Am Ende der Optimierungen stand die Minimierung von Seiten-Reloads. Genutzt haben unsere Web-Entwickler hierfür JSON Schnittstellen per Ajax.


  • Optimale Darstellung auf allen Endgeräten

    Auf jedem Endgerät wir das eMagazin ideal und schnell dargestellt.


  • Gestochen scharfe Grafik

    Auf dem Desktop können Leserinnen ihre Zeitschrift gewohnt genießen.


  • Lesen auf dem Tablet

    Sämtlicher Content wird scharf und dem Format entsprechend dargestellt.


  • Unterwegs mit dem Smartphone

    Dank bester Optimierung lädt jede Seite schnell und problemfrei.


IronShark – Individuelles und hochwertiges Screendesign für Ihren Webauftritt

Die Umsetzung des Screendesigns der Website Jolie.de zielte auf optimale Performance, geringe Ladezeiten und ideelle Anpassung der Darstellung auf allen Endgeräten.
Sie sind an einer modernen Umsetzung Ihres Webauftritts interessiert? Sie benötigen einen fairen und kompetenten Partner für ein Screendesign Ihres anspruchsvollen Web-Magazins?

IronShark garantiert Ihnen neueste Standards und kreative Beratung:

  • responsive Portale optimiert auf mobile First
  • individuell auf Ihr Produkt zugeschnittene HTML5 Templates
  • schnelle Ladezeiten durch übersichtliche CSS Struktur und Einbindung von „critical CSS“
  • flexibles Layout dank Flexbox
  • Minimierung der Seiten-Reloads