Antivirus offre spéciale - jusqu'à 60 % de réduction avec openElement !
Accueil Forum Accueil Forum >

openElement

> Tutoriaux utilisateurs
  Nouveaux messages Nouveaux messages Fil RSS  - Création d'un site en version mobile
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

Création d'un site en version mobile

 Répondre Répondre Page  123 16>
Auteur
Message
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: Aug 14 2009
Pays: France
Status: Inactif
Points: 9364
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Sujet: Création d'un site en version mobile
    Envoyé : Sep 09 2014 à 1:26pm
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) :

<meta name="viewport" content="width=640, user-scalable=no">
<meta http-equiv="pragma" content="nocache">

(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 :


RewriteEngine On
RewriteBase /

RewriteCond %{HTTP_USER_AGENT} android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge\ |maemo|midp|mmp|opera\ m(ob|in)i|palm(\ os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows\ (ce|phone)|xda|xiino [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^(1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a\ wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r\ |s\ )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1\ u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp(\ i|ip)|hs\-c|ht(c(\-|\ |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac(\ |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt(\ |\/)|klon|kpt\ |kwc\-|kyo(c|k)|le(no|xi)|lg(\ g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-|\ |o|v)|zz)|mt(50|p1|v\ )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v\ )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-|\ )|webc|whit|wi(g\ |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-) [NC]
RewriteCond %{HTTP_HOST} !^m
RewriteCond %{REQUEST_URI} !^/?(Files|WEFiles)
RewriteRule ^(.*)$ http://m.votrenomdedomaine.fr/$1 [R,L]


(changer le code html en rouge avec le votre bien entendu).

- ensuite, créer un nouveau script libre dans le htaccess :
<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

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 :

 
#Protect .htaccess
<Files .htaccess>
order allow,deny
deny from all
</Files>

#FreeScript
RewriteEngine On
RewriteBase /

RewriteRule ^(Files|WEFiles)/(.*)$ http://votrenomdedomaine.fr/$1/$2  
 

- 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) :
<link rel="alternate" media="only screen and (max-width: 640px)"  href="http://m.nomdedomaine.fr/votrepage" >

- sur les pages mobile (bloc de code (source) en Otherscript/header) :
<link rel="canonical" href="http://nomdedomaine.fr/votrepage" >

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

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 :
<meta name="googlebot" content="noindex">


Edité par brolysan - Oct 31 2015 à 9:44am
Haut de la page
Bridet allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: Dec 13 2013
Pays: Condroz
Status: Inactif
Points: 4565
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Bridet Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Sep 10 2014 à 7:23am
Merci!
Haut de la page
Bridet allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: Dec 13 2013
Pays: Condroz
Status: Inactif
Points: 4565
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Bridet Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Nov 02 2014 à 11:10am
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...
Haut de la page
Dmit OE allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: May 31 2012
Status: Inactif
Points: 14004
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Dmit OE Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Nov 03 2014 à 9:59am
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
Haut de la page
Bridet allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: Dec 13 2013
Pays: Condroz
Status: Inactif
Points: 4565
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Bridet Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Nov 03 2014 à 10:21am
qu'appellez-vous les "tablesses"?
Haut de la page
Dmit OE allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: May 31 2012
Status: Inactif
Points: 14004
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Dmit OE Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Nov 03 2014 à 10:24am
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.
Haut de la page
Bridet allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: Dec 13 2013
Pays: Condroz
Status: Inactif
Points: 4565
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Bridet Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Nov 03 2014 à 10:52am
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.
Haut de la page
Dmit OE allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: May 31 2012
Status: Inactif
Points: 14004
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Dmit OE Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Nov 03 2014 à 10:59am
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?
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: Aug 14 2009
Pays: France
Status: Inactif
Points: 9364
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Nov 03 2014 à 11:32am
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.
Haut de la page
Bridet allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: Dec 13 2013
Pays: Condroz
Status: Inactif
Points: 4565
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Bridet Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Nov 03 2014 à 11:56am
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 :) ?
Haut de la page
 Répondre Répondre Page  123 16>
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 10.18
Copyright ©2001-2014 Web Wiz Ltd.

Cette page a été affichée en 0,047 secondes.
Acheter votre vélo en ligne