„Retina Ready“ Webdesign

Sie besitzen ein Smartphone, Tablet, Notebook oder Monitor mit einer „Retina“-Auflösung? Dazu gehören Notebooks wie das MacBook Pro Retina, Tablets wie das iPad Air, iPad Mini Retina, Samsung Galaxy Note 10.1 2014, Kindle Fire HD und und und … Alle neuen Geräte besitzen eine hohe Auflösung.

Wenn Sie mit einem Gerät mit „Retina“-Display surfen, ist Ihnen vielleicht schon aufgefallen, dass im Internetbrowser die Schriften gestochen scharf sind, die Grafiken aber nicht. Das liegt daran, dass die Grafiken nicht die erforderliche Auflösung haben. „Retina“-Displays haben eine höhere Pixeldichte und können Grafiken gestochen scharf anzeigen, aber nur wenn die Grafiken auch in der erforderlichen Auflösung vorliegen.

Vergleichen Sie auf einem „Retina“-Display die folgenden Grafiken:

Nicht Retina Ready

Retina Ready

(Den Unterschied sehen Sie nur auf einem Display mit „Retina“Auflösung)

Webseite „retina ready“ machen

Alle Pixelgrafiken sollten Sie noch einmal in doppelter Auflösung erstellen und auf dem Server laden. Dann gibt mehrere Wege, um „Retina“-Geräten Grafiken mit einer höheren Auflösung anzubieten, z.B. über die CSS Medienabfrage (Media Queries):

Auf „Retina“-Geräten werden dann die Style-Angaben innerhalb der geschweiften Klammern aktiv.

WordPress Plugin für „retina ready“

Für Webseiten, die mit WordPress erstellt wurden, existiert ein Plugin zum Anzeigen von „Retina“-Grafiken:

https://wordpress.org/plugins/wp-retina-2x/

Wenn Sie das Plugin installiert haben, können Sie zusätzlich zu den normalen Grafiken, Grafiken in doppelter Auflösung in die Mediathek laden, das Plugin sorgt dann dafür, dass auf „Retina“-Geräten die höhere Auflösung angezeigt wird.

Hilfe benötigt?

Gerne sind wir Ihnen bei der Umstellung Ihrer Webseiten auf „Retina“ behilflich! Kontaktieren Sie uns.

Keine Kommentare