Es ist ja nicht so, dass Menschen, die Webseiten unterhalten, nicht schon genug zu tun hätten. Nichts dreht sich so schnell, wie das Web und die Technik, die es antreibt. Nachdem alles mobil und responsiv wurde – wird jetzt alles retina.

Belohnt wird man mit knackigen Bildern, Schriften und Kanten auf iPhone, iPad und ab sofort dann auch auf dem MacBook Pro mit Retina Display. In Bälde dann wohl auch auf Maschinen aus den Kopierwerken von Dell, Asus und Co.

Bestraft wird man mit Mehraufwand, Speicherplatzverschwendung und gesteigerter Ladezeit.

Ich denke dennoch, dass es sich lohnt. Auch dann, wenn man vielleicht gar keine Apps oder Dienste rund um das mobile Leben anbietet oder der hippste Blogger von allen sein muss.

Wie immer geht es einfach darum, seinen Lesern/Nutzern es so angenehm wie möglich zu machen. Menschen, die sich auf einer Seite wohl fühlen, die kommen wieder, die verlinken und die empfehlen. Ihr kennt das ja.

Und mittlerweile sind über 30 Prozent aller Menschen überwiegend oder sogar ausschließlich mit ‘mobilen’ Gerätschaften unterwegs. Un diese Zahl steigt täglich. Rapide.

Und dazu zählt auch, welchen Grad an Verpixelung ich ihnen zumute. Und wie lesbar eine Seite auch auf kleinen Displays ist.

Denn mit Verpixelung sind nicht nur Bilder und Grafiken gemeint. Dazu zählen auch Schriften. Jawoll. Viele, der seit Jahren verwendeten ‘Web-Schriften’ sind nicht wirklich für Retina Displays geeignet.

Die gute Nachricht ist – unter den stellenweise grandiosen Google Webfonts finden sich auch wirklich schöne, die sowohl auf normalen, als auch Retina Displays eine gute Figur Schnitt machen. Dabei dann aber bitte nicht vergasen, dass sie auf Bildschirmen mit einer Pixeldichte von 1 auch immer noch ordentlich aussehen müssen.

Der Hauptteil der Arbeit dreht sich natürlich um Bilder und Grafiken. Die nehmen dann natürlich auch mehr Speicherplatz in Anspruch und verlängern die Ladezeiten und saugen am Inklusiv-Volumen unserer mobilen Datenpakete.

Um so wichtiger ist es hier, sich genau zu überlegen, was und wie man umsetzt. Apples Lösung, erst einmal die Standardbilder anzuzeigen und dann die Retina-Auflösung nachzuladen, halte ich für keine gute Idee.

Es gibt mittlerweile genügend andere und bessere Ansätze.

Allem voran ein paar Extrazeilen im CSS. Der Vorteil ist, dass man sehr gezielt und dosiert arbeiten kann und diese Lösung sogar ohne Javascript auskommt:

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 2) {
background: rgba(214,213,213,0.3) url(images/smallLine@2x.png) repeat-x;
}

Dies zeigt zum Beispiel nur auf dem Retina iPad die passend Grafik an und kann beliebig an andere Gerätschaften und auch an das neue Retina MacBook Pro angepasst werden.

Damit hat man natürlich noch keine Bilder, die direkt im HTML eingefügt werden berücksichtigt. Eine Variante wäre, diese einfach direkt doppelt so groß vorliegen zu haben und dann mittels CCS halbiert anzeigen zu lassen:

.entry img {
width: 578px;
}


Sofern man nicht immer genau weiß, wie groß denn ein Bild sein wird – was bei manchen Bloggern ja schon mal vorkommen kann – dann gibt man die maximale Größe an:

.entry img {
max-width: 578px;
}

Dies macht natürlich nur Sinn, wenn Bilder dann auch mindestens doppelt so groß vorhanden sind. Und dabei bitte daran denken, dass der IE (wer sonst) damit nichts anfangen kann. Der benötigt mal wieder eine Extrawurst:

max-width: 32px; //für alle anderen
width: expression(this.width > 32 ? 32: true); //für den ollen IE

Dies funktioniert bei allen WebKit basierten Browsern wunderbar – gerade bei kleineren Bildern/Grafiken unter anderen Browsern, wie Firefox und Opera, sieht das allerdings sehr schnell hässlich aus. Die können nämlich bis heute weder Schriften gescheit anzeigen noch Bilder ordentlich interpolieren.

Da kommt dann die Möglichkeit mit JavaScript zu arbeiten ins Spiel. Das schaut, ob ein Retina Display vorhanden ist, schaut dann, ob dem betroffenen DIV erlaubt wurde, bei Bedarf Retina-optimierte Bilder anzuzeigen und tauscht dann die betroffene URL aus. Dies kann man auch direkt einzelnen Bildern erlauben/anordnen.

Der Vorteil ist, dass Bilder nicht vom Browser interpoliert werden müssen und man genau die Bilder anzeigen lässt, die für Retina-Displays angepasst wurden. Denn oft ist es mit einer simplen Verdoppelung, gerade was Logos, Linien und Schatten angeht, nicht getan. Der Nachteil ist, dass JavaScript aktiviert sein muss und das Ganze beim Laden natürlich einen Millitick länger dauert.

Wer möchte, kann sich mein hier verwendetes JavaScript laden, fügt folgende Zeilen seinem CSS hinzu:

[data-retina=complete] {
-webkit-background-size: 100%;
background-size: 100%;
}

und fügt betroffenen DIVs ein data-retina=“true” hinzu. Das sähe dann zum Beispiel so aus:

div class=“h2line” data-retina=“true”> …

und bei einzelnen Bild-Resourcen funktioniert es dann analog:

img src=“http://apfelzlog.de/azlogIcons/Ollerum.png” data-retina=“true” width=“32” height=“32”

Dann muss natürlich auch jeweils das passende, an Retina Displays angepasste, Bild vorhanden sein. Als iOS/Mac Entwickler habe ich die Namensgebung beibehalten. Es wäre dann als ein 64×64 Pixel großes Bild namens Ollerum@2x.png vorhanden. Diesen Suffix könnt ihr euch aber im Script auch noch nach Belieben anpassen.

Ich tüftle übrigens auch schon an einer Lösung für WPEdit, dass automatisch beide Versionen benannt und hochgeladen werden, so dass WP-Blogger zukünftig keinen Gedanken mehr darüber verschwenden müssen und ich gehe auch davon aus, dass es da demnächst auch die passenden Plugins für WP selber geben wird.

Das Ganze ist aus meiner Sicht auch nicht wirkliches ‘Gehäcke’ oder ‘Gefuddele’ – wie manche es bezeichnen – sondern schlicht und einfacher Fortschritt und Dienst am Leser/Nutzer.

Mal ganz davon abgesehen, dass es doch schön ist, wenn man die eigenen Seiten auch auf dem iPad und MacBook Pro genießen kann.

Dies sind natürlich auch nur die Dinge, die ich kenne und mache. Es gibt in den Untiefen des Netzes noch viele weitere Ansätze und Lösungen und die Zukunft wird noch viel mehr bringen.

Und auch, wenn ich mich gerade mal wieder wiederhole. Mir ist es immer noch unbegreiflich, dass WebKit nicht automatisch @2x Bilder lädt. Es wäre doch ein leichtes für Apple, dies direkt mal einzubauen …