mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Mi 01.04.2020 17:38 Benutzername: Passwort: Auto-Login

Thema: Webdesign im Retina-Auflösungsdschungel vom 08.05.2013


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Webdesign im Retina-Auflösungsdschungel
Seite: 1, 2  Weiter
Autor Nachricht
_eris_
Threadersteller

Dabei seit: 19.09.2007
Ort: -> · <-
Alter: 34
Geschlecht: Weiblich
Verfasst Mi 08.05.2013 14:43
Titel

Webdesign im Retina-Auflösungsdschungel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 38
Geschlecht: Männlich
Verfasst Mi 08.05.2013 15:23
Titel

Antworten mit Zitat Zum Seitenanfang

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/
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Smooth-Graphics

Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mi 08.05.2013 15:27
Titel

Antworten mit Zitat Zum Seitenanfang

sahnemuh hat geschrieben:
Für Bitmapgrafiken empfehle ich die Lektüre dieses Artikels: http://blog.netvlies.nl/design-interactie/retina-revolution/

Vorsicht bei Mobilgeräten hier. Nur nutzen, wenn man es auch wirklich dann auf älteren Geräten erfolgreich getestet hat. Die Performance kann sich sehr verschlechtern bei der Technik.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Karlarsch

Dabei seit: 05.02.2007
Ort: -
Alter: 54
Geschlecht: Männlich
Verfasst Mi 08.05.2013 15:30
Titel

Antworten mit Zitat Zum Seitenanfang

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

Gruß
Karl
  View user's profile Private Nachricht senden
ExMD

Dabei seit: 27.01.2005
Ort: Saarland
Alter: 41
Geschlecht: Männlich
Verfasst Mi 08.05.2013 15:34
Titel

Antworten mit Zitat Zum Seitenanfang

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?
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Karlarsch

Dabei seit: 05.02.2007
Ort: -
Alter: 54
Geschlecht: Männlich
Verfasst Mi 08.05.2013 15:44
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
ExMD

Dabei seit: 27.01.2005
Ort: Saarland
Alter: 41
Geschlecht: Männlich
Verfasst Mi 08.05.2013 15:55
Titel

Antworten mit Zitat Zum Seitenanfang

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?
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
DesignKater

Dabei seit: 26.06.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 08.05.2013 23:38
Titel

Antworten mit Zitat Zum Seitenanfang

@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.
  View user's profile Private Nachricht senden
 
Ähnliche Themen Webdesign mit Retina Display
Bilder für das iPhone 4 Retina-Display optimieren
Jssor Slider und Chrome Retina Problem
Umstellung auf iMac Retina, Probleme mit Creative Suite
[APP Design] Idee für skalieren von Mustern auf Retina größe
Printler und Webdesign
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.