Et rebelote...

[Rouskof]

Bonjour,

J'avais refait entièrement mon site internet

il y a 6 ans... et voilà qu'il faut le refaire à nouveau pour qu'il puisse s'adapter aux téléphones portables.

C'est un site codé en php "à l'ancienne", c'est-à-dire avec du php style php3, et avec une base de données Mysql, 30 ou 50.000 lignes de code, donnant 180 pages html différentes pour un site en 5 langues, fait avec amour.

J'ai bien l'impression que cette fois-ci, je ne vais plus relever le défi.

Ce qui me désole d'autant plus, c'est que je me rends compte qu'il est aujourd'hui devenu surhumain de faire son site "à la main", vu les évolutions technologiques incessantes et la complication des normes demandées pour être correctement référencé.

Résultat : tous les sites se ressemblent, on ne trouve plus cette petite touche poétique du "fait maison".

Voici l'adresse du site : http://www.atelieralupi.com

Pour l'instant, je suis sous le choc.
Si certains ont des idées pour me remonter le moral... Il va falloir faire migrer tout ça dans un modèle Wordpress, non, c'est ça, le dernier truc à la mode ?

Bon, désolé pour le côté pessimiste de ce post. Pour moi, le web, c'était très bien il y a 15 ans.

 

[gotgot]

Bonjour,

pour que ton site soit adapté aux mobiles tu n'as pas du tout besoin de retoucher au sql et php, mais tu peux le faire juste en ajoutant du css et si ta structure php est bien faite ça peut aller très vite...
Passer sous Wordpress peut être une solution aussi, mais je pense plus compliquer, mais tout dépend de tes connaissances.
Par contre attention à la version de php sur ton hébergeur car php3 est obsolète depuis un moment.

 

[Rouskof]

Merci pour les encouragements. J'entrevois une petite lueur : )
Si d'autres on envie de se pencher un peu sur mon cas et d'aller faire un tour sur le site pour diagnostiquer le remède, ça m'aidera sûrement.
En effet, ce n'est peut-être pas si désespéré que ça.
Ce que j'aime bien dans mon site, c'est qu'il est très rapide, comparé à toutes ces usines à gaz avec des textes en dégradés sur des fond mouvants en images...
Je l'aime bien, en fait, et le fait qu'il fasse "old school" n'est pas gênant pour mon activité artistique.
Mais bon, j'accepte très bien la critique, je reconnais qu'il fait vieillot, mais au moins il est unique.

 

[teralgo]

moi je ferais un beau wordpress tout neuf avec un joli template

 

[Rouskof]

moi je ferais un beau wordpress tout neuf avec un joli template

Oui, tu as sûrement raison...

Maintenant, l'écueil que je vois :

combien ça va coûter (je ne me sens plus capable de faire ça moi-même, ce soir tout du moins...) ?
qui va s'en occuper lorsque je devrai ajouter un paragraphe ?
combien de temps ça va prendre ?
comment garder le contrôle sur le site le jour où je changerai de prestataire ?

C'est sûrement des questions qui ont des réponses bien connues, mais je débarque ; jusque là, j'ai tout fait moi-même...

 

[bogey]

WOT signale que le site a mauvaise réputation... ça peut aussi dissuader des visiteurs

 

[spout]

C'est mort WOT: http://www.ghacks.net/2016/11/05/mozilla-and-google-remove-wot-extension/

 

[astus]

Notre site à plus de 10 ans et est aussi entièrement codé à la main directement à partir du bloc note !
Je ne sais pas combien de ligne de code mais il fait 2.900.000 pages.
Et on est passé au responsive design il y a 2 ans, au https et on y travaille tous les jours sans aucun soucis pour mettre au gout du jour.
Ne lache pas l'affaire, il suffit d'adapter et non de tout refaire.
Wordpr..... et autres cms sont pour ceux qui n'y connaissent rien.
Si tu as su programmer ton site, surtout continue.
Ca te donne une souplesse et une indépendance inégalée.

 

[HawkEye]

Oui mais non, tu peux très bien associer CMS et code perso... un Joomla ou un WP avec des extensions "custom" c'est quand même monté beaucoup plus vite qu'un 100% handmade.

 

[astus]

Sauf que son site existe déjà, il suffit de le remanier.
La c'est plus rapide de le faire en code.
Un wp, il repart à zero, avec changement des url et toutikanti

 

[Rouskof]

Je vais essayer de m'y mettre, à ces CMS, malgré que je n'aime pas du tout le côté standadisé. En code, je suis dépassé...
Y en a-t-il qui sont très rapides (légers) et bien adaptés au référencement, et pour un site en 5 langues ?

 

[astus]

