YellowLeds Weblog v2

Artikel über Webdesign, Webstandards und Serendipity von Matthias Mees

Seite 4 von 126, insgesamt 126 Einträge

Responsive Webdesign: Problemfall img

Vorsicht: Dieser Artikel ist mindestens ein Jahr alt. Wenn es ein Artikel über Webentwicklung ist, kann es gut sein, dass er inzwischen überholt oder veraltet ist.

Responsive Webdesign ist derzeit wahrscheinlich die Layout-Technik im Webdesign (und kommt im Übrigen auch hier im Blog zum Einsatz). Vereinfacht gesagt wird es damit möglich, ein Basis-Layout mittels CSS abhängig von der Bildschirmauflösung anzupassen – von den 320 Pixeln Breite eines Smartphones bis hin zu den 1600 und mehr Pixeln moderner Monitore. Ein Problem responsiver Designs sind Grafiken, oder besser: Elemente mit fester Breite, welche nicht über CSS zugewiesen wird.

Eine Grafik wird über das img-Element in Webseiten eingebunden, wobei ihr ihre tatsächlichen Ausmaße als Attribute zugewiesen werden. (Ausgenommen sind hier Hintergrundgrafiken – die kann man für jede Auflösung passend zuweisen.) Bindet man nun z.B. ein 640 Pixel breites Foto ein, sprengt dieses etwa die typischen 320 Pixel Bildschirmbreite eines Smartphones.

Lösungsansätze

  • Fluid images: Ethan Marcotte, Autor des usprünglichen Artikels, schlägt vor, Grafiken statt Dimensions-Attributen via CSS max-width: 100% zuzuweisen
  • Responsive Images: Scott Jehl präsentiert eine Technik, welche eine eingebundene kleine Grafik serverseitig durch eine größere ersetzt
  • Mit Javascript möchte Peter Gasston ein leeres div-Element bei hinreichender Auflösung dynamisch ersetzen
"Responsive Webdesign: Problemfall img" vollständig lesen