Responsive Design mit width oder device-width? – Das sind die Unterschiede der beiden Media Queries
Kommentare

Beim Erstellen einer Website wird vermehrt auf deren Responsiveness geachtet – und das bietet viele Vorteile, insbesondere, was die User Experience angeht. CSS Media Queries wie width und device-width sollen Webdesignern beim Erstellen von Responsive Websites helfen, allerdings ist vielen Designern oft der Unterschied zwischen beiden Media Queries nicht klar, was schnell zu Problemen mit dem Code führen kann.

Ryan Reese erklärt, wo der Unterschied zwischen width und device-width liegt und erklärt, welche Option die beste Wahl für die Gestaltung einer Responsive Website ist.

Das Problem: Viewport-Breite und Device-Breite stimmen selten überein

Für die Gestaltung einer Responsive Website ist in erster Linie die Breite des Viewports interessant, egal auf welchem Device. Weder width noch device-width verweisen allerdings auf die Größe des Layout-Viewports, sondern meinen die Breite des Device – und nicht immer stimmt beides überein.

Viele Smartphones und Tablets haben nicht einen Device-Pixel pro CSS-Pixel, sondern, wie zum Beispiel das iPhone4, zwei oder mehr Device-Pixel pro CSS-Pixel. Gibt es kein Meta-Viewport-Tag für eine Website, wird sie mit der Pixel-Breite der Desktop-Seite gerendert, aber trotzdem in einem viel kleineren Viewport dargestellt. Das Resultat ist meist eine herausgezoomte, nur schwer lesbare Website.

Um eine Website Responsive zu gestalten und Media Queries für sie einsetzen zu können, muss das Viewport-meta-Tag in den Kopf der Webseite gesetzt werden, um zu verhindern, dass der Default-Layout-Viewport genutzt wird, der für die meisten Mobile Devices viel zu breit ist. Die meisten Mobile-Media-Queries zielen daher auf eine maximale Breite von 500px ab, die sich mithilfe eines max-width-Attributs definieren lässt.

device-width oder width?

Idealerweise ist eine gute Responsive Website Device-agnostisch, versucht also nicht, auf jedes individuelle Device einzugehen. Genau hier liegt aber oft das Problem, über das Webdesigner klagen, wenn sie eine Website responsiv gestalten: sie versuchen, für so viele Devices wie möglich zu stylen. Dabei kommt meist device-width zum Einsatz, wobei gleichzeitig unterschiedliche Regeln für die verschiedenen Ausrichtungen des Geräts definiert werden müssen. Dazu erklärt Ryan Reese:

the device does not dictate the breakpoint, the layout and content does, and ultimately this will produce the best results; both from your perspective and for your users.

Während also device-width vor allem dafür geeignet ist, eine Website für einzelne Devices zu stylen, muss man für das Erstellen einer vollständig responsiven und fluiden Website sicherstellen, dass alle Viewports abgedeckt sind und die Seite sich je nach Content und Design anpasst. Der Einsatz von width ist daher vorzuziehen, auch wenn das Media Query allein natürlich auch nicht alle Layout-Probleme einer Responsive Website beheben kann.

Ein weiterer Vorteil des width-Media-Queries ist, dass es auch recht zukunftssicher sind und eine damit gestylte Website auch auf neuen Devices mit anderen Displaygrößen vernünftig dargestellt wird – immerhin wird damit die allgemeine Viewport-Größe angesprochen, anstatt ein auf ein bestimmtes Device bezogenes Element.

Angesichts der Tatsache, dass Responsive Websites immer mehr an Verbreitung zunehmen, stehen Webdesigner vor der Frage, welches Media Query sich besser für die Gestaltung eignet. Die vorgestellten Unterschiede zeigen, dass in fast jedem Fall width die bessere Wahl ist, um eine Website Responsive zu machen und dadurch beim Website-Nutzer für eine bessere User Experience zu sorgen.

International PHP Conference 2015 Spring Edition

International PHP Conference 2015Diese Themen – und noch viele mehr – werden auf der International PHP Conference 2015 in Berlin Beachtung finden. Als Bonus warten noch alle Sessions der parallel stattfindenden webinale 2015 auf euch.

Alle weiteren Informationen zum Programm und den Speakern findet ihr unter phpconference.com. Und wer sich bis zum 26. März 2015 anmeldet, kann von attraktiven Frühbucherrabatten profitieren.

Aufmacherbild: human hand with tape-measure and set of pieces allowing to make any size of tape up to one meter von Shutterstock / Urheberrecht: Andrey_Kuzmin

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -