Version web pour les mobiles

Salut,

J'ai un site web traditionnel et souhaite refaire une version petite pour mobile.
Quel code je dois mettre dans mon index ou un .htaccess pour rediriger les visiteur sur la version mobile en fonction de leur smartphone ?

Merci de votre aide
Nini

Salut,

Le meilleur moyen consiste, au lieu de créer une « version distincte », à fournir une feuille de style pour les mobiles grâce aux media queries, feuille de style qui comportera les correctifs nécessaires. Ce site en montre, d'ailleurs, un exemple.

+1 avec Victor

Si vraiment il est nécessaire de faire une version distincte en mobile, il est déconseillé de rediriger automatiquement (c'est d'ailleurs dans les recommandations d'Apple): il vaut mieux un lien bien visible sur la page standard, avec éventuellement un cookie pour retenir le choix, c'est l'utilisateur qui choisit sa façon de surfer pas le webmaster; sur la version mobile, on trouvera un lien vers la version standard.
Modifié par Patidou (07 Sep 2010 - 10:54)

oui mais alors la page normale va être longue a charger et moi je souhaite une version light du site.

Et tu ne peux vraiment pas faire un design adapté avec les media queries?
Modifié par Patidou (07 Sep 2010 - 15:48)

Après avoir fouillé le web j'en ai tiré certaines choses que j'aimerai valider avec vous.
Bien sur j'ai aussi pleins de questions.

Taille largeur 320 px - hauteur cela dépend du site mais sinon c'est 480 px pour un iphone et 240 px pour tupe blackberry

Faut il travailler avec des "table" ou des "div" ?

Faut il travailler en px ou em ou % ?

Si on travaille en DIV pas de float ?

La page doit être légère normal environ 30 ko

Les css elle doivent être intégrée à la page web, ou bien en link ou import ?
Je crois qu'il y a une histoire de media="handheld" pour le navigateur Opéra ?

Si on travaille en DIV peut on utiliser du padding et margin ?

ET POUR LA REDIRECTION :

Il y en a qui dise de mettre un simple lien texte en haut du site web taille normale pour aller sur la version mobile et d'autres utilisent apparament des détecteurs de navigateur mobile. Quel est le mieux à utiliser ?

Si vous avez des exemples à me donner je suis preneuse notamment pour l'utilisation du HTTP_USER_AGENT.


PS : merci de me partager vos expériences et conseils

Nini

nini a écrit :
Après avoir fouillé le web j'en ai tiré certaines choses que j'aimerai valider avec vous.
Bien sur j'ai aussi pleins de questions.

Taille largeur 320 px - hauteur cela dépend du site mais sinon c'est 480 px pour un iphone et 240 px pour tupe blackberry

Tu t'en moque, avec les medias queries tu définis une largeur de device maximale pour les devices et tu y met les corrections pour les mobiles. Ne pas oublier la meta viewport. Sur mon site :

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />

Les media queries dans le code css :

/*--------------------------
MOBILES
___________________________*/

@media only screen and (max-device-width:480px), only screen and (-webkit-min-device-pixel-ratio: 2) {
	.dc-home .post .post-content, .dc-home .post .post-info, .dc-home .post .post-tags, .dc-home .post .read-it, .dc-home .post .post-info-co, #sidebar .tags ul {
		display: none;
		}
/* etc*/
}

Explications: pour les mobiles ayant une largeur maximale de 480px (iPhone) ou ayant une densité de pixels de 2 (iPhone 4), utiliser les css suivantes pour mettre le contenu sur une colonne et cacher ce qui n'est pas nécessaire.

Donc surtout pas de tableaux de mise en page…

Note que j'ai utilisé 480px en pensant à l'iphone mais une autre valeur serait peut-être plus adaptée.

Patidou a écrit :
Note que j'ai utilisé 480px en pensant à l'iphone mais une autre valeur serait peut-être plus adaptée.

En l'occurrence 640px pour tenir compte de l'iPhone 4.

Un truc comme ça alors :

@media handheld, only screen and (max-device-width:480px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width:640px) { 
    .dc-home .post .post-content, .dc-home .post .post-info, .dc-home .post .post-tags, .dc-home .post .read-it, .dc-home .post .post-info-co, #sidebar .tags ul { 
        display: none; 
        } 
/* etc*/ 
}

Tu en penses quoi Victor?

Patidou a écrit :
Tu en penses quoi Victor?

Moi, j'écrirais comme suit :

@media handheld, only screen and (max-device-width: 640px) { 
    .dc-home .post .post-content, .dc-home .post .post-info, .dc-home .post .post-tags, .dc-home .post .read-it, .dc-home .post .post-info-co, #sidebar .tags ul { 
        display: none; 
        } 
/* etc*/ 
}

Je me demande si ces histoires de ratio ou de niveau de zoom sont indispensables...