Optimiser son site pour les smartphones - CMS KwsPHP - Le site clés en main

lundi 1^er novembre 2010 à 16:05  

---

Avec l'utilisation des smartphones en net hausse, il est nécessaire de rendre compatible son site pour l'affichage du contenu sous iPhone, Android et autres.

Bullogdesign vous propose un outil pour voir votre site comme le verrais un iPhone par exemple.

http://www.design.bouliz.com/smartphones.html

Un des problèmes majeurs et pas des moindres vu le prix de ces gadgets, est de posséder un iPhone. Heureusement, un addon existe pour firefox, il permet de changer son USER AGENT, $_SERVER['HTTP_USER_AGENT'] permet d'identifier des informations sur votre navigateur ainsi que d'autres informations vous concernant. (http://php.net/manual/fr/reserved.variables.server.php)

Vous trouverez cet addon ici : https://addons.mozilla.org/en-US/firefox/addon/59/

Une fois le plugin installé, allez dans options > default user agent > iPhone 3.0

Voilà vous pouvez tester sur la page http://www.google.fr , même lui le gobe car il s'affiche différemment des autres fois, vous proposant même de vous localiser ...

Vous pouvez alors maintent détecter le navigateur de votre visiteur, et de le rediriger vers une page spécialement conçu et optimisée pour les petits écrans des iPhones.

Voici une class php vous permettant de récupérer l' user agent de votre visiteurs :

http://code.google.com/p/mobileesp/

La voici zippée, mais je vous conseille de la récupérer directement sur le site de l'auteur afin d'avoir les mises à jours.

http://www.design.bouliz.com/dl/user.agent.class.php.tar.gz

Installation du script :

Dézipper le fichier ou récupérer le code source, ensuite déposer ce fichier dans le dossier includes de votre site.

Ouvrez le fichier header.php, celui qui se trouve à la racine de votre site.

Juste en dessous de :



Ajouter :




Créer un dossier smartphones à la racine de votre site.

Voilà vous avez détecter le navigateur de votre visiteur, vous le rediriger vers un autre index avec un affichage approprié.

Démonstration : http://www.bouliz.com (depuis un iPhone)
http://www.bouliz.com/smartphones: (pour les autres)

Vous pouvez aussi consulter la page en anglais : Lien ICI


Enjoy ++

Comtois , rends toi! Neni ma foi! | http://www.design.bouliz.com | http://www.bouliz.com
Qui c'est les plus forts, évidemment c'est les verts!!!

---

---

Informations : Avant de poster un sujet sur le forum

Veuillez avant tout vérifiez la comparaison de vos fichiers sur votre site
Mon compte / Outils / Comparaison

La recherche avancée du forum (en ciblant au mieux les options de la recherche)
La Faq - La documentation - La documentation en vidéo - Le sujet "Install et Mise à jour"
Vous devez lire en priorité le topic de la 1.6 pour en découvrir ses fonctionnalités

---

lundi 1^er novembre 2010 à 16:15  

---

Slt,

Intérressant, j'ai déjà fait dans le passé mais trop chiant car trop de mobiles différents! Je laisse le soin à gogole de convertir mon site finalement.

Pour info le lien vers la class sur ton site ne fonctionne pas.

Error 404 - Not found

Le fichier requis n'a pas été trouvé. Il peut s'agir d'une erreur technique. Veuillez réessayer ultérieurement. Si vous ne pouvez pas accéder au fichier après plusieurs tentatives, cela signifie qu'il a été supprimé.

---

mardi 2 novembre 2010 à 08:17  

---

Hello,
Intéressant.
Je vais tester tout ça un peu de plus près.
Merci pour le partage.

https://kangarooroad.com/
@KangarooRoad

---

dimanche 1^er mars 2015 à 16:53  

---

Bonjour,

Le sujet est intéressant, et je le relance au vu de l'activité mobile et une demande de google me disant qu'il allait tout simplment me pénaliser dans les recherches mobile...

Petite question, est-ce qu'une nouvelle version de kws est prévu à cet effet?

Je pense que ce n'est pas prévu pour tout de suite...
Si j'ai bien capté, le but est de savoir si c'est un mobile ou non, et de le rediriger en conséquence, du coup il faut créer un dossier smartphone, et on y colle le contenu de kws avec les allégements: plus de double colonne par exemple?

Ou alors tout simplement, revoir le thème, et l'adapter au smartphone et du coup, les ordi pourront toujours le lire?

Pour vous, quelle est la meilleure solution? ou une autre, je patauge dans la semoule pour le moment...

Aquarium associatif, notre but premier est de faire découvrir nos 13 grands aquariums au public.

---

dimanche 1^er mars 2015 à 18:14  

---

Alors pour te répondre, j'ai fait un blog avec kws, pour faire une sorte d'extension à mon site existant ou je parle d'actualité des sorties ciné dessin animé enfant. Voici l'adresse du blog => blog loopio

Ce site a été testé par différents outils, dont le fameux test de google, il est 100% compatible avec les mobiles.

J'ai un autre site test en préparation, ou j'utilise le plugin jquery masonry, pour un affichage du site sur deux colonnes, et ça fonctionne bien, la colonne de droite bascule en dessous toute seule si on est sur mobile, (je vais le mettre bientôt en ligne pour montrer ça). l'avantage de masonry, c'est que l'on peut intégrer 1,2 3 ou 4 blocs et voir plus, ce qui peut être intéressant pour afficher par exemple un résumé des modules news, articles etc etc éventuellement sous forme de slider responsive.
pareil si tu as besoin de conseils, je peux partager mon approche et ce que j'ai fait avec masonry.

Je comptais ouvrir un post à ce sujet justement. En fait, il y a pas tant de boulot que ça, par xemple le site du blog loopio, j'ai pas fait grand chose pour arriver à ce résultat. Si tu souhaites en savoir plus, je suis prêt à partager mon approche.

En réalité, le plus difficile, c'est de "penser" son site désormais. Notamment la navigation. Exit les pages lourdes, on charge le contenu qu'a mesure par exemple. pas 50 liens sur la page d'accueil. ça demande un effort à la conception quand on crée ses catégories et pages .

A mon sens, il faut faire un peu comme font certains gros sites, mademoizelle et slate par exemple, c'est à dire orienté vers le tout mobile, en gardant un design correct sur PC.

Je trouve que sur slate.fr, ça donne un site très clair avec des grandes images et ou le contenu media est mis en avant(j'aime pas le menu fixe en haut sur pc pour ma part, mais c'est le seul défaut pour moi)






Réponse ci-dessus postée le dimanche 01 mars 2015 : 18:04

---

Pour un site avec pas mal de liens dans les blocs des colonnes latérale, ons pourrait très bien imaginer de les faire basculer sous forme de lien dans le menu responsive du haut uniquement pour les mobiles par exemple.

http://loopio.fr
http://www.laubergin-montelimar.fr
http://www.religiosa.fr/
http://ecole-berrias-casteljau.neticket.fr/
http://www.creche1000pattes.fr/

---

dimanche 1^er mars 2015 à 19:34  

---

Il suffit d'une condition et d'une class (des class il en existe des tas) pour permettre ce type de changement sous Kws, c'est ce que je fais pour mes sites. en revanche, il a fallut que je bidouille les fichiers du portail pour le rendre moins complexe dans mon cas, mais faut dire que c'est un site gourmand en ressource que j'ai aussi....

Le temps file....

---

dimanche 1^er mars 2015 à 23:27  

---

Citation de alanpersonproject :


Comme quoi les gouts et les couleurs ...

Sur smartphone je ne sais pas car je n'utilise pas ... en revanche sur mon PC je n'aime pas du tout la présentation de slade.fr. Je trouve que ça fait "vrac", mon regard ne sait pas ou se poser et au final je ne vois rien ... En plus ces pages d'accueil qui font des kilomètres de long ont le don de m'agacer
En résumé, c'est typiquement le genre de site que je zap en une poignée de secondes !!

Dur, dur de convaincre tout le monde sur le net ...

LES C0NS, ÇA OSE TOUT. C'EST MÊME À ÇA QU'ON LES RECONNAÎT.

Michel Audiard

---

lundi 2 mars 2015 à 02:13  

---

C'est un peu le problème du tout orienté mobile. Comme on peut pas mettre 50 liens dans le menu, l'idée c'est d'avoir un max de contenu sur la home pour que l'utilisateur n'ait qu'a scroller. Je t'accorde que ça fait une grosse homepage

Je trouve que c'est vraiment compliqué de concilier les deux n'empêche. La tendance générale c'est que les designs deviennent minimalistes et juste basée sur des jeux de couleur.

En gros les sites responsive se ressemble un peu tous

J'ai jeté un œil un peu partout (notamment vers les thèmes premium full responsive de wordpress) il ont tendance à se ressembler à part au niveau des couleurs. Il y a souvent un slider, un grid pour afficher les images et les articles ou les différents blocs, un bandeau en haut et basta.

ça semble poser pas mal de problème à des gros sites avec beaucoup de contenu, car c'est un casse-tête pour organiser tout ça. Certains ne sont pas encore passé aux mobiles d'ailleurs.

http://loopio.fr
http://www.laubergin-montelimar.fr
http://www.religiosa.fr/
http://ecole-berrias-casteljau.neticket.fr/
http://www.creche1000pattes.fr/

---

lundi 2 mars 2015 à 07:21  

---

Hello

Pour tester j'utilise Mobile/RWD Tester sous chromium (chrome). C'est plutôt bien fait.
On peut choisir son type d'appareil, mobile, phablet ou tablet, et l'orientation.
Avec possibilité de tester sur une résolution au choix.
La fenêtre s'affiche par dessus la fenêtre plein écran ce qui permet de comparer.
A essayer sur http://www.cietempsdanse.fr par exemple

Je sais, je ne suis pas bon sur les tablets, ni sur l'orientation horizontale

- Site de la Cie Temps'Danse

---

lundi 2 mars 2015 à 13:57  

---

Merci à tous pour vos réponses!

En effet, je ne suis pas adepte du style mobile puisque je préfère me connecter sur un ordi pour la taille de l'écran...

Par contre, au vu du déploiement des tablettes et des smartphones, plus l'email de google a ce sujet, me font grandement réfléchir à penser mon site pour ces nouveaux utilisateurs qui deviennent plus nombreux... Surtout que dans mon cas, je n'ai pas de forums, ... Mon site est juste une publication des dates d'ouvertures et des articles.

Si tu peux nous en dire plus sur ton blog, je suis preneur. Si je résume bien, tu as supprimés les colonnes, conservé l'entête avec un menu succinct et le pieds de page. Et pour le home, tu le blindes de liens avec de belles images, tu as visiblement un truc pour ça, car les images s'affichent au fur et à mesure que l'utilisateur descend...

Il va falloir que je me creuse sérieusement la tête pour repenser cette liste: http://www.aquaramiaud.com/articles-alphabetique.html et tout le reste du site...

Bonne journée

Aquarium associatif, notre but premier est de faire découvrir nos 13 grands aquariums au public.

---

lundi 2 mars 2015 à 15:33  

---

Pour charger les blocs à mesure que l'on scroll, j'ai utilisé le samsung grid effect, en demo ici http://tympanus.net/Tutorials/SamsungGrid/

Entre parenthèse, tympanus.net regorge de ressource en jquery et même des tutos, il y a de quoi passer quelques heures dessus

J'ai modifié le fichier resume.php du module articles pour ajouter la bonne class aux différents éléments, et c'est tout. Limité à 100 articles(oui quand même faut pas déconner ^^) Après il suffit d'ajouter le résumé des articles sur la home à l'aide du module resume et c'est tout.

Sinon ça reste correct au niveau affichage sur mon Iphone le lien que tu as donné. A part la taille de police que tu pourrais augmenter(car un peu dur de "viser" un lien), il y a pas grand chose à dire. Il faudrait que tu mettes une taille de police en em, avec un media query css pour les mobiles et un autre pour les plus grandes taille d'écran je pense que ça suffirait.

Tu peux aussi utiliser un media query pour afficher les images à 100% de largeur de tes blocs quand on est sur mobile, ça permet d'avoir des images pas trop petites(par contre là j'ai du modifier le fichier bbcode.php pour y arriver car la largeur des images est géré par le bbcode et on peut pas mettre 100%, ça fonctionne pas car car ce fichier bbcode attend une valeur en px). J'avais testé avec un .articles img { width: 100% !important } mais ça fonctionnait pas.

Au niveau du menu, tu peux faire une truc mieux que sur mon blog, prend exemple sur le site de slate.fr , ce genre de menu est de partout sur les gros site, ça ressemble au menu des apps mobile, et ça permet d'ajouter plus de lien, notamment avec des menus déroulants. Tape jquery mobile menu dans google. exemple : celui-ci est très bien conçu et pas trop dur à mettre en place => http://mmenu.frebsite.nl/

http://loopio.fr
http://www.laubergin-montelimar.fr
http://www.religiosa.fr/
http://ecole-berrias-casteljau.neticket.fr/
http://www.creche1000pattes.fr/

---