Video: Responsive Webdesign ohne Media Queries
Von Jonas In diesem Video erfahrt ihr, wann ein flexibles Layout ohne Media Queries sinnvoll sein kann und wie es technisch umgesetzt wird.
Responsive Design und Media Queries sind per Definition eng miteinander verbunden. Die Media Query definiert einen Breakpoint, der wiederum dafür sorgt, dass das Layout an den gewünschten Stellen umbricht und somit den Wechsel von Smartphone zu Desktop meistert. Doch seit Ethan Marcotte 2010 seinen populären Artikel zum Thema RWD veröffentlichte, hat sich viel verändert. Heute stehen neue Technologien zur Verfügung und auch die modulare Denkweise im Designprozess hat viel verändert. Grund genug, sich anzuschauen, wie es besser gehen könnte.
Webinale 2019-Session: Responsive Webdesign ohne Media Queries
In dieser Session erfahrt ihr, wann ein flexibles Layout ohne Media Queries sinnvoll sein kann, wie es technisch umgesetzt wird und welche Auswirkungen es auf den Konzeptions- und Designprozess hat.
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
Geschrieben von Jonas
Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, UX/UI und Frontend-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.
Ich bin mit dem Autor einverstanden. Heute stehen neue Technologien zur Verfügung und auch die modulare Denkweise im Designprozess hat viel verändert. Also ich bedanke mich für aktuelles Thema.
Hi Jonas.
sehr schöner und sehr informativer Vortrag! Andere Beiträge habe ich mir auch gleich angeschaut. Toll!
Ich fand es sehr wichtig und sehr informativ, die verschiedenen Techniken mit einem Zeitstempel zu versehen, so ist es gleich möglich, die „verschiedenen Techniken“ nach Qualität/Aktualität/“State of the art“ zu beurteilen.
Es gibt leider sehr viele Einleitungen/Beiträge, wo man nur erahnen kann, ob das diese oder letzes Jahrtausend war. Diese Info „State of the Art“ finde sehr hilfreich. Cool – danke!
Eine Frage/Bemerkung hätte ich noch:
Um responsiv oder adaptiv zu sein, oder irgenwelche Grössen Anpassungen zu machen, muss ich doch erst wissen, worauf ich triggern muss bzw. wie Gross mein Device ist (abgesehen von der Auflösung)? Leider bin ich auch nach langer Suche zu keiner Lösung gekommen.
-> UserAgend sagt nichts über die physikalische Grösse aus (Android habe ich in einem Watch, Phone, Tablet, TV -> 2cm. 10cm,30cm, 100-200 cm).
-> Media Queries beziehen sich auf pixel (ich will aber ein Button 2cm gross weil mein Finger so gross ist)
-> mein Handy hat mehr Auflösung wie mein TV
damit das Thema nicht einfach bleibt bin heute auf „meta=viewport“ gestossen :-) Um grössen Anzupassen werden vituelle Pixel-Auflösungen simuliert….
beim kleiner Auflösung wird hochscaliert sonst andersrum ….. und natürlich jeder Browser macht es anders ……
wow ! währe da aber eine einfache physikalische-size nicht sinnvoller ?
Ich bin seit Tagen auf der Suche, und bis jetzt auf keine Lösung gestossen wie Gross mein Button sein muss !
Wie ist heute das „State of the Art“ (12.2019) für das Problem !
Gruss
Marian
Hallo Marian,
du machst es dir ein wenig zu kompliziert, denn die verschiedenen Geräte wissen wie groß bzw. hochauflösend sie sind und rechnen Pixelwerte intern um. Wenn du also beispielsweise ein Element mit 100 Pixeln Höhe gestalten möchtest, dann schreibst du einfach 100 Pixel in deinen CSS-Code und hochauflösende Geräte mit z.B. 200% Displayqualität rechnen diese 100 Pixel dann * 2. Das passiert aber automatisch im Hintergrund.
Vielleicht hilft dir folgender Link weiter.