Een alleraardigste presentatie over responsive design waarin de vraag wordt beantwoord of mediaqueries wel zo'n goed idee zijn. Dit antwoord wordt gegeven door redelijk gedetailleerd uit te leggen hoe mediaqueries nu precies werken. Het antwoord, voor degenen die het niet helemaal willen doorklikken,

Als we het hebben over adaptieve layouts dan kijken we meestal naar de breedte van schermen om daar de layout voor aan te passen. Je kan natuurlijk ook naar de hoogte kijken en mediaqueries toevoegen die daar op reageren (bijvoorbeeld bij verticale navigaties die fixed zijn waardoor de onderste items

Eindelijk weer eens een interessant artikel over responsive design. Mooi vormgegeven ook! Trent Walton heeft het over Content Choreography, de complexe dans die je moet uitvoeren om tot goede layouts voor verschillende schermgroottes te komen. Hij komt met wat aardige design-patronen en adviseert om

window.matchMedia() is de javascript-versie van mediaqueries. Werkt nu in Firefox nightlies.

Was je niet bij Mobilism? Ai. Stephen Hay was een van de sprekers en hij sprak over media queries, over het verschil tussen design en layout, over mogelijke werkwijzes etc. En dat alles verpakt in een prachtige presentatie, zoals altijd.

Aardig doch niet echt heel handig tooltje waarmee je snel even kunt zien hoe een pagina er ongeveer uitziet op een iPhone en een iPad.

Andy Clarke heeft een boilerplate geschreven/gecopypaste met een uitgebreide mediaquerystructuur er in. Hij gaat uit van het mobile-first-principe en gebruikt dan een aantal voorgedefinieerde resoluties om de layout aan te passen aan grotere schermen. Dit is wellicht de eenvoudigste manier om om te g

Als je de huidige versie van IE op Windows Mobile ietsje beter wilt ondersteunen dan kan je de nogal omslachtige adviezen van Jeremy Keith opvolgen. Je kan dit artikel ook negeren en wachten op de volgende versie.

Een aardige javascript oplossing voor een niet echt heel groot probleem: alle stijlen in mediaqueries worden gedownload, ongeacht de resolutie van de browser. Als je alle mediaqueries in één bestand stopt is alleen de hoeveelheid Kb een issuetje wat, als het goed is, wel meevalt. In som

Een test waarin wordt gekeken welke techniek je moet gebruiken om plaatjes niet te tonen én niet te downloaden op een iPhone.

Voorbeeldmediaqueries voor als je verschillende layouts wilt bieden aan de portret- en landschapsmodi van een iPad.

Goede presentatie van Patrick H. Lauke over adaptive layouts waarin hij alle aspecten van mediaqueries en de viewport de revue laat passeren. Goed om even door te klikken om te zien hoe het allemaal werkt.

Zeer grondig artikel over adaptive webdevelopment: alle mogelijke nieuwe technieken worden besproken.

Stu Robson windt zich op over adaptive layouts die op een mobiel alleen de navigatie tonen. Terecht denk ik. Hij geeft als mogelijke optie om niet meer dan 44x44 pixels voor een navigatie item te gebruiken. Als je een geniale icoonontwerper bent/hebt dan is dit een optie. Een andere wat simpeler optie: de navigatie gewoon in te klappen. Je hebt dan nog steeds een designer nodig die duidelijk weet te maken dat er iets uit te klappen is.

De standaard CSS in een adaptive site moet de mobiele versie zijn betoogt Peter Gasston. Goed artikel en hij heeft natuurlijk gelijk. Ik zelf zou overigens "document.documentElement.clientWidth" gebruiken omdat het nu eenmaal beter is om gebruik te maken van min-width ipv min-device-width.

Ja hoor, iemand heeft heel veel moeite gedaan om mediaqueries via een javascript te laten werken op oude browsers. Ik vind dit om meerdere redenen een slecht idee: stel je voor dat je al die verschillende layouts nu ook nog eens in verouderde browser moet laten werken, dat wordt wel een enorm duur verhaal. Bovendien zijn er gewoon erg weinig kleine devices met een verouderde browser, ik kan niet echt een use case verzinnen waarin dit iets toevoegt. Als je vindt dat websites er exact hetzelfde uit moeten zien in alle browsers, ja, dan is dit wellicht een prima script. Voor de rest van de wereld is dit nutteloos.

Browsers blijken de viewport verschillend te interpreteren als het om mediaqueries gaat. De ene browser telt de scrollbar niet mee en de ander wel. Het gaat om een klein verschilletje waar je weinig last van zult hebben als je opzet fluid is. Als er pixelperfectie in het spel is dan zou dit wel eens lastig kunnen zijn.

Nice Mr @garazi has been playing with #CSS3 Media Queries to see what actually gets downloaded. Blogged: #css

Prachtig non-obtrusive maar wel prettig gebruik van CSS3 en media-queries. Ook liefhebbers van experience design komen volledig aan hun trekken. Het fijne is dat de experience niet het doel van de site is: het is meer een aardige extra die af en toe per ongeluk optreedt. Details!

Ooh, we've got a holding page up for dConstruct. Must mean it's coming around again soon -

Mooie nieuwe HTML5/CSS3 progressive enhancement site.