nicht angemeldet
Hallo,
Responsive Design heißt nicht, ein festes Set an Geräten und Viewportgrößen zu wählen und diese einzeln mit Media Queries anzusteuern. Es bedeutet, ein anpassungsfähiges Design zu bauen, welches unter den meisten Umständen zu einer guten User Experience führt, die gewünschten Inhalte vermittelt und die gewünschten Funktionen anbietet.
Da es sehr viele verschiedene Geräte gibt und diese zudem flexibel sind, wie du bereits erkannt hast, ergibt es wenig Sinn, speziell ein Design z.B. »für iPhone 5 im Portrait-Modus« zu entwerfen. Wichtig ist, dass deine Website in einem (virtuellen) Viewport von 320px Breite gut aussieht, aber auch in einem 1600px-Viewport. Alles dazwischen kommt vor und bleibt dir überlassen.
Gehe von deinen Inhalten aus und denke darüber nach, wie du sie unter verschiedenen Bedingungen stimmig präsentieren kannst. Ob das Layout anpassbar sein kann und wo ggf. Breakpoints nötig sind, um z.B. Mehrspaltigkeit herzustellen bzw. zu linearisieren.
Media-Queries sind *eine* mögliche Technik, um das zu erreichen. High-DPI-Displays (»Retina«) unterstützt man am besten auch indirekt, indem man möglichst skalierbare Inhalte bereitstellt. Das heißt soviel wie möglich mit CSS-Boxen, Typografie, ggf. Icon-Fonts und skalierbaren Grafiken arbeiten. Für wenige verbleibende Pixelgrafiken können Media-Queries bzw. Responsive Grafiken eingesetzt werden.
Layout-Breakpoints mit Media-Queries sollten nicht zwischen zwei oder drei festen Layouts hin- und herschalten, sondern zwischen zwei, drei oder mehr flexiblen Layouts. Interessant ist, wie sich das Layout zwischen den Breakpoints verhält. Damit sind auch die Portrait- und Landscape-Modi abgedeckt.
Grüße
Mathias
Auge