Design Webseite Jolie

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

Anordnung von Spalten und Zeilen im Grid System.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. Aber was ist überhaupt ein Gridsystem? Hier sehen Sie die 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.

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

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.

Top auf dem Smartphone

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

Weitere Beiträge aus dem Bereich