et qui sont gratuit et qui font aussi la vaisselle
Un cms est une catastrophe au niveau seo si tu ne bricole pas un peu...

 

[Marie-Aude]

Un wp, il repart à zero, avec changement des url et toutikanti

Euh non... il peut très bien avoir exactement les mêmes urls avec WordPress, sans même un plugin

 

[indigene]

c'est pas une raison pour lui conseiller wordpress puisqu'il demande quelque chose de léger, de simple et d'optimisé nativement pour le SEO.
Avec wp il faut ajouter des plugin tels que YOAST ou ALL IN ONE SEO donc ça ne correspond pas à son cahier des charges

 

[Rouskof]

Donc sur ces cms, on "bricole" un fichier .php, c'est ça ?

Et ensuite, j'ai lu qu'il y avait des "mises à jour" du modèle. Dans ce cas, le fichier qu'on a bricolé est écrasé et il faut le rebricoler ?

A quoi servent ces mises à jour, d'ailleurs ?

 

[indigene]

effectivement, le danger avec les CMS du commerce c'est qu'ils sont la cible des hackers et il y a continuellement des mises à jour de sécurité à faire presque chaque semaine.

Je ne sais pas comment ça fonctionne mais si tu as modifié un fichier il y a des chances pour qu'il se retrouve écrasé. Les modifications doivent se faire sous forme de add-on ou de plug-in dans des fichiers non natifs du CMS. Et il y a seulement un endroit précis d'un fichier où tu codes l'appel à ces fichiers "maisons". C'est peut-être même prévu d'avance avec un appel à un fichier "maison" vide à l'origine, que tu peux enrichir si tu en as besoin. Ca serait logique que ça fonctionne comme cela donc dans ce cas aucun risque d'écrasement. Mais il ne faut surtout pas toucher les fichiers natifs du CMS.

Avec un CMS tu peux aussi facilement changer de thème, qu'on appelle "template" et donc changer le design de ton site en installant simplement un nouveau design. C'est pas vraiment possible avec un site sur mesure et tu es justement confronté à ce problème. Tu voudrais maintenant transformer ton site en responsive et il faut tout recoder et pas simplement remplacer un template.

Maintenant, à voir ce qui te convient le mieux. 180 pages ce n'est pas non plus la mort.

 

[Rouskof]

Merci pour ces infos.
Et que seraient ce genre d'attaques de hackers ?

Et qu'en est-il des bases de données ? J'ai une base de données Mysql avec une vingtaine de tables et environ 10.000 enregistrements. Ca s'exporte dans une nouvelle base du cmr ? On a une console d'administration ? Je reste chez mon hébergeur actuel ?

 

[Marie-Aude]

Donc sur ces cms, on "bricole" un fichier .php, c'est ça ?

Et ensuite, j'ai lu qu'il y avait des "mises à jour" du modèle. Dans ce cas, le fichier qu'on a bricolé est écrasé et il faut le rebricoler ?

C'est un peu plus compliqué que cela.

Tu as un certain nombre de fichiers "de base", le script du CMS, qui prévoit des hooks / appels pour te permettre de personnaliser les choses. De plus tu as un thème, qui prend en charge la présentation "front end", avec toute la mise en page. (Enfin, un thème, des centaines ou des milliers de thèmes)

Ce qui est reproché aux CMS en général (mauvaise optimisation SEO, etc) est généralement lié aux thèmes.

