De l’utilisation des Media Queries CSS3

Dans: HTML5/CSS3/JS

16 déc 2011

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

Ce genre de syntaxe par exemple n’existe pas et n’est pas prévu par le w3c/whatwg
<image alt=’alt text’>
<source src=’image@x1.jpg’ type=’handset’>
<source src=’image@x2.jpg’ type=’desktop’>
</image>

Cela viendra peut être un jour mais pour le moment c’est de la science fiction ^^

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 Galaxy Nexus de Google !), 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 iDevice 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 et les medias (image, video, son) optimisées pour ce dernier.
Sinon, que se passe t’il ? on charge des styles inutiles, des images trop lourdes et on ralentit l’affichage des pages ce qui décourage les lecteurs et réduit le référencement Google *

* Le délai d’affichage d’une page est un critère majeur de Google Panda


Vote in HexoSearch

A voir aussi

Adobe Air Wand
Adobe Air Wand

Getting started with Flash
Getting started with Flash

Hydra Dominatus
Can you beat ‘Hydra Dominatus’ ?

Rendering soft bodies
Rendering soft bodies

How to build a billiard game with Flash regular display list
How to build a billiard game with Flash regular display list

2D lighting with normal map
2D lighting with normal map




Contact

Idées, remarques ou propositions vous pouvez m'écrire à cette adresse mail

Categories

Raccourcis

Flash Info Icy Splash Allez Viens !