Responsive Webdesign – Grundlagen

Besonderheit von hochauflösenden Displays

Testen Sie unsere 1987 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Um die Anzeige zu verbessern, so dass sie weniger "pixelig" wirkt, verwenden Hersteller hochauflösender Displays mehr "physikalische" Gerätepixel. Diese Gerätepixel entsprechen aber nicht den herkömmlichen CSS-Pixeln.

Transkript

Beim Responsive Web Design muss man sich um Bilder besonders kümmern. Unsinnig wäre beispielsweise, wenn riesige Desktop-Varianten von Bildern auch auf einem Smartphone geladen würden, besonders blöd, wenn der Benutzer mobil unterwegs ist. Zweifelsfalls würde er dann zu einer anderen Seite gehen und nicht den Download der großen Bilder abwarten. Aber das ist nicht die einzige Herausforderung, die mit Bildern im Responsive Web Design verbunden ist. Denn da sind ja noch die hochauflösenden Displays, die immer mehr zunehmen in letzter Zeit. Bei Apple heißen die übrigens Retina, aber das ist nur so ein spezieller Name. Eigentlich geht es um hochauflösende Displays. Das Prinzip bei denen ist, die wollen eine sehr scharfe Anzeige und verwenden dafür mehr Pixel. Damit aber nicht alle Bedienelemente furchtbar klein werden, wird immer für die Normalbedienelemente die doppelte Anzahl von Pixeln genommen. Sie sehen hier eine schöne Illustration vom Smashing Magazine. Angenommen, wir haben jetzt ein Element was 2 Pixel hoch und 2 Pixel breit ist. Dann wird das normalerweise hier auch so dargestellt: 2 Pixel hier, 2 Pixel da. Auf einem hochauflösenden Display wird hingegen die vierfache Anzahl an Pixeln genommen, die einfach hier kleiner sind. Was bedeutet das? Also, bei Text und bei anderen Formaten, die an sich skalierbar sind, macht es überhaupt keine Probleme, sondern alles funktioniert bestens. Bei Bildern kann es jedoch Probleme geben. Es kann nämlich passieren, dass die unscharf wirken. Und besonders auffällig ist es dann bei kleinen Icons, die auf eine bestimmte Größe optimiert sind. Prinzipiell haben Sie bei diesem Problem mehrere mögliche Lösungen. Je nach Situation können Sie das Problem auch einfach ignorieren. Wenn das nicht so wichtig ist, dass die Icons gestochen scharf aussehen, Funktionieren tut ja alles trotzdem. Bei JPG-Bildern speziell gibt es eine schöne Lösung, die Jobsis herausgefunden hat. Das ist eigentlich ein Trick, anders kann man das nicht bezeichnen. Er hat herausgefunden, dass wenn er ein JPG-Bild in der doppelten Größe abspeichert, aber gleichzeitig die Kompression erhöht, dass das Bild dann sowohl auf hochauflösenden Displays schärfer ist, und trotzdem die Dateigröße kleiner. Schöner Trick. Weitere Lösungen sind: Sie können über Media Queries eigene Hintergrundbilder ausliefern lassen für hochauflösende Displays. Und prinzipiell können Sie natürlich versuchen, wo es geht, auf Bilder zu verzichten und stattdessen beispielsweise Web Fonts, Icon Fonts, Schriftsymbole oder Ähnliches zu verwenden. Wichtig ist, wenn Sie sich um die Anzeige auf hochauflösenden Displays kümmern, dass Sie dann trotzdem nicht die Performance der Web-Seite aus den Augen verlieren.

Responsive Webdesign – Grundlagen

Lernen Sie die Hintergründe von Responsive Webdesign kennen und sehen Sie, wie sich über diese Technik Webinhalte auf den unterschiedlichsten Geräten gleichwertig anzeigen lassen.

5 Std. 47 min (59 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!