Après, tu as le principe de la "surcharge" si tu ne veux pas coder ton thème toi même, dans la plupart des cms, tu peux faire un thème enfant ou dérivé. Le script identifie les dossiers des deux thèmes (le parent et l'enfant) et va chercher un fichier dans le thème enfant, qu'il affiche s'il le trouve, sinon il va voir le thème parent.

Les extensions, ou plugins, selon le CMS, fonctionnent de la même façon : grâce aux "hooks" elles permettent de modifier le fonctionnement du script de base. Elles sont dans des dossiers à part.

Quand tu respectes cette logique, la mise à jour du CMS n'écrase ni ton thème ni tes extensions, et la mise à jour du thème parent n'écrase pas la "surcharge" que tu as faite dans le thème enfant.

A quoi servent ces mises à jour, d'ailleurs ?

A améliorer des fonctionnalités, à en créer d'autres, à faciliter la vie aux développeurs et à corriger des failles de sécurité.
Quand tu regardes le détail des mises à jours, tu t'aperçois que les corrections de faille ne sont pas si nombreuses que certains veulent bien le dire ^^

Le problème, c'est plus quand un développeur inexpérimenté modifie les fichiers du "core" ou d'un thème, au lieu de faire comme il faut. Il est coincé, il ne peut plus faire évoluer son système, et là, oui, il devient plus susceptible de se faire hacker.

 

[Rouskof]

OK, ça a pas l'air trop mal foutu.

Comment devrais-je procéder maintenant, si je voulais transférer mon site sur un cms, à votre avis ?

 

[Rouskof]

J'ai regardé Bootstrap, qu'Indigene recommande. Cela semble être l'équivalent d'un framework, mais version light ?
Y a-t-il un endroit où on peut voir des exemples de réalisations effectuées grâce à tous ces outils. Sur les sites des créateurs de modèles, il y a des exemples factices, mais j'aimerais bien voir des sites complets réels correspondants à tel ou tel framework, ou bootstrap.

 

[Marie-Aude]

Bootstrap n'est pas un cms, c'est un outil pour générer du front end.
Ils le disent eux mêmes "front end framework"

Cela veut dire que, contrairement à un CMS, il n'y a dans Bootstrap aucune gestion de contenu. Tu as des thèmes basés sur Bootstrap pour Magento, Drupal, Wordpress, Joomla, etc... mais toute la partie du script permettant d'afficher les données n'est pas incluse

C'est curieux qu'indigene aime Bootstrap, parce que d'un point de vue code, c'est exactement ce qu'il dit détester : une usine à gaz, qui génère un code lourd, qu'on doit pouvoir largement alléger (et que j'allège quand je travaille sur l'optimisation d'un site).

Pour te donner un exemple, pour faire une mise en page avec deux colonnes, tu dois dans bootstrap faire un div pour le "row", qui inclut un div pour la colonne de gauche, et un div pour la colonne de droite. Les classes css utilisées vont indiquer le nombre de colonne, si tu veux faire un 2/3 - 1/3 tu auras un
div class="col-md-8" et un div class="col-md-4"

C'est à dire qu'on est retombé dans une mise en page "table" (on appelle ça div, mais ça reste le même principe), et que le code html contient des éléments de présentation. Le jour où tu veux passer à un 50-50 tu dois changer ton marquage html pour faire deux div class="col-md-6"

D'un point de vue codage, c'est une horreur
Tu devrais avoir théoriquement un div class="col-principale" et un div class="col-secondaire" et gérer la largeur des colonnes dans le fichier css, ce qui te permet de changer ta présentation sans toucher au html

http://getbootstrap.com/css/#grid

Quand je vois le code donné en exemple, ça fait mal aux yeux ^^

 

[Rouskof]

http://www.drudgereport.com/

1 milliard de pages vues par mois, et ils s'en foutent de s'adapter aux téléphones portables, pas de lien facebook ou twitter, fuck Google.
Putain si je pouvais me permettre ça !

Regardez le code source : le rêve !

Parce qu'on n'est pas foutu de zommer peut-être quand on a un téléphone portable !!!???

 

[indigene]

J'ai regardé Bootstrap, qu'Indigene recommande. Cela semble être l'équivalent d'un framework, mais version light ?

C'est plus une panoplie de briques qu'un framework. Après il suffit de faire de l'assemblage de ces briques.
Le fait que ce soit light est aussi synonyme de simple.
Et ça a le mérite de très bien fonctionner pour le responsive.

Tu peux visiter le site de mon www qui est basé là dessus. Celui-ci est en très grande partie entièrement en html sans php ni base de donnée. Sinon je peux te donner en mp un autre site que j'ai fait entièrement en php/mysql qui utilise aussi bootstrap pour l'affichage final.

 

[Marie-Aude]

Parce qu'on n'est pas foutu de zommer peut-être quand on a un téléphone portable !!!???

Si, on est foutu de zoomer, il faut le faire à chaque page.
Et puis il faut déplacer son doigt à droite, pour lire la fin de la phrase. Une ou deux fois.
Revenir à gauche pour recommencer à lire ...
Même en zoomant, souvent, les liens ne sont pas adaptés, bref, on se casse

 

[Rouskof]

J'ai bien réfléchi, et je ne vais pas passer à une de ces grosses tartes à la crème d'interfaces cms.
Je ne crois pas que l'avenir de l'internet soit cette uniformisation, et je veux garder mon site rapide et concis, tel qu'il est.

Je vais donc essayer d'adapter l'existant.

Sur quoi me conseillez-vous de me pencher pour principalement réduire la taille des tableaux et la taille des images en fonction de la largeur de l'écran : CSS 3 ?

 

[Rouskof]

IMHO, je préfère la version ordinateur à la version mobile de beaucoup de sites, en particulier celui de MeteoFrance, qui est à mon sens catastrophique, et dans bien d'autres cas, je préfèrerais avoir toute la page sur mon écran, même en petit, plutôt que ces infinies colones avec textes et images empilés. Sans plus parler que parfois certaines infos importantes manquent carrément dans les versions pour mobiles.
Pas grave, Google est content...

 

[astus]

Oui, le ccs est la principale evolution que nous avons fait il y a 1 an.
Cela permet de gerer de façon assez souple le responsive.
Une fois ton code repris avec le css, il te suffit de detecter si le client est sur mobile ou desktop et de lui servir un css apporprié.
C'est pas mal de modif au départ mais ensuite très souple à gérer, pas d'url spécifique pour le mobile, juste une présentation différente.

 

[indigene]

Selon moi le css doit contenir toutes les présentation possible que tu vas utiliser sur ton site. C'est en quelques sortes la "collection" des mises en forme que tu utiliseras. Une fois que c'est fait on n'a plus à toucher au css. Tu peux le mettre de côté et l'oublier. Il suffit juste de puiser dedans selon les besoins.

Ce qui pilote c'est le html.

Si par exemple tu veux écrire un texte en rouge et ailleurs un texte en vert tu vas avoir deux classes css de définies : une pour le rouge et une pour le vert. Et c'est bien dans ton code html que tu décides d'utiliser soit le rouge, soit le vert.

La seule chose à modifier reste le html et rien d'autre.

Supposons qu'on raisonne à l'envers, ça veut dire que chaque mise en forme particulière que tu vas utiliser dans une page html doit obligatoirement correspondre à une classe particulière dans le css. Et pour une autre page il faudra aussi définir de nouvelle classes particulières à cette page car supposons qu'une partie du texte doit être mise en rouge sur une page, il ne faudrait pas que ça passe en rouge sur toutes les pages où on retrouve la même classe. Donc ça oblige à faire des css énormes avec des cas particuliers correspondant à chaque page de ton site.
C'est vrai qu'il y a quelques généralités, les balises h1, h2, etc... qui doivent apparaitre de la même façon sur toutes les pages. Mais pour le cas de mise en couleur d'une partie du texte ça revient à faire autant de variantes dans le css qu'il y a de pages différentes.

Je préfère donc piloter ces mises en formes par le html et non par le css.
Dans le css je vais créer une classe pour chaque couleur de l'arc en ciel, par exemple, et c'est ensuite dans le html, au cas par cas, que je décide d'utiliser telle ou telle classe pour produire telle ou telle couleur.

Ainsi, ça n'alourdit pas le html car si une partie du texte était en rouge et que je veux la passer en vert il suffit de changer le nom de la classe utilisée et ça n'ajoute pas de code supplémentaire. Mais ça permet surtout de maintenir des fichiers css concis et qu'il est rare d'avoir à modifier.

Une fois que tu as rassemblé la collection de tout ce dont tu auras besoin, c'est codé en css une fois pour toute et basta.

La mise en page se fait dans le html et c'est là que tu choisis quel "outil" utiliser de ta collection.

 

[Rouskof]

Oui, je connais déjà le CSS, et je sais que c'est comme ça qu'on doit l'utiliser.
Maintenant, je ne suis toujours pas décidé en réalité, car j'ai l'impression que le rendu que je pourra obtenir par moi-même ne sera jamais top top top. Notamment en ce qui concerne la barre de liens, qui devra devenir un menu déroulant pour les tél portables...

3 questions :

1) si on passe sous wordpress, que fait-on avec la base de données ? Je garde la même chez mon hébergeur actuel ?
2) connaissez-vous ça : https://thethemefoundry.com/ ? C'est quoi, des thèmes payants ? C'est bien ? D'après ce que je comprends, on peut passer d'un thème à l'autre facilement une fois qu'on a rentré le contenu là où il fallait. Mais on peut aussi passer à un thème wordpress d'une autre boîte, ou ça n'a plus rien à voir et il faut tout recommencer ?
3) Auriez-vous un tutoriel wordpress à recommander ?

 

