Start » Blog

Georgien Nachrichten geflext und mit Shariff

Die Georgien Nachrichten sind seit November 2015 responsiv gestaltet. Das Flexbox Layout bietet nun ein neues Layout

Thomas Berscheid
⌨ 05.07.2016 um 10:05:00

Nein, liebe Leser. In diesem Artikel schreibe ich nicht über Leichen, die mit Hilfe einer Trennscheibe in handliche Portionen zerteilt werden. Meine kriminalistischen Neigung gehen in diesem Fall in eine Richtung, die sich mit einer Technik zur Gestaltung von Webseiten befasst, wie ich sie mir schon seit Jahren gewünscht habe: Das Flexbox Layout.

Die Georgien Nachrichten gibt es als eigenständige Webseite ja schon seit 2002. Seinerzeit habe ich für die Startseite eine Übersicht gestaltet, die die neuesten Nachrichten nach Rubrik geordnet in Boxen darstellt. Oben der Titel der Rubrik, darunter die neuesten Nachrichten als Links. Dafür habe ich die damals übliche Methode verwendet, die Seite mit Tabellen zu layouten. Das Ergebnis waren acht Ebenen, in denen die Tabellen ineinander verschachtelt waren. Und trotzdem war es noch nicht ganz das Layout, das ich haben wollte.

Vor ein paar Monaten habe ich zum ersten Mal mit dem Flexbox Layout gearbeitet. Diese recht neue Methode erlaubt es, ohne große Mengen von Formatierungen Elemente in einer Webseite so zu positionieren, dass sie sich in Abhängigkeit von der Auflösung des Brausers genau so ausrichten, wie sich der Webdesigner das gedacht hat.

Wie lange habe ich mir das gewünscht! Die Startseite der Nachrichten sind nun mit Boxen in drei möglichen Varianten ausgestattet. Und ich habe ungefähr 90% des Codes eingespart. Wichtig vor allem für später, wenn man an dem Projekt wieder etwas ändern möchte.

Eine weitere Änderung habe ich gleich mit gemacht. Auch die Georgien Nachrichten übertragen nun nicht mehr alle Daten nach Facebook, sondern nutzen den Shariff. Also dieses Modul aus der Hexenküche der Kollegen von Heise, bei dem man in zwei Schritten zu seinem gewünschten sozialen Netzwerk kommt und nicht unnötig geschnüffelt wird.
Kategorie ‣
Frontend
^