Création d'un site en version mobile |
Répondre | Page 123 16> |
Auteur |
Sujet Recherche Options des sujets
|
||||||
brolysan
Admin Group Depuis le: 14 Août 2009 Pays: France Status: Inactif Points: 10144 |
Options des messages
Thanks(0)
Envoyé : 09 Sep 2014 à 14:26 |
||||||
Bonjour à tous. En attendant plus de support (wiki et autres) sur le responsive avec OE, je vais vous présenter ma "méthode" pour réaliser/créer votre site web adapté aux mobiles et aux tablettes. Mise à jour en date du 16/01/2015 : - création du sous domaine sur un serveur - création des pages spécifiques pour le sous domaine - optimisation du htaccess et duplicate content Voila le site en question pour information et base de départ. Comme vous pouvez le voir, son format n'est pas du tout fait pour les mobiles (à regarder sur un PC/Mac sinon vous allez être automatiquement redirigé vers la version mobile). Voila la page index faite pour la version mobile. Voila donc ma faq : - Créer un sous domaine à partir de la console d'administration de votre hébergeur. Pour mon exemple, il s'agira de m.nomdedomaine.fr - Ouvrir votre projet OE - Créer un dossier au nom de m - Dedans, créer de nouvelle page au même nom que vos pages principales!!! IMPORTANT. Pour la page d'accueil, il suffit de créer dans m une page au nom "index". Je reviendrai à la fin sur un bout de code à mettre à la fois sur les pages desktop et les pages mobiles. - Largeur de la page ou du calque : 640 px Pourquoi 640 px? Simple, il s'agit de la résolution standard (viewport) pour l'iphone 4 et 5 et d'une majorité des mobiles android inférieurs à 5 pouces. Pour ceux qui voudraient s'amuser je les laisse lire cette article qui résume parfaitement ce qu'est le viewport et quoi faire avec et éventuellement faire mumuse. - Créer un ou plusieurs calques qui serviront à vos pages. - Créer un bloc de code source (html/header) :
(mise à jour du 30/04/2015 : code amélioré) Nous voila donc avec la base de créée. Pour tout élément que vous allez mettre sur la page, et après différents tests, il vaut mieux mettre le maximum d'éléments dans des "blocs d'éléments", pour éviter tout problème de superposition. Pour ma part, je suis partir sur une police de taille minimum de 18 px, à adapter selon vos besoins bien entendu et du rendu que vous souhaitez avoir. Pour créer un menu caché qui s'affiche "en fade" lorsque vous appuyez sur un icone, voir cette procédure (en cours). Maintenant, comment rediriger automatiquement les utilisateurs vers la version mobile. Il suffit d'ajouter un script libre au fichier .htaccess de votre projet (onglet projet puis htaccess) : mettre ce code dedans :
(changer le code html en rouge avec le votre bien entendu). - ensuite, créer un nouveau script libre dans le htaccess :
Ce script va forcer en fait certains navigateur à récupérer les polices du domaine principal. Alors, pour faire au plus simple, sans rentrer dans des explications longues et laborieuses, je vous vous indiquer une manipulation simple à faire pour que le sous domaine récupère les images et autres du domaine, sans devoir dupliquer celles-ci. - copier le htaccess qui se trouve dans votre PC, (documents/open element/nom de votre projet) et collez le dans le dossier m. - Editez le nouveau et collez uniquement ceci dedans :
- ensuite, il vous faudra mettre ce fichier htaccess dans le dossier m de votre hébergeur. Transférez le par filezilla ou équivalent. IMPORTANT. Pourquoi? En fait, utilisant des liens relatifs dans OE, on va dire au serveur de récupérer les fichiers et autres contenu dans Files et WEFiles qui se trouve à la base de votre hébergeur, et non dans m. Si cela n'est pas très clair pour vous, je donnerai plus d'explications dans le topic pour ceux qui le souhaitent. - Maintenant, pour éviter le duplicate content (regardez cette page si vous avez besoin de plus d'explication sur ce que c'est réellement), on va ajouter une ligne de code à la fois sur les pages desktop et mobile. - Sur les pages desktop (bloc de code (source) en Otherscript/header) :
- sur les pages mobile (bloc de code (source) en Otherscript/header) :
Pensez bien à vérifier les noms de vos pages, à l'identique. Évitez à tout prix les espaces dans le nom de vos pages. - Mettez en ligne une fois finie. Vous pouvez tester maintenant votre site web. Cette mini faq pourra évoluer bien naturellement. Amélioration de la faq en date du 16/01/15. - Pour commencer, un brin d'explication s'impose. A partir du moment où vous prenez un nom de domaine, vous avez la possibilité de créer des sous domaines (et même certains hébergeurs les crées automatiquement) du style mobil.votrenomdedomaine.fr ou autre. Le but de l'amélioration du tutoriel est justement de créé un sous domaine pour la version mobile. POur ceux et celles qui désirent "cacher" certaines pages (et donc éviter un référencement par les googleboot et autres), ajouter un bloc de code (source) Otherscript/header :
Edité par brolysan - 31 Oct 2015 à 10:44 |
|||||||
Bridet
Senior Member Depuis le: 13 Dec 2013 Pays: Condroz Status: Inactif Points: 5049 |
Options des messages
Thanks(0)
|
||||||
Merci!
|
|||||||
Bridet
Senior Member Depuis le: 13 Dec 2013 Pays: Condroz Status: Inactif Points: 5049 |
Options des messages
Thanks(0)
|
||||||
Bonjour,
Bon, ça y est, je me lance dans la version mobile, le menu style "responsive"( les trois barres ) que tu as mis, s'agit-il d'un "menu pop up"? Première remarque en faveur de la duplication de page plutôt que commencer à zéro : on conserve les titre, description et alt sur les images, donc à mon avis, ça vaut la peine de chipoter un peu... |
|||||||
Dmit OE
Admin Group Depuis le: 31 Mai 2012 Status: Inactif Points: 13971 |
Options des messages
Thanks(0)
|
||||||
Bonjour,
Je soupçonne que ce code dans .htaccess redirige pour des tablesses egalement, ce qui n'est pas du tout desirable. A tester.. Cordialement D |
|||||||
Bridet
Senior Member Depuis le: 13 Dec 2013 Pays: Condroz Status: Inactif Points: 5049 |
Options des messages
Thanks(0)
|
||||||
qu'appellez-vous les "tablesses"?
|
|||||||
Dmit OE
Admin Group Depuis le: 31 Mai 2012 Status: Inactif Points: 13971 |
Options des messages
Thanks(0)
|
||||||
iPad, Galaxy Tab etc. - les appareils mobiles sur Android etc. qui ont la largeur d'ecran suffisamment grande pour preferer l'affichage normal (ou intermediaire) parce que l'affichage mobie sera trop "grosse" (suite a l'elargissement de la largeur 640px) ou etroite.
|
|||||||
Bridet
Senior Member Depuis le: 13 Dec 2013 Pays: Condroz Status: Inactif Points: 5049 |
Options des messages
Thanks(0)
|
||||||
ah, oui! En fait, c'est une question que je me posais mais le site de Brolysan s'affiche en mode "fixe" sur ma tablette en tout cas.
|
|||||||
Dmit OE
Admin Group Depuis le: 31 Mai 2012 Status: Inactif Points: 13971 |
Options des messages
Thanks(0)
|
||||||
Il y a un parametre dans des tablettes pour afficher des sites comme si c'etait sur l'ordinateur, mais je pense qu'il n'y pas beaucoup d'appareils/internautes qui l'utilisent.
Quelqu'un peut faire plus de tests avec cette solution et poster ici la resultat? |
|||||||
brolysan
Admin Group Depuis le: 14 Août 2009 Pays: France Status: Inactif Points: 10144 |
Options des messages
Thanks(0)
|
||||||
Tout dépend du site développé je pense, pour l'affichage sur tablette avec la version mobile ou pas. A chacun de voir après tout.
J'ai certains projets qui sont agréables en normal, d'autres ou je préfère la version mobile.
|
|||||||
Bridet
Senior Member Depuis le: 13 Dec 2013 Pays: Condroz Status: Inactif Points: 5049 |
Options des messages
Thanks(0)
|
||||||
Quand je surfe sur mon Ipad, c'est vrai que beaucoup de sites me demandent si je veux la version mobile ce que ne me demande pas le-xxeme qui par contre s'affiche automatiquement en version mobile sur l'iphone. Tout ceci me convient parfaitement.
Brolysan : peux-tu répondre à ma question d'hier sur le menu :) ? |
|||||||
Répondre | Page 123 16> |
Tweet
|
Aller au Forum | Permissions du forum Vous ne pouvez pas écrire un nouveau Sujet Vous ne pouvez pas répondre aux Sujets Vous ne pouvez pas effacer vos messages Vous ne pouvez pas éditer vos messages Vous ne pouvez pas créer des sondages Vous ne pouvez pas voter dans les sondages |