Partage

Creer une version mobile d'un site

Comment faire?

1 août 2010 à 1:13:11

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
1 août 2010 à 15:22:03

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.
1 août 2010 à 15:24:46

Sauf qu'il faut que ca détecte que c'est pour les mobiles ou non !
Anonyme
1 août 2010 à 15:26:40

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.
1 août 2010 à 15:27:55

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

<link rel="stylesheet" media="handheld" type="text/css" title="mobile" href="mobile.css" />
1 août 2010 à 16:40:21

Par mobile, entend-on également iPhone et iPad ?
1 août 2010 à 19:32:47

Merci pour vos reponses je vais me lancer dans la feuille de style
Anonyme
2 août 2010 à 11:18:28

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...
2 août 2010 à 14:34:45

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.
Anonyme
2 août 2010 à 16:31:38

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...).
8 octobre 2010 à 13:52:27

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
31 janvier 2011 à 17:23:26

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
Anonyme
31 janvier 2011 à 17:32:32

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 ^^
Anonyme
3 février 2011 à 19:20:33

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...
Anonyme
3 février 2011 à 21:05:09

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"
}
31 mars 2012 à 14:58:14

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... :D ! 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 ! :lol:
28 avril 2012 à 19:22:51

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!
28 avril 2012 à 19:37:17

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 :)
28 avril 2012 à 19:48:35

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.
28 avril 2012 à 19:51:52

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
28 avril 2012 à 20:17:52

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? :euh:

Merci!
28 avril 2012 à 20:29:41

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é.