[indigene]

j'ai l'impression que le rendu que je pourra obtenir par moi-même ne sera jamais top top top. Notamment en ce qui concerne la barre de liens, qui devra devenir un menu déroulant pour les tél portables...

Perso j'utilise un outil pour me faire la maquette. Je pars d'un template modèle qui est proche de ce que je veux faire. Il en existe une cinquantaine par défaut. Je décris rapidement chaque page qui aura une présentation particulière. Je demande la génération d'un preview et ça me produit tous les css qui vont bien, tous les js et tout ce qu'il faut pour accompagner le html.

Ensuite je repars des pages html générées pour les traduire en php et je peux en faire de nouvelles par mimétisme. J'ai seulement un minimum de choses à toucher dans le css.

La gestion des menus est produite automatiquement par l'outil qui s'appuie sur bootstrap.

Pour transférer ton site sous wordpress il faut réaliser une migration de ta base de données vers le modèle de données wordpress qui, lui, ne bougera pas. C'est faisable. Mais tu parlais de 20 tables il me semble. Je crois qu'il y en a moins dans wordpress. Seulement 11 ou un truc comme ça. Donc ça risque d'être coton quand même. Mais faisable.

Pour apprendre wordpress il existe ce qu'on appelle le "codex" qui est un genre de bible coranique qui semble écrite en hébreux. Tu en saura plus en visitant les sites officiels de wordpress. Il en existe un en français je crois bien.

