Responsive Design und Media Queries sind definitionsgemäß eng miteinander verbunden. Der 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.
Sie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
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 !
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.
Jonas ist Gründer von kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.
Raimund ist oft die erste Ansprechperson bei kulturbanause. Er kümmert sich hauptsächlich um die Betreuung und Beratung unserer bestehenden als auch künftigen Kundschaft. Ein weiterer Schwerpunkt seiner Tätigkeit liegt im Design nicht unmittelbar sichtbarer Dinge: Struktur und Inhalte. Projekte unterstützt er daher vor allem in der Anfangsphase in Bereichen wie Informationsarchitektur, UX-Design und Content Strategy.
Unsere Leinwand ist der Browser und wir beschäftigen uns seit 2010 intensiv mit dem Thema Responsive Design. Wir realisieren flexible Web-Layouts und modulare Design Systeme.
Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.
Unsere Agentur in Berlin unterstützt bei digitalen Projekten mit sehr unterschiedlichem Umfang. Mit Beratung, Gestaltung und Programmierung helfen wir Menschen in verantwortungsbewussten Unternehmen dabei, online zeitgemäß zu kommunizieren.
Sie sehen gerade einen Platzhalterinhalt von Facebook. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Sie sehen gerade einen Platzhalterinhalt von Instagram. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Sie sehen gerade einen Platzhalterinhalt von X. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
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.