Mein Endgegner: Responsive Design

04.10.2025 - 20:00 Uhr

Mein Logo-Vorschlag
für Responsive Design

Ich würde mich als durchaus guten Programmierer bezeichnen, der komplexe Dinge überschauen kann und Problemlösungen findet. Der gerne Datenbanken optimiert, diese aus sonstwas für einem Format importiert, wilde Sachen per Terminal und Kommandozeile erledigt, und weitere für Normalsterbliche krude Dinge macht.

Doch hübsches, augenfreundliches Design ist nicht wirklich mein Ding. Nie gewesen und ich werds wohl auch nie lernen, diese Art Kreativität ist für mich jedesmal eine schwierige Aufgabe.

Sämtliche private Webseiten, die ich in meinem Leben auf eigene Faust zusammengebastelt habe, sahen wenn überhaupt ausreichend aus, was richtig Schönes kam nie bei rum.

Da man seit neuestem eine Webseite nicht nur für die Verwendung am PC mit großem Monitor herrichten muss, kommt auch noch das Reizwort Responsive Design dazu, was die ganze Sache nur schlimmer macht.

Einfach alles halbieren ist keine Lösung

Unter Responsive Design versteht man das Anpassen des Erscheinungsbildes einer Webseite, damit es auf allen möglichen Geräten gleich bzw. entsprechend der Bildschirmgröße optimal aussieht. Ob auf den kleinen Handy im Hochformat, dem breiteren Tablet, oder wie gewohnt für den großen Monitor.

Theoretisch ist die Sache sogar recht einfach. Es wird ein Set an CSS-Einstellungen als Basis verwendet, und daran werden je nach Bildschirmbreite Änderungen vorgenommen. Auf dem Monitor werden Dinge meist nebeneinander angeordnet und der Platz ausgenutzt, auf dem Handy eher untereinander.

<style>
	div {
		/* side by side */
		display:	inline-block;
		border:		1px solid black;
		width:		50%;
	}
	/* New definitions if width smaller 700 px */
	@media screen and (max-width: 700px) {
		div {
			/* one above the other */
			display:	block;
			width:		auto;
		}
	}
</style>

<div>Text left</div>
<div>Text right</div>

Doch der Teufel steckt im Detail. Sieht es auf dem PC annehmlich aus, hakts auf dem Handy. Kaum hat man die schmale Ausgabe angepasst, siehts auf dem großen Monitor wieder seltsam aus. Wurden beide unter Kompromissen zurechtgestutzt, macht das Tablet Probleme. Mit einem anderen Browser oder gar anderen Betriebssystem betrachtet, gibt es wieder eine Überraschung.

Dann wären auch noch diverse HTML-Tags wie <a> und <pre>, die standardmäßig Inhalte zum Verrecken nicht umbrechen wollen, was zu horizontalen Scrollleisten auf dem Handy führt. Wie lange ich allein nach den dafür verantwortlichen CSS-Einstellungen gesucht habe, werde ich niemals irgendwo auch nur andeuten. Und jetzt komm mir keiner mit nem simplen Word-Wrap, White-Space oder Overwrap!

Möglicherweis haben echte Designer bessere Strategien und/oder Tools als ich, aber für meine Wenigkeit war es teils sehr nervige Sisyphusarbeit.

Kräftig auf den Tisch hauen oder dem Monitor gut zureden hilft Null Komma Null, soviel steht fest.

Es werde Licht ...

Wie dem auch sei. Mit dem heutigen Update sollten wenigstens die gröbsten Schnitzer ausgebaut sein. Luft nach oben gibt es immer, ein paar Baustellen habe ich noch auf der Todo-Liste, aber es sieht auf keinem Gerät mehr richtig mies aus.
(Hoffe ich)

Entsprechend habe ich mir eine Pause verdient.

Grüß Bob,
Martin

PS:
Der nächste Endgegner kommt bestimmt.
Ich guck mich lieber gar nicht erst um.

Impressum • Über den Blog