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.

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur 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.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 3 Kommentare

  1. Jan Gert
    schrieb am 21.12.2019 um 17:07 Uhr:

    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.

    Antworten
  2. Marian
    schrieb am 04.12.2019 um 21:27 Uhr:

    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

    Antworten
    • Jonas Hellwig
      schrieb am 12.12.2019 um 20:39 Uhr:

      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.

      Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Design-Projekte mit kulturbanause

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.

Responsive Webdesign-Leistungsangebot →

Schulungen von kulturbanause

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.

Übersicht Schulungsthemen →