Responsive und Mobile Design der technikum29-Website

Seit Juli 2015 ist dem Websitebetreiber Mobildesign nicht mehr egal. Doch auch schon vorher gab es seitens des Designs Konzessionen an die Realität. So aus einer E-Mail vom 29. Juni 2015:

Das Layout für die technikum29-Website, welches 2011 entstanden ist (vgl. Kommentiertes Design), war ja noch einem anderen Paradigma entstanden. "Feste Breite" war damals das Motto, nachdem sich die variable Breite vorher als inflexibel für deine Wünsche erwiesen hat. Alle Bildschirme kleiner als 1200 Pixel wurden damals außer Acht gelassen.

Dem habe ich einige Monate nach Veröffentlichung entgegengewirkt, in dem ich zumindest für Tablets das Menü nach unten gepackt habe. Eine gescheite Lösung, wo das Menü bei Tablets erscheint, gibt es bis heute noch nicht.

Für Handys hab ich dann erst im Laufe der Zeit eine Einspaltenlösung entwickelt, die dank der breiten Verwendung von Bildboxen ganz gut funktioniert.

Eine wirkliche Lösung dieses Problems fängt nicht dabei an, gerade auf der ​Robotik-Seite, die als einzige die Navigationsleiste alternativ nutzt, rumzubasteln. Stattdessen muss irgendetwas mit Aufklappmenü u.ä. her, über das ich noch nachdenken muss.

Diese Seite hier soll einen schnellen Einblick in die Breakpoints und Breiten des derzeitigen technikum29-Layouts bieten.

Da das technikum29-Layout von 2011 ("t29v6") nicht gemäß dem mobile first-Prinzip gemacht wurde, sondern mit der Idee einer festen Breite (siehe obige Mail), sind alle responsive-Anpassungen von dem eigentlich Ziellayout aus zu sehen: Einem sehr breiten Bildschirm mit 1250px Breite.

1250px: Der Computerbildschirm

Auf derzeitigen Computer- und Notebookdisplays ist mit einer Anzeige der Website in dieser Form zu rechnen:

Hier erkennt man die "Guiding Principles" des technikum29-Layouts: