Bereits lange vor dem Erscheinen des neuen iPads machten wir uns erstmalig Gedanken darüber, wie man eigentlich mit den sogenannten Retina-Displays umgesehen sollte. Die Problematik, dass Bilder mit 72dpi unscharf und verschwommen auf einem Retina Display aussehen, ist ja schon seit dem iPhone 4 bekannt. Das iPad 3 hat allerdings, so scheint es, die Uhr ein gutes Stück weiter gedreht, so dass sich Webentwickler bereits jetzt mit den neuen Bildschirmen auseinander setzen müssen, auch wenn bisher nur das iPad ein höher aufgelöstes Display hat.
Deswegen muss sich jede Agentur, die heute den Auftrag bekommt eine neue Webseite zu erstellen oder ein Redesign vorzunehmen, zwangsläufig auch mit der Frage beschäftigen, ob diese neue Website bereits für das neue iPad optimiert werden soll. Bei einem Redesign-Zyklus von 2-3 Jahren, muss man kein Hellseher sein, um zu wissen, dass der Kunde früher oder später die eigene Webseite auf einem solchen Gerät betrachten wird. Da wäre es fatal, wenn man das Thema Retina-Display nicht zumindest vorab einmal angesprochen hätte.
„Heißt das, dass wir nun alle Webseiten auf Retina-Grafiken umstellen müssen?“
Glücklicherweise nicht. Denn momentan sprechen sowohl die Geräteverbreitung, als auch die aktuellen Bandbreiten von UMTS und LTE dagegen. Beim Anlegen der Bilder in der doppelten Größe können gerne mal Bilder von 200kb und größer entstehen, was selbst bei optimaler Verbindung ein bisschen dauern kann. Legt man, wie z.B. Apple aber einen besonderen Fokus darauf, dass das Startseitenbild auch auf dem iPad 3 gut aussieht, dann kommt man um die großen Bilder nicht drumherum. Das bedeutet aber nicht, dass grundsätzlich alle Bilder in doppelter Auflösung angelegt werden sollten. Hier muss man klar Prioritäten setzen, die meiner Meinung nach noch zugunsten der Geschwindigkeit ausfallen.
Das Ende von Image-Replacement und Hintergrundgrafiken
Was man allerdings heute schon bei einem neuen Projekt tun kann, ist der konsequente Verzicht auf Bilder in Navigationen und bei Icons. Hat man vor ein paar Monaten noch besondere Textbausteine (Navigation, Headline o.ä.) per Image-Replacement eingebaut, sieht man spätestens jetzt den Nachteil dieser Technik. Auf den ersten Blick wird deutlich, dass es sich hier um eine Grafik und nicht um einen echten (auswählbaren) Text handelt. Spätestens jetzt bietet es sich an, über Webfont-Dienste nachzudenken. Für Icons und Grafiken lassen sich mittlerweile eine Vielzahl von Icon-Fonts nutzen, die nach dem gleichen Prinzip arbeiten. Auch Schatten, Verläufe und abgerundete Ecken sollten nun stets mit CSS erstellt und nur als Fallback für ältere Browser noch als Grafiken benutzt werden.
Ich bin mir ziemlich sicher, dass die Retina-Displays keine Eintagsfliegen sind. Eher fürchte ich, dass sogar in den nächsten Monaten mit dem ersten Retina-Display bei einem Macbook zu rechnen ist. Dank Thunderbolt und Light Peak, wurde die Datenübertragungsrate, die lange Zeit als Grenze für höhere Auflösungen und größere Monitore galt, durchbrochen.
Hallo Dennis,
ich sehe den Schritt in Richtung höher auflösende Bilder a la 96dpi noch etwas kritischer. Gerade was die mobile Benutzung über 3G/4G angeht. Wie oft kommt es vor, dass die Netze in Städten überlastet sind oder in ländlichen Gebieten gar nicht verfügbar? Bei den Providern ist aber immer alles in Butter. Probleme kennen die offiziell nicht. Und das wird sich in den nächsten Jahren auch kaum ändern. Also liegt die Maxime immer noch beim sparen an Bandbreite. Apple ist da etwas zu zeitig dran, denke ich.
Ich sehe es ähnlich wie Daniel. Allerdings bin ich nicht der Meinung, dass Apple zu früh dran ist, sondern dass unsere Provider deutlich zu lahm sind. Wenn eine neue Technologie erfunden werden kann, dann sollte sie auch erfunden werden und zügig auf den Markt kommen, damit der Fortschritt nicht auf der Stelle tritt.
Des Weiteren scheint die wirklich (ausschließlich) mobile Nutzerrate (über 3G) von iPads der neuesten Generation noch eher überschaubar zu diesem Zeitpunkt. Letztendlich entscheidet hier natürlich der Kunde. Ich persönlich finde die Sache mit den Fotos hier nicht ganz so tragisch. Wenn ein Foto auf einem gewöhnlichen Screen eine gute Qualität aufweist, dann wird es (im Normalfall) auf dem iPad3 nicht völlig verkorkst wirken.
Mir ist es wichtiger, sich aktuell auf das Weglassen unnötiger Grafiken und Icons zu konzentrieren und – wie Dennis erwähnte – auf Icon Fonts wie IcoMoon zu bauen. Aktuell arbeite ich an einem Projekt, welches nur Icons per Webfont erhält. Die Icons und Grafiken bei ersten Tests auf dem iPad 3 sahen fantastisch und gestochen scharf aus. Zudem sind sie wie eine Art Vector frei skalier- und natürlich stylebar.
Was Schatten und runde Ecken etc. angeht, so baue ich ausschließlich auf CSS3, denn in meinen Augen muss eine Website nicht in jedem Browser gleich aussehen. Wer altertümliche Browser-Relikte nutzt, der muss eben mit den „Fähigkeiten“ seiner jeweiligen Software Vorlieb nehmen. Wir schreiben das Jahr 2012…