[_eris_]

Hallo zusammen!

ich sitze derzeit verstärkt an Webprojekten, die eben responsive abgehandelt werden sollen. Was die Einzelheiten der Konzeption und Umsetzung der Technik betrifft, bin ich soweit fein - jedoch tue ich mich immer noch schwer zu entscheiden, was nun eigentlich die beste Vorgehensweise ist, um mit den Display-Größen umzugehen, die über den 72ppi liegen.

Sprich iPads mit Retina-Auflösung (2048x1536) und im Augenblick auch mein persönlicher Klopper, das Nexus 10 (2500x1600 - 300ppi Auflösung!). Dass die Geräte selbstständig hochrechnen und Layouts anpassen, ist mir soweit klar, aber natürlich könnte ich auch genausogut, die Seite wirklich auf eine 2500 Pixel Breite anpassen und die Auflösung ausreizen. Bringt allerdings auch ein gewisses Ladevolumen bei den Grafiken mit sich.

Will ich nicht in der riesigen Auflösung arbeiten, gibt es Abstriche (z.B. schlecht gerenderte Seiten, da die Tablets selber hochrechnen?) auf die ich achten muss und welche Auflösung kann ich denn als Repräsentant verwenden um z.B. Schriftgrößen abschätzen zu können? Sprich, welche Designvariante lasse vom Tablet hochrechnen, damit es ordentlich aussieht und lesbar ist? Bei der iPad Retina-Auflösung würde ich z.B. einfach die "halbe" Größe (1024 x 768) voraussetzen und als hochgerechnete Variante verwenden. Beim Nexus fehlt mir da einfach eine Referenzgröße.

Im Besonderen stellt sich dabei auch die Frage, was mit dem Zwischenraum von iPhone Retina (>640px bzw >960px) und iPad Normal (<768px bzw. <1024px) machen? Hier gibt es ja eine relativ ungünstige Überschneidung... :/

Habt ihr hier Erfahrungswerte oder gibt es bereits gute Vorgehensweisen? Denke ich zu kompliziert?

Liebe Grüße
eris

[sahnemuh]

Icons, Logos etc: wo möglich IconFonts, Vektordaten oder CSS3.
Für Bitmapgrafiken empfehle ich die Lektüre dieses Artikels: http://blog.netvlies.nl/design-interactie/retina-revolution/

[Smooth-Graphics]

[Karlarsch]

CSS Pixel != Hardware Pixel; Und weiterer Lesestoff für Retina und höher Auflösende Displays

Gruß
Karl

[ExMD]

was mich bei der ganzen retina-optimierung zur zeit am meisten stört (und wozu ich nichts im web finden konnte), ist die verallgemeinerung respektiver reduzierung auf apples retina.
apple ist nicht die einzige firma, die so hochauflösende displays baut, das bereits erwähnte nexus schafft eine deutlich höhere pixeldichte und das ist nicht das einzige gerät auf dem markt, dass iPhone, iPad und macbooks übertrifft. nahezu jeder andere hersteller, die hochauflösende displays anbietet, übertrifft die geräte von apple.

trotzdem wird immer nur von retina gesprochen und, da dessen pixeldichte plus minus doppelt so hoch ist wie bisher, auch die bilder in diversen anleitungen schlichtweg doppelt so groß angelegt.
was ist jetzt aber mit den anderen geräten? möchte ich diese bedienen, müsste ich eigentlich 2,5- bis 3-fach vergrößerte grafiken erstellen.
aber davon spricht kein schwein. oder kennt jemand einen blog, eine seite oder ein forum, das sich damit mal genauer auseinandergesetzt hat?

[Karlarsch]

Ich habe ein paar Dutzend Links zu diesem Thema. Relevant ist im Prinzip die "Pixel Ratio". Damit kann man gut auf high density displays reagieren.

Siehe auch http://menacingcloud.com/?c=highPixelDensityDisplays

Gruß
Karl

[ExMD]

da mir grad die zeit fehlt, das durchzuackern, kannst mir nen groben überblick geben, wie das behandelt wird?
weil meine eigentliche befürchtung ist, dass wenn du es nur mit css/js lösen willst, ohne serverseitge ausgabe, du ziemlich viel an den fotos optimieren müsstest. oder irre ich mich da?

[DesignKater]

@TO: Komm mal von dem Gedanken zum Thema Auflösung des Displays weg und beschäftige dich mal richtig mit dem Thema. Dann sollte dir bewusst werden dass lediglich die echte Auflösung der Bilder entscheidend ist. Also weg vom Standard Web 72dpi und her mit 264dpi. Liest du hier.