Media Queries
Hier siehst Du eine Übersicht aller Beiträge, die mit dem Stichwort "Media Queries" versehen wurden. Um nichts zu verpassen kannst du alle Beiträge zu diesem Stichwort per RSS-Feed abonnieren. Oder du nutzt den Feed mit allen Inhalten des Blogs.
Displays mit hoher Pixeldichte, wie das Retina-Display von Apple, sind zunehmend verbreitet. Sofern die Patente es zulassen werden wohl bald auch andere Hersteller ihre Geräte mit solchen hochauflösenden Displays ausstatten.
Web- und App-Designer müssen sich auf diese Technologie einstellen und Quellcode, Layoutgrafiken und Inhalte optimieren. Welche Probleme das Retina-Display hervorruft und welche Lösungsansätze es gibt möchte ich in diesem Beitrag zusammenfassen.
Diesen Beitrag zu Ende lesen
Mit Gridpak wurde ein neues, sehr hilfreiches Tool zur Erstellung von flexiblen Gestaltungsrastern veröffentlicht. Gridpak bietet im Gegensatz zu anderen Tools dieser Art keine vordefinierten Raster sondern unterstützt Webdesigner dabei eigene flexible Gestaltungsgrundlagen zu erstellen.
Neben der Gesamtbreite des Rasters, der Anzahl an Spalten, sowie dem Innen- Außenabstand könnt ihr mit Gridpak individuelle Breakpoints festlegen. Diese Breakpoints werden anschließend über CSS3 Media Queries angesprochen.
Diesen Beitrag zu Ende lesen
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.
Diesen Beitrag zu Ende lesen
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.
Diesen Beitrag zu Ende lesen
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.
Diesen Beitrag zu Ende lesen
"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.
Diesen Beitrag zu Ende lesen
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.
Diesen Beitrag zu Ende lesen