Media Queries sind ein wichtiger Bestandteil des Webdesigns und wurden bisher vor allem verwendet um Websites an das responsive Design anzupassen. Für jedes Endgerät ist es mittlerweile notwendig geworden eine Website mit ihren Elementen zu optimieren und in ihrem jeweiligen Viewport gut aussehen zu lassen. Dabei stößt man mit den Media Queries aber zunehmend an Grenzen und es gibt mehr und mehr Ideen für alternative Lösungen. Element Queries beweisen sich als Alternative für die Zukunft des Responsive Webdesign.
Websites responsive gestalten
Als Ethan Marcotte 2010 seine Gedanken zum Thema responsive Webdesign schrieb, prägte er damit einen neuen Begriff und verdeutlichte, dass die Herangehensweisen der Designer und die Ansprüche der User in Einklang gebracht werden müssen. Damit entstanden neue Ansätze wie "Mobile First", neue Designpatterns wurden entwickelt (z.B. Brad Frost: Responsive Patterns) und gänzlich neue HTML Elemente wie <picture> wurden eingeführt. Auch etliche CSS Frameworks, die Programmierern die Arbeit erleichtern sollen, wurden zur Verfügung gestellt.
Das Ziel sollte immer sein eine Website nicht auf Bildschirmgrößen, Endgeräte oder Browser anzupassen, sondern die Website so zu konzipieren, dass sie in jeder Bildschirmgröße auf jedem Gerät oder Browser gleich gut aussieht und bedienbar ist.
Media Queries im Einsatz für responsive Webdesign
Media Queries ermöglichen es, bestimmte Stile (Farben, Formen etc) auf bestimmte Umgebungen zu verändern. Die bekannteste Form ist die Anwendung auf den "Viewport" des Browsers wie im Beispiel unten zu sehen: