Beiträge, Tutorials, Tipps & Snippets rund um Webdesign und Social Media.
Media Queries
Bei einem Media Query handelt es sich um ein CSS3-Konzept, mit dem innerhalb eines Stylesheets gerätespezifische Eigenschaften abgefragt werden können. Zu diesen Eigenschaften gehören beispielsweise die Größe des Viewports, die Abmessungen des Bildschirms, die Auflösung des Displays oder die Ausrichtung eines mobilen Endgeräts (Hoch- oder Querformat). Media Queries sind elementarer Bestandteil des sog. “Responsive Webdesign“; mit ihrer Hilfe wird eine Website u.a. für verschiedene Bildschirmgrößen und Display-Typen (z.B. Retina-Displays) optimiert.
Media Queries sind eine Weiterentwicklung des Medientyps in CSS2. Mit Medientypen können allerdings nur Geräte ansich (z.B. Drucker oder Bildschirme etc.) angesprochen werden, nicht aber die Eigenschaften des Geräts.
Hilfsmittel für Responsive- bzw. Multi-Screen-Design schießen ja im Moment wie Pilze aus dem Boden. Ich zeigt euch hier so viele davon weil ich der Meinung bin, dass man nur dann das beste Tool finden kann wenn man auch eine Auswahl hat. Und abgesehen davon sind die Vorlieben und Anforderungen sehr individuell und man muss ganz einfach schauen welches Tool einem persönlich den Workflow am ehesten erleichtert.
Das 978 Grid System bietet ein flexibles Raster mit fünf vordefinierten Breakpoints. Mindestens genauso interessant sind jedoch die Browser-Statistiken die das Entwicklerteam als Grundlage für die sechs Breakpoint zu Rate gezogen hat.
Der Responsinator ist ein weiteres Tools zur Simulation von Viewports für responsive Websites. Wie auch bei den meisten anderen Diensten gebt ihr eine URL ein und erhaltet als Ausgabe die Ansicht der verschiedenen mobilen Endgeräte wie iPhone, Android oder Kindle. Innerhalb der Geräte lässt sich die Website zusätzlich scrollen, so dass ihr sowohl den Falz beurteilen, als auch die vollständige Website überprüfen könnt.
Umfangreiche Navigationen auf Smartphones benutzerfreundlich darzustellen ist gar nicht so einfach. Zwar ist es normalerweise problemlos möglich die Darstellung für den kleinen Bildschirm anzupassen - beispielsweise indem man alle Links untereinander abbildet - dann muss der Besucher aber erst über eine lange Liste an Links hinwegscrollen um den Content zu erreichen. Insbesondere bei Blogs will der Besucher aber häufig den neuesten Artikel lesen und nicht erst die Navigation sehen.
Das winzige jQuery-Plugin TinyNav wandelt ausgewählte Listen in Select-Listen um. Die sparen Platz und lassen sich auch auf Smartphones einfach bedienen.
"Responsive Webdesign" ist in aller Munde, doch für komplexe Seitenstrukturen und Usability-Konzepte reicht CSS alleine häufig nicht mehr aus.
Das Script Breakpoint.js erlaubt es JavaScript-Events an bestimmte Media Queries zu knüpfen. Wird ein bestimmter Viewport erreicht oder verlassen, löst das Script ein Event aus.
Das so genannte "Responsive Webdesign" und die CSS3-Technologie "Media Queries" gehören aktuell zu den heißesten Trends der Webentwicklung. Beide Begriffe beschreiben die Möglichkeit das Layout einer Website für mobile Endgeräte wie Smartphones und Tablet-Computer anzupassen. Wenn ihr euch umfassend über mobiles Webdesign informieren wollt, seid ihr hier genau richtig. Auf dieser Seite findet ihr eine inhaltlich aufbereitete und strukturierte Zusammenfassung aller Beiträge die ich zu diesem Thema veröffentlicht habe.
Wenn ihr Fragen zum responsive Webdesign habt die hier nicht geklärt werden können, schreibt mir einfach eine Mail (info@kulturbanause.de) oder nutzt die Kommentarfunktion. Ich werde schnellstmöglich antworten oder einen Beitrag zu diesem Thema veröffentlichen.
Was ist responsive Webdesign?
Unter responsive Webdesign versteht man die optische Anpassung einer Website an verschiedene Ausgabemedien. Moderne Websites werden längst nicht mehr nur für die Bildschirmansicht erstellt - die Darstellung muss auch auf iPad, iPhone und Co. übersichtlich und benutzerfreundlich bleiben. Nun gibt es unterschiedliche Ansätze eine Website für verschiedene Endgeräte zu optimieren. Eine dieser Möglichkeiten ist die CSS3-Technologie Media Queries die lediglich die Darstellung einer Website anpasst, aber die identischen Inhalte nutzt. Der große Vorteil dieser Variante ist, dass alle Versionen auf einen technologischen Kern zugreifen und daher auch nur an einer Stelle gepflegt werden müssen. Das ist einfach und spart Zeit.
Zwei Beispiele für Responsive Webdesign
Es gibt auch andere Lösungen wie native Apps oder "echte" mobile Websites. Diese Lösungen werden meist dann gewählt, wenn die mobile Version gänzlich andere Inhalte bieten soll als die eigentliche Website oder auf die Hardware-Funktionen des Endgeräts (beispielsweise GPS oder die Kamera) zugegriffen werden soll. Beide zuletzt genannten Varianten sind in der Regel eigenständige Projekte die unabhängig von der eigentlichen Website funktionieren, häufig technologisch völlig anders umgesetzt sind und separat gepflegt werden müssen.
Auf dieser Seite wird das Thema responsive Web behandelt. Einen guten Einstieg in die Materie bieten euch die folgenden Beiträge.
Getting started: Media Queries & Responsive Webdesign
Der folgende Artikel erklärt anhand eines in sich abgeschlossenen Mini-Tutorials die Verwendung von Media Queries.
Dieser Artikel ist schon einige Zeit älter, ergänzt das Thema in meinen Augen allerdings trotzdem gut, da ein konkretes Endgerät - in diesem Fall ein iPhone - angesprochen werden soll. Neben der reinen Darstellung werden auch gerätespezifische Eigenschaften (z.B. der Zoom) angesprochen.
Häufige Probleme im responsive Design lösen und vermeiden
Sobald ihr die erste mobile Website online gestellt habt, werdet ihr schnell merken, dass bestimmte Inhaltstypen oder Browser besonders gerne Ärger machen. Zu diesem Zweck findet ihr hier ein paar praxisnahe Tipps um auch anspruchsvolle Inhalte und den Internet Explorer "responsive" zu halten.
Ich habe euch ja bereits einige Tools zum Live-Testing von responsive Webdesigns vorgestellt. Mit responsivepx möchte ich diese Sammlung nun um einen weiteren Dienst ergänzen. Grundsätzlich funktioniert das Tool ähnlich wie die konkurrierenden Angebote auch: Ihr gebt eine URL ein und könnt das Design auf verschiedenen Viewports testen. Der Vorteil von responsivepx besteht allerdings darin, dass ihr eine Website sowohl in der Höhe als auch in der Breite flexibel testen könnt.
Wenn Ihr eine Website mit Media Queries für mobile Endgeräte optimiert und eingebettete Videos von YouTube, Vimeo und Co. verwendet, werdet ihr recht schnell merken, dass es hier ein Problem gibt. Das Layout passt sich zwar flexibel der Breite des Displays bzw. des Monitors an, das Video reagiert auf die CSS-Angaben jedoch nicht und behält seine feste Größe. In der mobilen Version seht ihr dann entweder ein abgeschnittenes Video oder einen in die Breite gedrückten Inhaltsbereich.
Ich möchte euch zwei Lösungen zeigen die dieses Problem beheben.
