kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Video: Responsive Webdesign ohne Media Queries

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.

Workshops und Seminare von kulturbanause

Adobe XD, Responsive Design, Sketch, Visual Prototyping, Corporate Design …

Jetzt Frühbucher-Rabatte sichern!

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.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei Responsive Design-Projekten

Unsere Agentur ist auf responsive Design spezialisiert. Wir realisieren u.a. maßgeschneiderte Websites und führen Schulungen durch. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung einer Website im Responsive Design benötigst, helfen wir gerne weiter.
Responsive Webdesign-Leistungsangebot →

Das könnte dich auch interessieren

2 Kommentare

  1. Marian

    Verfasst am 4. Dezember 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

    • Jonas Hellwig

      Verfasst am 12. Dezember 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.

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.