La prise en main est par contre assez conviviale et instinctive. C'est un peu pour ça que wordpress est devenu le CMS le plus utilisé au monde alors que ce n'est pas forcément le meilleur. Dès l'âge de 7 an on peut faire son site sous wordpress.

 

[Marie-Aude]

Si par exemple tu veux écrire un texte en rouge et ailleurs un texte en vert tu vas avoir deux classes css de définies : une pour le rouge et une pour le vert. Et c'est bien dans ton code html que tu décides d'utiliser soit le rouge, soit le vert.

En fait ça c'est une vision raccourcie, et si tu l'appliques "comme ça" ça ne fonctionne pas bien.

Tu as des éléments dans une page : titres, sous-titres, notifications, citations, liens importants, liens pas importants, documentation, légende d'image.

C'est à cela que doivent correspondre les classes css ...
Ensuite, pour une classe css, tu définis si elle apparait en rouge, en vert, etc...

Imagines que tu te préoccupes d'accessibilité et que tu veuilles faire une feuille de style spéciale pour les daltoniens. Ton "rouge" et "vert" ne correspond plus à rien. Par contre, tu peux utiliser d'autres choses, comme un picto, avec les pseudo eléments before ou after...

Supposons qu'on raisonne à l'envers, ça veut dire que chaque mise en forme particulière que tu vas utiliser dans une page html doit obligatoirement correspondre à une classe particulière dans le css. Et pour une autre page il faudra aussi définir de nouvelle classes particulières à cette page car supposons qu'une partie du texte doit être mise en rouge sur une page, il ne faudrait pas que ça passe en rouge sur toutes les pages où on retrouve la même classe. Donc ça oblige à faire des css énormes avec des cas particuliers correspondant à chaque page de ton site.

Pas vraiment....

D'abord parce que théoriquement, dans un site bien fait, il y a une charte graphique qui évite ce genre d'exceptions. Les mises en formes "particulières" doivent se justifier.
Ensuite, inutile de faire des classes particulières... il suffit d'identifier la page au niveau du body, généralement avec une id qui correspond à un truc unique,(l'id dans la base de données, par exemple, ou le type de contenu)

Ensuite
.rouge {color:red;}
body#truc .rouge {colorrange;}

Ainsi, ça n'alourdit pas le html car si une partie du texte était en rouge et que je veux la passer en vert il suffit de changer le nom de la classe utilisée et ça n'ajoute pas de code supplémentaire. Mais ça permet surtout de maintenir des fichiers css concis et qu'il est rare d'avoir à modifier.

Ça oblige surtout à modifier TOUS les endroits où cette classe apparait, ou pire encore à se retrouver avec un css ingérable, du genre
.rouge {color:green;}
.vert {color:green;}

La mise en page se fait dans le html et c'est là que tu choisis quel "outil" utiliser de ta collection.

Non, ça c'est fini depuis HTML4 .... le html contient des indication structurantes, la mise en page se fait dans le css

Notamment en ce qui concerne la barre de liens, qui devra devenir un menu déroulant pour les tél portables...

Media queries... un grand classique des templates

si on passe sous wordpress, que fait-on avec la base de données ? Je garde la même chez mon hébergeur actuel ?

Si tu en as une, oui, au moment de l'installation, toutes les tables sont préfixées (que ce soit wordpress, joomla, ou autre) ce qui te permets de les faire coexister sans risque avec les tables existantes

2) connaissez-vous ça : https://thethemefoundry.com/ ? C'est quoi, des thèmes payants ? C'est bien ? D'après ce que je comprends, on peut passer d'un thème à l'autre facilement une fois qu'on a rentré le contenu là où il fallait. Mais on peut aussi passer à un thème wordpress d'une autre boîte, ou ça n'a plus rien à voir et il faut tout recommencer ?

