Grundsätzliche Fragen zu Responsive Webdesign

[Bernd]

Hallo zusammen,

ich hadere irgendwie immer noch mit RWD rum 😟

Bin noch ein "Oldschooler" aus den 90er Jahren und "festes" Pixeldesign gewohnt.

Soweit ich das richtig verstanden habe (berichtigt mich falls ich falsch liege):

1. Pixelangaben kommen eigentlich nur noch in den Media Queries und bei Fontgrößen vor. Ja ich weiß (R)EM gibt's auch noch 😉 Ggfs. noch Pixelangaben für das größtmögliche Layout als Begrenzung, damit es z.B. auf dem Desktop nur 1024 Pixel breit ist und nicht bildschirmfüllend.

2. Bilder haben Breite 100% und Höhe auto. Je nach Pixeldichte kann ich hochauflösendere Bilder laden.

3. DIVs haben entweder auch volle Breite in % oder prozentuale Angaben wie 75%.

4. Die Webseite ist eigentlich wie "Stretchgummi" und passt sich immer der Gerätebreite ein, sofern ich da in irgendeiner Form eingreifen willen (Elemente aus- bzw. einblenden, umbrechen etc), muss ich mit den Queries arbeiten.

Ist das soweit ok?

Wie optimiere ich jetzt z.B. für die gängigen Smartphones (320 / 360 / 375 Breite)? Media Query setzen und das Grundlayout entwerfen ist klar. Wie zeige ich aber möglichst alle Fotos scharf auf den jeweiligen Geräten an? Meine jetzt nicht Pixeldichte, sondern ob ich für z.B. alle 3 obigen Breiten verschiedene Bilder (+ Pixeldichtenvarianten) bereitstelle oder man dann z.B. 360 nimmt und jeweils nach unten/oben vom Gerät skalieren lässt.

Teilweise haben die Geräte ja 4-fache Pixeldichte, macht die Bereitstellung bis zu solchen Größen wirklich Sinn? Ich mein die Ladenzeiten gehen ja dann auch wieder hoch...

Danke, Bernd

[Rolf B]

Hallo Bernd,

Pixelangaben kommen eigentlich nur noch in den Media Queries und bei Fontgrößen vor

Nein, genau da kommen sie nicht vor. Media Queries machst Du em oder rem basierend, so dass dann, wenn die Gerätebreite für die Darstellung deiner Texte in dem von dir gewählten Font zu schmal wird, eine Umformatierung möglich ist.

Und gerade deine Fonts solltest Du rem-basierend machen. Wenn ein User seine Textdarstellung vergrößern möchte, würde eine pixelgenaue font-size Angabe in deinen Styles dem entgegen stehen. Meine ich jedenfalls.

Hochauflösende Bilder kannst Du mit <picture> Elementen für größere Auflösungen bereit stellen. Und es hat sich gezeigt, dass ein Bild mit vierfacher Größe (für Retina-Displays) viel höher komprimiert werden kann und immer noch gut aussieht. D.h. der Speicherbedarf für das Retina-Bild ist nicht der Vierfache des Normal-Bildes.

Rolf

[Matthias Apsel]

Hallo Bernd,

1. Pixelangaben kommen eigentlich nur noch in den Media Queries und bei Fontgrößen vor.

Pixelangaben kommen höchstens bei der Angabe von Abmessungen von Bildern vor.

Eventuell noch sowas wie border-bottom: 1px solid, obwohl es auch da die Schlüsselwörter "thin", "medium", "thick" gibt.

Bis demnächst
Matthias

[Bernd]

Pixelangaben kommen höchstens bei der Angabe von Abmessungen von Bildern vor.

Hm, komischerweise sehe ich nirgends mehr Pixelangaben für Bilder, nur eben 100%/auto.

Ebenso sind in den Queries größtenteils feste Pixelangaben drin, keine (R)EM. Hatte dazu neulich auch einen Artikel gelesen, wo jemand sich komplett für nur noc (R)EM aussprach und jemand das in einem anderen Blogpost wieder komplett widerlegte.

Liegt's vielleicht eher daran, dass die SelfHTMLer eher immer die Barrierefreiheit im Kopf haben und daher zu (R)EM greifen?