Bonjour à tous,

J'ai un site web ou je souhaiterai faire une version mobile. Seulement j'ai aucunne idée de comment faire! Pourriez vous m'eclairez svp

Faire un design extensible !
en +:
http://www.kilasoft.net/modules/news/a [...] p?storyid=681
http://www.zdnet.fr/blogs/le-webobserv [...] -39600977.htm
http://techtrends.eu/creer-votre-site- [...] vec-wirenode/
http://www.google.fr/search?q=creer+ve [...] ent=firefox-a

L'idéal est de faire une feuille de style uniquement pour mobile. Les écrans étant très petit il faut tout réorganiser pour que le site soit lisible.

Sauf qu'il faut que ca détecte que c'est pour les mobiles ou non !

Utilises les variables PHP, pour savoir se que l'utilisateur utilisent, PC ou MOBILE. Pense aussi à faire un bouton pour le mode normal (PC) personnellement je préfère la version normal sur certain site sur mon portable.

Pas besoin de PHP, un simple <link/> suffit :

<link rel="stylesheet" media="handheld" type="text/css" title="mobile" href="mobile.css" />

Par mobile, entend-on également iPhone et iPad ?

Merci pour vos reponses je vais me lancer dans la feuille de style

Met en résolu !

Citation : Bob-le-zéro

Pas besoin de PHP, un simple <link/> suffit :

<link rel="stylesheet" media="handheld" type="text/css" title="mobile" href="mobile.css" />

Pour savoir si l'utilisateur et en mobile ou pas... Et si oui mettre la page mobile, il faut une condition...

Citation : Hor@ce

Pour savoir si l'utilisateur et en mobile ou pas... Et si oui mettre la page mobile, il faut une condition...

Il n y a pas de page mobile, c'est la CSS qui change.

Le proposition de Bob-le-zéro est correcte, media="handheld" vise les appareils mobiles, sauf que certains terminaux mobiles récents comme iphone et ipod, se considèrent comme ordinateurs de bureau et par conséquent, n'implémentent pas le média handheld.

Heureusement que CSS3 débarque avec un module extrêmement pratique: Média Queries (Passé en candidate recommandation donc implémenté sur les dernières version de gecko, webkit et presto) qui permet de faire des requêtes de média:

<link rel="stylesheet" media="handheld, only screen and (max-device-width: 480px)" type="text/css" href="mobile.css" />

Signifie que mobile.css est chargé sur les terminaux supportant le média handheld et uniquement pour les écrans dont la largeur max du viewport ne dépasse pas 480px.

Citation : Hor@ce

media="handheld" vise les appareils mobiles

A ok je ne savais pas qu'il visais directement les appareils mobiles.

Mais bon il peut-être utile de mettre des conditions php, il n'y a pas forcement les mêmes choses que sur une page mobile que le site réel (de la pub, plus de texte, etc...).

Voici une site qui te permet de savoir si ton visiteur est mobile ou ordinateur
Il propose son script pour plusieurs langages de dev dont le php, asp, javascript .....

http://detectmobilebrowser.com

perso je modifie mon site pour que en fonction de ord / mobil je redirige la ou il faut, mais je pose la question à l'utilisateur

sujet très intéressant !!
je cherche un développeur pour passer un site dynamique en version mobile et tablette.
Si un de nos experts du zero est interessé...let me know

Merci

Citation : Hor@ce

Citation : Hor@ce

media="handheld" vise les appareils mobiles

A ok je ne savais pas qu'il visais directement les appareils mobiles.

Mais bon il peut-être utile de mettre des conditions php, il n'y a pas forcement les mêmes choses que sur une page mobile que le site réel (de la pub, plus de texte, etc...).

Pour cela il y a un code en css pour cache (ou faire disparaitre) les div...GO A l'annexe de matheod et ctl+f hidden, tu trouveras

Citation : boy432

Citation : Hor@ce

Citation : Hor@ce

media="handheld" vise les appareils mobiles

A ok je ne savais pas qu'il visais directement les appareils mobiles.

Mais bon il peut-être utile de mettre des conditions php, il n'y a pas forcement les mêmes choses que sur une page mobile que le site réel (de la pub, plus de texte, etc...).

