Extra tips voor responsive

Responsive werken is meer dan alleen een paar media queries in je CSS plaatsen. Het is een goede start maar om je site te verbeteren zul je verder moeten kijken. In de post http://kaartenbak.glr-imd.nl/mediaqueries-2/ kun je al het een en ander lezen over fluid werken en over de viewport metatag. In deze post nog een aantal losse tips.

Theorie

media=all, media=print of media=screen?

media=all Werkt op alle devices.
media=print Speciale stijlen welke alleen aangeroepen worden wanneer de pagina wordt geprint. Dit wordt ook toegepast wanneer iemand je pagina opslaat als PDF. Zeer handig! hiermee voorkom je dat iemand veel printerinkt verspild aan een donkere achtergrond of aan een banner die hij of zijn niet nodig heeft. Dit kom je veel tegen bij websites met recepten.
media=screen Computers, laptops, tablets en smartphones.
media=handheld Dit voor zeer kleine schermen met beperkte bandbreedte. Denk hierbij aan oudere of kleinere telefoons. Als een service aan je gebruiker kun je dan de opmaak grotendeels weglaten en je beperken tot relevante tekstuele inhoud. Deze zul je in de praktijk niet veel gebruiken.

 

width of device-width gebruiken?

Width.

Met alleen width ben je flexibeler. Anders krijg je het probleem dat je voor ieder soort toestel een device-width moet instellen, immers een iPhone heeft andere maten dan een Samsung.

 

Wat is device-pixel-ratio?

Vuistregel: hoe hoger de device-pixel-ratio hoe scherpere afbeelding je nodig hebt.

Device-pixel-ratio is hoe je CSS de scherm resolutie berekend. Er is namelijk een verschil tussen de schermgrootte in pixels en wat er daadwerkelijk als pixels weergegeven kan worden. Vooral bij retina betekent een scherm van bijvoorbeeld 460 pixels breed niet automatisch dat je website ook 460 pixels breed wordt.

Stel dat een telefoon 1000 pixels kan weergeven maar de device-pixel-ratio 2 is dan denkt de CSS dat de telefoon maar 500 pixels zal weergeven en wordt er een mediaquery aangeroepen welke een afbeelding met lage resolutie laadt. In de telefoon echter wordt deze afbeelding weer opgeblazen naar 1000 pixels met als gevolg dat je beeld er niet fraai uit ziet. Door aan te geven dat er een hoge resolutie afbeelding geladen moet worden bij een device-pixel-ratio van 2 vermijd je dit soort problemen.

http://stackoverflow.com/questions/8785643/what-exactly-is-device-pixel-ratio –> het tweede antwoord is het meest duidelijk (het antwoord met de 86 likes).