Avec la montée en puissance du mobile, il y a un engouement pour le « responsive web design ».

Avant de commencer, voici quelques éléments de reflexions :

• le poids d’une page web ~500 ko (exemple home de wordpress.fr)
• en règle générale le débit sur mobile est inférieur ( le débit réel en 3G est de 48 Ko/s -donc très loin de la norme théorique )
• 960 px, résolution horizontale en paysage de l’iPhone4
• le navigateur ne se redimensionne pas sur mobile
• les règles d’ergonomies sont différentes sur les supports tactiles
• tous les éléments d’une page sont chargés même si ils ne sont pas affichés
• 26°, la température de l’eau en ce moment sur l’île de la Réunion

Méthode pour gérer cette problématique

1. Détection du device coté serveur par exemple via php-mobile-detect
2. Affichage de monSite.com en fonction du contexte

si c’est un smartphone, affichage de m.monSite.com
si c’est une tablette, affichage de t.monSite.com
etc.
sinon c’est monSite.com en version desktop qui s’affiche.

m.monSite.com, utilise Media Queries pour un affichage portrait/paysage
t.monSite.com, utilise Media Queries pour un affichage portrait/paysage
monSite.com, en mode desktop pas d’utilisation de Media Queries

Outre le fait que cette approche offre la possibilité de sélectionner des médias optimisés en terme de poids et de taille d’affichage, elle permet aussi d’alléger la quantité de style à charger.

Pourquoi procéder ainsi plutôt que de tout déléguer aux Media Queries CSS3 ?
Exemple d’utilisation typique qui se base sur la résolution disponible
@media screen and (min-width: 200px) and (max-width: 640px) {
.bloc {
display:block;
clear:both;
}
}

Les tablettes et les smartphones offrent des résolutions comparables aux moniteurs (ex: 1280*800 pour une galaxy tab et 1280 * 720 pour le dernier Google phone !), en se basant uniquement sur la résolution on accepte implicitement de proposer du contenu desktop (souris/clavier) sur une tablette et inversement.

Pour ceux qui ont la mauvaise idée de se baser sur max-width plutot que sur max-device-width (comme ci dessus) proposerons à leurs utilisateurs une expérience dégradée sur desktop.
( Apparition/disparition/déplacement de blocs de contenu, d’éléments de navigation etc. sur le redimensionnement de la fenêtre )

Il faut savoir qu’il existe @media handheld, ce paramètre devait servir à la base à identifier les « mobile device », mais les iDivice d’aPple se considèrent comme des @media screen :/
De toute façon, cela n’aurait pas permis de prendre en compte l’optimisation (taille/poids) des contenus, donc ce n’est pas si grave finalement.

En conclusion, pour une utilisation optimisée des Media Queries, il faut avant tout détecter le support coté serveur et appliquer la css optimisée pour ce dernier.