Pour cela il y a un code en css pour cache (ou faire disparaitre) les div...GO A l'annexe de matheod et ctl+f hidden, tu trouveras

Bonne déduction... Au moins l'utilisateur devras charger des choses inutiles, et donc augmenter le temps de charge de la page...

Oui alors refait tout les pages HTML...Avec les conditions PHP

<?php
if($_SESSION['mobile'] == true)
{
//On écrit la version mobile
}
else
{
//On écrit la versions "PC"
}

Salut,
Je réouvre ce sujet pour vous parler d'un framework jQuery très simple qui permet de créer des sites mobiles en HTML, PHP et tout le tralala... ! Pour cela, il suffit de se rendre sur http://jquerymobile.com/, de télécharger le framework en version ZIP et de se lancer !
Pour la détéction du mobile, un simple petit test PHP:

<?php
function détection_mobile ()
{
	if (isset($_SERVER['HTTP_X_WAP_PROFILE']) || isset($_SERVER['HTTP_PROFILE']))
		return true;

	if (isset ($_SERVER['HTTP_ACCEPT']))
	{
		$accept = strtolower($_SERVER['HTTP_ACCEPT']);
		if (strpos($accept, 'wap') !== false)
			return true;
	}

	if (isset ($_SERVER['HTTP_USER_AGENT']))
	{
		if (strpos ($_SERVER['HTTP_USER_AGENT'], 'Mobile') !== false)
			return true;

		if (strpos ($_SERVER['HTTP_USER_AGENT'], 'Opera Mini') !== false)
			return true;
	}

	return false;
}
?>

Et vous redirigez vers l'adresse mobile :

<?php
if (!isset ($_SESSION['mobile']))
{
  $_SESSION['mobile'] = détection_mobile();
}
if ($_SESSION['mobile'] == true)
{
  echo '<meta http-equiv="refresh" content="0;url=http://www.mon-url-mobile.com" />';
}
?>

Voilà, c'est simple comme bonjour !

C'est bien beau tout ça mais comment on fait pour détecter si le mobile est en position verticale ou horizontale? Car le CSS doit être différent si le mobile est tenu à l'horizontale qu'à la verticale!

coutureleclerc normalement dans les media queries tu as un parametre qui doit s'appeler orientation pour cibler si le mobile est en mode paysage ou portrait. En fonction de celà, tu peux charger une css différente.

SilverFlo pour ma part j'ai essayé jQueryMobile, et je le trouve un peu lourd (la surcharge de balises dans le dom est atroce !), je préfere utiliser jquery, jquery ui et une bonne dose de css adaptée perso

Merci pour ta réponse mais malheureusement, je ne connais pas du tout JQuery. Si tu me dis que JQuery mobile est un peu lourd alors je ne l'utiliserai pas. Mais quel cours me conseillerais-tu pour arriver à faire la version mobile que je veux faire? Et quel logiciel de JQuery spécifiquement devrais-je utiliser? Je cherche de quoi de léger. Merci.

coutureleclerc tu peux très bien faire une version mobile de ton site sans utiliser du tout de javascript. Pour celà, il te faut mettre en place une grille de ton design qui soit flexible et non fixe (c'est a dire que tu n'utilise pas de pixels pour la largeur de tes containers mais des pourcentages) et tu utilises les media queries en css3

Citation : Kilucru

Pour celà, il te faut mettre en place une grille de ton design qui soit flexible et non fixe (c'est a dire que tu n'utilise pas de pixels pour la largeur de tes containers mais des pourcentages)

Pour ça, je pense bien que je sais le faire. Ça ne devrait pas être un problème.

Citation : Kilucru

et tu utilises les media queries en css3

C'est là que tu me perds. Je ne connais rien du tout en ce qui a trait aux queries. Que veux-tu dire par medias queries?

Merci!

Les media queries c'est une propriété apparue avec le CSS3, qui te permet d'écrire du code CSS selon certaines conditions qui peuvent être multiples, comme par exemple la taille de ton navigateur, l'orientation de ton mobile, la résolution de ton écran... etc.

Les media queries ce n'est rien d'autre que du css, et tu peux trouver une explication plus détaillée ici :

http://www.alsacreations.com/article/l [...] -queries.html

J’espère t'avoir aidé.

Sujet interressant...