Tu peux trouver des tas de thèmes gratuits sur wordpress.org très bien.
La seule chose que tu dois "recommencer" en changeant de thème c'est :
1- les options du thèmes
2- les personnalisations que tu auras faites dans le thème enfant (mais normalement tu n'as rien fait qui concerne les données, pour les données tu fait éventuellement un plugin)
Tout le reste est stocké indépendamment, c'est le principe d'un Content Management System ^^

Pour transférer ton site sous wordpress il faut réaliser une migration de ta base de données vers le modèle de données wordpress qui, lui, ne bougera pas. C'est faisable. Mais tu parlais de 20 tables il me semble. Je crois qu'il y en a moins dans wordpress. Seulement 11 ou un truc comme ça. Donc ça risque d'être coton quand même. Mais faisable.

La question du nombre de tables n'a strictement rien à voir avec la correspondance des modèles de données....

Pour apprendre wordpress il existe ce qu'on appelle le "codex" qui est un genre de bible coranique qui semble écrite en hébreux. Tu en saura plus en visitant les sites officiels de wordpress. Il en existe un en français je crois bien.

Tu as quand même conscience que le Codex EST la documentation officielle de WordPress, hébergée sur LE site officiel de WordPress et que ce que tu appelles de l'hébreu (sans x) est tout simplement une documentation d'API comme pour n'importe quel logiciel ?

 

[Rouskof]

Eurêka


J'ai ajouté cette ligne de code à l'en-tête de mes pages :

<meta name="viewport" content="width=device-width, initial-scale=1">

Et maintenant, l'outil de test d'optimisation pour mobiles de Google https://www.google.com/webmasters/tools/mobile-friendly/ me dit que tout est parfait et que mes pages sont adaptées aux mobiles !! Enorme !

L'apparence des pages sur un tel portable est pire qu'avant, mais est-ce que ça limite ou supprime même la casse au niveau du référencement ?

 

[noren]

viewport ,ne fait pas tout

le site n’est clairement pas responsive et sans parler "google" et "référencement", l’expérience utilisateur sera catastrophique et c'est quand même le plus important. A quoi bon avoir plein de visiteurs provenant de GG si ils se barrent à la vue du site ?

Il faut se faire une raison et envisager à faire une refonte graphique complète du site à ce niveau là :wink:
Ton site a effectivement plus de 15 ans d'age en terme d’esthétique (voir plus) et certainement au niveau du code.
Il n'est absolument plus adapté aux attentes des utilisateurs et à celles des moteurs

je te conseil de faire un peu de recherche concernant l'html (html5 si possible), le css et eventuellement le responsible (le framework bootstrap est bien pratique pour ne pas se prendre trop la tête)

Tu verras que ce n'est pas insurmontable. Tu ne fera peut être pas du code parfait mais ca sera toujours mieux que le site actuel

 

[gotgot]

Eurêka


J'ai ajouté cette ligne de code à l'en-tête de mes pages :

<meta name="viewport" content="width=device-width, initial-scale=1">

Et maintenant, l'outil de test d'optimisation pour mobiles de Google https://www.google.com/webmasters/tools/mobile-friendly/ me dit que tout est parfait et que mes pages sont adaptées aux mobiles !! Enorme !

L'apparence des pages sur un tel portable est pire qu'avant, mais est-ce que ça limite ou supprime même la casse au niveau du référencement ?

Je pense effectivement que c'est bon niveau référencement, mais attention car les utilisateurs vont direct repartir, et donc au final ça sera pas très bon.
De plus je pense que google améliore constamment ses tests compatibilité et donc que ça ne durera pas longtemps...

 

[Rouskof]

Tout à fait d'accord avec vous en tous points, mais en attendant une amélioration graphique de fond :

Y a pas moyen que cette ligne ne s'affiche que pour les robots de Google ?

Ont-ils une IP fixe ou quelque chose comme ça ?

Je pense effectivement que c'est bon niveau référencement, mais attention car les utilisateurs vont direct repartir, et donc au final ça sera pas très bon.
De plus je pense que google améliore constamment ses tests compatibilité et donc que ça ne durera pas longtemps...

 

[noren]

Y a pas moyen que cette ligne ne s'affiche que pour les robots de Google ?/quote]

Il ne faut jamais faire ca, GG doit voir exactement ce que les utilisateurs voient et ca vaut surement pour la mise en page et la compatibilité mobile

 

[Rouskof]

Oh, vous êtes pas très fun...

Et ça, qu'est-ce que vous en pensez ?
http://www.w3schools.com/w3css/tryw3css_examples_material.htm#

Ca me semble pas mal pour mon site, non ?


Hmmm, mais y a pas une frame, là-dedans pour la barre de liens ? Il me semblait que ce n'était pas terrible pour le référencement, les frames. Et puis, j'espère qu'on peut redimensionner la hauteur de ces cases dans la barre de liens, car ça prend une place énorme, là... C'est pour ça que je les avais faites avec de simples <br> sur mon site, d'ailleurs, sinon le texte était bouffé quand on mettait une petite hauteur à la cellule.

Bon, je vous l'accorde, c'est pas très fun. Y a peut-être des modèles un peu plus chics avec ce type de barre de liens (j'aime bien, c'est clair)

 

[spout]

Et ça, qu'est-ce que vous en pensez ?
http://www.w3schools.com/w3css/tryw3css_examples_material.htm#

Une lib qui ne s'installe pas avec npm, je passe mon chemin.

 

[Rouskof]

C'est quoi, npm ?
Bon, ça fait un peu basique quand même, ce design. Il faudrait la même chose avec des plus belles typos, comment fait-on pour avoir de belles typos ?

 

[noren]

En utilisant Bootstrap tu as des exemples que tu peux utiliser. Bien pratiques quand on n'y connait pas grand chose :

http://getbootstrap.com/getting-started/

Exemple : http://getbootstrap.com/examples/offcanvas/

Reste plus qu'à copier la source, a telecharger les fichiers de Bootstrap, a changer les chemins indiqués dans la source, et ça te fera une très bonne base.

Tu fais quelques modifications esthétiques et tu as un site 100% responsive et plus accueillant pour tes internautes.

 

[indigene]

Et puis, j'espère qu'on peut redimensionner la hauteur de ces cases dans la barre de liens, car ça prend une place énorme, là... C'est pour ça que je les avais faites avec de simples <br> sur mon site, d'ailleurs, sinon le texte était bouffé quand on mettait une petite hauteur à la cellule.

Il faut raisonner smartphone. Quand les liens sont collés les uns aux autres c'est pas pratique de cliquer sur un lien avec ses gros doigts.
Donc il est préférable de faire des gros boutons relativement espacés.
Un exemple ici :

Avant, tous ces gros boutons je les aurais mis sous forme de liens textuels dans une colonne latérale comme ça peut exister ici :
http://www.galerie-photos.org/photos/

Du coup, ton menu sur la gauche comme à l'ancienne c'est un peu mort. Il faut penser l'ergonomie différemment. Mais quand tu vas obtenir une bonne ergonomie ça sera aussi bien sur un smartphone que sur un écran de bureau. Et c'est ça qui est génial avec le responsive design.

Mais il faut juste commencer à réfléchir en partant d'un affichage en 320 pixels de large et non faire l'inverse.

 

[spout]

a telecharger les fichiers de Bootstrap

AKA:

npm install bootstrap

 

[Rouskof]

Et puis, j'espère qu'on peut redimensionner la hauteur de ces cases dans la barre de liens, car ça prend une place énorme, là... C'est pour ça que je les avais faites avec de simples <br> sur mon site, d'ailleurs, sinon le texte était bouffé quand on mettait une petite hauteur à la cellule.

Il faut raisonner smartphone. Quand les liens sont collés les uns aux autres c'est pas pratique de cliquer sur un lien avec ses gros doigts.
Donc il est préférable de faire des gros boutons relativement espacés.

Du coup, ton menu sur la gauche comme à l'ancienne c'est un peu mort. Il faut penser l'ergonomie différemment. Mais quand tu vas obtenir une bonne ergonomie ça sera aussi bien sur un smartphone que sur un écran de bureau. Et c'est ça qui est génial avec le responsive design.

Mais il faut juste commencer à réfléchir en partant d'un affichage en 320 pixels de large et non faire l'inverse.

Et je ne pourrais pas garder la barre de liens telle qu'elle est quand l'affichage est pour ordinateur et la faire disparaître quand la fenêtre est plus petite et avoir alors un nouveau menu qui apparaît, type smartphone, avec les gros boutons à dérouler, dans un coin ?

Mon site, grosso modo, est organisé en trois colonnes : http://www.atelieralupi.com/paris_stage.htm
Je me verrais bien schinter la colonne de gauche (barre de liens et images verticales en-dessous) lorsque l'affichage est pour smartphones, faire apparaître ce menu à dérouler, et simplement empiler les éléments des deux colonnes restantes dans une seule colonne.
Est-ce envisageable à votre avis ?

Il me semble que cela reste la présentation la plus claire.
Pour ce qui est du design du site, il suffirait qu'un graphiste travaille un peu sur les encadrés et les typos ?

Car même si le site fait ancien, la présentation avec le texte entouré d'images est sympathique, je trouve, alors que dans beaucoup de modèles que je vois, il y a une colonne vide sous la barre de liens, ce n'est pas très chaleureux.
Et le petit espacement entre les liens de la barre permet de la rendre intégralement visible lorsqu'on arrive sur la page, sans avoir besoin de dérouler vers le bas. Enfin, vous pouvez voir en cliquant sur les liens que cette barre fait office de fil d'Ariane. J'avais bien réfléchi lorsque j'avais conçu le site et j'en étais arrivé à la conclusion que c'était la présentation la plus claire. Même si le design des sites a évolué, on retrouve encore une barre de liens sur le côté ou en haut, donc pour moi, la modernisation à faire en l'occurence est surtout esthétique. Un bon graphiste pourrait s'accomoder de cette structure et donner au site un aspect moderne.
Qu'en pensez-vous ?

 

[indigene]

Si, on peut le faire.

Voici un exemple :
Sur cette page j'ai mis les liens sous forme de boutons http://www.dramatic.fr/magie.html
Quand la largeur de l'écran correspond à celle d'un ordinateur de bureau c'est affiché par ligne de 5 boutons, quand ça correspond à la largeur d'une tablette il n'y a plus que des lignes de 3 boutons et sur un smartphone ils sont par paire.

Pour le faire il existe 3 classes différentes et tout est décrit dans la page html mais avec des display none selon la classe affichée
class="hidden-phone hidden-tablet" pour un affichage desktop
class="hidden-desktop hidden-tablet" pour un affichage smartphone
class="hidden-desktop hidden-phone" pour un affichage tablette

Donc tu dois décrire chaque type d'affichage dans la page. Dans mon exemple les trois dispositions sont codées successivement. Ca alourdit un peu les pages mais ça permet une totale adaptation au format de l'écran.

 

[indigene]

Pour tes trois colonnes ce sont les div flottantes qui vont les gérer. En réduisant la largeur de l'écran, à un moment, les div vont passer les unes en dessous des autres, automatiquement, dès que la place sera insuffisante.

Pour tester il suffit de réduire la largeur de la fenêtre progressivement.

 

[Rouskof]

Oui, ça j'avais compris qu'on pouvait le faire, mais moi je pensais carrément faire disparaître toute une colonne du site et faire apparaître une nouvelle barre type menu déroulant de smartphone.

Ca doit sûrement être possible.

 

[indigene]

Soit tu code la colonne avec une classe
class="hidden-phone"
pour qu'elle ne s'affiche pas sur smartphone
et tu codes ton menu smartphone en l'affichant avec une classe
class="hidden-desktop hidden-tablet"

Ou alors il y a une classe spéciale qui permet d'afficher les menus sous type de liste déroulante pour smartphone,
class="nav-collapse collapse"
avec le menu décrit dans une liste <ul><li>....</li><li>....</li></ul>

C'est géré directement par le css

Tu dois pouvoir aussi combiner les deux, c'est à dire avoir un menu de type smartphone uniquement sur smartphone :
class="nav-collapse collapse hidden-desktop hidden-tablet"

Et pour les tablettes et les écrans de bureau tu n'auras pas de menu mais une colonne verticale qui contiendra tous les liens. Cette colonne sera affichée avec la classe :
class="hidden-phone"

 

[Rouskof]

Bon je dois pouvoir me débrouiller avec tout ça, par contre, je fais vraiment appel à un graphiste qui me fasse une jolie mise en forme des tableaux et du texte. Si certains sont intéressés et veulent faire une offre, n'hésitez pas à me contacter en mp.

 

[Rouskof]

J'aime bien ce site : http://www.westernmountaineering.com.

Apparemment, il est fait avec Wordpress.

Que me conseillez-vous pour copier la présentation ? Faut-il trouver le modèle wordpress correspondant ? Comment faire ?

J'ai regardé le code source, mais ça semble très compliqué pour me mettre à bidouiller ça...

 

[indigene]

Le problème c'est que le site n'est pas totalement responsive. En dessous d'une largeur de 700 pixels c'est tronqué. Les images ne se réduisent pas automatiquement.

 

[Stellvia]

Franchement moi je suis d'accord avec le post original.

Les technique ( obligatoire ) évolue trop vite, quasi obligé de passer sur CMS, et je trouve que ca pue sévère.

Moi aussi je suis un vieux qui code à l'ancienne, à la main.

Le coup de grace est arrivé avec cette histoire de mobile first de google.
Avec cette annonce ca deviens quasi impossible de gérer 2 version de son site desktop et mobile, donc responsiv obligatoire.
Je suis désolé mais moi je trouve ca beaucoup trop tôt, perso j'ai à peine 20 % de visiteur en mobile, pourquoi est-ce que je dois me faire chier à tout recoder en responsiv pour 20 % de visiteur ? Parce que google à décide ?

Je sais que la plupart des gens ne seront pas d'accord avec moi, mais ce qui me saoule le plus c'est que google soit dieu sur internet et décide de tout, tout le temps, ca deviens vraiment n'importe quoi.