Site mobile avec media queries

Bonjour à tous !


Je voudrais faire la version mobile de mon site avec les media queries, mais j'ai quelques questions.

Tout d'abord à partir de combien de pixels faudrait-il changer la structure du site ? A partir de sa largeur actuelle ? 800px ? 900px ?

J'ai remarqué que des sites mobiles fait avec media queries, ont pas mal d'erreurs dans le W3C validator mobile, parce que du coup c'est bien beau le contenu est identique sur la version de bureau et version mobile mais les images sont lourdes et nombreuses.

Puis le @media queries est détecté comme une erreur, le fait de mettre des media queries rallonge le fichier css.

Un site mobile en media queries n'est pas plus lent qu'un site mobile à part ?

C'est mieux d'adapter le site pour (par exemple) 1000px, puis ensuite 450px, ou tout de suite 450px pour les mobiles ?

Et quelles sont les valeurs en px les plus adaptées pour les media queries ?

Merci à vous !
Modifié par Crousti2 (11 Dec 2011 - 20:22)

Salut la résolution standard du web c'est 1024x768 px.

a écrit :
=Croutsti2le fait de mettre des media queries rallonge le fichier css.

Comme toute autre propriété.

Crousti2 a écrit :
des sites mobiles fait avec media queries, ont pas mal d'erreur dans le W3C validator mobile

Au niveau CSS, les erreurs validateur c'est pas d'une importance capitale.

crousti2 a écrit :
Et quelles sont les valeurs en px les plus adaptées pour les media queries ?

@media handheld, only screen and (max-width: 640px), only screen and (max-device-width: 640px) {
 /* Les propriétés CSS ici */
}
@media (max-device-width: 1024px) and (orientation: landscape) {
 /* Les propriétés CSS ici */ 
}
@media screen and (min-width: 400px) and (max-width: 700px) { 
    /* Les propriétés CSS ici */
}
@media screen and (min-device-width: 800px) {
    /* Styles appliqués aux terminaux ayant 
une résolution mini de 800px */
}
/* Orientation Portrait */
@media screen and (orientation:portrait) {
    /* Styles à adapter pour le mode portrait */
}
/* Orientation Paysage */
@media screen and (orientation:landscape) {
    /* Styles à adapter pour le mode paysage */
}
@media screen and (device-aspect-ratio: 16/9) { … }
@media screen and (device-aspect-ratio: 1280/720) { … }

Modifié par jmlapam (11 Dec 2011 - 20:23)

jmlapam a écrit :
Salut la résolution standard du web c'est 1024x768 px.

Comment ça ? Tu veux dire qu'il faut que je fasse un max-width: 1024px ?

jmlapam a écrit :
le fait de mettre des media queries rallonge le fichier css.

Comme toute autre propriété.

Oui mais le fait de rajouté encore beaucoup de code CSS dans les media queries ça rallonge pas mal quand même !

jmlapam a écrit :
Au niveau CSS, les erreurs validateur c'est pas d'une importance capitale.

Je ne parle pas des erreurs CSS mais bien au niveau html sur mobile, les images sont lourdes, @media considéré comme erreur etc...




Puis tous ces media queries sont utiles ? à quoi servent-ils ?
Modifié par Crousti2 (11 Dec 2011 - 20:28)

BOn coco, je t'ai mis une liste de ceux que je connaissais, après il y a

Rallonger la CSS, on s'en fout pas mal, mieux vaut une grosse CSS que plein de petites.
a ++

Bonjour,

as-tu lu http://www.alsacreations.com/apprendre/#webmobile ?

Crousti2 a écrit :
Un site mobile en media queries n'est pas plus lent qu'un site mobile à part ?

Si, mais pourquoi passer une paire de semaines à réaliser (puis maintenir) un site à part quand les MQ t'occuperont 2 jours, peut-être 3, pour un résultat proche pour 95% des sites ? Et tu auras déjà 80% du résultat au bout de 2H avec les instructions par défaut proposées par Raphaël.

Pour les 4% de sites restants qui demandent plus d'adaptations (ou profiteront grandement d'adaptations), OK. Et pour 1% il faudra une application (enfin 15 plutôt, pour couvrir les différents modèles de smartphones et mobiles).

Je me suis amusé à faire ça aussi sur la prochaine version d'un de mes sites ce week-end.

Et si ça peut t'aider, je te conseil ce lien http://mediaqueri.es/popular/
Ce n'est pas un tuto, mais une liste de sites (plus ou moins gros) qui utilisent media queries.
Je m'en suis servi pour savoir comment les autres réduisaient tel ou tel élément (notamment ce qu'ils faisaient d'un gros menu, de tout ce qui est "social" etc.)

Sinon, j'avais fais un petit sujet sur mon site pour savoir si il allait sur mon site via un portable. Beaucoup ont répondu oui (il n'était pas adapté pour les mobiles). Leur seul soucis était le fait de zoomer/dézoomer en permanence qui rendait le site peut agréable à naviguer. Aucun ne m'a parlé de temps pour charger le site. Si ton site est bien optimisé, théoriquement le soucis ne devrait pas se présenter au point d’empêcher tes visiteurs de voir ton site (sauf si tu proposes des fonds d'écrans ). J'ai d'ailleurs vu des sites (sur le site au dessus) qui retirait les liens vers certaines parties de leur site "trop lourd" (vidéo, images etc.)

Crousti2 a écrit :
@media queries est détecté comme une erreur

Perso, je mets cette commande dans le CSS uniquement…

Crousti2 a écrit :
le fait de mettre des media queries rallonge le fichier css.

Pas forcément grandement. Changer seulement la taille des principales boîtes, des fontes ; modifier certaines couleurs, etc. peut suffire, non ?

Merci à toi kenor je vais voir tout ça !!

Muchos oui dans le CSS mais va tester un site avec W3C mobile validator il dit que @media est une erreur c'est tout j'invente pas.

Crousti2 a écrit :
Muchos oui dans le CSS mais va tester un site avec W3C mobile validator il dit que @media est une erreur c'est tout j'invente pas.

Ce validateur n'a pas autant d'importance que celui qui vérifie si ton code (X)HTML est valide du point de vue de la syntaxe.

Bonjour,


Les tablettes affichent en générale une largeur de combien de pixel ?
Parce que en media queries je met la version mobile à partir de 640px, et je ne voudrais pas que la version mobile s'affiche déjà sur les tablettes....

Merci ^^

C'est 1024 pour les iPad et 1280 pour les tablettes Android.

Ah ok autant je ne pensais pas du coups c'est bien parce que ça ne change pas la structure

Perso en mode paysage, je n'ai rien changé, en mode portrait, j'ai placé la colonne de droite à la suite.

Patidou a écrit :
C'est 1024 pour les iPad et 1280 pour les tablettes Android.

Largeur physique, cela s'entend. La largeur définie pour le viewport est moindre par défaut (sauf erreur de ma part, 980 pour l'iPad et 800 pour les environnements Android).

Ok parfait dans tous les cas c'est proche de 980px qui est la largeur de la page donc ça ne devrait pas poser de problème