Nachdem die letzte Version von tigion.de im Jahre 2010 recht weiß geworden war, wird sie sich ab jetzt in #333 grau präsentieren. Inhalte sind wie gewohnt fasst nicht zu finden, der Hauptteil spielt sich halt hier im Blog ab.
Sie wirkt etwas typografischer. Ich hab auch hauptsächlich auf die Schrift Helvetica Neue UltraLight gesetzt. Standardmässig kommen nur Mac und iOS Device Besitzer in deren Genuss. Der Rest hat sie entweder auch auf dem Rechner oder bekommt eine etwas weniger schlanke Schrift zu sehen.
Nebenbei ist dies auch ein kleiner Test für ersten Versuche einer Retina Display Anpassung. Mit Javascript kann man ja die PixelRatio per window.devicePixelRatio abfragen und bei größer 1 seine Schlüsse ziehen. Die entsprechende Bildquelle der mit einer bestimmten Class markierten img-Elemente ist ja dann schnell angepasst:
// simple image replacement // "/path/to/file.???" -> "/path/to/file[flag].???" // img ... img element id // flag ... flag to add function setHighresImage(img, flag) { if (img && flag) img.src = img.src.replace(/\.(?=\w+$)/, flag + "."); }
Also wie immer, neben meinem Blog, eine kleine nie 100% fertige Spielwiese.
Bezüglich Retina: Media Queries mit device-pixel-ratio sind nicht standardisiert, d.h. gehen nur in Webkit. Das wird sich auch nicht ändern:
http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/
Außerdem… wieviel Marktanteil haben diese schweineteuren Notebooks? 1%? Ich finde Webdesigner haben wichtigere Themen! Aber das nur so am Rande…
CSS mit Media Queries und Image Sets hab ich in der Richtung erstmal links liegen lassen. Ist auf tigion.de ja testweise nur ne reine Javascript Lösung die auf „window.devicePixelRatio“ basiert.
Egal ob geringer Marktanteil und so … neue Techniken probiere ich halt gern aus.
Übrigens sieht es schon verdammt gut auf einem iPad 3/4 aus, wenn die Grafiken entsprechend hochauflösend sind. Danach hatte ich das Gefühl alles andere im WWW wäre leicht unscharf.
Für einen Fotoblog (ist hier zu großen Teilen ja auch der Fall) ist die Retina-Frage sehr zäh zu beantworten. Ich habe viele Nächte getüftelt: hohe Ladezeiten, alte Beiträge aus dem Archiv und Standards die noch keine sind (Thomas hat es gut beschrieben) haben alles auf Eis gelegt. Ist mir ehrlich gesagt Pups ob mit oder ohne Retina. Responsive ist doch schonmal ein Anfang, mehr muss nicht. Grüße nach Dresden.
Nee … hier im Blog kommt das jetzt nicht. Da müsste ich ja jedes Bild noch in doppelter Auflösung vorhalten. Nicht gerade gut für Webspace und Traffic. tigion.de ist halt ne kleine überschaubare Testumgebung dafür und wie du schon sagst dran tüfteln muss man halt mal, wie soll man sonst Vor- und Nachteile schätzen lernen.
Mal davon abgesehen, dass ich nicht alle Fotos so hochauflösend ins Netz stellen will.
Das unterschreibe ich … Bilderklau? Naja – ich sehe immer als Kompliment
Grüße
Mir ist noch eingefallen, dass ich mal einen sehr interessanten Ansatz gelesen habe: große Bilder so stark komprimiert dass der Download nicht größer wird:
http://blog.netvlies.nl/design-interactie/retina-revolution/
Wenn das so funktioniert, braucht man kein Javascript oder devicePixelRatio mehr…
Man ist dann aber noch Abhängig wie gut der Webbrowser die Bilder für 99,99999% der Nicht Retina User runter skaliert.
Aber der Ansatz war mir noch neu. Danke für den Tipp!